万字干货，交互设计精髓105条设计原则(附中英PDF资料)

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

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

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

另外，我也收集了本书的中英文资料（如需要可以加我微信 gold3bear），也是希望方便大家深入学习和研究。在文章末尾我预埋了彩蛋，给对交互设计和产品设计有多追求的小伙伴。

第一部分 目标导向设计

第1章 数字产品的设计过程

如果我们设计的数字产品能够让人们方便地达 成目标，他们会感到满意，提高效率，心情愉快。如此一来，人们会高兴 地购买这款产品，还会推荐他人购买。假设我们能够以低成本实现上述目标，就能取得商业上的成功。表面上，这个前提一目了然。只要用户满意，产品就会成功。可是为什么仍有那么多的数字产品难以使用，用起来让人痛苦呢？为什么不能皆大 欢喜、双方共嬴？尽管我们一直在更快、更廉价、更便捷技术的创新道路 上稳步迈进，为什么人们仍会感到沮丧？一言以蔽之，答案是因为在产品规划和开发的过程中，没有把设计作为同等重要的基础环节。

• 用户界面应该基于用户心理模型，而不是实现模型。User interfaces should be based on user mental models rather than implementation models.

• 目标导向的交互设计反映了用户的心理模型。Goal-directed interactions reflect user mental models.

• 交互设计不是凭空猜测。Interaction design is not guesswork.

##第2章 理解问题：设计研究

任何设计成果的评判标准，都要看产品最终满足用户或委托开发组织需求的程度。不管设计师技艺多高超，多有创造力，如果没有清晰而详细地了解其目标用户、问题限制及推动设计的商业或组织目标，那么成功的机会不大。仅仅筛选一下从市场调查（尽管这对回答其他类型问题十分重要）之类的定量研究得到的数字和图表，很难轻易地深入把握这些主题。
这种行为和组织知识需要通过定性研究方法来收集。定量研究方法有很多种，每种方法对理解产品设计轮廓都十分重要。

第3章 为用户建模: 人物模型和目标

一旦花了大量时间进行实地调查，研究用户的生活、动机和环境，接着问题自然而然地产生了：如何利用如此巨大的研究数据打造成功的产品？记事本里充满了对话记录和观察结果，很可能我们交流过的每 个人都有些许不同。很难想象，每次做出设计决策时，都要从数百页笔记中挖掘有用信息。即便有足够时间，这些笔记提供的信息是否有帮助还不 一定。如何使这些数据变得有意义？如何辨明重点？我们引入了建模（model)这一强大概念解决上述问题。

• 不要让用户感觉自己愚笨。Don’t make the user feel stupid.

• 界面设计的关注点在于单个主要人物模型。Focus the design for each interface on a single primary persona.

第4章 设立愿景：场景和设计需求

在前两章中，我们讨论了如何收集关于用户的定性信息，如何利用信息创 建模型。通过仔细分析用户研究结果以及人物模型及其他模型的综合体，我们创造了一副清晰的画面来呈现用户及其各自的目标和用户目前的情况。接下 来，就到了整个方法的关键部分：如何利用对用户的理解来制订设计方案，既 能让用户满意、对用户有所激发，同时又能完成商业目标，突破技术上的限制。

• 设计产品行为前，首先定义产品会做什么。Define what the product will do before you design how the product will do it.

• 设计的早期阶段，假定界面是魔法。In the early stages of design, pretend the interface is magic.

第5章 设计产品：框架和提炼

上一章中我们讨论了设计过程的前半部分，即利用故事情节或场景剧本来设想理想的用户交互过程，之后从这些场景和其他来源中对需求进行定义。现在我们终于做好准备，开始设计。

• 绝对不要向利益相关者展现你不满意的设计方案，那可能正是他们喜欢的。Never show a design approach you’re unhappy with; stakeholders just might like it.

• 用户体验只有一个，即形式和行为的设计必须相互和谐。There is only one user experience: Form and behavior must be designed in concert.

第6章 创造型团队合作

