本书给我最大的收获就是一下子知道了这么多的模式名称，其实有些模式以前也用过，以前只是觉得应该这样用，要问我为什么却回答不上来，现在好了，在以后的沟通中可以用书中学到的这些模式来作为自己设计的理论依据,在设计中碰到问题也有据可查了。

但也有一件糟糕的事情，以往的工作多次证明自己总是被一些现有的“模式”所束缚，在潜意识中就会以它们为模板， 好在书中每个模式都会从“它是什么”、“什么时候使用”、“为什么使用”、“如何使用”、“示例”这几个角度来详细讲解,所以我在阅读到某些自己感兴趣的模式的时候尽量去理解其中的道理,希望在以后的工作中以此为依据做一些自己的创新。

以下的都是摘录书中的概念，写下来加深记忆，另外我还把这些模式按书中的目录做在了下面这张图上。

前言

从本书拗口的翻译中学到的第一个词是“界面习惯用法”，界面习惯用法是指一些可以识别的界面类型或风格，比如表单，文本编辑器，日历等等，它们都具有自己的独特的目标，动作和外观。

作者提出容易使用的界面，要设计得让人有熟悉感。所谓熟悉并不是指要完全按照现有的某个著名同类产品那样去做，只要把这个产品最基本的和常用的操作习惯借鉴过来，而且把他们之间的关系和原理弄清楚,将已有的知识应用到一个新的界面上，用户自然能弄明白它是怎么用的，不用在细节上太过具体，这样能让你更有发挥创意的空间。了解用户需求，并且使用习惯用法，控件，和模式，你就能设计出某个让人觉得有熟悉感同时保持新颖独特的界面。

接下来就是“模式”这个概念，本书非常详细的讲述了它的来源，综述还有其它模式系列,摘录了其中的一些含义：模式是某个对象的结构和行为上的特点，就些特点可以让它更加易用，模式可以描述成某个已有设计领域的最佳实践，它们为不同的设计问题提供普遍适用的解决方案。嗯，以后可以不用花时间纠结在这些已有的模式上了。

作为新手来讲,这些模式可以成为良好的学习工具，书中提到的术语能扩大自己的词汇量，在以后的沟通过程当中,可以用一些模式的名称表达你的想法，并且有理可据。或者在以后碰到模式问题的时候可以作为参考。

01用户做些什么

达到某种目的的手段

这一章告诉我们了解用户需求很重要。界面设计的第一步是要找出用户真正要达到的目的。多问为什么来确定用户最直接的目标。

自己现在做设计的时候,还没有这种挖掘用户真正需求的意识，在沟通的时候只是对字面和表层的疑问的地方问为什么,要使用自己的问题更有针对性，更能挖掘到真正的需求，自己还得多做功课,多看PRD文档。

用户研究基础知识

因为每个用户的情况和特征都不一样，我们需要和用户接触，找出用户的共同特征。具体包括:

• 他们使用软件的目标；
• 他们实现这些目标时需要完成的具体任务；
• 他们使用同等软件的技巧；
• 他们对你设计的目标对象的态度，以及不同的设计对这些态度的影响。
• 用户研究的方法包括直接观察,调查问卷,人物角色。

用户的学习动机

用户包括新用户和熟练用户，对于新用户在界面上用词要尽可能通俗易懂，不使用复杂的控件和不常用的界面设计习惯。

产品的定位决定了这个产品给用户多少自由度，自由度很大但是用户愿意花多大的努力来学习使用你的产品？

在前段时间参与的淘宝旺店项目中，这个项目是一个卖家可以自助建立一个具有独立域名,共享淘宝店数据的外部网店系统。产品定位是大B卖家，整个系统给用户提供了非常强大的自由操作的权限，比如可自定义布局，自定义html模块，自定义对搜索引擎的优化，后期还在不断的增加新功能，对于没有一点技术基础的新用户来说，学习成本非常高，运营结果也表明大多数用户没有顺利完成建站过程,甚至扔在哪不管了。

往往我们的产品既要满足新用户又要满足熟练用户,那学习下书中的讲到这些模式也许可以帮助我们。

模式

1. 安全探索
“让我进行探索，不会迷路，也不会陷入麻烦。”
“在设计各种软件界面时，可以给用户留下试验性的通道来让他们探索和尝试，同时别让用户付出任何代价。

