从一个“神奇的按钮”开始发散

转自：AQ思考笔记（ID：MrKKi）

作者：AQ乔啊

前天逛淘宝时，突然想到了很久以前被搞晕过的一个东西：多态按钮/开关切换时，按钮/开关到底是应该告诉用户当前的状态还是点击后的结果。

案例1

不少电商在搜索结果页中都有提供“列表模式”和“宫格模式”两种视图模式，通常有一种默认的模式，当用户点击按钮后会切换到另一种模式，我们姑且把这种按钮称作「多状态按钮」吧。

简单的统计了一下，目前电商产品对于该按钮的处理方式有两个派别：淘宝派-按钮显示当前状态 和 京东派-按钮提示操作后的结果，如下图

淘宝派：

淘宝

小红书

阿里巴巴

京东派

京东

网易考拉

唯品会

视图模式的切换对用户来说其实并不是一个重要且常用的操作，所以能看到很多主流电商产品也没提供这个功能，并且用户通过简单的点击就能快速了解该功能，但是这个不重要的功能体现了我们在产品设计时考察的不同的角度，即“用户对于当前状态的感知”和“用户对于操作结果的预知”。

仅以上面的视图模式而言，我最开始“准备”倾向于京东派的，但是我接着问自己为什么，是因为我更在乎用户对于操作结果的预知吗？是的。但是就拿上面的实例来说，单从图标来看，无论是列表模式还是宫格模式，用户似乎都很难将图标和视图模式联系起来，大概率下只有当用户点击以后才能从界面的变化中感知到图标的作用，如果是这样的话，两种处理方式好像并没有差别。用户通过操作基本已经建立了正确的认知，而且在惯性的作用下，当用户需要切换视图模式时，自然而然会点击“记忆中的按钮”，而不会去一步一步按照我们设计的思考路径去走。

这让我想到了我们在做设计的时候，总是努力为用户规划好一系列操作路径：

“嗯，用户看到这个图标就会知道这个表示列表模式，然后他会和当前的视图模式联系起来，接着他会发现当前的模式就是列表模式，他就会知道这个图标表示他当前选择的模式”

“嗯，用户看到这个图标就会知道这个表示列表模式，然后他会和当前的视图模式联系起来，接着他会发现当前的模式并不是列表模式，随后他会猜测这个图标表示的是点击后的模式”

我们可能会做上面的假设。但是实际情况是，用户看到图标后：

WTF？这是什么玩意？这个按钮用来干啥的？

用户的想法和我们设计的路径完全不是一回事。

这个案例在我看来，因为其本身并不是重要的功能，且用户误操作也不会产生严重的后果，而且无论哪种方案对用户来说都不易识别，所以两种方案都被很多产品采用，并没有统一的标准。

案例2

我又想到了前几年移动端常见的一种开关按钮。

我称它们为“让人懵逼的神奇按钮”。

讲真，看到这样的按钮，我根本不知道它们是什么意思，比如“on”的按钮，它是表示当前是“on”，还是说我点一下后变成“on”？只从视觉上看，无论做何种假设我觉得都不为过。

后来按钮又变成这样，没有了容易让人误解的文案，只通过色彩表示状态的变化，彩色的表示“on”，灰色或白色表示“off”。

用的多了，大家也就习惯了，似乎就应该是这样。

但是这样就真的有道理吗？是最好的解决方案？

如果让一个不太用手机的人来操作，怕还是不太容易理解。

案例3

我又联想到开灯这件生活中的小事。

开灯可能是我们每天都要做的事儿，平时开开关关好像也没什么感觉，就像每天呼吸空气一样自然。

让我映像这样深刻的原因是，小时候家里停电了，我就会把灯打开，这样来电的时候我就可以马上知道。但是通常情况下我压根不知道有没有打开开关，这么多年，我总是能碰到让人摸不着头脑的电灯开关。

比如下面这个台灯，按下有标记的一侧是开灯：

开灯状态

但是恰恰和我房间吊灯开关相反，房间的吊灯是按下没有标记的一侧是开灯：

关灯状态

生活中还有很多压根没有标记的开关，真的让人很费解。

有趣的假设

上面说了好几个例子，给人的感觉好像都是无关紧要的小事，所以讨论这个问题似乎没有太大的意义。

我脑洞了几个好玩的例子。

有个小偷A，今晚准备行窃了，据A观察，今晚行窃的对象是个大户人家，不容有失。所以他准备把手机调成静音模式，只需要点一个开关按钮，手机就可以变成静音模式，但是他好歹看不出开关到底是开着在还是关着在。

家里停电了，小张就随手把客厅里刚刚开着的灯关了，结果第二天早上起床后发现客厅里的灯亮了一夜，原来是停电后女朋友也“关”了一次灯。

...

就想到诺曼在《设计心理学1》中讨论了很多生活中让人费解甚至抓狂的设计，但是往往用户并没有意识到，或者用户已经放弃“抵抗”了。

再回到案例1中，有没有其他的解决方案呢？

方案还是有的。

比如我们在web时代常用的复选框，移植到移动端后也使用的很频繁，并且在表意上更直接，勾选了就是“是”，未勾选就是“否”，不存在歧义。

我记得微博以前的评论排序-“按热度排序”、“按时间排序”，用户选择的方式类似案例1中的，点击一下就切换到另一种状态，后来也改了。

之前我自己参与过一款社交产品的设计，当时也有对评论排序方式的选择

上面例举的这些案例，并没有说哪一种方案是最好的，只是提供一种思路。

又是一些非常零散的东西，只是我觉得这种发散还挺有趣的，往往还有一些意想不到的收获。

关注『UI设计达人』

看更多精选UI设计文章

↓↓↓

喜欢就点右下角的「好看」呗~