原文链接：Designing The Perfect Accordion
原文作者：Vitaly Friedman
Accordion应用得十分普遍，也许你也会遇到图标选择，状态呈现，以及是否自动收起的问题，作者也是援引了许多的真实案例，一步步地推敲合理的Accordion设计方式。
设计模式，这可能是一个生疏的短语，可能会让人感到敬畏或是抱怨。作为设计人员，我们更倾向于将设计模式看作是通用的解决方案，常常不加思考，机械地应用在各种场景。导航怎么弄？Off-canvas!今天就要完成？那就用Carousel!嗯…你懂的。
有时候我们使用这些模式的时候甚至不会去思考，因为有一个很好的理由是：如果每次遇到界面问题都提出一种全新的方案，那将会耗费大量的时间，并且存在风险，我们并不知道需要多少时间来实现一个全新的方案，也不知道在可用性测试中它是否会成功。
设计模式非常有帮助，因为它可以节省大量的时间，更快地得出优质产出。我们不需要将它们应用在每一个问题上，我们可以在它们之上去优化。利用我们的经验来作出决定，因为我们知道它们在其他的一些项目中发挥的很好。
在过去的几年里，我们花了很多时间和不同的公司合作，尝试了很多的方法，在可用性测试中去研究它们。这系列的文章就是通过时间的观察和实验的总结。将会从carousel，filters，calculators，charts，timelines，maps，multi-column tables，甚至是选择航班和电影院作为的定价方式来展开。在处理复杂的页面问题之前，我们先来看一些简单的东西：accordion。
Accordion的组成
Accordion可能是响应式设计中最成熟的一种方式，也是广泛地被使用来渐进展示-突出显示部分的重要细节，并在必要时点击更多的细节。因此，设计上会保持专注，首先展示重要的信息，而其他的内容也可以很容易地查看。如果你遇到太多的导航选项，太多的内容，太详细的视图-你可以尝试从accordion出发来解决这些问题，它的效果也非常好。
设计accordion很难吗？嗯，你需要考虑很多的事情。Schoolfinder就是一个很棒的例子
然而，即使是常作为accordion的组件，也有很大的改进和自定义的空间，我的意思是：情境很重要。用于导航的accordion和Q&A中的设计方法会有不同，在所有的不同情境下，我们都必须考虑accordion的视觉设计和交互设计，消除用户可能会产生的误解。
现在，我们更细致地来观察accordion的组成，拆分出一些元素。accordion总是包括类别名称，扩展和折叠状态，扩展指示图标，以及间距。当某一类别扩展后，它的图标就会改变为可折叠，如果用户已经展开了一个类别，又去打开一个折叠的类别会发生什么？扩展的类别是否应该自动关闭？如果所有的选项不能全部显示，是不是需要自动滚动来展示全部呢？我们来更详细地探讨这些问题。
Nsb.no的经典示例，挪威的旅行计划app，通过右侧的图标来显示可以展开，整个bar作为扩展触发器
选择一个图标来提示扩展
现在，让我们开始吧。我们了解一些什么？明显的，在大多数的从左至右的界面中，类别名称也都是左对齐的。像大多数accordion一样，子条目会插入在两个类别之中，你会选择什么图标来表示可以展开这个动作？一个向下的箭头，向右的箭头，加号，带圆圈的加号-或一个完全不同的东西？
Zvv.ch将两个垂直的accordions放在了一起（附带圆圈加号），其中一个表示旅行选项，另一个表示两个位置之间的距离。他们的作用差不多，看起来也很像。它们清楚地传达出了图标的意思和预期会发生的行为。
在我看来，图标的选择并不重要，只要它不在界面中包含多个不同的含义。如果你让圆圈加号表示扩展，缩放，合计-那么这就会产生混乱。在accordion的背景下，用户似乎会更容易理解，如果一个item包含了图标而其他item没有，那么点击后会有更多的内容可以查看。我们没有发现哪一个图标会更容易被辨认。但这并不意味着item之间不会引起混乱。
Ableton.com使用了一个加号来表示捆绑交易（上方卡片中）和扩展（下方item旁），这里图标会有多个含义，可能会让人疑惑，在点击上面的加号没有任何反应，点击下面的加号也不会产生交互
举个例子， Slack使用指向右侧的箭头，尽管accordion是在垂直方向上扩展，而不是向右。那么图标的方向应该是什么？它应该作为移动方向的指示器，当图标被点击后，用户的实现会移动到的方向。例如，在iOS的邮件中，箭头会指向从左至右的视图。
在Slack中，移动端的定价策略折叠在accordion中，而箭头指向右侧，运动确实从上到下进行
iOS的邮件中，箭头指向了正确的方向
通过图标来表示运动方向是合理的，但是不同的界面行为不同（神秘的图标通常在和用户玩心理游戏），不是所有的用户都会预测行为。所以作为设计师，选择什么样的图标真不重要，退一步说，你不可能会满足所有人的预期，即时我们全身心的投入其中，用户依然会受到他过往的体验和习惯影响，而这些你无法理解。当遇到意料之外的事情时，最关键的是尽可能地去提供简单，直接的恢复功能。
加号图标可能会有不同的含义。在Leica上，加号可能意味着产品提供的lightbox效果。一些用户可能并不能预期这一种行为。所以换成一个放大镜的图标可能表意上不会这么模糊。
让我们再来回顾一下图标选择的问题，如果accordion垂直展开，那么使用上文提到的图标（除了向右的箭头）似乎都是安全的。你唯一需要考虑的事情就是，你选择的图标在产品中是不是会有其他的含义。
那么一切都解决好了吗？还没有。
让我们来思考一下期望交互。尽管箭头通常是作为指向变化的线索，但是加号可以表示添加和扩展。在这两种情况下，变化会有多种情况发生：导航项可能会被覆盖，或者垂直滑动（不是水平滑动）。
当用户在tifwe.org的导航中看到一个箭头，用户预期的行为是什么？很明显，导航右侧的图标表示子菜单，设计也很好的利用了空间。类别的标题是直接跳转到类别的超链接，箭头则表示扩展。
然而，当用户载入页面之后，他们不知道自己是不是进入了一个长页面，链接跳转到页面的某一部分，或是一个常规的网站。通常向下的箭头会跳转到页面内的部分，而不是扩展导航item。用户很可能失去了方向，页面跳转到了长页面的某一部分，然后用户回到顶部，又重复这样的操作。
图标通常是模糊的。在Qso.com上，用户如何知道点击屏幕底部的按钮后，是在当前区域作为accordion扩展，还是滚动到页面的其他位置？在这个示例中，用户会在页面上滚动。这可能是一个问题，因为箭头通常表示的是扩展。
在Papillons De Nuit上的箭头arrows。当你点击页面顶部和右侧的箭头时，你预期会发生什么？顶部的箭头充当提示，右侧的箭头则将用户引领到页面的其他部分。并不是每个用户都能预期这些行为。
那么，作为设计师，这些有什么意义呢？首先，如果accordion从左向右横向滑动，那么使用箭头指向右侧是安全的。如果accordion是垂直方向展开，那么使用chevron或者是一个加号可能会不错。
考虑到这一点，选择图标就会是一个很简单的决定。图标与类别标题的距离，也会造成混淆。那么在选择图标的位置时，我们需要考虑哪些呢？
选择图标的位置
你可以将它放在左边，放在右边，或是与右边界对齐，隔开图标与类别名称。
有时，点击文本标签会弹出一个新的页面，而在空白区域点击会什么也没有。所以用户在希望展开时，会选择点击图标，而不是类别和空白区域。
这个位置重要吗？它很重要。根据Viget的“Accordion菜单设计和图标测试”，一些用户会倾向于点击图标，而不是整个导航栏，可能的原因是用户被大量不规则的accordion给扰乱了。在一些网站上，类别标题并不会引发扩展，而是直接进入类别。点击导航栏的空白区域则可能什么都不会发生。
虽然我们在设计时会将整个区域划为热区，但不是所有的导航都有这样的行为，用户并不能了解导航是否可用，直到他们真正尝试去点击（或者hover）。hover又不总是有用，所以点击图标成为了一个更安全的选择，点击图标几乎总会触发预期行为，这是一个设计accordion的细节。
在不同的界面和产品中，有一种将图标放置在类别标题右侧的形式，用户会选择更频繁地关注图标。然而一些用户仍会倾向于点选图标，让这个图标足够大，足够舒适地点击-至少有44x44的像素尺寸。
左对齐还是右对齐？这似乎并不重要，如果你的accordion导航，标题长度的变化非常大，那么切换accordion会被上下导航更为重要一些。如果你的图标是右对齐，那么在狭小的屏幕上，手指需要移动的距离更多。
如果图标与bar的右边缘对齐，我们仍要小心，不要将它和类别的名称拉开过大的距离。从视觉上看，扩展和类别差的很多。在不同的用户端，图标的位置可能会发生变化，这对于一组accordion导航来说，更科学一些。
为Accordion设计交互
即使你关注了这些细节，交互上仍然存在问题。让我们假设标题是左对齐，图标是相对于bar的右对齐，当用户点击类别名称和空白区域时会发生什么？是在当前页扩展还是有其他作用？
我们可以确认的一件事：当用户点击时，他们可能会期待展开，所以点击图标会促进这一个过程。
如果点击了类别的标签触发了扩展，那么我们就要在下来菜单上提供链接，让用户直接跳转到目标部分。这会让用户感到混乱。
如果accordion的链接足够明显，破坏性和对用户造成的混淆会少很多。跳转到一个类别，再返回，这对用户的操作十分不友好。这也是解释了为什么让图标和类别标签作为扩展的触发器更加合理。
越接近点击图标，用户越可能期待扩展。但这并不意味着越接近类别标题，用户就越期望跳转到新类别去。
Accordions通常用在卡片上，根据视图的大小，卡片可以很宽，当一些用户尝试点击图标时，他们也会尝试点击bar中的空白区域来折叠卡片。很少有人会期待bar成为类别的链接。在测试中，空白区域不会触发扩展。
Accordion不仅是作为导航，它还可以呈现更多的细节，比如在PremierLeague.com中
但是如果你希望类别标题直接链接到这个类别呢？一种方法是通过两个视觉上独特的元素来提示边界。例如为图标和类别标题提供不同的背景颜色。在实验中我们没有注意到行为和期望上的改变-有人依然会点击这个类别，想要知道发生了什么。在扩展开的accordon中有一个链接似乎更加安全。
足够好吗如果屏幕上没有足够的空间展示子项内容，该怎么做？可能会有人建议向上滚动页面，展示尽可能多的区域，这是个好主意吗？
当我们替用户作出行动时，我们必须多加测试和深思。也许用户对很多内容都感兴趣，想要了解更多。与其让用户对自动滚动好奇，不如不进行滚动，让用户停留在原先的状态，这样他们就在必要时才会滚动，没有多少用户期望跳转到顶部-不会破坏用户的浏览流，或者保留一个固定链接会好一些。
在Sony.com上，如果一个部分被展开，在用户点击其他部分的时候，打开的部分会自动收起，这种行为在不同的网站上并不一致，所以不能依赖用户去预期这种行为
然后另一个问题出现了：如果一个部分被展开，当用户点击了另一部分时，打开的部分应该保留吗？如果打开的部分自动收起，这可能并不是用户期望的，他们可能再次去打开它，但是用户不可能同时浏览两个部分，如果保持展开状态，他们不得不去关闭多余的类别。这两种选择似乎都有合理的场景。
Accordion的本质要求时自动收起，但是在可用性方面，它可能不是最好的选择，对于大多数项目，我们倾向于保持扩展，因为收起和展开的动作会产生干扰。因此，你也可以尝试提供展开全部和收起全部的按钮，这在设计一个时间表和详情表的时候非常有用。如果没有很多的类别，那么这个部分默认是收起的，因为跳转的需求最小。
在Guardian的网站上，一个箭头被放在了左边，然后是分类标题和空白区域。整个bar都会触发扩展。这个类别的页面会被显示为accordion导航的第一个选项。
这里还有其他的内容，无论你如何选择了图标的相对位置，当accordion被展开时，它都应该很容易被收起。这种交互不需要鼠标和手指的额外移动，就像“隐藏和显示”的交互一样。当被激活时，收起和展开的图标发生改变，而类别的相对位置不变，这样的切换就很方便。
结语
这是对一个看起来非常简单的设计模式的思考。那么我们如何设计一个完美的accordion呢？选择一个图标来表示可以展开，让图标足够大，可以舒适地点击，然后放在右侧。整个bar都可以触发扩展，在周围有足够的留白来切换状态。其中的类别会切换到对应的主页。
如果使用箭头，它的方向应该会相应的改变，如果是一个加号，那么它会切换为“-”或“x”来表示收起，为了让交互更加清晰，我们可以使用微妙的过渡动画，让过程看起来更加的平滑。
Accordion设计自查表
1.你会选择什么图标来表示扩展？
2.你会选择什么图标来表示收起？
3.你把这个图标放在哪一个位置？
4.如何设计一个类别的标题？
5.如何表示收起和扩展的状态（图标以外）？
6.用户点击这个会发生什么？
7.accordion导航是否包括类别主页的内容？
8.用户点击空白区域会发生什么？
9.当另一个部分被展开，之前展开的内容是否会自动收起？
10.如果没有足够的空间来显示所有的项目，怎么处理？
11.你是否需要一个“展开／收起全部”的按钮？
网友评论