在《卫报》的网站上，一个v形图标被放在左边，后面是分类标题和空白区域。整个横条都会触发扩展，而分类的主页入口被整齐地显示为手风琴折叠面板项目中的第一选项。

　　还有一些别的东西要提。不要在意图标的选择或它的位置，当手风琴被扩展时，它应该很容易立即折叠起来。这种交互不需要鼠标指针或手指的任何额外动作——就像任何其他隐藏和显示的交互一样。这意味着在激活时，折叠和扩展的图标当然会发生变化，但是它的位置应该保持完全相同，这是考虑到手风琴折叠面板的状态是能立刻切换的。

　　总结

　　这是对一个看似显而易见的设计模式的漫长审视。我们选择一个图标来表示扩展(v形图标指向下或一个加号图标)，使它足够大以便能舒服地敲击，并将它放置在横条的右边缘。整个导航条触发扩展——在横条周围留有足够的地方来切换状态，以及在手风琴折叠面板目录中添加指向类别主页的链接。 如果我们选择使用v形图标，其方向应该在点击时改变，如果它是一个加号图标，它应很容易转换成一个“-”或“x”表示可收起。为了使交互更加清晰，我们可以使用微妙的过渡或动画来体现滑入和滑出类别项。 当然，你的解决方案可能会非常不同，因为你的应用环境可能会非常不同，所以，如果你在寻找另一种解决方案，在下面你会发现我们在设计手风琴折叠面板时总会问的一些问题。

　　手风琴设计检查表1.你会选择什么图标来表示扩展?2.你会选择什么图标来表示收起?3.你会把图标放在哪里?4.你如何设计一个类别名称?5.你如何指示收起和扩展状态(除了图标)?6.如果用户点击类别名称，会发生什么?7.手风琴折叠面板应该包含一个指向类别主页的链接吗?8.如果用户单击空白空间会发生什么?9.当选择另一个部分时，已扩展的部分会自动收起吗?10.如果没有足够的空间来显示所有项呢?11. 你是否应该放一个“收起全部/展开所有”链接或按钮?

　　对于一个看起来已经建立的并可预测的手风琴折叠面板组件的考虑程度几乎是一个永无止尽的关于设计实验和可用性研讨的故事，因为只有少数几个确定的指导原则用于这个组件的外观和交互。虽然造出一个可达的手风琴折叠面板并不难，但设计一个被普遍理解的手风琴折叠面板并不那么容易。因此，用户经常感到迷失，因为他们的期望没有匹配，或者因为交互中断了他们的流程。我们的工作是减少摩擦和确保这种情况很少发生。有一个包容的并有弹性的设计，我们就能做到这一点。 也许你的经历与文章中提到的完全不同? 请在评论中告诉我们! 另外，如果你想到另一个乐意去谈论的组件，让我们知道，我们会看到我们能做些什么!