2. 即时满足
“我想现在就完成某件事，是现在，不是以后。”
人们喜欢立刻从他们的行为看到结果—这是人类的天性。即时满足也意味着你不应该把介绍性的功能隐藏在任何需要等待的功能之后，例如注册、长串的指令、载入很慢的屏幕或广告。这些都是妨碍用户立即完成第一个任务的绊脚石。

3. 满意即可
“这样就足够了，我不想花更多的时间来做得更好。”
用户看到一个新界面时，不会仔细的地看每个细节，而是快速扫描，挑一个他第一眼看到，也许会达到目标的元素，用户不愿付出哪怕是一点点多余的思考，这对设计师来说，这就意味着：
要让标签简短，文字通俗易懂，而且可以快速阅读（标签包括菜单项、按钮、链接、和任何文字类的元素）
使用界面的布局来表达含义。
让界面容易导航，尤其是匆促地做了一个错误的选择后还能够回来。可以为用户提供逃生舱。

4. 中途变卦
“我在中途改变主意了。”
给用户中途变卦的机会，让他们可以进行其他选择。如果用户正在进行某一个流程操作，那还是不要干扰他吧。如果用户中间停止，以后再重新进入，可以让对话框记住以前填入的信息，而不要重新再输一遍。

5. 延后选择
“我现在不想回答这些，快点让我完成就行了！”
在用户完成某件事的时候，你问他没有必要的问题，他们宁愿跳过这些问题，以后再回答。
不要让用户在一开始就面临太多选择;
在必须使用的表单上，清楚地标注必填字段，且不要过多，用户可以跳过可选问题继续进行;
把少数重要的问题挑出来分组，把不重要的先隐藏起来;
良好的默认值;
用户可以回到需要延后填写的字段，并且有文案提示,把用户填了一半的信息保息保存起来;
先吸引用户，再引导注册。

6. 递增构建
“让我改改。还是不对，让我再改一下。这下好多了。”
用户在创建某个东西的时候，他们并不是一下就完成它。让完成一小部分工作更容易，应用要能支持快速的变化和保存，让操作的反馈看起来非常即时,如果用户需要等待很长时间才能看到她修改之后的结果，她的注意力就被分散了，心流的状态被打断了。

7. 习惯
“那个操作在别的地方都可以，为什么在这里不行？”
常用的操作将演变成人的反射性动作；用Control+S来保存等等。
在某个应用之内一致性也同样重要。比如确认对话框的按钮排列应该保持一致性。

8. 空间记忆
“我敢发誓，这个按钮一分钟之前还在这里。它去哪里了？”
人们喜欢用空间记忆法寻找东西，比如在找文件的时候通常是先回忆它们放在哪里，而不是文件名来找到。空间记忆和习惯用法之间关系很密切。和习惯一样，空间记忆也是一个在应用中及在应用间保持一致性会带来好处的理由。人们会期望在类似的地方找到类似的功能表现。

9. 前瞻记忆
“我把它放在这里，提醒我以后来处理。”
当我们计划在将来完成某件事的时候，就要用到前瞻记忆，我们会设置一些提示物来提醒自己，例如：给邮件做一个标记，设置会议提醒。它们的设计目的是灵活性—以及任由用户自主组织信息的态度。
作为一个设计师，你可以用前瞻记忆来做点什么，比如保存只填了一半的表单数据，记录最近几次编辑过的文件。

10. 简化重复工作
“我得重复多少遍？”
为用户提供某种简单的完成重复任务的方式，否则那些重复的劳动会浪费很多时间，很无聊，也容易出错。
比如批量查找替换，ps中的动作命令，ai中的重做功能，浏览器书签等等，把重复操作减少到一次单击，或一个快捷键。

11. 只支持键盘
“别让我用鼠标。”
下面是几项用来实现只支持键盘模式的标准技术：
在菜单上定义快捷键，加速键和各种操作的记忆方式。
从清单上选择，特别是多选项的时候，可以使用箭头键和辅助键（例如Shift）
Tab键经常用来移动键盘的焦点，Shift+Tab后退
大多数标准控件，包括单选按钮和组合框，都可以允许用户从键盘改变他们的输入值。
对话框和网页经常会有一个默认按钮，在网页常常表示提交或完成，而在对话框里常常是确定或取消。

12. 旁人建议
“其它人是怎么说的”
人们做任何决定的时候都会受到其它人意见的影响。就像淘宝上的宝贝评价,是买家决定是否购买的重要因素。

02组织内容：信息架构和应用结构

