最近事情很多，工作，生活，感情，親情…。.每個(gè)人在每個(gè)方面或多或少都會(huì)收到過挫折和困難，但是請(qǐng)享受并面對(duì)，因?yàn)檫@樣才是完整的生活……

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、齊齊哈爾網(wǎng)站維護(hù)、網(wǎng)站推廣。

從Yahoo Pattern中學(xué)到不少東西，看這塊中文信息比較少，所以打算開始翻譯一下。同時(shí)因?yàn)槭诛L(fēng)琴導(dǎo)航這個(gè)組件在新版的客戶端中也開始使用，所以先寫這個(gè)。

手風(fēng)琴導(dǎo)航（Accordion）

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

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

解決什么問題？

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

什么時(shí)候用？

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

譯者注：此處要注意，選項(xiàng)列表不是內(nèi)容的標(biāo)題欄（如截圖中是4欄），而是里面的內(nèi)容元素，比如新聞標(biāo)題，作者，日期，圖片，該要，文字鏈等。

具體解決辦法是什么？

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

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

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

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

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

建議

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

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

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

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

可選項(xiàng)

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

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

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

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

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

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

特殊情況

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

可訪問性

對(duì)于鍵盤用戶來說，就像樹狀菜單和標(biāo)簽一樣，手風(fēng)琴導(dǎo)航通常會(huì)打斷使用?？梢越o手風(fēng)琴導(dǎo)航標(biāo)簽之間的標(biāo)志和切換面板的+/-號(hào)圖標(biāo)加上鍵盤導(dǎo)航。

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

如果什么都不顯示的話對(duì)于屏幕閱讀器來說可能會(huì)導(dǎo)致內(nèi)容丟失?？梢钥紤]將高度設(shè)置成0來解決。

文章題目：手風(fēng)琴導(dǎo)航(Accordion)_Yahoo_Pattern(翻譯)
分享網(wǎng)址：http://weahome.cn/article/cgidpe.html