在本书的介绍中，我们曾提到，目标导向方法包含三方面内容，即原则、类型和过程。然而，还有一点值得提及——实践。本书花费了大幅篇幅讲述上述 三方面内容，我们希望能在本章跟大家分享一些关于目标导向设计的实践，以及设计团队如何融入更大的产品团队。 本章主要讲述三方面内容：一是团队合作的战略；二是产品开发的正确方法；三是整合不同组织间团队合作的技巧。有些最有趣、最重要的设计问题太 大以致无法单独解决。通常，这些问题牵扯过多，很难拋开其他问题而单个解决。

第二部分 设计行为和形式

第7章 良好产品行为的基础

如何做出产品设计的决策呢？什么成就了好的设计方案呢？测量设计质量的一个依据，就是产品满足用户目标和需求的能力，以及是否适应商业目标和技术限制。但是产品解决方案是否具有可识别、可实现性的特征？我们能否将类似问题的解决方案一般化？要成就好的设计是否要求设计过程具有普遍适用性？ 答案就在交互设计价值、原则和模式的使用中：设计价值（design values) 为成功、恰当的设计实践提供了指导方针；设计原则（design principles)为设计有用而令人期待的产品、系统和服务提供了向导；设计模式（design patterns) 针对某些具体的设计问题给出了一般方案。

第8章 数字产品的礼仪

研究发现，人类与计算机及其他交互产品之间的对待和反应方式如同人与人之间的交往。我们与软件的交互也出于本能，是无意识行为，也是不可回避的。这个研究的意义是深远的，如果希望用户喜欢我们的软件，那么当我们设计软件时，应该让它表现得像一位举止得体的人。如果希望用户能高效地使用我们的如果希望用户能高效地使用我们的软件，那么就应该将它设计得像一个帮助和支持自己工作的同事。总之， 应当考虑人与计算机在工作上的角色分配。

• 人来思考，计算机干活。The computer does the work, and the person does the thinking.

• 软件应该像人一样体贴。Software should behave like a considerate human being.

• 如果用户愿意操作，就值得程序记住。If it’s worth it to the user to do it, it’s worth it to the application to remember it.

第9章 平台和姿态

在开始设计一个数字产品的交互框架时，要回答的第一个问题是“什么样的平台（platform)和姿态（posture)是合适的？”产品的平台（platform)可以认为是使产品能运转起来的软件和硬件的共同作用体，包括用户交互和产品内部运转。常见平台：桌面端、网站、 手机、数码相机……产品的姿态（posture）是指产品的行为立场，也就是产品对用户的展现方式。姿态讨论的是用户在与产品交互上投入多少精力；以及产品又如何回应这些精力投入。这一决定必须建立在了解产品可能的用户场景和环境基础上。常见的应用姿态分为独占式、暂时式、后台式……

• 技术平台相关的决定最好能融入交互设计的成果。Decisions about technical platform are best made in concert with interaction design efforts.

• 全屏幕使用独占应用程序，让它发挥最优效果。Optimize sovereign applications for full-screen use.

• 独占界面应该采用保守的视觉风格。Sovereign interfaces should feature a conservative visual style.

• 独占式应用程序可以使用丰富的输入方式。Sovereign applications should exploit rich input.

• 在独占应用程序中让文档视图最大化。Maximize document views within sovereign applications.

• 暂时应用程序必须简单、清晰并且意思明确。Transient applications must be simple, clear, and to the point.

• 暂时式应用程序只使用一个窗口和视图。Transient applications should be limited to a single window and view.

• 启动暂时式应用时，它应该处于上一次的位置和配置状态下。A transient application should launch to its previous position and configuration.

• 信息亭应该针对首次使用者进行优化。Kiosks should be optimized for first-time use.

第10章 为中级用户优化设计

大部分技术产品用户都了解这种感受，即买回一部数字家电或下载一个新 软件应用，就意味着要开始学习一种新界面；而这种学习过程历时数天，充满了 挫折感和失望。此外，许多有经验的数字产品用户也可能会沮丧，因为他们总被产品当作新手。看来很难找到一个合适的平衡点，同时满足新手和专家的要求。

