《交互设计的第一原则》笔记分享（一）

前言

这是一套较系统的交互设计原则，我将会结合一些案例进行讲解，希望你有收获。

此书属于作者博客分享，并未成书出版，总结于14年，在阅读翻译过程中发现很多案例及原则已经过时，因此结合当下的互联网产品和新潮的交互设计原则对其进行了补充。国内交互设计起步较晚，我在杭州曾经结识过第一位中央美院的交互设计专业毕业生学姐，那是国内第一届交互设计专业毕业生，且最终学姐从事的是运营设计。

因此国内交互设计领域的发展，既要依托大厂优秀设计团队的成长与分享，也要依靠外部大环境下愈发重视交互的趋势的形成。虽然职能划分目前仍没有一个定论，是独立划分出交互设计师，还是UI晋升产品设计师、UED设计师？但有一个准则却是大概可以达成共识的，那就是，产品经理职能愈发向业务层倾斜，懂得在战略层业务向高屋建瓴筹备战略的产品经理，能为企业创造更多的价值。而交互逻辑信息架构等交互设计领域的职能必然分发下来，由中下游的设计师来负责，即在座的各位。有压力但也是一条康庄大道，共勉。

文章简介

此书作于2014年，作者：布鲁斯“Tog”Tognazzin，主要针对PC端的设计经验整理并成书，但某些原则对移动端同样适用。其中某些观念或者已经过时或者已经成为交互设计界通用的指导原则。总之，本书对当前的交互设计领域仍然有较大的指导意义，对于其中一些过时的理论或者落后的案例，我会结合当下的产品和设计案例对齐进行补充，以便大家在读这篇读书笔记时更加高效。（其中有些案例，95后的我听都没听过），由于篇幅太长，分为三个部分输出。

作者简介

 作者简介：布鲁斯“Tog”Tognazzini  和雅各布尼尔森以及唐诺曼是尼尔森诺曼集团的三位成员，这是一家专注于人机交互的“梦之队”公司。Tog是WebMD的首席设计师，WebMD是由Silicon Graphics和Netscape创始人Jim Clark于1996年2月创立的超级垂直初创公司。在此之前，他是Sun Microsystems的战略技术杰出工程师。在Apple工作的14年间，他设计了Apple的第一个人机界面，并编写了八个版本的Apple人机界面指南。Tog是一位多产的发明家，已出版了两本书，Tog on Interface和Tog on Software Design，以及共同创作的许多其他书籍。

一：谨慎进行视觉设计改版

原则1：视觉设计应该由专业的图形视觉设计师来完成（交互或PM等岗位不应过度干涉而损害视觉设计专业性的发挥）

原则2：视觉设计优先级应低于可用性，视觉设计改版应当不减少（有益于或不损坏）用户体验。（个人补充：1.考虑到目前快节奏的产品开发模式以及收益优先业务优先的产品战略，特殊情况可以通过损害体验来促进业务目标，例如导航类产品投放大量淘宝广告。2.产品有做视觉差异化需而脱颖而出的情况可以在损害一定体验的情况下突出视觉）

原则3：新增视觉设计元素或进行视觉改版之后，需要通过测试来验证视觉对体验的影响，是损害还是收益，并根据测试结果采取对应措施，补救或者继续优化。（个人补充：目前成熟互联网公司一般都会采取小范围测试，ABtext，灰度测试等等，这种设计后验证的方法快速高效，收益高，而更专业些的用户访谈和问卷等方式则需要耗费大量时间准备、收集整理及分析，并不适用于敏捷开发的产品节奏）

二：预测用户所需

原则：为用户提供正在交互的流程中所需的所有内容和工具

产品应当预测用户的需求，保证用户在当前状态流畅高效的完成目标。不应使用户去其他页面寻找功能来解决在当前页面遇到的问题或当前迫切的需求。必要内容应当显示全面，必要功能应当可见。（以淘宝为例，产品详情页应当展示必要内容如价格、名称、优惠力度，必要功能如“加入购物车”、“立即购买”应当在当前页存在。）

做到对用行为的正确预测需要对用户当前任务及用户本身有足够了解，另外信息的排版，功能的布局需要合理，使用户很容易获取。错误的预测会导致严重的用户流失。

三：用户自治

原则1：用户有权利 自治，即自由的执行操作，以自己喜好的方式完成任务，但在给予自由的同时也要有规则作为限制，包含规则的自由才是真的自由。

原则2：使用户能做出自己的决定，即便是审美上较差或者行为效率较低的决策。（可以解释为不要用计算机的工作方式指导用户）

原则3：行使负责人的控制权

（产品设计人员应当提供关键的规则、限制，如表单的极限值，如手机厂商对手机显示最小号字体的限制。通过预测用户行为合理的控制某些元素以减少错误，避免用户产生沮丧感。）

