關于導航的探討(2)_網頁設計教程
推薦:網站設計的原理ToneandTexture色調與結構Thisspecificallyappliestodrawingsmorethanphotography,buttoneandtextureareveryimportant.Tonereferstoshad
4)Amazon首頁
看看它和誰最像?
5) 購物列表頁面
單一維度 和 多維度的導航結構 (Amazon購物導航)
我們通常認為面包屑導航為單一維度的導航結構,如上圖紅色實線框所示,即它是一種線性的導航方式。不過在網頁的應用中,“面包屑”導航的應用有兩種:
- “追溯來路”即跟蹤用戶行為,記錄的用戶在網站的活動足跡的一種“線性導航”,
- 用來表達內容歸屬關系的界面元素,也就是我們經常看到的“主分類>一級分類>二級分類>三級分類>……>最終內容頁面”這樣的層級歸屬關系.
而改網頁左側的導航卻提供多種維度的導航,且這多種維度可以組合成不同層級的面包屑結構
如,我想買一臺LCD平板電視,進到了:
Electronics ? Audio & Video ? TVs & HDTVs ? Flat-Panel TVs ? Flat-Panel LCD TVs
在這個頁面上,左側導航給我提供了品牌、供貨商、價格、顯示屏尺寸……等多種選擇。
我可以先選品牌再選尺寸,如:
也可以先先尺寸再選品牌,如:
因此這種方式為用戶提供了多種維度的導航,運行用戶如在電器超市隨意逛逛挑選商品,而不必考慮該先問導購員有什么品牌還是問有什么尺寸好。這一點符合用戶的心理模型,值得設計中借鑒。
網站導航設計需要注重的問題及基本原則:
我們就網站組日常需求中,有關導航的交互設計工作進行了交流,總結出在網站導航設計中需要注重的幾點問題,及基本的原則。
- 導航條的位置。主導航條的位置應該在接近頂部或網頁左側的位置,假如因為內容過多需要子導航時,要讓用戶輕易地分辨出哪個是主導航條,哪個是某主題的子導航條。
- 導航使用的簡單性。導航的使用必須得盡可能的簡單,避免使用下拉或彈出式菜單導航,假如沒辦法一定得用,那么菜單的層次不要超過兩層。
- 面包屑導航。應該讓用戶知道現在所看的網頁是什么和與現在所看網頁的相關網頁是什么,例如通過輔助導航“首頁 > 新聞頻道 >新聞全名”里的對所在網頁位置的文字說明,同時配合導航的顏色高亮,可以達到視覺直觀指示的效果。
- 導航內容明顯的區別。導航的目錄或主題種類必須得清楚,不要讓用戶困惑,而且假如有需要突出主要網頁的區域,則應該與一般網頁在視覺上有所區別。
- 導航和排序的區別。導航和排序輕易混淆,需要留意(看圖指出問題)
這里的tab是導航還是排序?
Google Reader上的處理
6. 準確的導航文字描述。用戶在點擊導航鏈接前對他們所找的東西有一個大概的了解,鏈接上的文字必須能準確描述鏈接所到達的網頁內容。
分享:何時用按鈕,何時用鏈接同事MM問了我這個問題,感覺忽然問了我一個簡單的用腳趾頭都能答出來的問題,因為這兩個東西太常見,太普通了。但,我竟然不知道該如何回答。想了一下,給了一
- 相關鏈接:
- 教程說明:
網頁設計教程-關于導航的探討(2)
。