• 不要将培训工具固定化。Don’t weld on training wheels.

• 没有人愿意永远当个新手。Nobody wants to remain a beginner.

• 为中级用户而优化设计。Optimize for intermediates.

• 为常见的导航调整界面。Inflect the interface for typical navigation.

• 用户只有获得充分的回报，才会付出相应的努力。Users make commensurate effort if the rewards justify it.

• 将用户想象成为非常聪明但很忙碌的人。Imagine users as very intelligent and very busy.

第11章 编排与心流

如果产品设计的目标是让用户在使用产品时生产力更高、更有效、更投入， 就必须让用户保持正确的心态。本章讨论人类心理工程学（mental ergonomics)， 主要讲述了如何让产品支撑起用户的智力和效率，如何避免破坏用户在投入生产时的专注度，这正是我们希望用户保持的状态。

• 不论界面多酷，越少越好。No matter how cool your interface is, less of it would be better.

• 不要用对话框报告。Don’t use dialogs to report normalcy.

• 请求原谅，而不是许可。Ask forgiveness, not permission.

第12章 减少工作，消除负担

软件经常包括一些臃肿的交互，要求用户做不必要的工作。界面交互始终需要用户做事情；设计师（或者是其他更重要的人）须将此种必要负担降至最低， 同时还能让用户达到目标。如果设计师和开发者不注意人们为操作技术所需的动作，就会产生繁重的用户体验。用户得费很大力气才能为他们想要执行活动 所需的心理模型与设计的产品界面匹配上。用户与数字产品交互时执行4类工作：认知工作、记忆工作、视觉工作、肢体工作。

• 尽可能地消除每一种练习。Eliminate excise wherever possible.

• 不要愚蠢地打断进程。Don’t stop the proceedings with idiocy.

• 不要让用户请求许可。Don’t make users ask for permission.

• 任何输出之处应允许输入。Allow input wherever you have output.

• 重大改变必须显著优秀。Significant change must be significantly better.

第13章 隐喻、习惯用法及能供性

随着Android、WindowsPhone和iOS的降临，我们正式进入了交互设计的 后隐喻时代。早期桌面软件和手持设备的拟物化（skeuomorphism)和过度雕琢的视觉隐喻已成过去。现代设备的UI以内容和数据为中心，把UI控件的认知度降至最低。 这种脱离隐喻之势姗姗来迟，如此有充足的理由：严格奉行隐喻设计毫无必要，却把界面死死地与物理世界的运行机制捆绑在一起。基于隐喻设计的用户界面还有一大堆其他问题，如没有足够多的隐喻、 缩放效果不好、用户能否识别出隐喻有待商榷，特别是在跨文化时。隐喻， 尤其是物理隐喻和空间隐喻，在设计大多数数字产品时作用不大。

• 多数人并不想知道得太多，只想成功地使用产品。Most people would rather be successful than knowledgeable.

• 不要让界面强行适应隐喻。Never bend your interface to fit a metaphor.

• 所有的习惯用法都需要学习，而好的习惯用法只需学习一次。All idioms must be learned; good idioms need to be learned only once.

• 丰富的视觉反馈是成功的直接操作的关键。Rich visual feedback is the key to successful direct manipulation.

• 尽可能用视觉表达顺从。Visually communicate pliancy whenever possible.

第14章 重新思考数据输入、存储与检索

在数字科技的世界中，实现模型思维在数据管理上体现得最明显：输入、存储、检索数据。你遇到多少次这样的情况：在一组表单中输入信息，却弹出令人迷惑的错误 对话框，告诉你输入错误。或许是在电话号码中输入了连字符，或许是在只能 输入名字的地方输入了姓氏和名字，或许不小心在只能输入数字的地方敲了文 本。这些问题都源自软件强迫人们像电脑一样思考。软件迫使人们毫无必要地面对电脑内部的数据输入、存储和检索机制。不仅你母亲有这个问题，即便高级用户也很容易迷惑或犯错误。