这里作者提出一种预想：使用眼动仪追踪来减少用户意外触发链接的方法

通过眼动仪的追踪（作者假设手机相机内置此功能）判定用户在触发一个链接的时候，视线是否在此链接停留足够长，是则跳转，否则不跳转。

原则4：使用状态机制判断限制的必要性

想要用户获得优秀的体验需要用户能够自治，而自治需要通过设计人员的限制来达到最优效果，但有时候信息不足无法形成限制的条件。所以是否去进行限制需要结合使用状态（也就是我们所说的场景）举个例子，有些场景button需要提供disable状态，以避免用户未填写必填信息而执行下一步的异常操作，但有些场景不存在disable状态，因此在不同场景下，是否提供限制来提升体验是要结合场景结合使用状态来判断的。

原则5：在当前页保持完整且最新的状态信息

可以理解为用户应当在当前页获取其所需的关键信息，而不需要跳转到其他页面去查阅，再回到目前正在进行的任务中。

原则6：确保状态信息准确无误

作者提到苹果更新时显示5分钟，但新系统五分钟更新完毕后还要上传手机上所有其他数百兆的信息，被骗的用户无法预测何时设备能恢复原状。实则仁者见仁智者见智，很多产品会采用一些善意的谎言，使用户获得更舒适的体验虽然有时是欺骗，很明显的例子就是游戏加载的进度条。此体验项很多时候会为业务项让路。 

下面则是一个反面例子。 网易最新手游明日之后在登录排队时提供了一个虚假的时间信息，实际排队时间是预计时间的许多倍，最终造成谎言被戳破，用户极度反感的情况。（这一点直接导致此游戏评分降到极低） 

四：颜色

原则1：考虑色盲用户

原则2：不要因为有色盲用户而避免使用颜色

颜色是有限的沟通力中的重要组成部分，颜色能传达不同状态、情感，是界面设计中不可或缺的元素。

五：一致性

以下四个一致性原则即为交互人员提供了极高的产品设计自由度，又不会严重破坏产品体验的一致性。

一致性的层级

以下是从高到低6个一致性的层级

1.顶级一致性

• 平台级一致性

• 内部一致性

2.一系列产品的一致性

• 例如微软的office全家桶

3.单个应用程序

单个产品的视觉语言要追求设计一致性从而促进 体验一致性

4.设计元素一致性

小的可见解构，如icon、button、表单等

5.隐形元素的可见性

其中提到一些自以为聪明的小元素的隐形设计，实际对用户造成困扰。如果你绝对坚持伪装一个控件，其规则应当清晰透明。（一个例子是操作系统的窗口可以通过拖动边界来放大缩小，构成大部分操作系统的关于这个交互的一致性。它实际上是隐形的规则，但简洁合理，因此成为用户习以为常的操作）

6.解释用户行为

即不轻易改变用户已经习以为常的交互行为。例如翻页操作按钮位于右下角，而不应当将其放在左上角。使用户忘记潜意识的操作路径而去学习新的交互是一件令人沮丧的事情。再如mac和windows的快捷键不同，用户在不同系统使用软件完成任务时，需要频繁的忘记/重新学习多次。 

诱导不一致

即设计差异的重要性，当事物行为不同时视觉的不一致是有必要的。保存操作与删除操作必然需要呈现出较大的视觉差异。而当产品有更新和改版的情况下，一定要提示差异点，否则用户会用以往的方式来使用产品然后发现无法正常完成工作。

连续性

基于一致性的进一步提升。这一原则适用目前的产品设计，单个产品的体量不断加大，会衍生不同的模块，如电商类产品中加入金融板块（京东金融模块），此时在继承基础的设计语言的基础上，更要做出差异化，相同且不同，能让用户感知到这个模块自成体系。

与用户期望的一致性

使用用户已经养成习惯的设计原则，如果没有更好的选择，请保持原样。 

六：默认值

1.字段内的默认值应当很容易删除或更改

当用户选择该默认项时（以输入框为例如更改个人信息的备注），应当自动选择所有值，以便用户可以直接使用空格或者删除键来清除它，或者在用户输入内容时自动清除默认值。再次点击以取消选择整体，将文本精确定位到点击位置。（这可以概括为比较标准的表单输入规则）

2.默认值应当是智能响应的

并非一切选项或input项都需要默认值，需要设计师根据用户需求去评估是否有填充默认值的必要。而某些情况，默认值可以自动生成，智能匹配，如外卖、租房等产品智能定位地理位置，并填充当前所在位置为默认值。

3.默认值不应是专业术语，而应浅显易懂

通过用户测试以找出哪些术语使用户更准确的预测这一选项传达的内容。（事实上，专业文案写作已经是一个细分的设计技能，以下提供一些之前整理的专业文案写作方法，力求简洁清晰传达信息）