《交互设计10原则》复盘

✏️  我理解的“容错性”主要分3个阶段——操作前的引导预防、操作中的提醒纠正、操作后的帮助解决。

设计时，我们应充分考虑可能出错的全流程，也包容用户出错的行为，并在出错时依然保证功能流程的顺利进行，使产品“好用”。

1、置灰错误选项。

置灰不可操作项或“已读”项（这对用户而言方便预防自己重复点击，虽然不属于“错误”。）

案例：飞猪火车票购买的界面，不可购买的日期置灰；小红书的商品购买面板，无货的置灰。

2、将操作设置复杂。

谨慎操作、二次确认；警示“删除”类危险操作；

比如黄油相机App的个人主页，退出会二次确认“是否保存”。很多app都有类似处理。

此处的“二次确认弹窗”避免了用户“忘记保存”时的误操作。

🔔 补充思考：这里的弹窗只是询问“是否退出”，但出错的本质是“是否需要保存”。那么其实可以进一步简化步骤——

这和我们在关闭设计软件时弹出的提示窗同理，抛开误点，其实很多时候我们目标就是要“退出”，无论“是否保存”最后都还是想退出，所以最好是在提供“保存”选择的同时，也不耽误我退出～而黄油相机的做法则是得先“取消”来关闭这个弹窗，再去点右上角的“保存”，稍微有点麻烦。

3、设置明显限制。

如：支付宝验证码的位数限制，手机解锁的密码位次。

4、展示提醒信息。

多见于填表单，如输入框中的占位提示文字；或者陌生功能的引导说明。

举例：个税app的表单；eagle图片信息填写。

用户正在进行操作，在还没有完成操作、造成结果的时候，软件可以对用户进行预提醒。

可分为「实时提醒」和「间歇提醒」。

1、实时提醒

实时提醒不需要考虑用户动作何时结束，在用户动作进行中提醒，比如文本输入的实时纠错、字数统计。

举例：微博app

发微博时字数统计（默认140字结点，超过400字就提示可转为文章，超过5000字符必须转为文章），超过5000字后字数变成负值。比如-4表示超出4个字符，辅助提示用户删减多少字数才能正常发送。

2、间歇提醒

间歇提醒相对实时提醒则会有一个主动触发点。比如，在填写表单的过程中，输入框失焦瞬间进行校验和报错（提示“昵称已被注册”、“手机号输入错误”等），或者点击「提交」按钮后报错。

以站酷的登陆任务为例（其“操作中”，是开始填信息到成功登陆之间的过程），填写后反馈“账号未注册”。当然，一般来说单个输入框完成后立马给提示，会比全部填完、点击“提交”后再提示的体验更好。

1、连续操作：任意回退。

比如编辑类软件的“历史记录”、美图类应用中不断撤销到上一步。

举例：黄油相机、CAMERA360的照片编辑操作中，均提供了可连续回退的功能（但后者比前者还多了“重做”）。

2、毁灭性操作：一步回退。

多见于删除后弹出有“撤回”按钮的toast。

举例：在Eagle应用中，①删除图片后会立即浮出“操作成功”的Alerts，且带有【撤销】按钮；②在文件信息栏处删除其文件夹归属也会有同样反馈。

3、发生错误：展示状态+解决方案。

比如空状态页说明“网络故障”的同时也提供“刷新”按钮重试。

✏️「交互一致性」体现在各种页面控件布局、操作交互的一致性、页面的跳转逻辑的一致性，总而言之即“行为的一致性”——指人们的行为倾向于和过去的行为与判断相似。

「交互一致性」和「视觉一致性」往往有交叠，毕竟视觉会影响认知，认知影响操作。

1、建立稳定的“预期”，降低用户对界面的学习成本。

2、加强对产品品牌的辨识度、可信度。

3、提高设计师工作效率。

    a）保证不同设计师方案的一致，易于交接上手

    b）复用资源，降低设计成本

    c）开发同事可以提高开发速度

1、界面排版。使认知和习惯保持一致。

比如不同版块使用统一的列表布局形式。

举例：黄油相机app中，首页【滑一滑】和【模板】页都使用了瀑布流的图片布局结构，且单元的头像名称、图标的结构样式也保持一致。（另外，个人中心和设置页中「喜欢的照片」也保持了这种布局一致性。）

