从一个让人恼火的右下角取消按钮，谈怎样不背叛人的直觉
体验一个类似收银台的操作界面时，右下区域放着一个取消类按钮。
那一瞬间，它看起来更像“继续”或“确认”会出现的位置，差点就按错了。
很烦。
但这并不意味着要发明一条教条：“取消按钮绝对不能放右边。”不同系统、不同产品有不同惯例，按钮在右侧本身并不是罪。
真正的问题是：用户根据过去经验预测的行为，是否和界面实际发生的行为发生冲突。
人面对新界面时并不是白纸。手机、网页、收银台、售票机、遥控器、电梯，都在不断训练我们。设计一旦违背这些经验，就会出现一种很讨厌的界面：认真想能懂，但手一快就容易错。
很多日常误操作并不是“深思熟虑之后做出错误判断”，而是因为太熟、太快、太累，或者两个相似按钮靠得太近。
这篇文章从一个小小的取消按钮出发，再扩展到内容网站的自我审计，用研究和实际设计原则回答一个问题：
什么才叫真正对人友好的UI/UX？
答案不是“多写说明”。
而是：别背叛预期，降低误触，让错误可恢复，不要把暂时不需要的选择强塞到眼前。
0. 30秒版：别只问“用户为什么错了”，先问“是不是设计得太容易错”
- 相同文案应该产生相同类型的结果。
- 常用动作尽量遵循熟悉的位置和惯例。
- 后果差异巨大的操作，不要用几乎一样的样式紧挨着。
- 高代价操作优先考虑可撤销；无法撤销时，要在执行前说明具体后果。
- 点击目标要够大，也要和邻近操作拉开距离。
- 高级功能可以保留，但不必第一次就全部展示。
- 不要只看选项数量，还要看比较有多难。
- 观察“点击后立刻返回”“刚开启就关闭”等纠正行为。
UI不是考试。
目标不是“用户能不能研究明白”，而是不用研究界面，也大概率能做对。
1. “直觉”通常不是魔法，而是过去经验的复用
人会在脑中形成“这个系统大概怎么工作”的模型，UX里常称为心智模型。[1][2]
放大镜像搜索，左箭头像返回，垃圾桶像删除，三角形像播放。
用户并不会每次都重新推理这些含义，而是在复用以前学到的界面语法。
因此，为了“创新”把搜索做成一颗星、把关闭做成陌生符号，很可能让设计师觉得新鲜，却让用户开始做题。
NN/g的可用性原则强调，界面应符合现实世界和行业惯例，并保持内部与外部的一致性。[1]
空间上的对应也重要。关于刺激—反应兼容性的研究表明，当空间提示和需要的反应不协调时，错误会增加。[3]
原则很简单：
不要让用户把已经学会的经验清零。
真正值得创新的地方再创新，其余地方借用大家已经熟悉的语法。
2. “理解错了”和“手滑了”不是同一种错误
一种情况是用户误解了系统，所以做了错误决定。
另一种情况是用户明明知道，却按错了。
NN/g大致把它们区分为mistake和slip。[1]
如果以为按钮是保存，其实是删除，可能是理解问题。
如果知道那是删除，但因为它紧挨着保存而误点，更像slip。
对后一种情况说“请仔细看标签”很弱。
如果UI要求人每一次都保持100%注意力，那设计本身就把工作甩给用户了。
最危险的模式之一，是把后果差异巨大的操作放在一起：保存和丢弃、发送和取消、前进10秒和跳到另一篇文章。
NN/g也指出，破坏性操作和确认操作靠得太近，尤其在赶时间或重复操作时，容易发生误点。[4]
后果不同，位置和视觉层级也应该不同。
3. 加确认框之前，先问能不能撤销
删除、退订、全部清空、放弃修改。
看到这些危险操作，最容易想到的是“再弹一个确认框”。
但确认框不是魔法。
如果每件事都问“确定吗？”，人很快会学会不看内容直接点确定。NN/g建议把确认留给严重且难以恢复的操作，写清具体后果，并尽量提供撤销能力。[5]
“确定删除吗？是/否”很弱。
“将删除3项，30天内可恢复” “删除3项” “保留”
更容易理解。
对人友好的设计不是幻想“人永远不会错”，而是让犯错的代价变小。
4. 按钮不仅要够大，还要和邻居保持距离
WCAG 2.2的Target Size (Minimum)要求指针操作目标原则上至少为24×24 CSS像素，或者拥有足够间距。[6]
W3C自己的说明示例非常直接：本来想按Submit，却误按了Cancel。
Enhanced标准使用44×44 CSS像素，Apple也一般建议按钮的可点击区域至少为44×44点。[7][8]
但把所有按钮放大到44也不是万能药。
还要同时看：
- 大小
- 间距
- 操作后果
- 使用频率
- 是否位于屏幕边缘
- 是否紧挨着外观相似但含义相反的控件
两个都很大的“保存”和“删除”按钮挤在一起，照样能成为陷阱。
5. “拥有功能”和“现在就展示功能”是两回事
功能强的产品会不断长出功能。
听文章、速读、收藏、播放列表、章节移动、上一篇、下一篇、学习模式、设置、离线保存。
它们都可能有用。
但第一次就全部展示，会变成功能展览会。
渐进式披露的做法是：先露出高频、核心的少数功能，低频或高级功能在用户需要时再展开。NN/g认为这种方式有助于学习效率、操作效率和降低错误率。[9]
实战原则可以浓缩成一句：
别删，先折叠。
豪华全家桶很好，但没必要把所有配料都塞进来喝水的杯子里。
6. 选项越多越坏吗？没那么简单
Hick定律讨论的是备选数量或不确定性与反应时间之间的关系，在HCI里依然是重要基础。[10]
但现代综述也说明，刺激—反应兼容性、练习、超大选择集合等都会影响简单关系。[10]
“选择过载”同样不是无条件成立。
2010年的元分析发现平均效应几乎为零，但研究之间差异很大。[11]
2015年的元分析则指出，选项集合复杂度、决策任务难度、偏好不确定性、想减少努力的目标等，会增强选择过载。[12]
所以问题不是“有10个选项”。
更像是“让一个已经很累的人，立刻比较10个差异不明显的选项”。
网站后台可以有1000篇文章。
不应该让刚读完一篇的人从1000篇里重新选。
系统里可以很多，当下的决策面要小。
7. 给内容网站做自我审计，发现自己也埋了不少坑
7-1. 标题里一个词，触发了错误的下一步
一篇AI开发文章标题里碰巧出现“搬家”，界面就把搬家相关行动放到正文前。关键词匹配成功，语义失败。
7-2. 10秒移动、章节移动、文章移动挤在同一条控制带
图标都像方向操作，但后果差得太大。局部移动和页面跳转应该分开。
7-3. 相同的“搜索文章”去了不同地方
同一个词如果行为不同，用户必须重新学习。
7-4. 正文之前先放出超长目录
长文章需要目录，但17项全部先出现，会把“开始阅读”变成“先比较17项”。
7-5. 搜索页把“全部收听”做成最强按钮
连续收听很强，但它是高级模式。很多人的普通目标只是看结果并打开一篇。
7-6. 文末堆上推荐、排行、搜索、邮件订阅、作者
每个模块都有理由存在，但没必要在同一秒拥有同等优先级。
7-7. 通知订阅和取消订阅视觉层级太接近
结果相反的动作，最好在距离和强调度上都分开。
最有意思的是：认真做UX的人，也会给自己埋UX雷。
因为制作人已经知道所有功能是什么意思，第一次来的用户并不知道。
8. 广告不等于坏UX，抢走阅读任务才是问题
广告可以支持网站运营。
问题是注意力竞争。
网页广告的眼动研究发现，横幅与正文的距离、动画等特征会改变视觉行为；在需要理解内容的阅读任务中，广告尤其可能增加干扰。[13]
因此文章页可以设一个“注意力预算”：
- 正文前不要同时堆广告、播放器、巨大目录、注册CTA
- 广告别贴得离正文控制太近
- 空广告位及时折叠
- 与可点击链接保持误触距离
真正的问题不是“要不要广告”。
而是用户来到这个页面主要想做什么。
9. 对人友好的UI/UX QC清单
可预测性
- 相同文案是否带来相同结果
- 图标是否符合一般含义
- 是否无理由违背平台惯例
- 第一次使用的人能否在点击前大致猜到结果
防误触
- 相反动作是否紧挨着
- 破坏性操作是否和主操作一样突出
- 是否可以撤销
- 确认框是否明确说出结果
手指与指针
- 重要目标是否够大
- 小目标是否过于密集
- 屏幕边缘是否难操作
- 高代价操作是否有额外距离
信息量
- 当前主任务是否一眼可见
- 高级功能是否过早全部展开
- 长目录、筛选、推荐是否可渐进展开
- 是否管理“第一次要比较的数量”，而不是粗暴删除库存
一致性
- 产品内部是否使用同一套交互语法
- 是否保留人们从其他产品学到的有用经验
10. 真正值得看的UX数据，是误操作之后发生了什么
点击率只能说明按钮被点了。
更有意思的信号包括：
- 点击后几秒内返回
- 刚打开就立刻关闭
- 跳页后马上回去
- 同一区域连续点击
- 错误后离开
- 第二次尝试能够完成
- 到达核心内容前耗时异常长
这些不是“用户一定困惑”的证明，只是线索。
最好用匿名、汇总方式观察，而不是给个人下结论。
假设 → 小改动 → 看纠正行为 → 变好就保留 → 变差就回滚
11. 结论：真正的友好不是加说明，而是少设陷阱
好UI通常不会让人惊叹。
按得动。 退得回。 想找的东西在熟悉的位置。
坏UI只需要一次误触，就会突然抢走主角位置。
“为什么取消在这里？”
不要让人背机器的私人规则，让机器尽量靠近人已经拥有的预期。
功能可以多。 高级功能可以保留。 广告也可以有。 文章库可以很大。
但当下先展示最需要的东西，把相反操作分开，用视觉层级表达后果大小，并让错误可以恢复。
对人友好的UI/UX，不是要求用户更聪明，而是让普通人在普通状态下也不容易出事故。
资料来源
- Nielsen Norman Group nngroup.com
- Nielsen Norman Group, Mental Models nngroup.com
- Christ et al. (2000) pubmed.ncbi.nlm.nih.gov
- Application-Design Mistakes nngroup.com
- Confirmation dialogs nngroup.com
- W3C WCAG 2.2 Target Size (Minimum) w3.org
- W3C WCAG 2.2 Target Size (Enhanced) w3.org
- Apple Human Interface Guidelines developer.apple.com
- Progressive Disclosure nngroup.com
- Proctor & Schneider (2018) pubmed.ncbi.nlm.nih.gov
- Scheibehenne et al. (2010) doi.org
- Chernev et al. (2015) doi.org
- Online advertising and visual attention pmc.ncbi.nlm.nih.gov
