您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

提升網(wǎng)頁(yè)設(shè)計(jì)品質(zhì)的8種布局方案

2012/3/24 16:18:43來(lái)源：笨活兒

網(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)，也可稱為傳送帶(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)容是你希望“用戶要求”后才出現(xiàn)。這有助于讓用戶一次只關(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)單直觀。縮略圖和圖標(biāo)給用戶指出明路，向他們解釋當(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ò)看縮略圖，用戶就能快速得知特定滑門(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)不僅能用于大容量信息的組織，也能為用戶瀏覽大量產(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)：

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ū)分也很明顯，這正是大部分用戶期待的樣式啊。你也應(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)，介紹性內(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)簽卡效果腳本

3. 模態(tài)窗口

模態(tài)窗口（Modal windows），或者稱為浮窗，一般用于在空間緊張的頁(yè)面中展示額外信息。在模態(tài)窗口中，你可以放置放大版的圖像、額外內(nèi)容、警告/提示信息、視頻等等。用模態(tài)窗口展示信息時(shí)，記得要同時(shí)明確地提示用戶如何關(guān)閉它。

同時(shí)，用于打開(kāi)模態(tài)窗口的鏈接、縮略圖、圖標(biāo)或者其他圖形元素，一定要保證與模態(tài)窗口要展示的內(nèi)容有足夠的關(guān)聯(lián)。相似的圖標(biāo)、摘要、圖形元素都能幫助用戶建立原始鏈接與打開(kāi)的窗口的聯(lián)系。

模態(tài)窗口的例子

運(yùn)用到登錄和注冊(cè)流程中的浮窗
模態(tài)窗口最典型的運(yùn)用就是登錄／注冊(cè)窗口了（與諸如圖像、音頻、視頻、Flash等“傳統(tǒng)”媒體文件相比）。登錄和注冊(cè)表單不是用戶每次瀏覽頁(yè)面都要用到的必要部分，所占頁(yè)面空間理所應(yīng)當(dāng)被節(jié)約下來(lái)。而使用浮窗，則又為用戶省去了重開(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)琴效果）。非常方便，非常友好的用戶界面。

消隱頁(yè)面/使用投影
如果要使用模態(tài)窗口，讓窗口下面的頁(yè)面淡出焦點(diǎn)十分重要。你可以用半透明背景覆蓋或者為窗口添加投影，或者兩者結(jié)合。這么做有兩個(gè)作用：一是能讓用戶將注意力集中到浮窗上，然后暫時(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)窗口的腳本

4. 翻轉(zhuǎn)元素 Rollover Elements

翻轉(zhuǎn)元素目前被越來(lái)越多地運(yùn)用于商業(yè)網(wǎng)站、作品集站點(diǎn)和產(chǎn)品展示頁(yè)。翻轉(zhuǎn)元素的核心概念就是當(dāng)用戶鼠標(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)類似 —— 只不過(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)元素的腳本

5. 漸進(jìn)布局Progressive Layouts

“漸進(jìn)布局”的意思是站點(diǎn)內(nèi)容按照一定的順序一塊一塊地顯示給用戶。這種組織內(nèi)容的做法比較反常，但也能在很多網(wǎng)站上看到。漸進(jìn)布局能幫助用戶更容易地深入一長(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)航的交互性下降了，用戶只能按照網(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)布局。和上面的站非常類似的一個(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)容的可讀性，或者如果用戶想快速瀏覽，都不會(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)格生成器、模版和更多工具

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ì)變成橙色，讓用戶能夠非常明確地了解到自己將要點(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)琴腳本

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)站，用于展示他們龐雜的商品分類。這種樣式正成為設(shè)計(jì)趨勢(shì)，因?yàn)樗芡ㄟ^(guò)普通的翻轉(zhuǎn)就提供大量分類信息，而不需要用戶額外的點(diǎn)擊。

超大下拉菜單的實(shí)例

超大下拉菜單的一個(gè)經(jīng)典例子是 Ruby On Rails Guide 的Guide Index。這個(gè)菜單提供了一個(gè)組織良好、樣式精美的二級(jí)導(dǎo)航。注意，與一般的做法不同，激活二級(jí)菜單需要用戶點(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í)菜單，讓用戶不用一次點(diǎn)擊就能快速了解他們生產(chǎn)的所有汽車。第三級(jí)菜單中，所選汽車的信息被直接提供：包括圖片、許多鏈接、以及其他關(guān)于本車的快讀信息。當(dāng)然，這個(gè)更大的區(qū)塊就是一個(gè)巨大的可點(diǎn)擊區(qū)域。所有細(xì)節(jié)和特別介紹都直接鏈到相應(yīng)頁(yè)面。要了解究竟是怎么回事，就點(diǎn)擊下面的圖片自己去看看吧！

在下拉列表里顯示搜索結(jié)果
最近還比較流行的一個(gè)技巧和上面談到的有點(diǎn)類似：在下拉列表里顯示搜索結(jié)果。 Media Temple Knowledge Base 就使用了這一技巧。他們沒(méi)有使用一個(gè)新頁(yè)面來(lái)顯示用戶的搜索結(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ō)。

菜單腳本

[教程作者：admin]
關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)教程 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)教程 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)布局
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://irelandcustomcontracting.com/tutorial/di1119.html
網(wǎng)頁(yè)設(shè)計(jì)中最常用到的設(shè)計(jì)細(xì)節(jié)
網(wǎng)頁(yè)設(shè)計(jì)用戶體驗(yàn)概述：從用戶體驗(yàn)印證設(shè)計(jì)
圖趣網(wǎng)微信
建議反饋
×