手風琴導航(Accordion)

手風琴導航(或手風琴菜單)是用可折疊面板來展示一類組織后的信息方式,在一定的空間內,它提供了一種大量鏈接或其他可選內容的訪問方式.

每一個嵌入的面板都可以獨立的展開(通常會將其他的面板收縮),一般通過鼠標經過或者單擊面板標題欄(或者標題欄上的展開/收縮按鈕)來顯示某一個子選項.

解決什么問題?

當在有限的空間內想顯示大量的內容,或者有大量的內容,如果一次都顯示的話會讓用戶不知所措的時候,問題是如何讓用戶來訪問所有的東西并能夠理解(消化,in digestible chunks)同時可以不用滾動頁面,因為滾動頁面會讓用戶從上下文情景中脫離,或者會讓他們從頁面中喜歡的位置離開

什么時候用?

當選項的數量比較多,頁面空間有限,并且可以對選項列表有邏輯的進行歸類,分成更小的,內容數量基本一致的內容塊

譯者注: 此處要注意,內容列表不是內容的標題欄(如截圖中是4欄),而是里面的內容元素,比如新聞標題,作者,日期,圖片,該要,文字鏈等

具體解決辦法是什么?

對于選項采用兩級分類

頂級分類是顯示類別或者分組

二級分類是放到每個組里的選項列表

手風琴導航典型的樣式是一組可折疊的面板(跟樹狀導航的外觀不一樣),同時使用一級分類的內容作為標簽(label).分類標簽一般是與面板寬度一樣可點擊的標題欄,或者是一類展開/收縮的圖標

手風琴導航默認可以有一個面板是展開的

建議

將重要內容的面板默認展開,一來可以顯示重要的選項,二來可以起到一個示范作用,收縮列表的每一項都獨立可以展開

將當前展開的面板高亮,這樣用戶可以識別面板展開和收縮時不一樣的標題欄

要避免將一個手風琴導航嵌入到另一個手風琴導航中.如果你發現需要這樣做,樹狀菜單或者其他的適合顯示多級結構的元素可能更合適. 

譯者注: 近的版本中有一個組件就是手風琴導航,而當時并沒有意識到,只是幾個面板可以收縮和展開,并且至少會有一個面板展開.當時設計的標題欄上的icon是個上/下箭頭來表示展開/收縮狀態,但是后來發現邏輯無論如何調整都會存在歧義,后來發現這個組件,義無反顧的將icon換成加號/減號,結果沒有任何問題了…

可選項

手風琴導航可以配置成始終有一個面板是展開的,或者是其他更靈活的(所有的面板都可以關閉,多個面板可以同時打開).一些設計師認為好的方式是只允許一個面板打開,但是其他人都不認可

手風琴導航可以配置成只有一次只有一個面板會打開,但是很多例子都允許同時打開多個

除非是有表單元素或者其他的不可變的設計元素要求手風琴導航總體上要保持一致的尺寸,否則手風琴導航元素應該可以根據展開面板的不同內容來改變尺寸

通常,手風琴導航是通過單擊來展開面板的,但是如果用戶的使用情景是”開心的/有趣的/試試這個”,那么鼠標經過來展開面板也是可以接受的

為什么使用這個組件

使用這個組件主要的原因就是在有限的空間內展示大量的選項

特殊情況

大部分手風琴導航都是垂直放置的,不過也可以水平使用

可訪問性

對于鍵盤用戶來說,就像樹狀菜單和標簽一樣,手風琴導航通常會打斷使用.可以給手風琴導航標簽之間的標志和切換面板的上/下箭頭加上鍵盤導航

當javascript被禁用時,手風琴導航需要做兼容,可以考慮把所有面板都展開

如果什么都不顯示的話對于屏幕閱讀器來說可能會導致內容丟失.可以考慮將高度設置成0來解決.總之，手風琴導航憑借其獨特的優勢和多樣化的呈現方式，在提升界面交互性、優化信息展示方面發揮著重要作用，廣泛應用于各類互聯網產品界面設計之中。