可以通过画草图来可视化思考，但是不要被草图把思路限制死。

内容组织可以分为两个方面：
第一个方面是 “切分内容”，把应用系统的内容从它的外在表现上完全分离开来。
第二个方面是用“物理结构”把内容用页面、窗口、面板等元素表达出来。

信息架构基础知识：切分内容

大多数应用程序是根据下面这些方式来组织的：

• 对象列表，例如一个满是邮件的收件箱
• 动作或任务列表，例如，浏览、购买、出售、注册
• 某种主题类别的列表，例如健康、科学、技术
• 工具列表，例如日历。地址薄、写字板

物理结构

• 多窗口
• 单一窗口
• 分页平铺窗口

模式

13. 双面板选择器
把两个相邻的面板放在界面上，在第一个面板上显示一组对象，用户可以从中任意选择，然后在第二个面板上显示选中对象的内容。如outlook，windows资源管理器等

14. 画布加调色板工具条。
把一个带图标的调色板工具条放在空白的画布旁边，用户单击调色板工具条上的按钮，在画布上创建对象。如ps,ai软件等。

15. 单窗口深入
在一个单一的窗口中显示应用程序的每个页面。当用户层层深入一组菜单项或某个对象的详细资料时，用新的页面完全替换当前窗口听内容。如IPOD菜单。

16. 可选视图
让用户在使用默认视图之外，还可以使用另外的可选视图，该可选视图对于默认视图来说，不光是装饰性的区别，还有结构上的区别。如网页的打印视图,windows文件管理器的允许文件以多种方式显示，word的阅读视觉、打印视图、大纲视图等。

17. 向导
在界面上一步步引导用户按预定的顺序完成任务。
对任务进行分解，每个步骤在单独的页面上，用前进和后退按钮进行控制。

18. 需要时显示
把最重要的内容显示出来，并把其他内容隐藏真情为。让用户通过一个简单的操作访问隐藏内容。

19. 有趣的分支
把有趣内容的链接放在一些意想不到的地方，然后给它一个好玩的标签来吸引那些好奇的用户。

20. 多级菜单
混合使用轻量级和重量级的帮助技术来支持用户的不同需要。

03到处走走：导航，路标和找路

模式

21. 清楚的入口点
只在界面上显示几个入口，让它们面向任务，并具有自描述性。

22. 全局导航
在每个页面上用一个小栏目来显示一组一致的链接或按钮，让用户可以通过它们来访问网站或应用于的核心栏目。

23. 中心和条幅
把应用的各个栏目分割成几个迷你的小应用，每个应用从主页面都有一个入口，并且可以加到主页面。

24. 金字塔
使用后退/下一个的链接来关联一系列页面。把这种序列化展现方式和一个主页面结合起来，由该页面链接到（并链接回）这个序列中所有的页面。

25. 模态面板
只显示一个页面，在用户解决好当前的问题之前没有其他任何导航选择。

26. 序列地图
在一系列页面上的每一页上，显示一幅地图，把所有的页面按顺序排序在该地图上，包括一个”你在这里”的位置指示器。

27. 面包屑层级结构
在层级结构的每个页面，显示所有父级页面的链接，向上追溯到主页面为止。

28. 注释滚动条
让滚动条在滚动的同时，还可以作为一种内容的映射机制，或者说，作为一个“你在这里”的位置指示器。

29. 颜色编码的栏目
使用颜色来标记一个应用或网站中某个网页所属的栏目。

30. 动画转换
把一个突然出现或位置移动的转换用动画来显示，让它变得更自然。

31. 逃生舱
在每个限制了导航选择的页面上，放置一个按钮或链接，让用户能明白无误地离开这个页面，回到熟悉的地方。

04组织页面：页面元素的布局

页面布局基础知识

视觉层次：重要程度区分

视觉流：接下来我该看到什么

分组和对齐：谁跟谁一起

• 相邻性
• 相似性
• 连续性
• 封闭性

把它们整合起来

使用动态显示

模式

32. 视觉框架
使用相同的基本布局、颜色、格式方案来设计页面，但是会让设计足够灵活来处理不同的页面内容。

33.中央舞台
把最重要的UI部分放到页面或窗口最大的子栏目上，把一些辅助工具和内容放置在它周围的小面板上。

34.带标题的栏目
通过给每个栏目一个醒目的标题来区分不同栏目的内容，然后把它们都排列在页面上。

