交互學習筆記-手風琴菜單 - 網頁設計 |
http://webdesign.zoapcon.com
|
|
版權聲明:轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明 手風琴菜單(accordion menu)在交互頁面上經常使用的一種展現方式,通常用在有多個二級導航(或內容)以上的并列層級,這些層級可以是標簽,標題,卡片等等。但是不管形式如何,其目低都是為了將又有用的信息展現給用戶,將臨時不用的信息隱藏起來,這樣可以起到節省空間的作用。 【手風琴的分類】 1.卡片堆: a.用在聊天軟件上,作為好友分組。最典型如qq,旺旺,msn等。 b.用在幫助中心分類里。
n久版的QQ好友分組,很經典的應用
淘寶幫助中心 2.標簽分類:
a.蘋果網站的軟件下載分類
b.visualthesaurus網站的詞性分類 3.作為標題
Alex Cohaniuc 的手風琴菜單設計的很好。把作品項目藏到手風琴里是的做法其實挺有道理的,因為這能把每個項目的不必要信息隱藏起來,等訪客有需要的時候再顯示。說這項設計好是因為:一,每塊畫布的標題都很大,很好點擊;二,每塊標簽卡都使用了一個小箭頭來反映開合狀態;三,鼠標滑過時,當前標簽卡有將它區分出來的不同背景色。
Marius Roosendaal 使用另一個非常漂亮的手風琴來“儲藏”他的作品圖像。與上面例子一樣,每一個內容區塊都是一個項目的展示。不過,此例的手風琴里的每個圖像還附加有一些文字介紹。你能注意到一個小按鈕被用來顯示/隱藏介紹。他同時也提供到更詳細介紹或者更大預覽圖的鏈接。在一個小小的手風琴里當然不能塞進特別特別多的信息,所以如果可以的話,還是盡量給每個項目都加上到詳細內容的鏈接吧。 4.用于全局導航
polargold網站很新穎的將手風琴效果用于全站的導航,點擊每一個字母標題都展現該系列下的人名和作品。視覺形式上也打破了傳統的手風琴的塊狀模式,看上去清晰而活潑。 5.用于流程引導
Grooveshark 整個站點的每一個頁面中,這個漂亮的登錄窗口都觸手可及。注意,點擊登錄( Lodin> )按鈕后并不會載入一個新頁面,而是直接把注冊表單替換成了登錄表單(使用了手風琴效果)。非常方便,非常友好的用戶界面。我覺的這可以算是手風琴的變體使用。 TAG: 網頁設計 | web design |
|
- Jan 09 Mon 2012 13:29
交互學習筆記-手風琴菜單_網頁設計
close
文章標籤
全站熱搜
留言列表