来聊聊常用控件的细节吧——折叠菜单（Accordion Menu）

折叠菜单（风琴菜单）是一种广泛使用在pc和移动app上的显示控件。他可以让你用有限的空间展示更多的菜单选项。但在使用它之前，你需要学会如何设计它从而获得更好的用户体验。

每个折叠菜单都需要一个提示icon来让用户知道当他们点击时会产生展开的效果。但在哪里放置这个icon以及用什么样的图形表示将直接影响到用户的操作效率和体验。

→Icon的位置

一项研究表明，当提示icon放置在文案的右侧时点击操作的时间变长了。用户花费了更长时间来点击，因为他们认为需要点击icon本身来展开菜单。

当icon被放置在左侧时，操作时间变短了。用户更快的完成了任务因为他们没有点击icon而是点击了标签（label）来展开菜单。

icon的目标较小且远离标签，使得它点击它耗时更长

点击icon耗时更长是因为相比标签（label）icon的目标更小，而点击目标越小就需要越高的准确性。不仅如此，由于右侧的icon放置在用户扫视视线的尾部（阅读顺序为从左到右地区的用户），用户的视线需要移动更远的距离来到达目标。

→将icon放置在标签的左边

将icon放在左侧提高了用户的操作速度。他们更倾向于点击标签而不会认为只有点击icon才能展开菜单。而且icon也更加靠近标签，缩减了扫视的距离。

标签的目标更大，使得它更容易被点击。icon和标签更接近，使得扫视速度更快

→图标的选择

进一步的研究表明icon图形的选取也会影响到用户的预期。当折叠菜单使用的是箭头图标，用户认为点击它会打开一个新页面。如果折叠菜单使用的是“+”，用户则会认为点击后菜单本身会发生变化。

更多的用户对“+”的理解比“箭头”更加准确，这是因为“箭头”经常被使用在打开新页面的按钮或链接上，当“箭头”被用在折叠菜单上，用户会本能的认为他们有着相同的作用。

→选择“+”号

“+”号在暗示菜单能展开这一点上有着更为清晰的指向性。另一份有关折叠菜单的研究显示，点击“+”的用户比“箭头”的更多。

这点很好说通，因为“+”在数学上本来就表示着增加的含义。这个“增加”包含数量上、数字上或程度上。

→收起菜单

一个能展开的菜单一定也要能收起。折叠菜单也需要一个提示icon来表现菜单的收起。当用户展开菜单后这个icon应该在“+”号icon相同的位置出现。

通常有两种通用的图形被用来表示菜单可收起：“—”号和“X”号。用户有时会曲解“—”号，因为“—”号通常代表移除或者删掉，用户不希望当他们收起菜单时感觉上像是删掉了菜单选项。

“X”号在表示收起含义方面要优于“—”号，因为它常被用在关闭模态弹窗上。当用户收起菜单时，通常表示的是关闭菜单选项，而不是删除菜单选项，所以用“X”号更加符合用户的预期。

→折叠菜单的标准

放置哪种icon以及将icon放在哪里会影响到用户对折叠菜单的使用。折叠菜单可以有很多种表现形式，但如果你的目的是让它使用起来高效明晰，那最好使用上文提到的方式，既：使用“+”号并且放在标签的左侧。

写在后面的废话：从事“专业”的交互设计也差不多一年了。回顾一下，知道了一些平台规范，学会了一些数据分析，除此之外，在日常的快节奏设计工作中，更多的还是靠着感觉来做设计。所以以上这篇译文，其结果并不一定符合中国国情，但对细节的思考方式和研究手段值得借鉴。

微信原文

英文原版地址