章节 13

别再隐藏可点击的地方

为什么按钮就该看起来像按钮

2013 年前后，设计行业开始把视觉线索当作需要清理的问题。阴影没了。边框没了。凸起的按钮没了。渐变、纵深、纹理，以及一切暗示某个元素位于另一个元素之上的线索，都开始消失。界面变得更平、更干净，也更精致。我认识的大多数设计师都很喜欢。我当然也喜欢。然而，用户开始点错东西。我记得这种风潮传播得有多快。

这不是巧合。Apple 那年推出 iOS 7，在一个版本里就剥掉了 iPhone 界面积累六年的视觉信号。Windows 8 在十二个月前也做过类似的事。行业里很多人跟了上去。理由听起来很对：人们已经学会了使用触摸屏，不再需要新手辅助，界面也可以成熟起来了。几乎没有人停下来问，那些阴影和边框究竟是不是辅助轮，还是它们其实是唯一告诉人们该点哪里的东西。

扁平化设计作为一种审美留了下来。但“移除所有视觉信号，界面仍然好用”这个想法没有。这背后有一个概念，设计师至今还常常把它弄错。

设计师总在怪错对象

1979 年，心理学家 James Gibson在 The Ecological Approach to Visual Perception 一书中提出了可供性的概念。在 Gibson 看来，可供性是物体与人之间的一种关系。椅子可以让人坐，手柄可以让人握，表面可以让人行走。Gibson 说的关键一点，也是设计师总是忘记的一点，是无论你看不看得见，可供性都存在。它们是关于世界的事实，不是提示。无论门上有把手、平板，还是什么都没有，它都可以被推开。

Don Norman在 1988 年的 The Psychology of Everyday Things 中把可供性引入了设计。设计界很喜欢这个概念，很快就广泛采用。但有一个问题：设计师误解了它，而 Norman 承认，部分混乱正是他自己造成的。到 1999 年，他开始收回先前的说法。到 2013 年，他用一个更有用的术语替代了它。在 The Design of Everyday Things 中，他写道：

意符指明人们如何发现这些可能性：意符是标记，是关于可以做什么的可感知信号。
— Don Norman · 译自英语

接着他又进一步指出：设计师应该停止只想着可能的行动，转而关注人们实际能看见什么。

重要的是这一点。操作可能一直存在，但线索才是帮助人们发现它的东西。看了几十年设计师错误使用自己提出的术语之后，Norman 的结论很简单：对设计师来说，人们能看见什么才重要。

无论你是否展示，操作都在那里。线索让人找到它。当一个按钮看起来可以点击，信号就在发挥作用。当它看起来像个标题，信号就消失了，用户只剩下疑惑：到底该推还是该拉？

每当设计师在会议上说“我们需要增加可供性”，他们几乎总是在说增加意符。词用错了。这种混淆我听过太多次，已经数不清了。区分它们很重要，因为它解释了设计变得过于干净时，到底出了什么问题。

扁平化设计暴露了问题

Nielsen Norman Group发表了对 iOS 7 的正式可用性评估，发现的情况，任何观察真实用户行为的人大概都能预料到。用户很难区分哪些元素可交互，哪些只是装饰。看起来像文字的按钮无人注意。采用扁平化审美的应用做出的界面，让人难以辨认行动入口，用 NNG 的话说就是“很难说”（译自英语）。

人们开始在那些已经做了多年的操作上遇到问题。可供性没有变。点击按钮的方式还是一样。Apple 剥掉的是意符。操作仍然有效。只是人们没发现它。

链接像标签。标签页像说明文字。控件混进了普通文案。行为没有变，但界面不再使用人们已经学会的那套视觉语言。对比、轮廓、高亮、强调和纹理这些熟悉的标记，都被抽走了。

NNG 指出，Windows 8 在前一年就制造了同样的问题，规律已经很清楚：当界面为了更干净的外观而剥掉线索，付出代价的是用户。他们停顿。他们点错。他们放弃。Apple 在后来的 iOS 版本中修正了方向，重新加入纵深和对比，让可操作的元素再次能被辨认。

扁平的外观留了下来。移除所有线索的做法没有。我现在仍然会看到一些界面，明明是主要操作，表面上却只是一个普通文字标签。

做一次无声点击测试

有一个简单的测试，不花一分钱。就叫它无声可用性走查。把界面放到一个没有参与制作的人面前。不要说话。不要指。不要解释。只看。

每一次犹豫，都意味着缺少一个意符。每一次点错，都意味着有一个错误的意符：看起来能交互却不能，或者看起来是静态的却能交互。每一次对方把手指移向某个东西，又停了下来，都说明设计里有什么没做到位。

不说话、只观察，道理很简单：你一开口，就在替界面补上它自己没说清楚的话。设计师在可用性测试里常常这么做，却没有察觉。“哦，那个按钮在上面。”“对，你得先往下滚。”每一次这样的补救，都把问题暴露了。产品本来就应该完成这项工作。

我仍然会发现自己忍不住想伸手指一下。

Gibson 的椅子和 Norman 的门，放到这里也是一个道理。操作是可能的。问题在于用户能不能找到它。这是意符的工作。做无声走查时，如果没有人犹豫，说明线索在发挥作用。如果你发现自己想凑上前指一下，说明它们没有。

在我看来，这是发现薄弱界面最快的方法之一。

干净的界面仍然可能让人困惑

你让界面看起来越干净，就越要小心决定留下什么。你移除的每一道阴影，都是纵深线索。你删掉的每一条边框，都是边界。你抹平的每一个渐变，都让一个表面不再显得可以按下去。其中大多数可以去掉。有些不能。要知道区别，只能看人们怎么使用。某些时候，一条边框就够了。有时需要的是对比、填充色、下划线、胶囊形状，或一个小图标。重点不是装饰。重点是界面仍然必须说清楚，哪里可以操作。

无论你的提示好不好，选项都还在那里。需要你关注的是意符。它们决定一个人是知道该做什么，还是卡在那里。

一个干净却没人会用的界面，不过是一扇表面精美却锁着的门。