《About face: 交互设计精髓》称得上是交互设计的圣经，用“工作必备，常看常新”来形容也不为过。书中的每句话对平时的实践有着指导意义。而且这本圣经更难能可贵的从1.0到4.0每次版本更新都与时俱进，像4.0还讲到特斯拉的车载设计。

但遗憾的是，能全部看完这本圣经的人不多。原因可能有两方面：一，500多页的大部头，看起来心理压力确实太大，很多人想看但不知从何下手；二，翻译的过程中难免有信息的偏差和错误，让很多人看了晦涩难懂、一头雾水。

因此，我本从书中提取摘要和原则，一方面是想读者对本书全貌有个初步的了解，另一方面也是希望能有益于大家工作。

第三部分 交互细节

第18章 为桌面应用而设计

当代桌面应用的界面都源自施乐(Xerox)的Alto，它是1973年施乐公司的 PARC研究中心开发出来的一个实验性计算机系统。在发明Alto的同时，PARC 的研究者们创造出了现代桌面UI典范的四大支柱：窗口（Window)、图标 （Icon)、菜单（Menu)、鼠标（Pointer)，简称为 WIMP。Alto的使用者能够以WYSIWYG（“所见即所得”）的方式，在系统中对文档进行创建、编辑和查看等功能。

Alto，以及它的后继者——施乐Star，在商业上失败了，但它们在桌面计算机上的创新，为日后的普及做出卓越的贡献。

1 无论是运用哪种交互习惯用法，都要考虑实际运用场景的客观情况。

The utility of any interaction idiom is context-dependent.

2 对话框是一个房间，去之前要有个好理由。

A dialog box is another room; have a good reason to go there.

3 将功能置于需要它们的窗口中。

Provide functions in the window where they are used.

4 用菜单来提供一条学习的途径。

Use menus to provide a pedagogic vector.

5 禁用掉不适用的菜单项。

Disable menu items when they are not applicable.

6 相同的命令要使用相同的视觉符号。

Use consistent visual symbols on related commands.

7 工具栏为有经验的用户提供快速访问常用功能的途径。

Toolbars give experienced users fast access to frequently used functions.

8 所有工具栏和图标控件都应该使用工具提示。

Use ToolTips with all toolbar and iconic controls.

9 浏览和选择任务要同时提供鼠标和键盘支持。

Support both mouse and keyboard use for navigation and selection tasks.

10 用光标形状变化表明元键的用法。

Use cursor hinting to show the meanings of meta-keys.

11 单击意味选择数据或对象，或改变控件状态。

Single-clicking selects data or an object or changes the control state.

12 双击意味着单击再加上动作。

Double-clicking means single-clicking plus action.

13 在对象或者数据上按下鼠标意味着选择。

Mouse-down over an object or data should select the object or data.

14 在控件上鼠标按下意味着预备动作；鼠标释放意味着执行动作。

Mouse-down over controls means proposing an action; mouse-up means committing to an action.

15 要让选中这种状态，在视觉上明确而醒目。

The selection state should be visually evident and unambiguous.

16 拖放候选对象必须在视觉上表明它们的接受能力。

Drop candidates must visually indicate their receptivity.

17 拖动光标必须在视觉上表明源对象。

The drag cursor must visually identify the source subject.

18 任何可滚动的拖放目标对象都必须支持自动滚屏。

Any scrollable drag-and-drop target must auto-scroll.

19 所有拖动都要去抖动

Debounce all drags.

20 任何要求精确对齐的程序必须提供精确滚动的游标工具。

Any program that demands precise alignment must offer a vernier.

第19章 为移动设备和其他设备而设计

2007 年6月，苹果发布了iPhone，几乎一夜间，移动设备的定义发生了翻天覆地的变化。它彻底取代了原来糟糕的用户体验。

现在，iPad、Android和微软的多点触摸平板的销量不断增加。对于很多人来说，这样一种非常方便的计算设备，想用的时候按下开关就立即能用，关闭时可以立即保存上次的状态，并且允许直接的多点指尖输入，这一切的一切，都远远优于传统的桌面软件、优于传统的点指输入设备。

本章的大部分篇幅，将介绍在设计手机和平板类的移动设备时的注意事项及其设计原则。本章后面，我们还将简要讨论一下其他设备平台的界面，包括公共信息台、公共设备、车载设备的界面。

