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