“模式是某个对象的结构和行为上的特点”，这是一本关于界面设计模式的书。为什么界面设计中模式很重要？因为
对设计师而言：
- 模式捕捉了常用的结构，是关于best practice的总结和沉淀
- 模式可以快速复用，提供设计的模块化素材
对使用者而言
- 界面的习惯用法在增多，模式使用得当的设计得让人有熟悉感，易学习
全书的思路大概是：基于对用户的理解而进行模式的探索和积累——内容组织和结构模式——导航模式——布局模式——操作和任务模式——大容量信息展示——少量信息输入模式——大量信息编辑模式——视觉模式
01 用户做些什么
好的界面设计并非始于图片，而是对人的理解：人们喜欢什么，为什么会使用某种特定的软件，他们可能会怎样与之交互。人们使用工具的理由包括：寻找信息或对象，学习知识，进行交易，控制或监视，建造某种东西，和其他人交谈，娱乐等等。
交互设计第一步：找出用户的目的。界面设计真正的艺术在于解决正确的问题。
用户的学习动机：用户愿意花多大的努力来学习使用你的界面？
- 为熟练用户设计的软件：Photoshop，Dreamweaver、Web服务器的系统管理工具。为有效的操作而不是可学习性进行优化。
- 中间状态：Office，邮件客户端，网络浏览器，手机应用。大部分情况：人们很快学会了基本知识，达到自己满意的熟练程度，并且在不需要完成更具体的目标时不用进一步学习。
- 为偶尔使用而设计：设置桌面背景的Win或Mac控件，在线商店的购买页面，安装向导。提供向导的形式，不需要用户特地集中注意力，用户通常没有学习这些界面的动机。
用户的行为模式：
- Safe Exploration 安全探索：好的软件鼓励用户尝试不熟悉的操作，不必付出任何代价
- Instant Gratification 即使满足：立刻从行为得到结果；为用户提供明显的任务起点
- Satisficing 满意即可：当了解所有可能的选择需要付出时间和努力的时候，人们愿意接受“够用”而不是“最佳”的选择（Herbert Simon）。视觉复杂性常常诱使非专家用户采用满意即可的策略，只寻找第一个可行的选择。
- Changes in Midstream 中途变卦：让用户可以进行其他选择，并且容易重新进入（reentrance），例如邮件草稿
- Deferred Choices 延后选择：不要让用户一开始就面临太多选择，在将来可以回到需要延后填写的字段
- Incremental Construction 递增构建：创建某个东西的过程是增量式的，应支持快速的变化和保存，持续告诉用户整个目标对象的样子和它们的行为
- Habituation 习惯：外部一致性和内部一致性
- Spatial Memory 空间记忆：人们常通过回忆东西或文档的位置来再次找到它们，而不是通过名字，适用于对象数目不太大的情况
- Prospective Memory 前瞻记忆：计划在将来完成某事，会设置一些提示物来提醒自己。
- Streamlined Repetition 简化重复工作
- Keyboard Only 只支持键盘
- Other People’s Advice 旁人建议
02 组织内容：信息架构和应用结构
如何组织内容？一是切分内容（Dividing stuff up），想象动作和对象怎样才能和主题最顺畅的结合起来，先考虑内容组织方式和任务流。二是用物理结构把内容用页面、窗口、面板等元素表达出来。
大多数应用程序是根据这些方式来组织的：
- 对象列表（list of objects），“你将操作什么对象？”，例如满是邮件的收件箱，通过线性模型、二维表格、类别、层次、空间等方式进行组织
- 动作或任务列表（list of actions），“你想进行什么操作？”，如浏览、购买、出售、注册
- 某种主题类别的列表（list of subject categories），如健康、科学、技术，适合组织名词对象，不太适合组织动作
- 工具列表（list of tools），如日历、地址簿、写字板
可以根据软件本质和所在领域/主题、用户领域知识、用户计算机熟练程度、心智模型等来组织。心智模型是用户基于以前的经验或了解，它表示用户对某个东西的认知程度，也就是他认为他已经知道的那部分。
模式：
- 双面板选择器（Two-Panel Selector）:“选择-显示”，适用于展现对象列表、类别列表、动作列表，显示设备需要足够大
- 画布加调色板工具条（Canvas Plus Palette）：图形编辑器，创建新对象，将工具条放在画布左边或上边
- 单窗口深入（One-Window Drilldown）：用单一窗口显示每一页面，适用于显示空间有限或复杂性低的应用
- 可选视图（Alternative Views）：进行结构上的改变，以支持不同目的的操作
- 向导（Wizard）：适用于用户面临又长又复杂而且陌生的任务。但在确定要做什么的时候，决策就是一种负担：不要让我考虑，告诉我接下来做什么就好
- 需要时显示（Extras on Demand）：让80%的使用情形更容易，让20%能达到
- 有趣的分支（Intriguing Branches）：要提供明显的方式回到主要的工作流中
- 多级帮助（Multi-Level Help）
03 到处走走：导航，路标和找路
导航问题：
- 现在在哪里
- 可以去哪里
- 接下来去哪里
- 如何去到
常规的路标（Signposts）包括页面和窗口标题，网页标识（logo），其他有标记的设备，Tab，选择指示器。
页面关联模式：
- 清楚的入口点（Clear Entry Points）：只在界面上显示几个入口，让它们面向任务，并具有自描述性。这些入口应该涵盖人们来这里的理由
- 金字塔（Pyramid）：用Back/Next链接来关联一系列页面，由主页链接到所有页面，如幻灯片、向导、书的章节等
- 全局导航（Global Navigation）：一个好的全局导航面板应该是一个良好定义顶视觉框架的组件。用户通常不会注意网站或UI是怎么组织的，而是简单的沿着最近或最明显的路标往前走，知道找到想要的内容为止。
- 模态面板（Moda Panel）
- 中心和辐条（Hub and Spoke）：把应用顶各个栏目分割成几个迷你的小应用，每个应用都有一个入口，并且可以回到主页。应用相对独立。特别适用于小屏幕设备，常与单窗口深入一起使用
路标模式：
- 序列地图（Sequence Map）：在一系列页面的每一页上，显示所有页面顺序的地图以及当前位置的指示
- 注释滚动条（Annotated Scrollbar）：滚动条滚动的同时作为位置指示器
- 面包屑层级结构（Breadcrumbs）：在层级结构的每一页面，显示所有父级页面的链接
- 颜色编码的栏目（Color-Coded Sections）：不应成为唯一的栏目区分方式
其他
- 动画转换（Animated Transition）：把突然出现或位置移动的转换用动画来显示，保持用户在当前虚拟空间中的位置感，可以跟踪变化顶位置，而不是费力去寻找。300微秒的动画在平滑滚动的时候最理想
- 逃生舱（Escape Hatch）：在限制了导航选择的页面上，提供能离开回到熟悉地方顶按钮或链接
04 组织页面：页面元素的布局
页面布局是一种艺术，它通过操纵用户在页面上的注意力来完成对含义、顺序和交互点的传达。
视觉层次（Visual Hierarchy: What’s important）：主次分明，读者能从页面布局推导出信息结构。左上角优先，空白，字体对比，前景和背景颜色对比，位置、对齐、缩进，图形（线条、方框、颜色条）
视觉流（Visual flow: What should I look at next）：良好的视觉层次在页面上建立了许多焦点，控制和引导焦点之间的视觉流
分组和对齐（Grouping and alignment: What goes with what）：格式塔（Gestalt）心理学：
- 相邻性：相邻物体产生关联
- 相似性：想同大小、形状、颜色、方向的物体产生关联
- 连续性：由对齐或小元素组成的连续线条和曲线
- 封闭性：简单封闭的区域
模式
整体视觉层次模式：
- 视觉框架（Visual Framework）：使用相同的基本布局、颜色、格式方案来设计页面。颜色、字体、路标、导航、带标题栏目、间隔和对齐、整体布局网格等保持一致。
- 中央舞台（Center Stage）：适用于表格和数据表、表单、网页、图形编辑器等。大小：中央舞台至少有左右边距的两倍宽，上下边距的两倍高；颜色：与周围元素形成对比
内容组块模式：
- 带标题的栏目（Titled Sections）
- 卡片堆（Card Stack）：把不同栏目的内容组织成几个单独的面板。横向tab页通常只支持6个或更少的卡片，如果一行实在显示不下，就水平滚动而不是两行
- 可关闭的面板（Closable Panels）：在很多可以使用卡片堆模式的地方都可以使用。链接箭头向下表示已经打开，向右表示关闭
- 可移动的面板（Movable Panels）
视觉流细节：
- 右对齐/左对齐（Right/Left Alignment）
- 对角平衡（Diagonal Balance）：用不对称的方式布置页面，把视觉重量放在左上角和右下角来使页面保持平衡
- 属性表（Property Sheet）：使用两栏或表单格式的布局告诉用户，一个对象的属性可以在这个页面进行编辑。如果可以实现及时刷新就及时刷新
动态布局模式：
- 响应式展开（Responsive Disclosure）：从最小限度的用户界面开始，在每个步骤显示更多，引导用户完成一系列步骤
- 响应式允许（Responsive Enabling）：当设计响应式允许或响应式展开界面时，要保证只禁止确实不能使用或不应该使用的元素，要避免没有提供任何线索来说明为什么一个元素被禁止，尽量将它们和开关控件放在一起
- 流式布局（Liquid Layout）：当调整窗口大小时，页面元素的大小和位置也相应变化，让页面一直保持填满的状态
05 完成任务：动作和命令
常规动作表现形式
- 按钮
- 菜单条：显示一个应用所包含的完整动作集合，并以可预测的方式组织。读屏软件可以访问这些动作
- 弹出菜单/上下文菜单：右键菜单或者一些动作之后出现，列出有关的动作，而不是所有可能的动作
- 下拉菜单：下拉控件的典型应用是设置状态，而不是执行动作
- 工具条
- 链接：很多web应用的做法是 用按钮强调动作，用链接显示其他内容
- 动作面板
- 不可见动作：在对象上双击，键盘动作，托拽，命令行键入
模式：
- 按钮分组（Button Groups）
- 动作面板（Action Panel）：例如PPT新演示文档面板，可见性和自由展示的需要。形式自由
- 突出的“完成”按钮（Prominent “Done” Button）：把完成一项任务的按钮放在视觉流的末尾，加大尺寸并为它提供合适的标签
- 智能菜单项（Smart Menu Items）：动态改变，在使用前就能明确知道可以进行哪些操作
- 预览（Preview）：提交重量级操作前，显示任何可以告诉他将会发生什么结果的信息
- 进度提示（Progress Indicator）：超过两秒的打断当前任务的操作，可以考虑使用。告诉用户：当前正在做什么；已经完成了多少比例；还需要多少时间才能完成；如何停止这项任务
- 可取消性（Cancelability）：首先找出某种方式让耗时的操作加快速度，至少让它看起来更快一些。在进度指示或显示操作结果的地方提供取消按钮，并对操作即时响应
- 多极撤销（Multi-Level Undo）：人们期望能撤销这些改变：文字输入，数据库事务，图片或画布的修改，布局变化（位置、大小、顺序、分组），文件操作，对象的创建、删除和重组，剪切、复制、粘贴操作
- 命令历史（Command History）：
- 宏（Macros）
06 显示复杂数据：树、表格及其他信息图形
Information Graphics带着给用户传递数据的目标，对数据进行可视化展示。良好的交互式信息图形为用户提供以下问题的答案：
- 数据是如何组织的？
- 它们之间的关系如何？
- 我能怎样进一步了解这些数据？
- 我可以重新组织这些数据来换一种方式看待它吗？
- 只要把我想知道的数据显示就可以了
- 具体的数据值是多少？
组织模型 Organizational Models
- 线性模型
- 表格
- 层级模型
- 网络模型（组织模型）
- 地理模型（空间模型）
- 其他模型
前摄变量（Preattentive Variables）：一些可视化特性是前摄的，在用户有意识的注意他们之前，他们就已经开始传达信息了。包括色调、亮度、颜色饱和度、底纹、位置和对齐、方向、大小、形状。
“Focus plus Context”焦点加上下文：一个好的可视化界面，应该允许用户把注意力集中在一个兴趣点上，同时在它周围显示足够的素材。
导航和浏览：滚动和平移，缩放，打开和关闭兴趣点，深入到兴趣点内部
排序和重新排列：字母顺序、数字顺序、日期或时间顺序、物理地点顺序、根据类别或标记排序、受欢迎程度，用户设计的排列方法，完全随机排列
搜索和过滤：用户意图–把注意力集中到感兴趣的那部分数据，去掉其他数据。高度交互（尽快响应用户请求）、迭代（允许不断细化直到获得想要的结果）、上下文相关（在整个上下文中显示结果）
实际数据：标签，图例，坐标轴、量尺、比例和时间轴，数据提示（datatips），数据刷（data brushing）
模式
一般模式
- 总揽加细节（Overview Plus Detail）：Micro and Macro reading。视野框和详细视图之间的反应最好在十分之一秒以内（标准的直接操作反应时间）
- 数据提示（Datatips）：当鼠标划过兴趣点时，把相关数据显示在工具提示或其他浮动窗口上
- 动态查询（Dynamic Queries）：充满交互性的快速过滤数据的方式
- 数据刷（Data Brushing）：让用户在一个视图里选择数据，然后在另一个视图里同时显示这些数据。选择数据的方式：画方框，鼠标单击，shift+单击，control+单击，在数据点外围画不规则“套索”，通过菜单项、按钮或按键取消选择。
- 局部缩放（Local Zooming）：鼠标移动时页面会变形，鼠标位置的数据项变大
标签和列表模式
- 斑马行（Row Striping）：在表格行上使用两种样式类似但颜色不同的背景，来间隔显示数据
- 可排序表格（Sortable Table）
- 跳转到对象（Jump to Item）：输入某个对象名称时，直接跳转到该对象并选中
- 新对象行（New-Item Row）：在表格的最后一行创建新的对象
层级结构组织模式
- 级联列表（Cascading Lists）：对每一层级对象的选择，会将其子对象显示在下一层级的列表中
- 树状表格（Tree Table）
多维数据组织模式
- 多Y值图表（Multi-Y Graph）：将多个图表的曲线一个接一个从上到下摆放在一个面板里，共享y轴
- 大量小对象（Small Multiples）：需要用两个以上的维度或独立变量来显示一个大型数据集
- 树状地图（Treemap）：用不同大小的矩形来表示多维数据或层级结构的数据。关键是确定用那些可视化变量对那些数据属性进行编码.
07 从用户获得输入：表单和控件
控件选择考虑因素：可使用的空间，用户电脑使用经验，用户领域经验，来自其他应用的期望，可用的技术
- 对象列表LISTS OF ITEMS：选择一个或两个选项；进行n选1（n很小）；进行n选1（n很大）；从n个选项里选择多个；为输入建立列表；建立有序对象
- 文字TEXT：输入一行文本；要么输入一行文本，要么从多个选项中选择；输入多行无格式文本；输入多行有格式文本
- 数字NUMBERS：允许输入任何数字类型；从一个有界范围内输入数字；从一个大范围内输入一个字范围
- 日期或时间DTES OR TIMES
模式
文本输入框模式：
- 容错格式（Forgiving Format）
- 结构化格式（Structured Format）：一组格式预定的文本输入框
- 填空（Fill-in-the-Blanks）
- 输入提示（Input Hints）：在文本框旁边
- 输入提醒（Input Prompt）：预先填写在文本框内进行提示
- 自动完成（Anto completion）
其他
- 下拉选择器（Dropdown Chooser）
- 图示选项（Illstrated Choices）
- 列表建造器（List Builder）：同时显示源列表和目的列表，让用户在他们之间移动项目
- 良好的默认值（Good Defaults）
- 错误显示在同一页（Same-Page Error Messages）
08 Builder和编辑器
- 页面布局和格式化的文本编辑器：word，quark，indesign
- 图像编辑器：ps，gimp，macpaint
- 矢量图形编辑器：ppt，illustrator，omnigraffle
- 网站Builder：dw，golive
- GUI Builder和代码编辑器：visual studio，eclipse，interface builder
- 常见的文本编辑器：notepad，emacs，web页面
模式
- 就地编辑（Edit-in-Place）
- 智能选择（Smart Selection）
- 组合选择（Composite Selection）
- 一次性模态（One-Off Mode）：一个模态打开时，执行一次操作，然后自动切换回默认模态或前一个模态
- 弹性加载模态（Spring-Loaded Mode）：通过按住某个键或鼠标进入某种模态（如shift键输入大写字母）
- 强制调整大小（Constrained Resize）
- 磁性吸附（Magnetism）
- 对齐指示线（guides）
- 粘贴变种（Paste Variations）
09 修饰外观：视觉风格和美感
颜色：
- 在深色背景上放置浅色前景对象，或者反过来
- 永远不要采用红色和绿色来区分重要的元素（10%的男性和1%的女性有某种程度的色盲）
- 不用采用互补色的背景和前景（如红色和蓝色）
- 冷色调（红、橙、黄、褐、米）和暖色调（蓝、绿、紫、灰、白）
- 深背景和浅背景：浅背景更常用于计算机界面
- 强对比和弱对比：强对比会让人觉得紧张、有力和大胆，弱对比会更平滑，更让人放松
- 饱和色和不饱和色：高饱和度颜色生动、明亮、有力、温暖，但容易使视觉疲劳
排版：
- 显示器上无衬线（Sans-Serif）字体表现更好，印刷品上衬线字体更具可读性
- 避免使用斜体、草书和其他装饰性字体
- 可能的情况下，把大量文本放在中等宽度的区域里，如10~12个英文单词
空间和拥挤 Spaciousness and crowding
曲线和角度 Angles and curves：注意曲线相切的视觉效果，考虑视觉焦点的引导
底纹和旋律 Texture and rhythm
模式
- 深色背景（Deep Background）：用图片或渐变颜色作为页面的背景，这样能可视化的拉开和前景元素的距离。柔和的焦点，避免太多细节，颜色渐变，深度暗示，没有强烈的焦点
- 少一点色彩，多一些价值（Few Hues, Many Values）：选择最多三种主要颜色样式应用在页面上
- 角落处理（Corner Treatments）
- 边界回应字体（Borders that Echo Fonts）：在描画边界和其他线条的时候，使用设计中某种主要字体所使用的颜色、粗细和曲线
发丝（Hairlines）：在边界、水平标尺和Texture上使用一个像素宽的线条
- 通过为标题加下划线来区分带标题的栏目
- 用水平分割线、垂直分隔线或封闭的边界来划分不同的内容区域
- 引导视线穿过一个组合元素的指示线
- 在不同背景颜色的区域之间，清楚标识它们的边界
- 用在底纹上，例如格线或一组水平线
- 用在图标、图片和画出的图形里
- 用在控件周围的边界上
粗细字体对比（Contrasting Font Weights）
- 皮肤（Skins）
End
by 00