• 出错可能不是程序的问题，但是程序的责任。An error may not be your application’s fault, but it is your application’s responsibility.

• 审核，不要编辑。Audit, don’t edit.

• 自动保存文档和设置。Save documents and settings automatically.

• 把文件放在用户能找到的地方。Put files where users can find them.

第15章 防止错误，通知决定

数字革命早期，对话框和消息在软件应用的图形界面中占据着很大比例， 告诉用户他们做错了什么，或者警告用户，计算机或软件由于实际或臆想的技术限制，无法处理你的请求。如今，由于计算、存储和通信速度增加了不知道几个数量级，先进的编程工具和技术同样有长足进步，这两类错误信息中的第二类基本没有了。而第一类错误信息，责备用户犯错误，也已经开始消失（至少在消费者和移动应用程序领域）。设计者发现了更好的方法以防患于未然，允许用户进行撤销操作，此外还赋予用户在操作之前预先看到结果的魔法。关于错误 防止和决定通知的这三种策略，就是本章的主题。

第16章 为不同的需求而设计

正如第一部分所谈到的，人物模型和场景有助于将设计工作重点放在实际 用户的目标、行为、需求和心理模型上。除了人物模型能让设计工作抓住重点外， 一些持续性的可概括的用户需求模型也能告诉我们应该如何设计产品。本章将 探讨满足一些广为人知的需求所需的策略：易学性（learnability)和帮助(help)、 可定制性(customizability)、本地化（localization)和全球化(globalization)，以及无障碍性（accessibility)。

• 给用户提供一个现成模板库。Offer users a gallery of ready-to-use templates.

第17章 整合视觉设计

作为交互设计师，你需要花费大量精力理解产品的用户，还要花时间雕琢界面的行为和内容的呈现，帮助用户达到目标。不过，如果没有投入大量工作清晰地告诉 用户有哪些内容，如何与内容交互，那么上述努力就白费了。对于交互产品，这 种沟通几乎总是视觉的，借助显示器完成（就定制硬件而言，也可以通过物理 属性来传达某些产品行为。）本章将讨论有效的目标导向视觉界面设计策略。第3部分将提供更多关于具体交互与界面习惯用法的细节。

• 表明这是什么用视觉；明确这是哪一个用文字。Visually show what; textually tell which.

• 行为不同的元素要在视觉设计上明显区分。Visually distinguish elements that behave differently.

• 从视觉上传达功能和行为。Visually communicate function and behavior.

• 删减东西，直到破坏了设计为止，再把最后去掉的东西加上。Take things away until the design breaks, and then put that last thing back in.

• 遵守标准，除非有极好的其他选择。Obey standards unless there is a truly superior alternative.

• 一致不意味着僵化。Consistency doesn’t imply rigidity.

第三部分 交互细节

第18章 为桌面应用而设计

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

• 无论是运用哪种交互习惯用法，都要考虑实际运用场景的客观情况。The utility of any interaction idiom is context-dependent.

• 对话框是一个房间，去之前要有个好理由。A dialog box is another room; have a good reason to go there.

• 将功能置于需要它们的窗口中。Provide functions in the window where they are used.

• 用菜单来提供一条学习的途径。Use menus to provide a pedagogic vector.

• 禁用掉不适用的菜单项。Disable menu items when they are not applicable.

• 相同的命令要使用相同的视觉符号。Use consistent visual symbols on related commands.

• 工具栏为有经验的用户提供快速访问常用功能的途径。Toolbars give experienced users fast access to frequently used functions.

• 所有工具栏和图标控件都应该使用工具提示。Use ToolTips with all toolbar and iconic controls.

• 浏览和选择任务要同时提供鼠标和键盘支持。Support both mouse and keyboard use for navigation and selection tasks.

• 用光标形状变化表明元键的用法。Use cursor hinting to show the meanings of metakeys.