1 大多数移动应用是暂态的。

Most mobile apps have transient posture.

2 要限制动画式屏幕转换的次数和出现的方向。

Limit the number and direction of animated screen transitions. 

3 用教程引导首次使用的用户。

Use guided tours to orient first-time users.

4 用覆盖层展示手势的用法。

Use overlays to explain gestures.

第20章 网页设计

今天，需要安装在电脑本地的软件越来越少。并且现在，网页已经成为了人与人之间，以及企业与客户之间的最重要、最流行的沟通渠道。这意味着网页体验的质量是无比重要的，随着越来越多、越来越复杂的软件行为转移到网页上， 网页的交互能力也必须要达到和软件相当的水平。

在以往，视觉设计师关注“视觉和感觉”，信息架构师关注内容结构。而现在，这些知识和经验是不够用的。在GitHub上可以很容易找到优秀的UI组件。不过，即使手边有这些大量的现成组件，我们也仍然无法很好地回答一些既重要又简单的问题：我们怎样做才能恰如其分地满足用户的需求和想法，如何才能利用好这些部件，开发出具备良好和连贯用户体验的产品。

1 采用永久固定的页眉来保持情境。

Use persistent headers to maintain context.

2 “面包屑”链接，让导航更快捷。

Breadcrumbs with lateral links help speed navigation.

3 自动填充、自动推荐、分面搜索可以让用户更快地找到所需的东西。

Auto-complete, auto-suggest, and faceted search help users find things faster. 

4 让滚动变得更投入。Make scrolling an engaging experience

5 无限滚动与网站页脚是互斥的习惯用法。Infinite scrolling and site footers are mutually exclusive idioms.

6 如果你的网站只有一个版本，一定要把它设计成自适应。

7 If you have only one version of your site, make it responsive.

第21章 设计细节:控件和对话框

虽然不同平台上的一些视觉设计是不同的，但大部分平台上的控件和对话 框是一样的，它们是用户与各个数字产品的通用交互语言。这些标准的东西，在大部分的GUI开发库里都有，存在着被滥用或误用的可能。本章将概要介绍一些通用的GUI交互控件，还将讨论他们适合使用的环境。

1 链接用于导航，按钮用于动作。

Use links for navigation and buttons for action.

2 用图标来区分列表中重要的文本项。

Distinguish important text items in lists with graphic icons.

3 绝不要水平滚动文本。

Avoid scrolling text horizontally.

4 有界输入要使用有界控件。

Use bounded controls for bounded input.

5 仅供输出的文本用非编辑控件（显示控件）显示。

Use non-editable (display) controls for output-only text.

6 把主要的交互操作放在主窗口内。

Put primary interactions in the primary window.

7 对话框适用于放那些主交互流之外的功能。

Dialogs are appropriate for functions that are out of the main interaction flow.

8 对话框非常适合用来整理关于单一主题或应用程序功能的信息。

Dialogs are appropriate for organizing controls and information about a single domain object or application function.

9 在功能对话框的标题中使用动词。

Use verbs in function dialog title bars.

10 在属性对话框的标题中使用对象的名字。

Use object names in property dialog title bars.

11 区别对待模态对话框与非模态对话框。

Differentiate modeless dialogs from modal dialogs.

12 不要在非模态对话框中使用终止命令按钮。

Do not use terminating button commands for modeless dialogs.

13 不要动态地改变终止命令按钮的标签。

Don’t dynamically change the labels of terminating buttons.

14 应用程序无响应状态，必须通知用户。

Inform the user when the application is unresponsive.

15 绝不要用临时型对话框作为错误对话框或确认对话框。

Never use transitory dialogs as error messages, alerts, or confirmations.

16 所有交互的习惯用法都有其适用范围。

All interaction idioms have practical limits.

17 不要堆叠选项卡。

Don’t stack tabs.

18 避免错误对话框愚蠢地停止进度。

Most error dialogs stop the proceedings with idiocy.

19 让错误不可能发生。

Make errors impossible.

20 当软件告诉用户他们失败时，用户会觉得受到了羞辱。

Users get humiliated when software tells them they failed.

21 做，不要问。

Do; don’t ask.

22 让所有的动作都可以撤销。

Make all actions reversible.

23 给用户提供非模态反馈，避免用户犯错。

Provide modeless feedback to help users avoid mistakes.