推薦：網(wǎng)站設(shè)計(jì)的原理
ToneandTexture色調(diào)與結(jié)構(gòu)Thisspecificallyappliestodrawingsmorethanphotography,buttoneandtextureareveryimportant.Tonereferstoshad

4）Amazon首頁

看看它和誰最像？

5） 購物列表頁面

單一維度 和 多維度的導(dǎo)航結(jié)構(gòu) （Amazon購物導(dǎo)航）

我們通常認(rèn)為面包屑導(dǎo)航為單一維度的導(dǎo)航結(jié)構(gòu)，如上圖紅色實(shí)線框所示，即它是一種線性的導(dǎo)航方式。不過在網(wǎng)頁的應(yīng)用中，“面包屑”導(dǎo)航的應(yīng)用有兩種：

• “追溯來路”即跟蹤用戶行為，記錄的用戶在網(wǎng)站的活動(dòng)足跡的一種“線性導(dǎo)航”，
• 用來表達(dá)內(nèi)容歸屬關(guān)系的界面元素，也就是我們經(jīng)常看到的“主分類>一級(jí)分類>二級(jí)分類>三級(jí)分類>……>最終內(nèi)容頁面”這樣的層級(jí)歸屬關(guān)系.

而改網(wǎng)頁左側(cè)的導(dǎo)航卻提供多種維度的導(dǎo)航，且這多種維度可以組合成不同層級(jí)的面包屑結(jié)構(gòu)
如，我想買一臺(tái)LCD平板電視，進(jìn)到了：
Electronics ? Audio & Video ? TVs & HDTVs ? Flat-Panel TVs ? Flat-Panel LCD TVs
在這個(gè)頁面上，左側(cè)導(dǎo)航給我提供了品牌、供貨商、價(jià)格、顯示屏尺寸……等多種選擇。

我可以先選品牌再選尺寸，如：

也可以先先尺寸再選品牌，如：

因此這種方式為用戶提供了多種維度的導(dǎo)航，運(yùn)行用戶如在電器超市隨意逛逛挑選商品，而不必考慮該先問導(dǎo)購員有什么品牌還是問有什么尺寸好。這一點(diǎn)符合用戶的心理模型，值得設(shè)計(jì)中借鑒。

網(wǎng)站導(dǎo)航設(shè)計(jì)需要注重的問題及基本原則：

我們就網(wǎng)站組日常需求中，有關(guān)導(dǎo)航的交互設(shè)計(jì)工作進(jìn)行了交流，總結(jié)出在網(wǎng)站導(dǎo)航設(shè)計(jì)中需要注重的幾點(diǎn)問題，及基本的原則。

1. 導(dǎo)航條的位置。主導(dǎo)航條的位置應(yīng)該在接近頂部或網(wǎng)頁左側(cè)的位置，假如因?yàn)閮?nèi)容過多需要子導(dǎo)航時(shí)，要讓用戶輕易地分辨出哪個(gè)是主導(dǎo)航條，哪個(gè)是某主題的子導(dǎo)航條。
2. 導(dǎo)航使用的簡單性。導(dǎo)航的使用必須得盡可能的簡單，避免使用下拉或彈出式菜單導(dǎo)航，假如沒辦法一定得用，那么菜單的層次不要超過兩層。
3. 面包屑導(dǎo)航。應(yīng)該讓用戶知道現(xiàn)在所看的網(wǎng)頁是什么和與現(xiàn)在所看網(wǎng)頁的相關(guān)網(wǎng)頁是什么，例如通過輔助導(dǎo)航“首頁 > 新聞?lì)l道 >新聞全名”里的對(duì)所在網(wǎng)頁位置的文字說明，同時(shí)配合導(dǎo)航的顏色高亮，可以達(dá)到視覺直觀指示的效果。
4. 導(dǎo)航內(nèi)容明顯的區(qū)別。導(dǎo)航的目錄或主題種類必須得清楚，不要讓用戶困惑，而且假如有需要突出主要網(wǎng)頁的區(qū)域，則應(yīng)該與一般網(wǎng)頁在視覺上有所區(qū)別。
5. 導(dǎo)航和排序的區(qū)別。導(dǎo)航和排序輕易混淆，需要留意（看圖指出問題）

這里的tab是導(dǎo)航還是排序？

Google Reader上的處理

6. 準(zhǔn)確的導(dǎo)航文字描述。用戶在點(diǎn)擊導(dǎo)航鏈接前對(duì)他們所找的東西有一個(gè)大概的了解，鏈接上的文字必須能準(zhǔn)確描述鏈接所到達(dá)的網(wǎng)頁內(nèi)容。

分享：何時(shí)用按鈕，何時(shí)用鏈接
同事MM問了我這個(gè)問題，感覺忽然問了我一個(gè)簡單的用腳趾頭都能答出來的問題，因?yàn)檫@兩個(gè)東西太常見，太普通了。但，我竟然不知道該如何回答。想了一下，給了一