• 单击意味选择数据或对象，或改变控件状态。Single-clicking selects data or an object or changes the control state.

• 双击意味着单击再加上动作。Double-clicking means single-clicking plus action.

• 在对象或者数据上按下鼠标意味着选择。Mouse-down over an object or data should select the object or data.

• 在控件上鼠标按下意味着预备动作；鼠标释放意味着执行动作。Mouse-down over controls means proposing an action; mouse-up means committing to an action.

• 要让选中这种状态，在视觉上明确而醒目。Mouse-down over controls means proposing an action; mouse-up means committing to an action.

• 拖放候选对象必须在视觉上表明它们的接受能力。The selection state should be visually evident and unambiguous.

• 拖动光标必须在视觉上表明源对象。Drop candidates must visually indicate their receptivity.

• 任何可滚动的拖放目标对象都必须支持自动滚屏。Any scrollable drag-and-drop target must auto-scroll.

• 所有拖动都要去颤动。Debounce all drags.

• 任何要求精确对齐的程序必须提供精确滚动的游标工具。Any program that demands precise alignment must offer a vernier.

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

2007 年6月，苹果发布了iPhone，几乎一夜间，移动设备的定义发生了翻天覆地的变化。它彻底取代了原来糟糕的用户体验。现在，iPad、Android和微软的多点触摸平板的销量不断增加。对于很多人来说，这样一种非常方便的计算设备，想用的时候按下开关就立即能用，关闭时可以立即保存上次的状态，并且允许直接的多点指尖输入，这一切的一切，都远远优于传统的桌面软件、优于传统的点指输入设备。本章的大部分篇幅，将介绍在设计手机和平板类的移动设备时的注意事项及其设计原则。本章后面，我们还将简要讨论一下其他设备平台的界面，包括公共信息台、公共设备、车载设备的界面。

• 大多数移动应用是暂态的。Most mobile apps have transient posture.

• 要限制动画式屏幕转换的次数和出现的方向。Limit the number and direction of animated screen transitions.

• 用教程引导首次使用的用户。Use guided tours to orient first-time users.

• 用覆盖层展示手势的用法。Use overlays to explain gestures.

第20章 网页设计

今天，需要安装在电脑本地的软件越来越少。并且现在，网页已经成为了人与人之间，以及企业与客户之间的最重要、最流行的沟通渠道。这意味着网页体验的质量是无比重要的，随着越来越多、越来越复杂的软件行为转移到网页上， 网页的交互能力也必须要达到和软件相当的水平。在以往，视觉设计师关注“视觉和感觉”，信息构架师关注内容结构。而现在，这些知识和经验是不够用的。在GitHub上可以很容易找到优秀的UI组件。不过，即使手边有这些大量的现成组件，我们也仍然无法很好地回答一些既重要又简单的问题：我们怎样做才能恰如其分地满足用户的需求和想法，如何才能利用好这些部件，开发出具备良好和连贯用户体验的产品。

• 采用永久固定的页眉来保持情境。Use persistent headers to maintain context.

• 带有横向链接的“面包渣”让导航更快捷。Breadcrumbs with lateral links help speed navigation.

• 自动填充、自动推荐、分面搜索可以让用户更快地找到所需的东西。Auto-complete, auto-suggest, and faceted search help users find things faster.

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

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

• 如果你的网站只有一个版本，一定要把它设计成自适应。If you have only one version of your site, make it responsive.

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

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

• 链接用于导航，按钮用于动作。Use links for navigation and buttons for action.

• 用图标来区分列表中重要的文本项。
  Distinguish important text items in lists with graphic icons.

• 绝不要水平滚动文本。Avoid scrolling text horizontally.

• 有界输入要使用有界控件。Use bounded controls for bounded input.

• 仅供输出的文本用非编辑控件（显示控件）显示。Use noneditable (display) controls for output-only text.

• 把主要的交互操作放在主窗口内。Put primary interactions in the primary window.

