提升網(wǎng)頁(yè)設(shè)計(jì)品質(zhì)的8種布局方案
網(wǎng)頁(yè)設(shè)計(jì)中,內(nèi)容組織恐怕是最至關(guān)重要、最影響設(shè)計(jì)品質(zhì)的方面了。如何將信息組織到好的布局中,是一個(gè)網(wǎng)站的基礎(chǔ),并且應(yīng)該在考慮外觀之前就決定好。沒(méi)有好的布局,網(wǎng)頁(yè)信息流就不能正確傳遞,所有東西都不能建立起合理的聯(lián)系。
在這篇文章中,我們將討論八個(gè)布局解決方案/技巧,這些方案和技巧將有助于你創(chuàng)建整潔有序的內(nèi)容布局。這八個(gè)技巧包括滑門(mén)(sliders)、標(biāo)簽式、漸進(jìn)布局(progressive layouts)、結(jié)構(gòu)網(wǎng)格、模態(tài)窗口(modal window)、翻轉(zhuǎn)元素、手風(fēng)琴效果(accordions)以及超大下拉菜單(mega drop-down-menus)。
1. 滑動(dòng)樣式與傳送帶(Sliders and Carousels)
滑門(mén)(Sliders),也可稱(chēng)為傳送帶(carousels),是一種有序的、交互性強(qiáng)、十分平滑地展示內(nèi)容的方式?;T(mén)樣式是一個(gè)非常流行的技巧,大家都覺(jué)得它很好用,能讓你在固定的區(qū)塊內(nèi)填充上大量?jī)?nèi)容。沒(méi)有滑門(mén)的幫助,這些內(nèi)容可能就要分開(kāi)放到頁(yè)面中的各個(gè)地方。而大多數(shù)時(shí)候,你在使用頁(yè)面空間時(shí)總是捉襟見(jiàn)肘?;蛘撸行﹥?nèi)容是你希望“用戶(hù)要求”后才出現(xiàn)。這有助于讓用戶(hù)一次只關(guān)注一個(gè)內(nèi)容區(qū)塊,也符合他們自己的便利需求。
滑門(mén)樣式的實(shí)例
導(dǎo)航區(qū)提供縮略圖與圖標(biāo)
運(yùn)用滑門(mén)和幻燈樣式時(shí),最好在導(dǎo)航區(qū)提供圖標(biāo)或縮略圖,以便使導(dǎo)航更加簡(jiǎn)單直觀??s略圖和圖標(biāo)給用戶(hù)指出明路,向他們解釋當(dāng)前所在位置,以及有哪些瀏覽選項(xiàng)可供選擇(比如說(shuō)幻燈片的導(dǎo)航可以是水平的,也可以是垂直的)。另外,還能方便他們快速選擇特定滑門(mén)頁(yè)。
Coda網(wǎng)站的滑門(mén)頂部設(shè)計(jì)了標(biāo)簽卡,他們使用的是“滑動(dòng)門(mén)+標(biāo)簽卡”的混合樣式。這個(gè)主意絕頂聰明,因?yàn)橥ㄟ^(guò)看縮略圖,用戶(hù)就能快速得知特定滑門(mén)頁(yè)的內(nèi)容。而且,這些圖標(biāo)也提供了強(qiáng)大的、令人印象深刻的、干凈整潔的視覺(jué)支持。除了圖標(biāo)和標(biāo)簽?zāi)阋部梢栽跇?biāo)題前加上小圖片, 或者只用數(shù)字也行。
用于展示產(chǎn)品的滑門(mén)樣式
與上面的例子對(duì)應(yīng),滑門(mén)不僅能用于大容量信息的組織,也能為用戶(hù)瀏覽大量產(chǎn)品條目提供方便。 SourceBits (見(jiàn)下圖)使用了多層滑門(mén)(一個(gè)水平的,一個(gè)垂直的),用唱片封面作為導(dǎo)航條目。
水平滑門(mén)兩端都有大的圓形箭頭圖標(biāo),實(shí)時(shí)反映左右導(dǎo)航的可用性?;瑒?dòng)的時(shí)候有平滑的動(dòng)畫(huà),用起來(lái)非常舒服。同時(shí),你也能看到,各個(gè)元素間距都精心設(shè)計(jì)過(guò),這有助于內(nèi)容組織,也提升了可用性。鼠標(biāo)滑過(guò)時(shí),每個(gè)條目還有漂亮的聚光燈效果。
垂直滑動(dòng)的內(nèi)容以及超大的水平“點(diǎn)擊條”
接下來(lái)看看 QuickSnapper 的滑門(mén)。這是一個(gè)完美融入頁(yè)面整體布局的十分好用的垂直滑門(mén)。滑門(mén)內(nèi)容中有大量截屏圖,內(nèi)容被有序地組織起來(lái)。這個(gè)滑門(mén)最贊的地方就是上下方的按鈕導(dǎo)航。按鈕寬及整個(gè)滑門(mén),大的按鈕讓“推拉”滑門(mén)更加容易。
還有,這些按鈕的:active和:focus效果也很漂亮。
滑門(mén)腳本
你可以參考下面的腳本、技巧和教程制作你自己的滑門(mén):
- Slick Accessible Slideshow using jQuery
- Coda-Slider 1.1.1
- jquery.scrollable 1.0.2
- Create an Amazon Books Widget with jQuery and XML
- Agile Carousel
- Easy Image or Content Slider
- Slider Gallery
- Coda Slider Effect
- iCarousel
2.標(biāo)簽卡導(dǎo)航元素
本質(zhì)上標(biāo)簽卡導(dǎo)航和滑門(mén)效果是差不多的技巧。它們都能幫你把一大片內(nèi)容放到一小塊區(qū)域里。標(biāo)簽卡導(dǎo)航很常見(jiàn),但也有很多不常見(jiàn)的運(yùn)用方式。我們這里關(guān)注的是在一個(gè)頁(yè)面內(nèi)部的標(biāo)簽卡,而不是用于在不同頁(yè)面之間跳轉(zhuǎn)的標(biāo)簽樣式主導(dǎo)航。標(biāo)簽卡很明顯地將內(nèi)容劃分到不同區(qū)塊,最終又把他們?nèi)诤系秸嫉孛娣e很小的一個(gè)區(qū)塊中。
標(biāo)簽卡的樣式范例
出眾的背景,大的可點(diǎn)擊區(qū)域,明顯的分割
第一個(gè)例子來(lái)自 Mac Pro網(wǎng)站 的“Performance”部分,其標(biāo)簽元素的組織非常值得學(xué)習(xí)。這些標(biāo)簽卡上的文字都十分易讀,可點(diǎn)擊區(qū)域很大,各標(biāo)簽視覺(jué)上的區(qū)分也很明顯,這正是大部分用戶(hù)期待的樣式啊。你也應(yīng)該能注意到,當(dāng)前標(biāo)簽卡上還有著十分微妙的漸變背景,與主內(nèi)容區(qū)塊很好地融合在了一起。未激活的標(biāo)簽背景則略暗,主內(nèi)容區(qū)塊在其上有微弱的投影,這種做法加強(qiáng)了深度感和立體效果。十分簡(jiǎn)單而有效的技巧。
按鈕區(qū)分的簡(jiǎn)潔標(biāo)簽卡
以下是另一個(gè)利用標(biāo)簽卡緊湊地展示信息的實(shí)例。根據(jù) Atebits 的布局結(jié)構(gòu),介紹性?xún)?nèi)容的空間被擠壓,不太適合做成多區(qū)塊樣式。所以他們介紹內(nèi)容的三大部分被組織到了標(biāo)簽中,保持了布局的整潔有序。再一次地,當(dāng)前標(biāo)簽卡的背景與主內(nèi)容區(qū)融合,不活動(dòng)標(biāo)簽卡則是較暗的灰色背景。你同樣也會(huì)發(fā)現(xiàn)標(biāo)簽卡之間有著漂亮的分割線,使得每個(gè)標(biāo)簽卡看起來(lái)都像是獨(dú)立的按鈕。
為整個(gè)標(biāo)簽集提供清晰的分割線
Fontcase 的標(biāo)簽卡設(shè)計(jì)也很精妙,很有現(xiàn)代感。盡管在未激活標(biāo)簽之間沒(méi)有分割線,當(dāng)前標(biāo)簽卻有明顯的邊線。你也能注意到,在整個(gè)標(biāo)簽集的上方和下方各有一條邊線。標(biāo)簽卡使用了圖標(biāo)與留白來(lái)突出文字,提高了易用性。
標(biāo)簽卡效果腳本
- Create a Slick Tabbed Content Area using CSS & jQuery
- JavaScript tabifier
- Yetii – A JavaScript Tab Interface
- Tabbed Page Interface
- Updated JQuery Nested Tab Set
- Scriptaculous Tabs
- Accordian Tabs
3. 模態(tài)窗口
模態(tài)窗口(Modal windows),或者稱(chēng)為浮窗,一般用于在空間緊張的頁(yè)面中展示額外信息。在模態(tài)窗口中,你可以放置放大版的圖像、額外內(nèi)容、警告/提示信息、視頻等等。用模態(tài)窗口展示信息時(shí),記得要同時(shí)明確地提示用戶(hù)如何關(guān)閉它。
同時(shí),用于打開(kāi)模態(tài)窗口的鏈接、縮略圖、圖標(biāo)或者其他圖形元素,一定要保證與模態(tài)窗口要展示的內(nèi)容有足夠的關(guān)聯(lián)。相似的圖標(biāo)、摘要、圖形元素都能幫助用戶(hù)建立原始鏈接與打開(kāi)的窗口的聯(lián)系。
模態(tài)窗口的例子
運(yùn)用到登錄和注冊(cè)流程中的浮窗
模態(tài)窗口最典型的運(yùn)用就是登錄/注冊(cè)窗口了(與諸如圖像、音頻、視頻、Flash等“傳統(tǒng)”媒體文件相比)。登錄和注冊(cè)表單不是用戶(hù)每次瀏覽頁(yè)面都要用到的必要部分,所占頁(yè)面空間理所應(yīng)當(dāng)被節(jié)約下來(lái)。而使用浮窗,則又為用戶(hù)省去了重開(kāi)一個(gè)頁(yè)面的時(shí)間,畢竟這只是一個(gè)很簡(jiǎn)單的非常用動(dòng)作。他們能在網(wǎng)站的任何頁(yè)面中登錄/注冊(cè),而不用中斷現(xiàn)有流程——只要網(wǎng)站的設(shè)計(jì)者能提供基于Ajax的“靜悄悄的” 登錄/注冊(cè)。
Grooveshark 整個(gè)站點(diǎn)的每一個(gè)頁(yè)面中,這個(gè)漂亮的登錄窗口都觸手可及。注意,點(diǎn)擊登錄( Lodin> )按鈕后并不會(huì)載入一個(gè)新頁(yè)面,而是直接把注冊(cè)表單替換成了登陸表單(使用了手風(fēng)琴效果)。非常方便,非常友好的用戶(hù)界面。
消隱頁(yè)面/使用投影
如果要使用模態(tài)窗口,讓窗口下面的頁(yè)面淡出焦點(diǎn)十分重要。你可以用半透明背景覆蓋或者為窗口添加投影,或者兩者結(jié)合。這么做有兩個(gè)作用:一是能讓用戶(hù)將注意力集中到浮窗上,然后暫時(shí)忽視掉背后的頁(yè)面。另外,也能增加窗口和頁(yè)面之間的深度感和區(qū)分度,讓人在視覺(jué)上覺(jué)得這窗口確實(shí)是漂浮著的。注意看下面的例子(KissMetrics),半透明的黑色背景讓頁(yè)面消隱,有助于登錄浮窗暫時(shí)成為視覺(jué)重點(diǎn)。另外,取消和關(guān)閉窗口的按鈕也設(shè)計(jì)得很好,夠明顯,夠漂亮。
RealMacSoftware 的浮窗只做了投影,而沒(méi)有讓整個(gè)頁(yè)面消隱。只要深度感和區(qū)分度做得足夠,這樣也很有效。
模態(tài)窗口的腳本
- Fancy Lightbox
- Lightbx 2
- Facebook Image/Content Viewer
- Woork Mootools Lightbox
- nyroModal JQuery Plugin
- JQuery Alert Dialog
- LightWindow
- ThickBox 3.1
4. 翻轉(zhuǎn)元素 Rollover Elements
翻轉(zhuǎn)元素目前被越來(lái)越多地運(yùn)用于商業(yè)網(wǎng)站、作品集站點(diǎn)和產(chǎn)品展示頁(yè)。翻轉(zhuǎn)元素的核心概念就是當(dāng)用戶(hù)鼠標(biāo)移到某個(gè)按鈕或網(wǎng)頁(yè)元素上時(shí),處于另一個(gè)布局區(qū)域的元素就自動(dòng)顯示出來(lái)。請(qǐng)看下面的例子深入了解我說(shuō)的“翻轉(zhuǎn)元素”究竟是什么。
翻轉(zhuǎn)實(shí)例
標(biāo)簽卡翻轉(zhuǎn)
下圖是 Miro主頁(yè) 的截屏,他們?cè)O(shè)計(jì)了一個(gè)十分精妙的巨大翻轉(zhuǎn)元素。這 本質(zhì)上和滑門(mén)類(lèi)似 —— 只不過(guò)內(nèi)容切換時(shí)不需要點(diǎn)擊罷了。
小地方的微妙翻轉(zhuǎn)
TaoEffect 向我們完美展示了如何通過(guò)設(shè)計(jì)精巧漂亮的翻轉(zhuǎn)元素來(lái)添加清爽整潔的額外信息(這種效果最早是應(yīng)用于前文提到過(guò)的Coda網(wǎng)站,但我們選擇了TaoEffect作為這一節(jié)的實(shí)例)。信息的展示十分友好,您只需要把鼠標(biāo)移到按鈕上即可。
訪問(wèn)網(wǎng)站你會(huì)發(fā)現(xiàn),翻轉(zhuǎn)時(shí)有非常輕柔的動(dòng)畫(huà),垂直跳動(dòng) + 淡入淡出。你應(yīng)該也能注意到它的背景是半透明的,跳出來(lái)的卡片邊緣還有高光和投影,與背景很好的區(qū)分開(kāi)來(lái)。
內(nèi)容地圖上的翻轉(zhuǎn)元素
OneHub 則利用翻轉(zhuǎn)元素實(shí)現(xiàn)了另一種效果。這個(gè)頁(yè)面有點(diǎn)像地圖,在不同區(qū)域做出了標(biāo)注。鼠標(biāo)移到標(biāo)注上時(shí),會(huì)顯示該標(biāo)注的額外信息。這種方法用在需要分區(qū)域詳細(xì)解釋的產(chǎn)品介紹頁(yè)上將有特效。
與幻燈切換結(jié)合的翻轉(zhuǎn)元素
另一個(gè)蠻有趣的設(shè)計(jì)來(lái)自 SquaredEye —— 他們?cè)趯?dǎo)航按鈕上用翻轉(zhuǎn)元素來(lái)展示下一頁(yè)內(nèi)容的預(yù)覽圖。
小提示/翻轉(zhuǎn)元素的腳本
- Prototip 2
- Coda Popup Bubbles
- Build a Better Tooltip with jQuery Awesomeness
- jQuery plugin: Tooltip
- Create a Simple, Powerful Product Highlighter with MooTools
- Easiest Tooltip and Image Preview Using jQuery
5. 漸進(jìn)布局Progressive Layouts
“漸進(jìn)布局”的意思是站點(diǎn)內(nèi)容按照一定的順序一塊一塊地顯示給用戶(hù)。這種組織內(nèi)容的做法比較反常,但也能在很多網(wǎng)站上看到。漸進(jìn)布局能幫助用戶(hù)更容易地深入一長(zhǎng)串信息。
漸進(jìn)布局的實(shí)例
整個(gè)站點(diǎn)都由漸進(jìn)布局構(gòu)成
Sursly.com(貌似被墻,請(qǐng)點(diǎn)擊這里代理訪問(wèn))的整個(gè)作品集站點(diǎn)都基于漸進(jìn)布局。您應(yīng)該能注意到,頁(yè)面右上角有一個(gè)“GO”按鈕,每一頁(yè)面都是從上一頁(yè)面中的GO按鈕鏈接過(guò)來(lái)的。這種頁(yè)面之間的漸進(jìn)系統(tǒng)代替了傳統(tǒng)的導(dǎo)航和菜單。當(dāng)然,這樣做也有一個(gè)很明顯的缺點(diǎn):導(dǎo)航的交互性下降了,用戶(hù)只能按照網(wǎng)站建設(shè)者想要的順序獲取內(nèi)容。(譯注:還有一個(gè)缺點(diǎn)是,在不同分辨率屏幕上的顯示差異太大,因?yàn)槟惚仨毧紤]到頁(yè)面內(nèi)部各區(qū)塊的位置問(wèn)題)
盡管單個(gè)頁(yè)面布局能被存為書(shū)簽(使用# 錨記),但對(duì)于隨機(jī)訪問(wèn)者來(lái)說(shuō),則無(wú)法通過(guò)一個(gè)明晰的導(dǎo)航對(duì)站點(diǎn)內(nèi)容建立起直接的整體感知。而且,這種布局一般只有一個(gè)“航向”,從易用性的角度上來(lái)說(shuō),所謂“導(dǎo)航”的概念在這里幾乎不能適用。
譯注:這種水平布局的網(wǎng)站大都采用了漸進(jìn)布局。和上面的站非常類(lèi)似的一個(gè)網(wǎng)站是: peter-pearson.com 相對(duì)于簡(jiǎn)單的滾動(dòng),這個(gè)站還在背景里做了非常可愛(ài)的線條,十分漂亮。另外推薦 26個(gè)水平布局網(wǎng)站設(shè)計(jì),在英文原文的留言里還有很多bonus可看。
垂直方向的漸進(jìn)布局
Danny Blackman 的作品集也是僅通過(guò)一張漸進(jìn)式布局頁(yè)面來(lái)實(shí)現(xiàn)的。各塊元素相互獨(dú)立,在一張頁(yè)面上垂直展示。相鄰元素之間有滾動(dòng)按鈕,每個(gè)元素都有返回頂部的按鈕。菜單或所謂導(dǎo)航還是沒(méi)有被使用。
譯注:推薦一個(gè)做得更好的例子:searchinsidevideo.com 他們使用了固定在頂端的導(dǎo)航,字體也非常大的,極富視覺(jué)沖擊力,用起來(lái)也很方便。
ScrollTo 腳本
- ScrollTo – 使用這個(gè)jQuery插件,就能輕松建立漸進(jìn)式布局。
6. 網(wǎng)格
討論布局的文章是不可能避開(kāi)網(wǎng)格不談的。網(wǎng)格通常被認(rèn)為是任何平衡、有序、簡(jiǎn)練的網(wǎng)頁(yè)布局的基礎(chǔ)。很多設(shè)計(jì)師都認(rèn)為網(wǎng)格是處理信息容量很大的頁(yè)面時(shí)的必備武器。有時(shí)候單獨(dú)使用網(wǎng)格就能很好的展示信息,甚至不需要其他技巧。好的網(wǎng)格能夠?qū)⒁粋€(gè)頁(yè)面中的全部?jī)?nèi)容都整合進(jìn)流動(dòng)布局里,而內(nèi)容的可讀性,或者如果用戶(hù)想快速瀏覽,都不會(huì)受到影響。
下面的網(wǎng)站使用了嚴(yán)格的網(wǎng)格布局。整個(gè)站點(diǎn)只有一張頁(yè)面,需要融入大量信息。不過(guò),全部信息被整合進(jìn)這整潔的兩欄布局網(wǎng)格中。整個(gè)布局嚴(yán)謹(jǐn)、強(qiáng)健、穩(wěn)固,留白恰到好處。瀏覽或仔細(xì)研讀內(nèi)容都非常方便。
使用不同背景區(qū)分網(wǎng)格區(qū)域
使用網(wǎng)格一般是因?yàn)槟阈枰谝粋€(gè)很緊湊的區(qū)域內(nèi)放置大量?jī)?nèi)容。你想要?jiǎng)?chuàng)建整潔有序的網(wǎng)站布局,但是又不能隨意添加很多留白來(lái)區(qū)分區(qū)塊。如此的話,你就需要使用不同背景來(lái)區(qū)分網(wǎng)格區(qū)域。沒(méi)了網(wǎng)格間的大量留白,只要網(wǎng)格內(nèi)還有少量的內(nèi)邊距,也可以看起來(lái)很不錯(cuò)。Valleycreek.org 就用了這種戰(zhàn)術(shù),盡管已經(jīng)有一條細(xì)線來(lái)分割網(wǎng)格區(qū)域,背景色的差異還是被用到,以提供更明顯的區(qū)分。
網(wǎng)格生成器、模版和更多工具
- Grid System Generator
- Variable Grid Systems Generator
- 960 Grid System
- Grid Designer
- Grid Calculator
- 50 Useful Design Tools For Beautiful Web Typography (including grid-resources)
7. 手風(fēng)琴效果(折疊菜單)
折疊菜單和滑動(dòng)門(mén)以及標(biāo)簽卡涉及同一個(gè)概念:把大量信息壓縮到一小塊區(qū)域里。“手風(fēng)琴效果”指的是一些被水平或垂直組織的區(qū)塊,通過(guò)點(diǎn)擊,一個(gè)內(nèi)容區(qū)塊滑向另一個(gè)區(qū)塊,并將其內(nèi)部?jī)?nèi)容展示出來(lái),和手風(fēng)琴的推拉過(guò)程有點(diǎn)相似。
手風(fēng)琴效果的實(shí)例
功能性和大點(diǎn)擊區(qū)域
Alex Cohaniuc 的手風(fēng)琴菜單設(shè)計(jì)的很好。把作品項(xiàng)目藏到手風(fēng)琴里是的做法其實(shí)挺有道理的,因?yàn)檫@能把每個(gè)項(xiàng)目的不必要信息隱藏起來(lái),等訪客有需要的時(shí)候再顯示。說(shuō)這項(xiàng)設(shè)計(jì)好是因?yàn)椋阂?,每塊畫(huà)布的標(biāo)題都很大,很好點(diǎn)擊;二,每塊標(biāo)簽卡都使用了一個(gè)小箭頭來(lái)反映開(kāi)合狀態(tài);三,鼠標(biāo)滑過(guò)時(shí),當(dāng)前標(biāo)簽卡有將它區(qū)分出來(lái)的不同背景色。
水平內(nèi)容滾動(dòng)
Jason Reed 使用手風(fēng)琴將整個(gè)站點(diǎn)糅合進(jìn)一張頁(yè)面里。他沒(méi)有賦予手風(fēng)琴以特別不一般的視覺(jué)特征,而是讓它融入了頁(yè)面之中。另外,這是一個(gè)水平方向推拉的手風(fēng)琴(盡管標(biāo)簽卡是垂直方向的)。請(qǐng)注意看他的標(biāo)簽卡,每個(gè)標(biāo)簽卡之間的距離很大,這些標(biāo)簽卡,或者說(shuō)標(biāo)題,并不像上一個(gè)例子有那么明顯的區(qū)分,設(shè)計(jì)師利用了留白來(lái)將它們各自獨(dú)立。鼠標(biāo)移上去的時(shí)候,這些十分易讀的標(biāo)簽就會(huì)變成橙色,讓用戶(hù)能夠非常明確地了解到自己將要點(diǎn)擊的標(biāo)簽后面都有什么。
包含圖像和信息的手風(fēng)琴
Marius Roosendaal 使用另一個(gè)非常漂亮的手風(fēng)琴來(lái)“儲(chǔ)藏”他的作品圖像。與上面兩個(gè)例子一樣,每一個(gè)內(nèi)容區(qū)塊都是一個(gè)項(xiàng)目的展示。不過(guò),此例的手風(fēng)琴里的每個(gè)圖像還附加有一些文字介紹。你能注意到一個(gè)小按鈕被用來(lái)顯示/隱藏介紹。他同時(shí)也提供到更詳細(xì)介紹或者更大預(yù)覽圖的鏈接。在一個(gè)小小的手風(fēng)琴里當(dāng)然不能塞進(jìn)特別特別多的信息,所以如果可以的話,還是盡量給每個(gè)項(xiàng)目都加上到詳細(xì)內(nèi)容的鏈接吧。
手風(fēng)琴腳本
- Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
- Apple.com Downoads Page Slide out and drawer effect
- UI/API/1.7.1/Accordion jQuery Plugin
- jQuery UI Accordion
- Simple JQuery Accordion menu
- jQuery Accordion Madness
- jQuery Examples – Horizontal Accordion
8. 超大下拉菜單
導(dǎo)航不一定非得是幾個(gè)簡(jiǎn)單的超鏈接組合。最近,導(dǎo)航設(shè)計(jì)有一個(gè)流行趨勢(shì):不僅僅提供“航向”選擇,也提供網(wǎng)站內(nèi)各“終點(diǎn)站”位置以及“終點(diǎn)站”之間的從屬關(guān)系。所謂“超大”下拉菜單常見(jiàn)于電子常務(wù)網(wǎng)站,用于展示他們龐雜的商品分類(lèi)。這種樣式正成為設(shè)計(jì)趨勢(shì),因?yàn)樗芡ㄟ^(guò)普通的翻轉(zhuǎn)就提供大量分類(lèi)信息,而不需要用戶(hù)額外的點(diǎn)擊。
超大下拉菜單的實(shí)例
超大下拉菜單的一個(gè)經(jīng)典例子是 Ruby On Rails Guide 的Guide Index。這個(gè)菜單提供了一個(gè)組織良好、樣式精美的二級(jí)導(dǎo)航。注意,與一般的做法不同,激活二級(jí)菜單需要用戶(hù)點(diǎn)擊,Guide Index右邊有“切換” 圖標(biāo),并且有著與將要彈出的二級(jí)菜單相融合的背景色。彈出的二級(jí)菜單也有細(xì)微的投影。
譯注:這站點(diǎn)在IE的Quirks模式下有顯示異常……(話說(shuō)顯示不異常的頁(yè)面還基本上沒(méi)有……)
下面的截圖里的投影,我也看不到……
帶更多信息的多級(jí)菜單
Porsche 對(duì)于上面說(shuō)到的技巧來(lái)說(shuō),簡(jiǎn)直是一個(gè)完美的例子。Porsche 的主頁(yè)提供一個(gè)多級(jí)菜單,讓用戶(hù)不用一次點(diǎn)擊就能快速了解他們生產(chǎn)的所有汽車(chē)。第三級(jí)菜單中,所選汽車(chē)的信息被直接提供:包括圖片、許多鏈接、以及其他關(guān)于本車(chē)的快讀信息。當(dāng)然,這個(gè)更大的區(qū)塊就是一個(gè)巨大的可點(diǎn)擊區(qū)域。所有細(xì)節(jié)和特別介紹都直接鏈到相應(yīng)頁(yè)面。要了解究竟是怎么回事,就點(diǎn)擊下面的圖片自己去看看吧!
在下拉列表里顯示搜索結(jié)果
最近還比較流行的一個(gè)技巧和上面談到的有點(diǎn)類(lèi)似:在下拉列表里顯示搜索結(jié)果。 Media Temple Knowledge Base 就使用了這一技巧。他們沒(méi)有使用一個(gè)新頁(yè)面來(lái)顯示用戶(hù)的搜索結(jié)果,搜索結(jié)果在一個(gè)下拉列表里隨著你的輸入而實(shí)時(shí)變化。不過(guò),請(qǐng)注意,完整搜索結(jié)果頁(yè)的鏈接仍然存在,您若要在自己的設(shè)計(jì)中使用這種設(shè)計(jì),還請(qǐng)不要忘記這一點(diǎn)。
在下拉區(qū)塊中顯示額外信息
Gateway.com 繼續(xù)登場(chǎng)。你能看到他們?cè)陧敳坎藛沃惺褂昧顺蟮南吕瓍^(qū)塊來(lái)展示產(chǎn)品。下拉區(qū)塊中的產(chǎn)品排列組織得非常好,圖片提供了強(qiáng)健的視覺(jué)支持。這個(gè)菜單還提供了諸如價(jià)格和屏幕尺寸等額外信息,讓顧客能夠在查看具體頁(yè)面之前就有所選擇。因?yàn)楹芏嗳硕己荜P(guān)心產(chǎn)品價(jià)格——至少對(duì)于很多有購(gòu)買(mǎi)需求的人來(lái)說(shuō)。
菜單腳本
本文地址:http://m.likemindfilms.com/tutorial/di1119.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