35.卡片堆
把不同栏目的内容组织成几个单独的面板或“卡片”（Cards）,并把它们垒成一堆，一次只显示一个栏目，用户可以使用Tab页或其他设备来访问它们。

36.可关闭的面板

把不同栏目的内容组织成几个面板，让用户每次可以打开和关闭单独的面板而不影响其他面板的显示。

37.可移动面板

把页面上的工具或栏目组织几个不同的面板上，让用户可以移动它们，形成自定义的布局。

38.右对齐/左对齐

在设计一个两竖栏的表单或表格时，让左边竖栏的标签右对齐，而右边竖栏的元素左对齐。

39.对角平衡

用一种不对称的方式布置页面，但是通过把视觉重量放在左上角和右下角来使页面保持平衡。

40.属性表

使用两栏或表单格式的布局来告诉用户，一个对象的属性珂以在这个页面进行编辑。

41.响应式展开

从一最小限度的用户界面开始，通过在每个步骤显示更多界面，引导用户完成一系列步骤。

42.响应式允许

从一个基本上被禁止的UI开始，通过在每个步骤允许更多的用户界面部分有效，来引导用户完成一系列步骤。

43.流式布局

当用户调整窗口大小的时候，相应地调整页面元素的大小和位置，让页面一直保持填满状态。

05完成任务：动作和命令

常规的动作表现形式

• 按钮
• 菜单条
• 弹出菜单
• 下拉菜单
• 工具条
• 链接
• 动作面板
• 在对象上双击
• 键盘动作
• 拖拽
• 命令行键入

模式

44.按钮分组

把相关的动作组织成一组按钮，彼此水平对齐或垂直对齐。如果超过三个或四个动作，那么可以多分几组。

45.动作面板

不使用菜单，而是把大量相关的动作放在一个UI面板上，该面板可以有丰富的组织方式，并且通常是可见的。

46．突出的完成按钮

把完成一项任务的按钮放在视觉流的末尾;加大它的尺寸并为它提供一个合适的标签。

47．智能菜单

动态改变菜单的标题，以便在调用之前明确地知道它的功能。

48．预览

在用户执行某个动作之前，为期显示执行结果的预览或小结。

49．进度提示

在哪些需要很长时间才能完成的操作中为用户显示该操作当前的进度。

50．可取消性

提供某种方式快速取消一个耗费时间的操作，而没有什么负面的影响。

51．多级撤销

提供一种方式可以很容易撤销用户执行的一系列操作。

52．命令历史

当用户执行某些操作时，保存一份可见的记录，记录做了什么操作，作用在什么对象上，以及执行操作的时间。

53．宏

宏是一个操作，但是在该操作里组合了其他一些小的操作。用户可以通过把一系列操作放在一起来创建一个宏命令。

06显示复杂数据：树、表格及其它信息图形

54．总览加细节

在放大的详细视图旁边放置一个总览图。当用户在总览图上圈出一个视野的时候，详细视图里将显示该视野范围里的内容。

55．数据提示

当鼠标滑过图形上一个兴趣点时，把该点的数据显示在一个工具提示或其他某种浮动窗口上。

56．动态查询

提供一些方式来快速过滤数据，并让这种过滤充满交互性。采用容易使用的标准控件，例如滑块和复选框。

57.数据刷

让用户在一个视图里选择数据，然后在另一个视图里同时显示这些选中的数据。

58．局部缩放

在一个密集的页面上显示所有数据，其中有很多小个的数据项目。当鼠标移动时页面会变形，鼠标位置的数据项变大，变得可以阅读。

59．斑马行

在表格行上使用两种样式类似但颜色不同的背景，来间隔显示数据。

60．可排序的表格

在一个表格里显示数据，并让用户根据表格列的内容对表格进行排序。

61.跳转到对象
当用户输入某个对象的名称时，直接跳转到该对象并选中它。

62．新对象行

在表格的最后一行创建新的对象。

63．级联列表

通过在每个层级上显示一个可以选择的列表来表示层级结构。对任何对象的选择都会将其子对象显示在下一个列表中。

64．树状表格

把层级结构的数据放到各个列里，就像表格那样，并在第一列使用一种缩进的大纲形式来表现树结构。

65．多Y值图表

把多个图表的线段堆积起来，一个接一个地从上到下摆放在相同的面板里，让它们共享同一个X轴。

66．大量小对象

用两三个维度创建很多小的数据图片。并按一到两个附加数据维度平铺到整个页面，要么平铺成连环画式的长条，要么平铺成二维矩阵。