2、交互控件：相同按钮呼出相同的控件，符合预期。

举例：黄油相机中的“更多”操作。

首页「关注」的动态列表、活动页乃至「我的」页面，右上角都有“更多”图标。且点击后浮出统一的“分享和更多操作”的控件面板。根据对象属性，承载的功能或有不同。

3、多终端的体验。跨平台的使用，切换无压力。

（参考文章：多终端一致性设计）

iPhone、iPad都归于移动端的使用，交互模式以屏幕触摸为主；Mac上客户端和网页版则为固定使用、交互以键鼠操作为主。不同终端的设计，往往会根据设备本身的特点（如屏幕尺寸、显示方向、交互形式等）来做布局、触控以及形式的优化。

以百度网盘为例：

百度网盘｜Mac & Web

Web版更新后和客户端的一致性更高了。核心功能的层级布局、信息显示、操作形式大体相同，但Web版还增加了“选中文件夹预览内容”模块，比客户端更方便。

两者的选中对象后，顶部按钮组都对应显示出更多操作，也可鼠标右键调出“更多”菜单，符合用户的心理预期；但图标表现、鼠标悬浮聚焦样式等有区别，大概是客户端还未优化（这么一对比我更偏爱Web，视觉感受也更好；客户端目前体验较差。）

百度网盘｜iPad和iPhone

相对于电脑端，移动端提供了更多服务、工具整合。

iPhone 和iPad HD版首页的智能化卡片布局保持一致，但比起iPhone中的单列顺排，iPad HD版还充分利用了自身的大屏空间设计为二分栏，并有横竖屏适配。（PS：iPad上“管理我的首页卡片”在显眼处，而iPhone上却放在了页面最底部，隐藏得比较深，我之前都不知有这玩意儿 =_=''）

4、文案。

文案的风格和表意要保持统一。（参考：设计师要懂的微文案设计）

举例，最右和哔哩哔哩漫画用户主体为年轻人，调性偏趣味活泼，或耍贱卖萌，或中二气氛浓烈。这类产品的缺省页往往是以逗趣文案搭配上各自俏皮的IP形象动作，情绪表达、画面感较强；文案多带语气词，以及某些字符小表情和情绪标点符号（如声音拖尾的“～”符号和感叹号）。除了视觉风格，最能直接传达信息和情感的就是文案，其实目前我们对文案情感的把控可能没有很严格，会先强调表意明确；而且毕竟是传递普适内容，一般不会用“特点太过”的文案说明（比如文言文），得保证大多数用户都能接受和理解。另外，产品对应语言不多的情况下（比如只有中文版），文案构思起来比较容易，若是要考虑多语言情况，则还要受到各地语言风俗习惯、长短适配的限制。

🔔 也有特殊情况。不遵守一致性时，需要有充足的理由。比如为了满足某种特定需求进行取舍，在一致性和功能考量之间做平衡。“一致性并不是枷锁”。

优秀的设计会通过易理解、表意准确的意符，将产品的目的、结构和操作方法清晰得表达出来。

不同的意符，表达出的操作方式的提示不同。现实中我们会根据产品的构造特点去旋转旋钮、上下拨推电闸等等，App中也往往对应现实情景做交互控件。如下图，我们能清楚识别出是“点击”开关还是“滑动”调节。

意符可以简单记为“表达意思的符号”。光看汉字我一开始把它对应成了“图标icon”，但其实意符（Signifier）包含图标。（参考文章：App中的交互手势和意符设计）。

✏️ “意符”是能告诉人们正确操作方式的任何可感知的标记或声音，文案、图形、引导等都可归于这个范畴。正确的意符，表达正确的“示能”，让人容易理解产品的用法并能做出正确的操作（达到“Don’t let me think”），反之则让人疑惑甚至出错。

关于意符，此处强调文案的重要性。我们在设计时一般会注重图标、页面结构等的表现，其实相对其他视觉元素，文案始终是最为“保底”的辅助说明方式。用图标难以明确表达时，尤其需要文案上场支援。（同样可参考：设计师要懂的微文案设计）

1、清晰表达信息。以弹窗上标题、按钮文案为例，是否有歧义。

2、展现产品个性。比如卖萌风格、趣味性。（见「一致性」中文案部分列举的最右、bilibili漫画案例）。

结合案例来理解——

正确的意符｜潮汐App：

