手风琴导航(Accordion)

手风琴导航(或手风琴菜单)是用可折叠面板来展示一类组织后的信息方式,在一定的空间内,它提供了一种大量链接或其他可选内容的访问方式.

每一个嵌入的面板都可以独立的展开(通常会将其他的面板收缩),一般通过鼠标经过或者单击面板标题栏(或者标题栏上的展开/收缩按钮)来显示某一个子选项.

解决什么问题?

当在有限的空间内想显示大量的内容,或者有大量的内容,如果一次都显示的话会让用户不知所措的时候,问题是如何让用户来访问所有的东西并能够理解(消化,in digestible chunks)同时可以不用滚动页面,因为滚动页面会让用户从上下文情景中脱离,或者会让他们从页面中喜欢的位置离开

什么时候用?

当选项的数量比较多,页面空间有限,并且可以对选项列表有逻辑的进行归类,分成更小的,内容数量基本一致的内容块

译者注: 此处要注意,内容列表不是内容的标题栏(如截图中是4栏),而是里面的内容元素,比如新闻标题,作者,日期,图片,该要,文字链等

具体解决办法是什么?

对于选项采用两级分类

顶级分类是显示类别或者分组

二级分类是放到每个组里的选项列表

手风琴导航典型的样式是一组可折叠的面板(跟树状导航的外观不一样),同时使用一级分类的内容作为标签(label).分类标签一般是与面板宽度一样可点击的标题栏,或者是一类展开/收缩的图标

手风琴导航默认可以有一个面板是展开的

建议

将重要内容的面板默认展开,一来可以显示重要的选项,二来可以起到一个示范作用,收缩列表的每一项都独立可以展开

将当前展开的面板高亮,这样用户可以识别面板展开和收缩时不一样的标题栏

要避免将一个手风琴导航嵌入到另一个手风琴导航中.如果你发现需要这样做,树状菜单或者其他的适合显示多级结构的元素可能更合适. 

译者注: 近的版本中有一个组件就是手风琴导航,而当时并没有意识到,只是几个面板可以收缩和展开,并且至少会有一个面板展开.当时设计的标题栏上的icon是个上/下箭头来表示展开/收缩状态,但是后来发现逻辑无论如何调整都会存在歧义,后来发现这个组件,义无反顾的将icon换成加号/减号,结果没有任何问题了…

可选项

手风琴导航可以配置成始终有一个面板是展开的,或者是其他更灵活的(所有的面板都可以关闭,多个面板可以同时打开).一些设计师认为好的方式是只允许一个面板打开,但是其他人都不认可

手风琴导航可以配置成只有一次只有一个面板会打开,但是很多例子都允许同时打开多个

除非是有表单元素或者其他的不可变的设计元素要求手风琴导航总体上要保持一致的尺寸,否则手风琴导航元素应该可以根据展开面板的不同内容来改变尺寸

通常,手风琴导航是通过单击来展开面板的,但是如果用户的使用情景是”开心的/有趣的/试试这个”,那么鼠标经过来展开面板也是可以接受的

为什么使用这个组件

使用这个组件主要的原因就是在有限的空间内展示大量的选项

特殊情况

大部分手风琴导航都是垂直放置的,不过也可以水平使用

可访问性

对于键盘用户来说,就像树状菜单和标签一样,手风琴导航通常会打断使用.可以给手风琴导航标签之间的标志和切换面板的上/下箭头加上键盘导航

当javascript被禁用时,手风琴导航需要做兼容,可以考虑把所有面板都展开

如果什么都不显示的话对于屏幕阅读器来说可能会导致内容丢失.可以考虑将高度设置成0来解决.总之，手风琴导航凭借其独特的优势和多样化的呈现方式，在提升界面交互性、优化信息展示方面发挥着重要作用，广泛应用于各类互联网产品界面设计之中。