67．树状地图

用不同大小的矩形来表示多维数据和/或层级结构的数据。可以把这些矩形级联起来显示其层次结构，并用不同的颜色或给它们加上标签来显示更多的变量。

07从用户获得输入：表单和控件

表单设计基础

在进行输入和表单设计的时候，要记住一些原则：

• 确定用户知道要求回答的是什么问题，以及为什么需要回答这些问题。
• 如果可以的话，根本不要问什么问题。要求用户回答一个问题。
• 保存在“某个地方”的知识常常比保存在“脑袋里”的知识更准确。
• 小心，别把表单变成了编程模型的字面翻译。
• 进行可用性测试。
• 你选择的控件会影响用户对所问内容的期望，因此要进行明智的选择。

模式

68.容错格式

允许用户以多种格式和语法输入文本，并让应用系统具有智慧解释文本的能力。

69．结构化的格

和前面模式只使用一个文本输入框不同，这里使用一组文本输入框来反映所请求数据的格式。

70．填空

把一个或多个数据字段设置成散列的句子或短语形式，把那些输入变成“空白区域”，以便用户填写。

71．输入提示

在一个空白的文本输入框旁边，用一句话或一个例子来解释需要输入什么样的数据。

72．输入提醒

用提示信息预先填定文本输入框或下拉列表框，来告诉用户该怎么做/输入。

73．自动完成

当用户在文本输入框内部输入的时候，猜测可能的答案并在合适的时候自动把答案填写到输入框里。

74．下拉选择器

通过使用下拉列表框或弹出面板，把菜单的概念扩展成一个更加复杂的选择界面。

75．图标选项

用图片而不是文字（或在文字上附加文字）来显示可选项。

76．列表建造器

在同一个页面上显示资源列表和目的列表，让用户在它们之间移动项目。

77．良好的默认值

无论在什么地方，只要合适，就预先为用户填写你猜测他想要的输入值到各个字段中。

78．错误显示在同一页

把表单的错误信息和表单放在一起，直接放在页面上，在页面顶端标记错误信息。如果可能的话，在产生错误的控件旁边进行提示。

08Builder和编辑器

模式

79．就地编辑

使用小的动态文本编辑器，让用户可以“就地”修改文本，把这个编辑器直接放在原始文本的上面，而不是使用一个单独的面板或对话框。

80.智能选择

使软件足够聪明，自动选择一组相关对象，而不是让用户自己去选择。

81．组合选择

在不同的屏幕区域使用不同的操作—或鼠标单击，例如组合对象的边缘相对它的内部，来确定应该选择这个组合对象本身还是允许它包包含的那些对象也被选中。

82．一次性模态

当一个模态打开的时候，执行一次操作。然后自动切换回默认模态或前一个模态。

83．弹性加载模态

让用户通过按住某个键或鼠标按钮来进入某种模态。当用户释放它时，离开这个模态并回到之前的模态。

84．强制调整大小

为调整大小模态提供不同的行为，例如保持原始比例，以便在特别的环境下使用。

85．磁性吸附

让对象具有“磁性”，可以吸住靠近它们的其它对象。当用户拖放一个对象到这种“磁性”目标对象附近时，它就会贴在目标对象上。

86．对齐指示线

提供竖直方向和水平方向的参考线，帮助用户对齐各个对象。

87．粘贴变种

在标准的粘贴操作之外，另外提供专门的粘贴功能。

09修饰外观：视觉风格和美感

模式

88.深色背景

用图片或渐变颜色作为页面的背景，这样能可视化地拉开和前景元素的距离。

89．少一点色彩，多一些价值

选择一种，两种最多三种主要颜色样式应用在页面上。通过选择这很少几种颜色的混合值（不同亮度）来建立一个颜色板。

90．角落处理

不是使用普通的直角，而是使用斜纹、曲线或镂空来装饰界面上的方框角落。让这些角落处理和整个界面保持一致。

91．边界回应字体

在描画边界和其他线条的时候，使用设计中某种主要字体所使用的颜色，粗细和曲线。

92．发丝

在边界、水平标尺和Texture上使用的一个像素宽的线条。

93．粗细字体对比

使用两种字体互相对照，一种细一些，颜色浅一些；另一种精一点，颜色深一点来区分不同级别的信息，并丰富视觉效果。

94．皮肤

为你的应用提供开放的外观和感觉架构，让用户可以设计他们自己的图形和风格。