读书笔记-Designing Interfaces中文版

“模式是某个对象的结构和行为上的特点”，这是一本关于界面设计模式的书。为什么界面设计中模式很重要？因为

对设计师而言：

• 模式捕捉了常用的结构，是关于best practice的总结和沉淀
• 模式可以快速复用，提供设计的模块化素材

对使用者而言

• 界面的习惯用法在增多，模式使用得当的设计得让人有熟悉感，易学习

全书的思路大概是：基于对用户的理解而进行模式的探索和积累——内容组织和结构模式——导航模式——布局模式——操作和任务模式——大容量信息展示——少量信息输入模式——大量信息编辑模式——视觉模式

01 用户做些什么

好的界面设计并非始于图片，而是对人的理解：人们喜欢什么，为什么会使用某种特定的软件，他们可能会怎样与之交互。人们使用工具的理由包括：寻找信息或对象，学习知识，进行交易，控制或监视，建造某种东西，和其他人交谈，娱乐等等。

交互设计第一步：找出用户的目的。界面设计真正的艺术在于解决正确的问题。

用户的学习动机：用户愿意花多大的努力来学习使用你的界面？

• 为熟练用户设计的软件：Photoshop，Dreamweaver、Web服务器的系统管理工具。为有效的操作而不是可学习性进行优化。
• 中间状态：Office，邮件客户端，网络浏览器，手机应用。大部分情况：人们很快学会了基本知识，达到自己满意的熟练程度，并且在不需要完成更具体的目标时不用进一步学习。
• 为偶尔使用而设计：设置桌面背景的Win或Mac控件，在线商店的购买页面，安装向导。提供向导的形式，不需要用户特地集中注意力，用户通常没有学习这些界面的动机。

用户的行为模式：

1. • 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