一本全面的常见界面设计模式大全

_西瓜太甜‘
2018-03-27 22:23:33
(多图预警 多图预警 多图预警,使用流量注意 )
花了2天的时间,把整本书都看了一遍,边看边做思维导图。
总的来说,这是一本强大的关于常见界面设计模式的介绍,特别适合初中阶设计师的学习。
整本书主次分明、条理清晰,每类模式组都按照(1)理论基础、(2)模式应用,两个主要方面来阐述。对于进行PC端的网页、软件方面的设计师有相当程度的借鉴指导意义,可以为我们提供很多常见的解决方案。比如,当你在设计一个信息复杂、流程繁琐的企业级网页端产品时,对于如何在组织页面信息并布局的问题,就可以参考书中提到的布局模式,像 带标题的区域Titled Sections,手风琴 Accordion等模式。
另外,也可以帮助设计师建立自己产品的设计规范。书中的每一个模式都分成(1)它是什么;(2)什么时候使用;(3)为什么使用;(4)如何使用;(5)应用实例 五个方面来介绍,通俗易懂,方面了解每一个模式的来龙去脉。只要再稍加工一下,结合实际的产品,就可以成为一款产品的设计规范。
然而,缺点是书中的例子有些过时了,而对于想要拓展自身思维的高阶设计师可能觉得不够用,但是它仍不失为一本随时放在手边的工具书。






...
显示全文
(多图预警 多图预警 多图预警,使用流量注意 )
花了2天的时间,把整本书都看了一遍,边看边做思维导图。
总的来说,这是一本强大的关于常见界面设计模式的介绍,特别适合初中阶设计师的学习。
整本书主次分明、条理清晰,每类模式组都按照(1)理论基础、(2)模式应用,两个主要方面来阐述。对于进行PC端的网页、软件方面的设计师有相当程度的借鉴指导意义,可以为我们提供很多常见的解决方案。比如,当你在设计一个信息复杂、流程繁琐的企业级网页端产品时,对于如何在组织页面信息并布局的问题,就可以参考书中提到的布局模式,像 带标题的区域Titled Sections,手风琴 Accordion等模式。
另外,也可以帮助设计师建立自己产品的设计规范。书中的每一个模式都分成(1)它是什么;(2)什么时候使用;(3)为什么使用;(4)如何使用;(5)应用实例 五个方面来介绍,通俗易懂,方面了解每一个模式的来龙去脉。只要再稍加工一下,结合实际的产品,就可以成为一款产品的设计规范。
然而,缺点是书中的例子有些过时了,而对于想要拓展自身思维的高阶设计师可能觉得不够用,但是它仍不失为一本随时放在手边的工具书。
1-《界面设计模式》总框架
1-《界面设计模式》总框架


一、人与界面
在提到模式前,首先要讲一下人与界面。
人们为什么要用软件?
软件对于使用它们的人来说,只是达到目的的一种手段,你越能帮助他们达到那些目的,他们就越高兴。
而在人们使用一个应用或数字产品的过程中,他们是在和机器展开一场对话。用户界面是这场对话的中介,帮助用户达到任何ta意想中的目标。
而设计师的工作就是为这场对话编写脚本,定义词汇。这就需要设计师既了解人,又懂界面,只有这样,才能做好中介的角色
关于人:需要了解他们动机和意图,他们希望使用的词汇、图标和应用姿态等。
关于界面:平台、实现方式,以及可提供的模式。

1.1-软件只是达到某种目的的手段
用户只会和你谈论他们想要的功能和解决方案,而不是真正需要和存在的问题。而我们设计界面的第一步是找出用户真正要达到的目标。如用户填写一张表格,其真实目标可能是想要在线购物。
所以不要热衷于设计那张表格,如果有某种方法可以很快完成任务,同时用户完全不必用到那张表格,那就把它整个去掉。

1.2—用户研究基础知识
每个人都是独一无二的,要找出对用户来说普遍的情况。也就是找到相当多的单个用户来把个别的个人癖好和公共的行为模式区分开来。
我们需要学习他们的目标、任务、语言词汇、技术水平、态度及影响。
研究方法:
1. 直接观察
2. 案例研究
3. 调查问卷
4. 任务角色

1.3 用户的学习动机
当你同别人就某个主题展开对话时,你会根据自己对对方的了解来调整要说的内容。同理,在界面上使用的主题相关词汇,应该和用户的知识水平相当;他们的技术水平如何;是否感兴趣。
一个根本问题:用户愿意花多大的努力来学习使用你的界面。
用户分类有:
每天都使用
偶尔会使用
介于两者之间

