交互设计模式：导航-手风琴

image.png

1. 待解决问题：用户想通过导航找到某个项目
2. 解决方案：将多个面板垂直或者水平叠加到一起，展开其中一个面板，缩起其他面板；
3. 使用场景：
   1. 常做为主导航或者次级导航；
   2. 本质上类似标签导航；可做为导航树的替代方案；
   3. 经常有人在操作向导中使用手风琴，但其实并不合适；
   4. 用在FAQ非常合适；
   5. 如果设置项目不多的话（少于10个），用来管理设置项也不错；
4. 设计方式
   1. 一次只展开一个面板（如果可以展开多个，则叫做导航树或可关闭面板）；
   2. 通过点击面板头部来切换不同的面板；
   3. 垂直手风琴展开后，一般展示次级项目；水平手风琴则可以放置大段内容；
   4. 几个注意事项
   1. 适当的动画效果，以便让用户知道发生了什么事情（动画时间少于250ms）
   2. 支持键盘上下方向键；
   3. 展开的面板应高亮显示，以便与缩起的面板进行区分；
   4. 确保面板尺寸能够根据内容自适应，因为如果高度固定，当内容项很少于，会导致面板很空；
5. 利弊分析
   1. 优点：可以将大量元素压缩在有限的空间内进行展示；元素包括：次级项目、问题、属性；
   2. 缺点：做为主导航时，大部分元素被隐藏，可见性较弱
   3. 其他：垂直式很常见，但动画效果经常做得不好；水平式很少见，但可以带来一些乐趣；