|
8. 超大下拉菜單
導(dǎo)航不一定非得是幾個簡單的超鏈接組合。最近，導(dǎo)航設(shè)計有一個流行趨勢：不僅僅提供“航向”選擇，也提供網(wǎng)站內(nèi)各“終點站”位置以及“終點站”之間
的從屬關(guān)系。所謂“超大”下拉菜單常見于電子常務(wù)網(wǎng)站，用于展示他們龐雜的商品分類。這種樣式正成為設(shè)計趨勢，因為它能通過普通的翻轉(zhuǎn)就提供大量分類信
息，而不需要用戶額外的點擊。
超大下拉菜單的實例
超大下拉菜單的一個經(jīng)典例子是 Ruby On Rails Guide 的Guide Index。這個菜單提供了一個組織良好、樣式精美的二級導(dǎo)航。注意，與一般的做法不同，激活二級菜單需要用戶點擊，Guide Index右邊有“切換” 圖標，并且有著與將要彈出的二級菜單相融合的背景色。彈出的二級菜單也有細微的投影。
譯注：這站點在IE的Quirks模式下有顯示異常……（話說顯示不異常的頁面還基本上沒有……）
下面的截圖里的投影，我也看不到……
帶更多信息的多級菜單
Porsche
對于上面說到的技巧來說，簡直是一個完美的例子。Porsche
的主頁提供一個多級菜單，讓用戶不用一次點擊就能快速了解他們生產(chǎn)的所有汽車。第三級菜單中，所選汽車的信息被直接提供：包括圖片、許多鏈接、以及其他關(guān)于本車的快讀信息。當然，這個更大的區(qū)塊就是一個巨大的可點擊區(qū)域。所有細節(jié)和特別介紹都直接鏈到相應(yīng)頁面。要了解究竟是怎么回事，就點擊下面的圖片自己去看看吧！
在下拉列表里顯示搜索結(jié)果
最近還比較流行的一個技巧和上面談到的有點類似：在下拉列表里顯示搜索結(jié)果。 Media Temple Knowledge Base 就使用了這一技巧。他們沒有使用一個新頁面來顯示用戶的搜索結(jié)果，搜索結(jié)果在一個下拉列表里隨著你的輸入而實時變化。不過，請注意，完整搜索結(jié)果頁的鏈接仍然存在，您若要在自己的設(shè)計中使用這種設(shè)計，還請不要忘記這一點。
在下拉區(qū)塊中顯示額外信息
Gateway.com
繼續(xù)登場。你能看到他們在頂部菜單中使用了超大的下拉區(qū)塊來展示產(chǎn)品。下拉區(qū)塊中的產(chǎn)品排列組織得非常好，圖片提供了強健的視覺支持。這個菜單還提供了諸
如價格和屏幕尺寸等額外信息，讓顧客能夠在查看具體頁面之前就有所選擇。因為很多人都很關(guān)心產(chǎn)品價格——至少對于很多有購買需求的人來說。
菜單腳本
更多資源
你應(yīng)該也會喜歡（全是英文）：
關(guān)于作者
Matt Cronin 是一位富有激情的平面設(shè)計師，網(wǎng)頁設(shè)計師/開發(fā)者，Cocoa程序員，攝影師，數(shù)字藝術(shù)家，等等。他也熱愛寫作，已經(jīng)為Smashing Magazine寫過很多好文。他現(xiàn)在正著手于一個叫做i VAEOU 的項目，不久之后就能面試。 Follow Matt on Twitter.
譯文原文來自笨活兒，轉(zhuǎn)載請保留本鏈接：提升設(shè)計品質(zhì)的8個布局方案。
英文原文：8 Layout Solutions To Improve Your Designs
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2933669-1-1.html
本文鏈接：http://www.95time.cn/design/doc/2010/7451.asp 
出處：笨活兒
責任編輯：moby
上一頁 提升設(shè)計品質(zhì)的8個布局方案 [7] 下一頁
|
第 1 頁 
第 8 頁 提升設(shè)計品質(zhì)的8個布局方案 [8]