1.4_人的模式
描述人的行为14种的模式。
1. 安全探索 safe Exploration:允许用户在界面探索而不会产生可怕的后果,支持撤销
2. 即时满足 instant Gratification:立刻看到结果,在最初几秒看到成功的体验
3. 满意即可Satisficing:Satisfying + Sufficing 快速扫描,够用而不是最佳
4. 中途变卦 Changes in Midstream :使用界面途中改变目标,设计时为人们中途变卦提供机会。
5. 延后选择 Deferred Choices:来自人们即时满足的愿望
6. 递增构建 Incremental Construction:从小片断开始,支持快速的变化和保存。可能引发用户的“心流”
7. 习惯 Habituation:可提高效率,也可产生破坏性的后果。保持应用之间和应用内的一致性。
8. 小片时间 Microbreaks:让一个活动能够很容易而且能快速获得。
9. 空间记忆 Spatial Memory:人们通过回忆东西的位置来找到它们,而不是名字。和习惯一样,在类似的地方找到类似的功能。
10. 前瞻记忆 Prospective Memory:设置一些提示来提醒自己不久将来要完成某事。让用户自己用工具去创建他们的提示系统。有被动和主动,主动如自动保存填写的数据。
11. 简化复杂工作 Streamlined Repetition:为用户提供某种简单的完成重复任务的方式。
12. 只支持键盘 Keyboard Only:数据输入的速度
13. 旁人建议 Other People’s Advice:他人的想法会影响我们。
14. 个性化推荐 Personal Recommendations:个人之间的共享,分享。

二、设计模式
模式意味着重用,好的模式建立在人与事物的深刻认知上。

在第一步中,我们知道了用户目标
下一步,要思考:我们需要给用户展示哪些内容?它们应该怎么样组织和排序?用户需要对它们进行什么操作?从抽象层次考虑,你能设计出多少种方式来展现这些内容和任务?
1、总述:
以下将从组织、导航、布局、列表、操作、数据、表单控件、社交媒体、移动设计和视觉美感10个方面来展开模式介绍。
每一个方面都会先介绍理论知识,再详细说明对应的设计模式。
每一个模式都包括"What", "Use When", "Why", "How", and “Examples”这5个方面来介绍

2、组织内容:信息架构和应用结构
信息架构是对信息空间进行组织的艺术。包括很多方面:展示、搜索、浏览、打上标签、分组、排序、操作,以及有策略地隐藏部分信息。
2-组织架构
2-组织架构


3、到处走走,导航、路标和找路
最好的旅途就是没有旅途,需要的东西就在手边 ,不用跑来跑去。
关于导航的各部分内容:总体结构或总的导航模型,怎样知道你的当前位置,怎样找出你的目的地,然后如何快速到达那里。
3-导航指引
3-导航指引


4、组织页面:页面元素和布局
页面布局是一种艺术,它通过操纵用户在页面上的注意力来完成对含义、顺序和交互发生点的传达。
布局的理论知识点有:视觉层次结构、视觉流、注意力焦点、分组、对齐和格式塔原则。
其中,视觉流可以用来在读者扫描页面的时候跟踪读者的视线。焦点就是页面上那些你的眼睛没法抵制的地方。
设计良好的视觉层次应该在页面上建立许多焦点,把注意力吸引到最重要元素的地方,让视觉流把视线从这些焦点引导到那些重要程度次之的信息上。
作为设计师,应该能控制页面上的视觉流,让人们能够按照正确的次序沿着它向前流动。一般人的阅读习惯是从上到下,从左到右。
4-页面布局基础知识
4-页面布局基础知识

4-页面布局模式
4-页面布局模式


5、列表
如何交互式显示含有众多条目的列表,每一种适度复杂的界面或网站设计都包括了列表。
进入设计之前,需分析:用户将如何使用列表?将应用哪个使用场景?列表的最突出的非可视化特征是什么?
另外还要回根据需求提供对应解决方案,如:当用户从列表中选择一项时,应该如何显示该项的细节信息。方案有:1、双面板选择器;2、列表嵌入;3、单窗口深入。
5-列表选项
5-列表选项


6、完成任务:动作与命令
按钮和菜单,我们的目标是让合适的动作处于可用状态,为它们提供适当的标签,让它们容易找到,并支持动作序列。以及还有一些不可见的动作。
6-动作命令
6-动作命令


7、显示复杂数据:树、表格及其它信息图形
信息图形-包括地图、表格和图表等,以可视化的方式而不是文字的方式传达知识。本模式介绍在交互式信息图表上好玩的创新。
一些可视化特征是前摄的:在用户有意识地注意它们之前,它们就已经开始在传达信息了。
7-1 信息图形设计基础
7-1 信息图形设计基础

7-2 数据模式一
7-2 数据模式一

7-3 数据模式二
7-3 数据模式二


8、获取用户输入:表单与控件
所谓表单,就是一些问题/答案配对,以下介绍应用在表单上的模式、技巧和控件。
8-1 表单设计基础及控件选择
8-1 表单设计基础及控件选择

8-2 表单模式
8-2 表单模式


9、利用社交媒体
利用社交媒体提升品牌、分享理念、传播视频或其它艺术表现形式,甚至是支持你的特定业务。
[img=6:L]9-社交媒体
[/img]

10、迈向移动设计
10-移动设计
10-移动设计


11、修饰外观:视觉风格和美感
研究表明:什么因素让人们对网站产生信任或不信任,排在第一的是网站的外观。
11-视觉风格
11-视觉风格
0
0

查看更多豆瓣高分好书

回应(0)

添加回应

界面设计模式的更多书评

推荐界面设计模式的豆列

了解更多图书信息

豆瓣正在热议

豆瓣
免费下载 iOS / Android 版客户端