1、「小憩」在定时操作时，随着滚动变换数字，下方小字会对应提示“闹钟将于xxx时间响起”，提供了明确的辅助信息，让用户更直观知道操作的结果。

2、开始“小憩”后，首页原本的「中午好」文案变为了「正在小憩」，标识出明确的状态信息；

3、「关闭」时需长按（避免误触），按下时在按钮上方给出了“进度条”来告知用户“需长按多久”。

失败的意符｜米家app的空调定时：

说到失败的意符，我瞬间想起之前使用小米空调遇到的“坑”——

♦️ 通过米家控制空调定时，若想设置大于2h，则只能通过“自定义”。但点击“自定义”跳转到了“网络定时”。这里的文案不统一、页面关系让人迷惑，此为其一。

♦️ 第二，开启「网络定时」，仅根据辅助文字“空调将按照设置时段自动开启或关闭”，我并不能确定这个「只执行一次」是开关机都要执行，还是依据当前空调状态对应执行下一个操作即可。

♦️ 第三，点击「保存」回到主页后，主页（若是设置2小时则会显示倒计时）和「定时关机」控件面板上没有任何变化和标识，以至于疑惑刚刚是否设定成功，只好再次操作一遍去确认。

♦️ 最终定时设定的实际结果是，空调并未在第二天早上如愿关机（还是自己手动来关了），但是在第二天晚上22:30自动开启？？？？

总结下来，这款米家空调的定时控制中，有挺多地方给用户的顺畅使用造成了阻碍，让人迷惑甚至犯错。若优化，需要给予更清晰的解释说明和状态标识；或者对比「华为智慧生活」App对台灯定时设置的设计，将开启关闭分割开，即便没有详细文案说明，也能清楚理解如何操作。

✏️  即时反馈 意味着通过合适的反馈以及和程序之间的交互，让用户时刻知道现在发生了什么。

用户与程序的交流互动有来有往，用户的每一个操作都应该给予其反馈，让用户明白他的操作有被接收到，无论操作正确或错误。

👀 记得自己“点不动”按钮时内心的焦躁么？还疑惑是手机卡死了还是软件bug～～不禁想说“大哥，你好赖都给点反应撒？你这样显得我很呆。”

即时反馈有3个知识点：⭕️有明确结果的反馈；⭕️无明确结果的反馈；⭕️置灰按钮不反馈。

用户进行操作后，应立即给出反馈。比如点击按钮后图标样式发生变化，或者有页面跳转到二级页面，还有弹出浮层等等。

举例：lofter的喜欢、点赞，点按图标发送样式变化。

⚠️但需要注意，反馈是必要的，但也不应该过多而打扰到用户的正常使用（尤其烦那种得点击关闭的对话框）。

反馈不能重复

比较普遍的错误做法，是提示框（toast）的过多使用。其实已经有样式变化反馈的可以不用再给重复的toast，除非有额外的信息需要展示。

举例：知乎的赞同和喜欢。

「赞同」或「取消赞同」已经有前后样式变化，为何还要出现toast呢？而且出现在顶部，用户聚焦在底部“赞同”操作时突然被弹出的toast抢去目光（眼睛：其实我也不想看它，但有东西飞过我忍不住）。比较奇怪这样做的意义。

而「喜欢」略有不同，它已有图标状态变化，但页面中间弹出的toast还承载了情感化设计，有读者与作者的互动交流感觉在。不算反馈重复，是挺好的交互。

页面正在加载以及加载失败，都要给出反馈提示。

对于加载失败时，需要注意：⭕️告知失败的原因，⭕️给出解决办法。

举例：微信网络异常时～1）【朋友圈】有新动态时，进入朋友圈会自动刷新，左上角有朋友圈图标的旋转动效表示加载中（但是网络不好时会加载会停住卡死，加载太久没反应也不好，最好有toast提醒）；

2）断网时，【主页】标题文案追加“未连接”，且有红色警示状态栏说明“当前网络不可用，请检查你的网络设置”。用户还可点击跳转到二级页查看相关说明，辅助解决问题；

3）【看一看】的热点广场“加载失败，请检查网络后重试”，并提供了「重试」按钮。

即时反馈很重要，设计工作中要注意核对异常状态是否都有考虑完整，且要走查反馈是否如预期方案，查漏补缺。

