手風(fēng)琴菜單（accordion menu）在交互頁面上經(jīng)常使用的一種展現(xiàn)方式，通常用在有多個二級導(dǎo)航（或內(nèi)容）以上的并列層級，這些層級可以是標(biāo)簽，標(biāo)題，卡片等等。但是不管形式如何，其目低都是為了將又有用的信息展現(xiàn)給用戶，將臨時不用的信息隱藏起來，這樣可以起到節(jié)省空間的作用。

【手風(fēng)琴的分類】

1.卡片堆：

a.用在聊天軟件上，作為好友分組。最典型如qq，旺旺，msn等。

b.用在幫助中心分類里。

n久版的QQ好友分組，很經(jīng)典的應(yīng)用

淘寶幫助中心

2.標(biāo)簽分類：

a.蘋果網(wǎng)站的軟件下載分類

b.visualthesaurus網(wǎng)站的詞性分類

3.作為標(biāo)題

Alex Cohaniuc 的手風(fēng)琴菜單設(shè)計的很好。把作品項(xiàng)目藏到手風(fēng)琴里是的做法其實(shí)挺有道理的，因?yàn)檫@能把每個項(xiàng)目的不必要信息隱藏起來，等訪客有需要的時候再顯示。說這項(xiàng)設(shè)計好是因?yàn)椋阂?，每塊畫布的標(biāo)題都很大，很好點(diǎn)擊；二，每塊標(biāo)簽卡都使用了一個小箭頭來反映開合狀態(tài)；三，鼠標(biāo)滑過時，當(dāng)前標(biāo)簽卡有將它區(qū)分出來的不同背景色。

Marius Roosendaal 使用另一個非常漂亮的手風(fēng)琴來“儲藏”他的作品圖像。與上面例子一樣，每一個內(nèi)容區(qū)塊都是一個項(xiàng)目的展示。不過，此例的手風(fēng)琴里的每個圖像還附加有一些文字介紹。你能注意到一個小按鈕被用來顯示/隱藏介紹。他同時也提供到更詳細(xì)介紹或者更大預(yù)覽圖的鏈接。在一個小小的手風(fēng)琴里當(dāng)然不能塞進(jìn)特別特別多的信息，所以如果可以的話，還是盡量給每個項(xiàng)目都加上到詳細(xì)內(nèi)容的鏈接吧。

4.用于全局導(dǎo)航

polargold網(wǎng)站很新穎的將手風(fēng)琴效果用于全站的導(dǎo)航，點(diǎn)擊每一個字母標(biāo)題都展現(xiàn)該系列下的人名和作品。視覺形式上也打破了傳統(tǒng)的手風(fēng)琴的塊狀模式，看上去清晰而活潑。

5.用于流程引導(dǎo)

Grooveshark 整個站點(diǎn)的每一個頁面中，這個漂亮的登錄窗口都觸手可及。注意，點(diǎn)擊登錄（ Lodin> ）按鈕后并不會載入一個新頁面，而是直接把注冊表單替換成了登錄表單（使用了手風(fēng)琴效果）。非常方便，非常友好的用戶界面。我覺的這可以算是手風(fēng)琴的變體使用。