这是一个看似明显的设计模型的漫长的考察。所以我们如何设计出完美的折叠面板呢？我们选择一个图标，指示展开（V形指向下或带加号），使其足够大以适应点击，轻松地将其放置在的右边缘栏中。整个导航栏就会触发展开——在导航栏周围有足够的内边距以切换状态，以及到折叠面板分类中的分类主页链接。

　　如果我们选择使用V字形，方向应该随便点击，如果是带加号的图标，则可以轻松地转换为“ - ”或“x”来表示折叠。为了保持交互更加清晰，我们可以用微妙的转换或用动画来滑入和滑出分类项目。

　　当然，因为环境不同，你的解决方案也会有所不同，所以如果你在寻找一个替代解决方案，下面是在设计折叠面板时我们总会问的一些问题。

　　折叠面板的设计清单LINK

　　你会选择什么图标表示展开？

　　你会选择什么图标表示折叠？

　　你会在哪里放置图标？

　　你如何设计一个分类标题？

　　你如何表示折叠和展开状态（除了图标）？

　　如果用户点击分类会发生什么？

　　折叠面板是否包含该分类主页的链接？

　　如果用户点击空白区域会发生什么情况？

　　当选择另一个部分时，展开的部分是否会自动折叠吗？

　　如果没有足够的空间来展示所有项目怎么办？

　　你是否有“全部折叠/全部展开”的链接或按钮？

　　因为只有少数的组件的指导出现了交互，对于一个组件看似成立的和可预见的折叠面板是一个几乎永无止境的故事，设计实验和可用性是需要考虑的。构建无障碍折叠面板并不困难，设计普遍理解的折叠面板是并不容易。因此，用户经常由于期望的不匹配或由于交互中断了他们的流程而感到沮丧。我们的工作就是减少摩擦，确保它在必要时能很少发生。凭借宽容且弹性的设计，我们可以实现这一点。

　　原文地址：https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/