🔔 异常状态：无网络、无响应、无数据、网络慢，是否有缓存，过多数据（比如大量聊天记录、 用户填写字数超过限制等），过少数据、数据过期、状态的改变（如换城市）

置灰按钮不应该有反馈，页面应该让用户明白为什么置灰。

“禁用”本身就表示无法点击、点击无效，若点击后还用toast反馈来向用户解释这个不能点击，与置灰按钮的意符表现相违背，也说明这个禁用按钮是失败的意符（明明禁用，却让用户依然想点击，甚至点击也有反应）。

参考文章：

《隐形力量：对齐，方向和焦点》、《设计原则 II - Alignment 对齐》、《对齐在APP中不易被察觉的3点》

人们的眼睛总是喜欢看到有序的事物，仿佛通过某个视觉纽带（“隐形的线”）将部分元素连接在一起，令视线有基准可循。不但让人在视觉上带来安稳感，更引导暗示人们元素之间的关联性，助于用户理解其中的含义。

我把对齐记为3种类型：

如文字左对齐、右对齐、居中对齐等，图文混排的顶对齐、垂直或水平居中对齐等等。

对齐的根本目的是使页面统一而且有条理，要注意选择尽可能少的对齐方式。对齐的种类越多，页面会更乱。

在UI设计中，我们经常需要考虑视觉重心对齐，比如绘制图标的时候。

要注意不同形状造型的重心差异对视觉的影响，在交付切图时保证视觉对齐、落地时达到理想效果。

除了局部元素的对齐关系，还有宏观上的布局对齐。注意整个页面的平衡和规范。

不同的功能版块往往使用差异化的布局和样式来区分，对应设备也会选择不同的排布对齐方式（比如「一致性」里举例的多终端适配）。

举例：酷狗音乐

播放页的横竖布局分明，各版块整体上有两端对齐，版块内元素垂直居中对齐。 另外，“音效”所在的5个图标组，由于“更多”图标的“3个点”视觉占位太窄，进行左右两端平衡、中部均匀分布后，中间的下载图标并未在界面正中，而是偏右一点（不过影响不大）， 考虑到了整体视觉平衡，否则该栏会显得更加偏左。

距离上：对应“邻近原理”，设计时，将彼此相关的项归在一组，使用户能够正确地理解元素之间的关系。比如设计时我们通常会设定组件、元素之间的距离规范～大间距、小间距。

层级上：依据信息内容，把同类信息收进一个类别，可提高用户寻找和识别效率（这一点也可运用到希克定律中）。

设计时，我们通常将界面中相同类型的信息，用相同的表现形式。模块也往往根据相似性进行分类。（其实和“一致性”在界面中的运用是一个道理。）

【相似原则】可以帮助我们组织和分类组中的对象，并将它们与特定的含义或功能相关联。

单个元素样式（文字、颜色、形状等），状态样式（图标的选中、按钮的点击、多选控件等）。

以文字来说，标题、副标题、正文的层次统一，根据样式能快速识别文字类型。

举例：在豆瓣中，不同版块的标题样式一致，引领各个区块。电影列表中的名称文字、评价预览小字的样式也分别统一。

另外，运用“逆相似”，可以达到“破局”、吸睛的效果。由此又联想到「对比原则」，在“主次分明”中使用较多。

除了将重点信息单独摘出来展示，站在用户的立场去定义“重点信息”；也可以是为产品角度，去强调“想让用户注意到的内容”，比如活动广告。

✏️ 「主次分明」展开想——使用「对比」的设计手法，基于格式塔原理的运用或逆运用（诸如邻近性、相似性、主体&背景、共同命运等），对重点信息进行强调突出，使得页面各部分层次分明，完成预期的视觉引导；也能起到增加视觉层次的作用。

视觉上，我们也不怎么愿意面对一个全是“设置列表”的应用吧，还有“文字太长不看”系列～～

联系设计原则中的「对比原则」，将「主次分明」的方式分为3类：

1、大小/视觉占比。个体元素的视觉占比。比如字体大小和字重，图标/形状区块的描边vs填充（按钮，卡片）。

2、颜色。重点色突出，如对比色的使用。

3、形状。比如导航标签栏的异形。

1、满 vs 空。多元素组合在空间上的视觉占比形成大反差。

2、Z 轴层叠关系。比如悬浮层、弹窗。