• 对话框适用于放那些主交互流之外的功能。Dialogs are appropriate for functions that are out of the main interaction flow.

• 对话框非常适合用来整理关于单一主题或应用程序功能的信息。Dialogs are appropriate for organizing controls and information about a single domain object or application function.

• 在功能对话框的标题中使用动词。Use verbs in function dialog title bars.

• 在属性对话框的标题中使用对象的名字。Use object names in property dialog title bars.

• 区别对待模态对话框与非模态对话框。Differentiate modeless dialogs from modal dialogs.

• 不要在非模态对话框中使用终止命令按钮。Do not use terminating button commands for modeless dialogs.

• 不要动态地改变终止命令按钮的标签。Don’t dynamically change the labels of terminating buttons.

• 应用程序无响应状态，必须通知用户。Inform the user when the application is unresponsive.

• 绝不要用临时型对话框作为错误对话框或确认对话框。Never use transitory dialogs as error messages, alerts, or confirmations.

• 所有交互的习惯用法都有其适用范围。All interaction idioms have practical limits.

• 不要堆叠选项卡。Don’t stack tabs.

• 错误对话框愚蠢地停止进度，应该避免。Most error dialogs stop the proceedings with idiocy.

• 让错误不可能发生。Make errors impossible.

• 当软件告诉用户他们失败时，用户会觉得受到了羞辱。Users get humiliated when software tells them they failed.

• 做，不要问。Do; don’t ask.

• 让所有的动作都可以撤销。Make all actions reversible.

• 给用户提供非模态反馈，避免用户犯错。Provide modeless feedback to help users avoid mistakes.

• 很高兴，你看到了结尾，我在这里埋了个彩蛋：

回看青葱岁月，在大学的时候，我选择的是工业设计，因为想要做一款令人称道的产品，也拿了一些奖项。但是我不满足于绘图和建模，更希望把产品做出来，所以毕业后做了一段时间程序员，现在又在做产品经理。不管角色怎么变，我心中的梦没有变：“做一款人人称道的互联网产品”。

但我也相信，像乔布斯、雷军、张小龙那样产品大神，也不是一朝一夕的炼成的。除了对梦想的热情和努力以外，更重要的是机遇。

今年年初，我们团队开始在打造一款人工智能产品，希望能够利用AI来改变人们的写作方式和习惯。过程中也有很多艰辛和挑战，但我觉得是值得的。这是我对于产品设计师有5条最基本的用人标准：

1. 本科及以上学历，计算机或者设计类专业为佳： 我并不是相信学院派，但相信大学期间养成的思维能力对人的一生有重要影响，所以科班出身为佳，但不是绝对；

**2. 熟悉WEB端或移动端软件设计、交互设计、UI设计规范：**我并不是墨守成规的顽固派，但我相信好的设计不是灵光一现，而是站在前人的肩膀上，先熟悉再超越，不懂行业规范的人，只能是外行和初学者；

3. 懂技术（设计），有开发（设计）经验为佳： 我并不是希望设计师去敲代码，而是希望把产品脚踏实地做出来，光有天马行空的想象是不够的，懂技术可以帮助你更好的理解为什么要这样做，也能更好地和开发沟通；但是如果是技术出身的同学，光会敲代码也是不够的，必须要有设计思维，懂设计可以帮助你更好地理解为什么要这样做；

4. 自驱力强，有责任心，善于沟通，有全局观，有逻辑思维，有目标导向性，有效分清楚轻重缓急，与团队共进退： 这一系列是日常的工作思维和方式，因为我们是创业团队，更需要沟通、责任心，而且你还要逐渐承担产品经理的角色，学习能力也相当的重要；

5. 了解人工智能相关技术，有写作和总结的习惯，对文字创作感兴趣： 我们做的是人工智能写作产品，如果自己的产品都不热爱、不去使用，我相信是不可能做出好产品的，如果你没有写过文章可以绕道而行。

如果对于此职位有兴趣，也可以私信我。微信 gold3bear