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

每一個(gè)嵌入的面板都可以獨(dú)立的展開(kāi)(通常會(huì)將其他的面板收縮),一般通過(guò)鼠標(biāo)經(jīng)過(guò)或者單擊面板標(biāo)題欄(或者標(biāo)題欄上的展開(kāi)/收縮按鈕)來(lái)顯示某一個(gè)子選項(xiàng).

解決什么問(wèn)題?

當(dāng)在有限的空間內(nèi)想顯示大量的內(nèi)容,或者有大量的內(nèi)容,如果一次都顯示的話會(huì)讓用戶不知所措的時(shí)候,問(wèn)題是如何讓用戶來(lái)訪問(wèn)所有的東西并能夠理解(消化,in digestible chunks)同時(shí)可以不用滾動(dòng)頁(yè)面,因?yàn)闈L動(dòng)頁(yè)面會(huì)讓用戶從上下文情景中脫離,或者會(huì)讓他們從頁(yè)面中喜歡的位置離開(kāi)

什么時(shí)候用?

當(dāng)選項(xiàng)的數(shù)量比較多,頁(yè)面空間有限,并且可以對(duì)選項(xiàng)列表有邏輯的進(jìn)行歸類,分成更小的,內(nèi)容數(shù)量基本一致的內(nèi)容塊

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

具體解決辦法是什么?

對(duì)于選項(xiàng)采用兩級(jí)分類

頂級(jí)分類是顯示類別或者分組

二級(jí)分類是放到每個(gè)組里的選項(xiàng)列表

手風(fēng)琴導(dǎo)航典型的樣式是一組可折疊的面板(跟樹(shù)狀導(dǎo)航的外觀不一樣),同時(shí)使用一級(jí)分類的內(nèi)容作為標(biāo)簽(label).分類標(biāo)簽一般是與面板寬度一樣可點(diǎn)擊的標(biāo)題欄,或者是一類展開(kāi)/收縮的圖標(biāo)

手風(fēng)琴導(dǎo)航默認(rèn)可以有一個(gè)面板是展開(kāi)的

建議

將最重要內(nèi)容的面板默認(rèn)展開(kāi),一來(lái)可以顯示重要的選項(xiàng),二來(lái)可以起到一個(gè)示范作用,收縮列表的每一項(xiàng)都獨(dú)立可以展開(kāi)

將當(dāng)前展開(kāi)的面板高亮,這樣用戶可以識(shí)別面板展開(kāi)和收縮時(shí)不一樣的標(biāo)題欄

要避免將一個(gè)手風(fēng)琴導(dǎo)航嵌入到另一個(gè)手風(fēng)琴導(dǎo)航中.如果你發(fā)現(xiàn)需要這樣做,樹(shù)狀菜單或者其他的適合顯示多級(jí)結(jié)構(gòu)的元素可能更合適. 

譯者注: 最近的版本中有一個(gè)組件就是手風(fēng)琴導(dǎo)航,而當(dāng)時(shí)并沒(méi)有意識(shí)到,只是幾個(gè)面板可以收縮和展開(kāi),并且至少會(huì)有一個(gè)面板展開(kāi).當(dāng)時(shí)設(shè)計(jì)的標(biāo)題欄上的icon是個(gè)上/下箭頭來(lái)表示展開(kāi)/收縮狀態(tài),但是后來(lái)發(fā)現(xiàn)邏輯無(wú)論如何調(diào)整都會(huì)存在歧義,后來(lái)發(fā)現(xiàn)這個(gè)組件,義無(wú)反顧的將icon換成加號(hào)/減號(hào),結(jié)果沒(méi)有任何問(wèn)題了…

可選項(xiàng)

手風(fēng)琴導(dǎo)航可以配置成始終有一個(gè)面板是展開(kāi)的,或者是其他更靈活的(所有的面板都可以關(guān)閉,多個(gè)面板可以同時(shí)打開(kāi)).一些設(shè)計(jì)師認(rèn)為最好的方式是只允許一個(gè)面板打開(kāi),但是其他人都不認(rèn)可

手風(fēng)琴導(dǎo)航可以配置成只有一次只有一個(gè)面板會(huì)打開(kāi),但是很多例子都允許同時(shí)打開(kāi)多個(gè)

除非是有表單元素或者其他的不可變的設(shè)計(jì)元素要求手風(fēng)琴導(dǎo)航總體上要保持一致的尺寸,否則手風(fēng)琴導(dǎo)航元素應(yīng)該可以根據(jù)展開(kāi)面板的不同內(nèi)容來(lái)改變尺寸

通常,手風(fēng)琴導(dǎo)航是通過(guò)單擊來(lái)展開(kāi)面板的,但是如果用戶的使用情景是”開(kāi)心的/有趣的/試試這個(gè)”,那么鼠標(biāo)經(jīng)過(guò)來(lái)展開(kāi)面板也是可以接受的

為什么使用這個(gè)組件

使用這個(gè)組件最主要的原因就是在有限的空間內(nèi)展示大量的選項(xiàng)

特殊情況

大部分手風(fēng)琴導(dǎo)航都是垂直放置的,不過(guò)也可以水平使用

可訪問(wèn)性

對(duì)于鍵盤(pán)用戶來(lái)說(shuō),就像樹(shù)狀菜單和標(biāo)簽一樣,手風(fēng)琴導(dǎo)航通常會(huì)打斷使用.可以給手風(fēng)琴導(dǎo)航標(biāo)簽之間的標(biāo)志和切換面板的上/下箭頭加上鍵盤(pán)導(dǎo)航

當(dāng)javascript被禁用時(shí),手風(fēng)琴導(dǎo)航需要做兼容,可以考慮把所有面板都展開(kāi)

如果什么都不顯示的話對(duì)于屏幕閱讀器來(lái)說(shuō)可能會(huì)導(dǎo)致內(nèi)容丟失.可以考慮將高度設(shè)置成0來(lái)解決.