3、展开 vs 隐藏。把不重要的内容折叠收起。

举例：喝水时间App

①②中的版面均有较大留白。①中进度主体占比大、大面积留白也使得中部的主体更突出，且下方将次要内容收起来只占少量区域，拉起才看到更多；②中大面积纯色，操作按钮组作为主体成为视觉焦点；

③其实和弹窗类似。运用了主体&背景关系原理，模糊背景，重点突出上层信息，主次关系明显。另外还通过颜色、大小强调了按钮。且这种模糊背景的设计有“景深感”，营造空间关系，使主体信息离用户“更近”。

比如支付宝金刚区的图标小动效～还有某些活动banner也是动态形式，让人很难不去多瞅两眼。

很多App中的广告小气泡也喜欢用动效元素，虽然占比小，但足够有吸引力，能引导用户点击。

相关文章：《交互设计定律和用户体验地图》、《UI&UE实用方法论 | 费茨定律》、《UI&UE实用方法论 | 教你用费茨定律做设计》

在学习费茨定律时，我有搜刮了一些文章参考，其中有不少是把费茨定律分析得比较发散。但发散过度也有可能会变成干扰～这里我们还是控制下思考方向hh：

D｜距离

目标在手指附近，或者距离上一个操作点的位置近。

W｜尺寸

放大可视按钮的尺寸，或者扩大操作热区。

🔔 需要注意的是，费茨定律强调“指点”操作，论的是手到目标的距离和目标的大小。手势里面不涉及这些因素（没有客观目标和尺寸概念），不在讨论范围。

Pinterest的长按调出更多按钮在手指附近，这就属于费茨定律，因为侧重点不是手势（换成按钮点按也能行），是“按钮出现在手指附近”的设计减短了手指到按钮的距离。（类比鼠标右键调出菜单，使鼠标到下一步的路径较短）

微信聊天列表滑出“删除”按钮的操作同理，且点击“删除”后按钮原位扩大，同时满足“手指到按钮距离近”和“按钮尺寸”。是容错性、同时也用到了费茨定律。

1）按钮做大点（W大点）更易于点击。也更容易找到。

2）将按钮放置在离开始点较近的地方。比如在手指附近，则移动距离短。

3）相关按钮之间距离近点（D小点）更易于点击。比如左右切换页码。

4）利用手势操作使得按钮灵活出现在手指附近。

5）通过费茨定律的反向使用，可以降低按钮被点击的可能。比如增加距离、甚至层级，将按钮进行收纳。

希克定律指的是：一个人面临的选择越多，所需要作出决定的时间就越长。有时候在选择中花费太长时间从而导致决策失败。（os：代入选择困难症？）

🔔 注意侧重点是“是否通过减少选项来提升操作效率”，如果本身就没啥选项，就不算希克定律（将多个选项打包成一个大类，属于对选项的组织，那么符合）。

对应到交互设计四策略，运用方式可概括为——

删除：

当选项数量千扰到用户決策时间，就减少选项。比如可以把类似的选项合并，冰激淋可以是单类，也可以归到“清凉一夏”中。

组织：

对选项分类，让用户有迹可循。

隐藏：

当需要引导用户选择时，保留重要的，隐藏/锁定/置灰不可点击的项 ；

转移：

将复杂任务拆解成更小的步骤。分步操作，专注当前行为，就可以节约用户作出决定的时间。

在「训练计划定制」版块做基本信息的录入。keep采取了分段流程形式，依次对项目做选择，专注当前行为，就可以节约用户作出决定的时间。 在“添加运动器械”时，选择“是”与“否”会有对应不同的反馈，选“是”时才进一步出现“器械的选择”。这里根据场景做了信息细分，排除了不必要的干扰，没有一股脑地把「运动器械」相关的内容一次性展示（这也是无纸化办公的方便之处hh～）。

♦️ 选项不要减到只剩一个。要让用户有选择——要保障用户的自主选择权，才会更容易被用户接纳；用户需要掌控感，是自己选择，而不是被迫只能这样选择。

♦️ 希克定律不适用于复杂的决策。如果决策需要广泛阅读、研究或长期深思熟虑，希克定律将无法预测做出决定的时间。就比如论文写得详尽深刻，是严谨而全面，不属于“越少越好记”，但“目录框架”仍然满足“越少越清晰”。