導航在Web中扮演一個回答用戶“我是誰?”“我從哪里來?”“我到哪里去”的角色。好的導航是一個網(wǎng)站的主要基石。而在開始設(shè)計一個網(wǎng)站或者改版一個網(wǎng)頁時，它往往是設(shè)計師第一個面臨的挑戰(zhàn)。
01 導航設(shè)計之信息架構(gòu)
信息架構(gòu)決定了導航的定性，在設(shè)計之前整理清楚內(nèi)容的信息架構(gòu)，才能最大程度發(fā)揮導航的梳理網(wǎng)站結(jié)構(gòu)、有效傳遞信息功能。網(wǎng)頁結(jié)構(gòu)一共有多少層級關(guān)系?是否存在上下層關(guān)系?各類別標簽之間的關(guān)系是并列關(guān)系還是相關(guān)聯(lián)的?各子級項中是否存在可合并項?等等。要避免單純地按照簡單的邏輯關(guān)系，甚至按照業(yè)務(wù)關(guān)系把頁面導航細分到3級甚至4級或者產(chǎn)生出一些和用戶認知不相符的信息類別。每增加一級導航就增加一個認知維度，每增加一級使得整個導航系統(tǒng)復雜度增加數(shù)倍，不僅用戶的操作將成倍的增加，給網(wǎng)頁后期維護的帶來極大的成本。以下兩種圖示，就能清楚地看到相同數(shù)量頁面的不同放置方式給用戶帶來不同的體驗。
在web交互設(shè)計中存在“3次點擊”的原則，用戶在3次點擊后無法找到想要的信息或完成某個功能時，便會選擇放棄。所以對于導航來說，最基本的應該是讓用戶知道當前的頁面有哪些內(nèi)容，并且知道自己的目標內(nèi)容在哪里。導航設(shè)計的廣度和深度的區(qū)別展示，一般來說，廣度比深度的效果要好。在深結(jié)構(gòu)的各級別間選擇更容易迷失方向，甚至可能迷路。但也不要在廣度上鋪的過廣，任何時候把太多內(nèi)容show出來都會嚇退用戶，讓他們被迫患上了“選擇綜合癥”。
為了更明確用戶的認知或者甚至說在設(shè)計師面對改版等需求時，有助導航的創(chuàng)建和完善，常用的一個方法是卡片分類法。卡片分類法的進行方式很簡單，首先準備一些大小相同的空白卡片，將信息寫在不同的卡片上，讓參與人員自行分類，也可有適當?shù)慕忉屝砸龑АＣ看螠y試的人數(shù)最好在2到4個之間，人數(shù)過少的話使用者之間不易產(chǎn)生討論，人數(shù)過多則會讓討論變得混亂，場面不易控制。這是一種在在網(wǎng)站或其他規(guī)劃初期常用的一個測試方法，能從中了解真正符合用戶習慣的信息分類，找到之間的認知差異，作為調(diào)整架構(gòu)的依據(jù)。
02 導航設(shè)計之交互樣式
Web導航的最重要的作用就是將網(wǎng)站的內(nèi)容信息友好地展示給用戶。在確定好網(wǎng)站的信息架構(gòu)后，應當按需所取適當?shù)膶Ш綐邮�。而不是不管三七二十一，都來個tab式導航，覺得沒有個橫梁式的導航都不好意思說自己在做網(wǎng)頁。首先我們了解一些常用的導航形式：
1. 分步導航 (Step navigation)通常由文字標簽和箭頭組成，也要伴隨著向后退的鏈接。適用于環(huán)環(huán)相扣的頁面流程，如向?qū)�，支付，在線閱讀等，為一個接一個的頁面提供訪問。
(圖示出自：Google.com 注冊頁面)
2.分頁導航 (Paging navigation)經(jīng)常出現(xiàn)在搜索頁中，一次可展現(xiàn)的結(jié)果數(shù)目通常有限制，超出限制的結(jié)果將在新頁面展現(xiàn)。最簡單的分頁導航就是帶頁碼的分布導航。
(圖示出自：阿里巴巴 我的阿里)
3.面包屑 (Breadcrumb trail)展示了用戶訪問網(wǎng)站的路線，由一大串的元素和節(jié)點組成。每個節(jié)點都與指向先前訪問過的頁面或父級主題相連，節(jié)點間以符號分隔，通常是大于號(>),冒號(：)或者豎線(|)
(圖示出自：Apple.com)
4.樹狀導航 (Tree navigation)允許針對層級結(jié)構(gòu)的訪問。往往包含加號和減號或小箭頭的小圖標來展開和收起下級節(jié)點。
5.網(wǎng)站地圖 (Site Map)為網(wǎng)站提供了自頂向下的迅速總覽。適用于有大量內(nèi)容和廣泛用戶群體的網(wǎng)站。因而應該比較簡單易于掃視。其中的標簽要與頁面中的標題相符。在搭建網(wǎng)站地圖時需要考慮其顆粒度，一般來說只需展現(xiàn)網(wǎng)站結(jié)構(gòu)中的兩到三級，提供到頁面的鏈接。頁腳網(wǎng)站地圖，是現(xiàn)今大中型網(wǎng)站采用的方式，把網(wǎng)站地圖一部分顯示在頁面底部，同時包含一個指向完整地圖的鏈接。
( 圖示出自： Flickr.com)
6.Tab式導航(Tabbed Navigation)相當于導航條+Tab。導航條最簡單的形式就是把超鏈接連成一行，有時用豎線分隔開來。而Tab式導航將tab控件結(jié)合到導航條上，使得網(wǎng) 站內(nèi)容結(jié)構(gòu)化，多重化。
( 圖示出自： Motorola.com)
Amazon.com可能是第一個運用tab式導航的大型電子商務(wù)網(wǎng)站，Amazon目前線上運用的是垂直菜單+動態(tài)菜單的形式。
( 圖示出自： Amazon.com 1998)
7.垂直菜單 (Vertical Menu)通常置于網(wǎng)站的左邊或者右邊的一列鏈接。垂直菜單較橫向的導航更靈活，易于向下擴展，且允許的標簽長度較長。
推薦閱讀
6.28可能對于各位站長來說是一個噩夢吧，我也不例外，今天早上一起來，我還是規(guī)規(guī)矩矩的看看網(wǎng)站的基本情況，打開站長工具一看，出鬼了，權(quán)重2沒變，快照沒了，外鏈還正常，更可氣的是收錄全部沒了，這對于一個剛做運>>>詳細閱讀
本文標題：網(wǎng)站設(shè)計：Web導航設(shè)計二三事
地址：http://www.sh-jijian.com/a/22/20120628/71479.html
網(wǎng)友點評
精彩導讀
科技快報
品牌展示