版權聲明：轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明
http://lovelyrosa.blogbus.com/logs/42079191.html

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

【手風琴的分類】

1.卡片堆：

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

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

n久版的QQ好友分組，很經典的應用

淘寶幫助中心

2.標簽分類：

a.蘋果網站的軟件下載分類

b.visualthesaurus網站的詞性分類

3.作為標題

Alex Cohaniuc 的手風琴菜單設計的很好。把作品項目藏到手風琴里是的做法其實挺有道理的，因為這能把每個項目的不必要信息隱藏起來，等訪客有需要的時候再顯示。說這項設計好是因為：一，每塊畫布的標題都很大，很好點擊；二，每塊標簽卡都使用了一個小箭頭來反映開合狀態；三，鼠標滑過時，當前標簽卡有將它區分出來的不同背景色。

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

4.用于全局導航

polargold網站很新穎的將手風琴效果用于全站的導航，點擊每一個字母標題都展現該系列下的人名和作品。視覺形式上也打破了傳統的手風琴的塊狀模式，看上去清晰而活潑。

5.用于流程引導

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