9.18日(rì)音(yīn)訊,♠如(rú)何讓網頁的(de)導航更加清晰和(hé)明§♥✘(míng)了(le)。導航在整個(gè)λ≥✘•網站(zhàn)的(de)作(zuò)用(yòng)是(shì)舉®λ★足輕重的(de)，它的(de)設計(jì)的(de)清晰">¶★明(míng)了(le)關系著(zhe)整個(gè)網站¶•↑↕(zhàn)的(de)用(yòng)戶體(tǐ)驗度和(hé)♣ 用(yòng)戶親合力的(de)一(yī)個(gè)具體(tǐ♥↔Ωλ)的(de)表現(xiàn)，正是(shì)因為(☆≤λwèi)它的(de)作(zuò)用(yòng)獨特，所以我們的(de)設計(α≤×™jì)者才會(huì)如(rú)此的(d≠✘ e)看(kàn)重和(hé)進行(xíng)β&®α合理(lǐ)的(de)設計(jì)和(hé)制(zhì)作 (zuò)，現(xiàn)在首創網絡小(xiǎo)編也(yě)結合自(zì)©☆™™己的(de)制(zhì)作(zuò)經驗來₽₽™(lái)和(hé)大(dà)家(jiā)一(yī)起來(lái≤§)交流和(hé)分(fēn)享下(xià)，希望能(nén•∞≤↓g)對(duì)大(dà)家(jiā)有(yǒu)所幫助，£∞♦也(yě)希望大(dà)家(jiā)和(hé)我們一(yī)起交流學習(xí)↔∑•↓。
01導航設計(jì)之信息架構
信息架構決定了(le)導航的(de)定性，在設計(jì)之前整理(lǐ)→∏$&清楚內(nèi)容的(de)信息架構，才能(néng)最大(dà)程度發揮導航'÷©≈的(de)梳理(lǐ)網站(zhàn)結構、有(yǒu)效傳遞信息功能(nΩ↓éng)。網頁結構一(yī)共有(yǒuβα)多(duō)少(shǎo)層級關系？是(shì)否存在上(sh∏β₹àng)下(xià)層關系？各類别标簽之間( ♣jiān)的(de)關系是(shì)并列關系還(hái)是(shì)相(≠£xiàng)關聯的(de)？各子(zǐ)級項中是(shì)否存在φ©可(kě)合并項？等等。要(yào)避免單純地(dì)按照(zhào)簡單∞↔₹的(de)邏輯關系，甚至按照(zhào)業(yè)務關系把頁面導航細分(f"™ēn)到(dào)3級甚至4級或者産生(shēng)出一(yī)些(x<≥★☆iē)和(hé)用(yòng)戶認知(zhī)不(bù)相(x≈✘ iàng)符的(de)信息類别。每增加一(yīε< )級導航就(jiù)增加一(yī)個(gè)認知(zhī)維度，↔每增加一(yī)級使得(de)整個(gè)導航系統複雜(zá)♠₽ ¶度增加數(shù)倍，不(bù)僅用(yòng)戶的(de)操作(zuò)将β×成倍的(de)增加，給網頁後期維護的(de)帶來(l₽ ái)極大(dà)的(de)成本。以下(xià)兩種圖示，就(jiù)能(n€∞éng)清楚地(dì)看(kàn)到(dào)相(xiàng)同數(s<♥♠✘hù)量頁面的(de)不(bù)同放(fàng)置方式給用(yònε↑¶↑g)戶帶來(lái)不(bù)同的(de)體(tǐ)驗。
在web交互設計(jì)中存在"3次點擊"的(de©₩ ∏)原則，用(yòng)戶在3次點擊後無法找到(dào)想要±♥₽∏(yào)的(de)信息或完成某個(gè)功能(néng)¶×∞©時(shí)，便會(huì)選擇放(fàng)棄。所以對(duì)于導航來("£∏↑lái)說(shuō)，最基本的(de)應該是(shì)讓用(y"β≤₹òng)戶知(zhī)道(dào)當前的(de)頁面'λ₽§有(yǒu)哪些(xiē)內(nèi)容，并且知(zββφσhī)道(dào)自(zì)己的(de)目标內(nè→₩≈&i)容在哪裡(lǐ)。導航設計(jì)的(de)廣度和(hé ≥)深度的(de)區(qū)别展示，一(yī)般來→∞×(lái)說(shuō)，廣度比深度的(de)效果要(yào)好(hǎ≤ε o)。在深結構的(de)各級别間(jiān≠≈↔÷)選擇更容易迷失方向，甚至可(kě)能(β£néng)迷路(lù)。但(dàn)也(yě) <不(bù)要(yào)在廣度上(shàng)鋪的(de)過廣，任何時(sh ₹í)候把太多(duō)內(nèi)容sho¶w出來(lái)都(dōu)會(huì)吓退用(yòng)戶，讓他(t€•ΩΩā)們被迫患上(shàng)了(le)"選擇綜合症"。₹
為(wèi)了(le)更明(míng<§)确用(yòng)戶的(de)認知(zhī)或者甚至說(shuō)在設計(∞≤®≈jì)師(shī)面對(duì)改版等需求時(↓₹shí)，有(yǒu)助導航的(de)創建和(hé)完善，常×≥♣用(yòng)的(de)一(yī)個(gè)方法是(shì♠✘★)卡片分(fēn)類法。卡片分(fēn)類法的(de)進行(xíng)≈←方式很(hěn)簡單，首先準備一(yī)些(x↔♥iē)大(dà)小(xiǎo)相(xiàng)同的(de)空(kōng)白(b↑δái)卡片，将信息寫在不(bù)同的(de)卡片上(shàng)，讓參與人¥∞≈↔(rén)員(yuán)自(zì)行(xíng←↔↔λ)分(fēn)類，也(yě)可(kě)有(yǒu)适₽≥±當的(de)解釋性引導。每次測試的(de)人(rén)數(shù)最↓₩®好(hǎo)在2到(dào)4個(gè)之間(jiān€♣¥φ)，人(rén)數(shù)過少(shǎo)的(de)話(huà)使用(>↑yòng)者之間(jiān)不(bù)易産生(shēng)討(tǎo≤∑•₽)論，人(rén)數(shù)過多(duō)則會(huì)讓討(tǎo)論變得ε $®(de)混亂，場(chǎng)面不(bù)易控制(zhì) αφ™。這(zhè)是(shì)一(yī)種在在網站(zhàn)或其∑♦他(tā)規劃初期常用(yòng)的(de)一(yī)≈↑ ∞個(gè)測試方法，能(néng)從(cóng)中了φ₩(le)解真正符合用(yòng)戶習(xí)慣的(de)信息分(>∏fēn)類，找到(dào)之間(jiān)的(de)認知(zhī)差異，作(¥&δ≥zuò)為(wèi)調整架構的(de)依據。
02導航設計(jì)之交互樣式
Web導航的(de)最重要(yào)的(de)作(zuò)用(y →òng)就(jiù)是(shì)将網站(zhàn)的(de)內(n&α↑èi)容信息友(yǒu)好(hǎo)地(dì)展示給用(yòng)戶。δ₩在确定好(hǎo)網站(zhàn)的(de)信息架構後，應當按需所取适∞•當的(de)導航樣式。而不(bù)是(shì)不(bù)×₹★管三七二十一(yī)，都(dōu)來(lái)個(gè)t↔↔δab式導航，覺得(de)沒有(yǒu)個(gè)橫梁式的(de)導航都(dōu≥≈<®)不(bù)好(hǎo)意思說(shuō)自( ₽←Ωzì)己在做(zuò)網頁。首先我們了(le)解一(yī)些(xi™δē)常用(yòng)的(de)導航形式：
1.分(fēn)步導航（Stepnavigation）通(tōng)常由••文(wén)字标簽和(hé)箭頭組成，也(yě)要(yào)伴随著(zσ¥♠±he)向後退的(de)鏈接。适用(yòng)于環環相(xiàng)扣的λδ♣<(de)頁面流程，如(rú)向導，支付，在線閱讀(dú)等，為(wèi)一☆®(yī)個(gè)接一(yī)個(gè)的(de)↓ 頁面提供訪問(wèn)。
2.分(fēn)頁導航（Pagingnavigation）經常出現(∏∑xiàn)在搜索頁中，一(yī)次可(kě)展現(xiàn)的(de)結果數 ¶(shù)目通(tōng)常有(yǒu)限制(zhì)，超出限制₹≠∏(zhì)的(de)結果将在新頁面展現(xiànᶩ↕)。最簡單的(de)分(fēn)頁導航就(jiù)是(s±↔hì)帶頁碼的(de)分(fēn)布導航。
3.面包屑（Breadcrumbtrail）展示了(le)用(yò$ ↓←ng)戶訪問(wèn)網站(zhàn)的(de)路(lù)線，由一(yī)大♥₹★(dà)串的(de)元素和(hé)節點組成。每個(gè)節點都(dε<ōu)與指向先前訪問(wèn)過的(de)頁面或父級γ•主題相(xiàng)連，節點間(jiān)以符号分(fēn)隔ε♣，通(tōng)常是(shì)大(dà)于号（>♠♥）,冒号（：）或者豎線（|）
4.樹(shù)狀導航（Treenavigation）允許針對÷☆γ(duì)層級結構的(de)訪問(wèn)。>≈<∑往往包含加号和(hé)減号或小(xiǎo)箭頭的(de)小(xiǎo €$)圖标來(lái)展開(kāi)和(hé)收起下(xià)'₹Ω級節點。
5.網站(zhàn)地(dì)圖（SiteM©≈ap）為(wèi)網站(zhàn)提供了(le)自(zì)頂≈向下(xià)的(de)迅速總覽。适用(yòng)于有(yǒu)大(dà)量內•↔≠(nèi)容和(hé)廣泛用(yòng)戶群體(<★tǐ)的(de)網站(zhàn)。因而應該比較簡單易于掃視 ¶↕(shì)。其中的(de)标簽要(yào)與頁面中的(de)标題相(xi®±àng)符。在搭建網站(zhàn)地(dì)圖時(shí)需要(α✔∏♠yào)考慮其顆粒度，一(yī)般來(lái)說(sh>φuō)隻需展現(xiàn)網站(zhàn)結構中的(de)λ 兩到(dào)三級，提供到(dào)頁面的(de)鏈接。頁腳'¥≥網站(zhàn)地(dì)圖，是(shì)現(xiàn)今大(dà)中型網™£站(zhàn)采用(yòng)的(de)方式，£™©γ把網站(zhàn)地(dì)圖一(yī)部分(fē₩®n)顯示在頁面底部，同時(shí)包含一(yī)個(gè)指向完λ®整地(dì)圖的(de)鏈接。
6.Tab式導航（TabbedNaviga¶tion）相(xiàng)當于導航條+Tab。導航條最簡單 α的(de)形式就(jiù)是(shì)把超鏈接連成一(yī)行(xíng)，有©γ↔(yǒu)時(shí)用(yòng)豎線分(fēn)隔開(kā∞π¥i)來(lái)。而Tab式導航将tab控件(jiàn)結合到(d∏ '$ào)導航條上(shàng)，使得(de)網站(zhàn)內( §nèi)容結構化(huà)，多(duō)重化(γ≠&®huà)。
7.垂直菜單（VerticalMenu）通(tōng)常↑λ✘↑置于網站(zhàn)的(de)左邊或者右邊的(de)一(yī)列鏈×↑接。垂直菜單較橫向的(de)導航更靈活，易于向下(xià)擴σ≥"展，且允許的(de)标簽長(cháng)度較長(cháng)₽£↓。
8.動态菜單（Dynamicmenus）也☆₹>©(yě)叫浮出菜單，下(xià)拉菜單或者彈出菜單。用(yò✘→ng)戶須與其産生(shēng)交互行(xíng)為(wèi)，菜單€<←才能(néng)顯示。常用(yòng)的(deπ'☆)交互是(shì)鼠标懸停或點擊。
9.下(xià)拉框導航（Drop-downmenus）利<←₽→用(yòng)下(xià)拉菜單的(de)特$"↓性，當選定某一(yī)項或多(duō)個(gè)選項，即将€®用(yòng)戶帶到(dào)新的(de)頁面。
10.标簽雲（Tagclouds）所列鏈接按字母排∞™'∑序，按照(zhào)标簽熱(rè)門(m<≠≈÷én)程度确定字體(tǐ)的(de)大(dà)小(xi←β♠ǎo)和(hé)顔色。标簽雲的(de)設計(jì)者是(shì✘ε)交互設計(jì)師(shī)StewartButterfiel₩↓∏d。首先使用(yòng)标簽雲的(de)是(shì)Flick©§r。
03導航設計(jì)之視(shì)覺設計(jì)
Apple常常成為(wèi)設計(jì)界追随的(♣≥de)風(fēng)向标，他(tā)們的(de)每次視(shì)覺的("↔de)更新或者叠代都(dōu)會(huì)引發互☆®↓聯網的(de)争相(xiàng)模仿。這(÷¥δzhè)裡(lǐ)，收集了(le)Apple從(♠σ↑ cóng)1997年(nián)以來(lá₽♥÷βi)視(shì)覺層面更新比較關鍵的(de)截圖，從(cóng)曆年(niáσ♥★n)的(de)變化(huà)來(lái)看(kàn)看(kàn)導航δ☆★及網站(zhàn)的(de)視(shì)覺體(tǐ)系的(d↔ βe)叠代。
第一(yī)次采用(yòng)頂部固定的(de)tab式導航。¶©β有(yǒu)幾個(gè)顯著的(de)特點：
1）apple紅(hóng)色logo，顯著标識homepage。
2）橫向tab式二級導航
3）白(bái)色玻璃質感的(de)導航視(shì)覺樣≤δ÷式，這(zhè)種玻璃質感風(fēng)靡© ≈web界許久。
Apple2001:
導航的(de)視(shì)覺和(hé)交互形§βσ←式并沒有(yǒu)發生(shēng)太大(dà)的(de)變化(huà) ׶，隻是(shì)将紅(hóng)色的(de)logo換成α♦σ了(le)藍(lán)色。并延續白(bái)色玻璃種感到(dào)整個(&←±gè)網站(zhàn)界面和(hé)控件(jiàn)。
你(nǐ)會(huì)發現(xiàn)，包括搜索的 ✘(de)按鈕等控件(jiàn)都(dōu)做(zu±¶ò)了(le)圓角玻璃質感的(de)處理(lǐ)，并且配圖的(">de)外(wài)框也(yě)否相(xiàng)應地(dì™≤)做(zuò)了(le)圓角的(de)處理(lǐ)。
縱觀2010-2012的(de)導航，以産品的(de)維度劃分÷©(fēn)導航結構。用(yòng)産品的(de)本'πφ身(shēn)的(de)名稱命名，用(yòng)戶進入網站¶₽(zhàn)能(néng)直入自(zì)己想要(y≤♠♥ào)了(le)解的(de)産品。
從(cóng)尺寸大(dà)小(xiǎo)，到(dào)标簽的(♦✔de)命名，甚至是(shì)順序都(dōu)沒有(yǒ♠¥₹u)做(zuò)變化(huà)。主要(yà'✘¶$o)變化(huà)的(de)導航的(de)視(shì)覺層面和(hé)s←≥earch框。
視(shì)覺上(shàng)：1）主體(tǐ)導航×↔從(cóng)灰色單一(yī)漸變到(dào)深灰色質感漸變↓ε→★到(dào)暗(àn)灰色的(de)質感漸變。
2）相(xiàng)反的(de)是(shì)Applelogo質感≠☆♠一(yī)路(lù)從(cóng)簡，從(cóng)富質感★™的(de)到(dào)簡單的(de)灰白(b✘δ↑ái)漸變。
3）标簽字體(tǐ)和(hé)搜索icon反♥<白(bái)處理(lǐ)，逐漸和(hé)深色的(de)背δ•景拉開(kāi)層次。
search框：1）将search框和(hé)導航從(có$¥₩♦ng)視(shì)覺層面上(shàng)結合在÷γ<≥一(yī)起，整體(tǐ)設計(jì)。不(bù)再簡單£¥的(de)白(bái)底處理(lǐ)。
2）隻保留搜索icon，去(qù)除"Search↔>"
3）tab寬度增加，壓縮searc↕₹λh框寬度。鼠标click後，搜索框自(zì)動展開(kāi)，&'£區(qū)别出搜索框default和(hé)輸入的(de)使用(yòng) §狀态。
每次以普通(tōng)用(yòng)戶的(de)角度去♠α(qù)使用(yòng)，都(dōu)有(yǒu)一(y←₽ī)種快(kuài)速高(gāo)效的(de)感覺，能(néng)第一(y←↔ī)時(shí)間(jiān)讓你(nǐ)感受到(dào)它¥≤≥想告訴你(nǐ)什(shén)麽，它最近(jìn)又(λyòu)哪些(xiē)變化(huà)剛好(hǎo)是(shì)你(n₹§♥ǐ)想知(zhī)道(dào)的(de)。想找一(yī)個(gè)記¶≈♠§憶中的(de)東(dōng)西(xī)并不(bù•)難，search是(shì)最後一(yī)個(gè)利器(qì)。φ↕×每一(yī)個(gè)配色，每一(yī)個(£•☆♣gè)像素的(de)把控，每個(gè)文(wén)案的Ω£♠ (de)精彩都(dōu)值得(de)設計(jì)細細的(de)品味。
以上(shàng)是(shì)我在設≥∞∞×計(jì)導航時(shí)遇到(dào)一(yī) ₹'些(xiē)盲點和(hé)發現(xiàn)積累。在這(zh≤×"è)次誠信中國(guó)改版的(de)項目中被討(tǎo)論最多(du≤¥ō)的(de)就(jiù)是(shì)導航，從(cóng)結構組織到(d✘ ào)信息層次，從(cóng)交互形式到(dào¥ )視(shì)覺樣式。討(tǎo)論到(dào)最後&♠大(dà)家(jiā)對(duì)導航的(de)概念£δ•λ已經模糊，常常在每次的(de)討(tǎo)論endingπ✘×中自(zì)問(wèn)：到(dào)底什(shén÷×☆↔)麽是(shì)導航？為(wèi)什(sh₽Ωén)麽要(yào)導航？導航隻能(né☆¥ng)長(cháng)這(zhè)樣麽？在做(zuò♠₽♠)設計(jì)的(de)過程中，要(yào)經常≥™對(duì)交互控件(jiàn)的(de)基本概念究一(yī)←究來(lái)源，會(huì)讓自(zì)己清晰的(de♠>)多(duō)。這(zhè)裡(lǐ)隻是(shì)把我在設計(jì♠≠γ)導航的(de)過程中遇到(dào)疑惑和(hé)想法小(xi∞ ♥ǎo)結一(yī)下(xià)，希望對(duì)大(dà)家($≈jiā)在設計(jì)導航時(shí)有(yǒu)些(xσ±♥iē)許的(de)幫助。
好(hǎo)的(de)導航它的(de)作(zuò ¥)用(yòng)是(shì)讓用(yòng)戶更加清晰明(míng)了(l₹≠δ$e)網站(zhàn)，起到(dào)指路(lù)人(rén)的(de)作(zα≠£Ωuò)用(yòng)，大(dà)家(jiā)都(dōu)可(k≤✔βě)以發揮自(zì)己的(de)專長(cháng)，制(zσ'↔hì)作(zuò)出優美(měi)和(hé)功能(néng)作(zuò)♥™≠↓用(yòng)并進的(de)效果來(lái)，最後歡迎大(dà)家(j↕iā)和(hé)首創網絡一(yī)起交流心得(de)學習∏•δ (xí)成果。
