9.18日音訊,如何讓網(wǎng)頁的導(dǎo)航更加清晰和明了。導(dǎo)航在整個(gè)網(wǎng)站的作用是舉足輕重的，它的設(shè)計(jì)的清晰明了關(guān)系著整個(gè)網(wǎng)站的用戶體驗(yàn)度和用戶親合力的一個(gè)具體的表現(xiàn)，正是因?yàn)樗淖饔锚?dú)特，所以我們的設(shè)計(jì)者才會(huì)如此的看重和進(jìn)行合理的設(shè)計(jì)和制作，現(xiàn)在首創(chuàng)網(wǎng)絡(luò)小編也結(jié)合自己的制作經(jīng)驗(yàn)來和大家一起來交流和分享下，希望能對(duì)大家有所幫助，也希望大家和我們一起交流學(xué)習(xí)。
01導(dǎo)航設(shè)計(jì)之信息架構(gòu)
信息架構(gòu)決定了導(dǎo)航的定性，在設(shè)計(jì)之前整理清楚內(nèi)容的信息架構(gòu)，才能最大程度發(fā)揮導(dǎo)航的梳理網(wǎng)站結(jié)構(gòu)、有效傳遞信息功能。網(wǎng)頁結(jié)構(gòu)一共有多少層級(jí)關(guān)系？是否存在上下層關(guān)系？各類別標(biāo)簽之間的關(guān)系是并列關(guān)系還是相關(guān)聯(lián)的？各子級(jí)項(xiàng)中是否存在可合并項(xiàng)？等等。要避免單純地按照簡(jiǎn)單的邏輯關(guān)系，甚至按照業(yè)務(wù)關(guān)系把頁面導(dǎo)航細(xì)分到3級(jí)甚至4級(jí)或者產(chǎn)生出一些和用戶認(rèn)知不相符的信息類別。每增加一級(jí)導(dǎo)航就增加一個(gè)認(rèn)知維度，每增加一級(jí)使得整個(gè)導(dǎo)航系統(tǒng)復(fù)雜度增加數(shù)倍，不僅用戶的操作將成倍的增加，給網(wǎng)頁后期維護(hù)的帶來極大的成本。以下兩種圖示，就能清楚地看到相同數(shù)量頁面的不同放置方式給用戶帶來不同的體驗(yàn)。
在web交互設(shè)計(jì)中存在"3次點(diǎn)擊"的原則，用戶在3次點(diǎn)擊后無法找到想要的信息或完成某個(gè)功能時(shí)，便會(huì)選擇放棄。所以對(duì)于導(dǎo)航來說，最基本的應(yīng)該是讓用戶知道當(dāng)前的頁面有哪些內(nèi)容，并且知道自己的目標(biāo)內(nèi)容在哪里。導(dǎo)航設(shè)計(jì)的廣度和深度的區(qū)別展示，一般來說，廣度比深度的效果要好。在深結(jié)構(gòu)的各級(jí)別間選擇更容易迷失方向，甚至可能迷路。但也不要在廣度上鋪的過廣，任何時(shí)候把太多內(nèi)容show出來都會(huì)嚇退用戶，讓他們被迫患上了"選擇綜合癥"。
為了更明確用戶的認(rèn)知或者甚至說在設(shè)計(jì)師面對(duì)改版等需求時(shí)，有助導(dǎo)航的創(chuàng)建和完善，常用的一個(gè)方法是卡片分類法?？ㄆ诸惙ǖ倪M(jìn)行方式很簡(jiǎn)單，首先準(zhǔn)備一些大小相同的空白卡片，將信息寫在不同的卡片上，讓參與人員自行分類，也可有適當(dāng)?shù)慕忉屝砸龑?dǎo)。每次測(cè)試的人數(shù)最好在2到4個(gè)之間，人數(shù)過少的話使用者之間不易產(chǎn)生討論，人數(shù)過多則會(huì)讓討論變得混亂，場(chǎng)面不易控制。這是一種在在網(wǎng)站或其他規(guī)劃初期常用的一個(gè)測(cè)試方法，能從中了解真正符合用戶習(xí)慣的信息分類，找到之間的認(rèn)知差異，作為調(diào)整架構(gòu)的依據(jù)。
02導(dǎo)航設(shè)計(jì)之交互樣式
Web導(dǎo)航的最重要的作用就是將網(wǎng)站的內(nèi)容信息友好地展示給用戶。在確定好網(wǎng)站的信息架構(gòu)后，應(yīng)當(dāng)按需所取適當(dāng)?shù)膶?dǎo)航樣式。而不是不管三七二十一，都來個(gè)tab式導(dǎo)航，覺得沒有個(gè)橫梁式的導(dǎo)航都不好意思說自己在做網(wǎng)頁。首先我們了解一些常用的導(dǎo)航形式：
1.分步導(dǎo)航（Stepnavigation）通常由文字標(biāo)簽和箭頭組成，也要伴隨著向后退的鏈接。適用于環(huán)環(huán)相扣的頁面流程，如向?qū)?，支付，在線閱讀等，為一個(gè)接一個(gè)的頁面提供訪問。
2.分頁導(dǎo)航（Pagingnavigation）經(jīng)常出現(xiàn)在搜索頁中，一次可展現(xiàn)的結(jié)果數(shù)目通常有限制，超出限制的結(jié)果將在新頁面展現(xiàn)。最簡(jiǎn)單的分頁導(dǎo)航就是帶頁碼的分布導(dǎo)航。
3.面包屑（Breadcrumbtrail）展示了用戶訪問網(wǎng)站的路線，由一大串的元素和節(jié)點(diǎn)組成。每個(gè)節(jié)點(diǎn)都與指向先前訪問過的頁面或父級(jí)主題相連，節(jié)點(diǎn)間以符號(hào)分隔，通常是大于號(hào)（>）,冒號(hào)（：）或者豎線（|）
4.樹狀導(dǎo)航（Treenavigation）允許針對(duì)層級(jí)結(jié)構(gòu)的訪問。往往包含加號(hào)和減號(hào)或小箭頭的小圖標(biāo)來展開和收起下級(jí)節(jié)點(diǎn)。
5.網(wǎng)站地圖（SiteMap）為網(wǎng)站提供了自頂向下的迅速總覽。適用于有大量?jī)?nèi)容和廣泛用戶群體的網(wǎng)站。因而應(yīng)該比較簡(jiǎn)單易于掃視。其中的標(biāo)簽要與頁面中的標(biāo)題相符。在搭建網(wǎng)站地圖時(shí)需要考慮其顆粒度，一般來說只需展現(xiàn)網(wǎng)站結(jié)構(gòu)中的兩到三級(jí)，提供到頁面的鏈接。頁腳網(wǎng)站地圖，是現(xiàn)今大中型網(wǎng)站采用的方式，把網(wǎng)站地圖一部分顯示在頁面底部，同時(shí)包含一個(gè)指向完整地圖的鏈接。
6.Tab式導(dǎo)航（TabbedNavigation）相當(dāng)于導(dǎo)航條+Tab。導(dǎo)航條最簡(jiǎn)單的形式就是把超鏈接連成一行，有時(shí)用豎線分隔開來。而Tab式導(dǎo)航將tab控件結(jié)合到導(dǎo)航條上，使得網(wǎng)站內(nèi)容結(jié)構(gòu)化，多重化。
7.垂直菜單（VerticalMenu）通常置于網(wǎng)站的左邊或者右邊的一列鏈接。垂直菜單較橫向的導(dǎo)航更靈活，易于向下擴(kuò)展，且允許的標(biāo)簽長(zhǎng)度較長(zhǎng)。
8.動(dòng)態(tài)菜單（Dynamicmenus）也叫浮出菜單，下拉菜單或者彈出菜單。用戶須與其產(chǎn)生交互行為，菜單才能顯示。常用的交互是鼠標(biāo)懸停或點(diǎn)擊。
9.下拉框?qū)Ш剑―rop-downmenus）利用下拉菜單的特性，當(dāng)選定某一項(xiàng)或多個(gè)選項(xiàng)，即將用戶帶到新的頁面。
10.標(biāo)簽云（Tagclouds）所列鏈接按字母排序，按照標(biāo)簽熱門程度確定字體的大小和顏色。標(biāo)簽云的設(shè)計(jì)者是交互設(shè)計(jì)師StewartButterfield。首先使用標(biāo)簽云的是Flickr。
03導(dǎo)航設(shè)計(jì)之視覺設(shè)計(jì)
Apple常常成為設(shè)計(jì)界追隨的風(fēng)向標(biāo)，他們的每次視覺的更新或者迭代都會(huì)引發(fā)互聯(lián)網(wǎng)的爭(zhēng)相模仿。這里，收集了Apple從1997年以來視覺層面更新比較關(guān)鍵的截圖，從歷年的變化來看看導(dǎo)航及網(wǎng)站的視覺體系的迭代。
第一次采用頂部固定的tab式導(dǎo)航。有幾個(gè)顯著的特點(diǎn)：
1）apple紅色logo，顯著標(biāo)識(shí)homepage。
2）橫向tab式二級(jí)導(dǎo)航
3）白色玻璃質(zhì)感的導(dǎo)航視覺樣式，這種玻璃質(zhì)感風(fēng)靡web界許久。
Apple2001:
導(dǎo)航的視覺和交互形式并沒有發(fā)生太大的變化，只是將紅色的logo換成了藍(lán)色。并延續(xù)白色玻璃種感到整個(gè)網(wǎng)站界面和控件。
你會(huì)發(fā)現(xiàn)，包括搜索的按鈕等控件都做了圓角玻璃質(zhì)感的處理，并且配圖的外框也否相應(yīng)地做了圓角的處理。
縱觀2010-2012的導(dǎo)航，以產(chǎn)品的維度劃分導(dǎo)航結(jié)構(gòu)。用產(chǎn)品的本身的名稱命名，用戶進(jìn)入網(wǎng)站能直入自己想要了解的產(chǎn)品。
從尺寸大小，到標(biāo)簽的命名，甚至是順序都沒有做變化。主要變化的導(dǎo)航的視覺層面和search框。
視覺上：1）主體導(dǎo)航從灰色單一漸變到深灰色質(zhì)感漸變到暗灰色的質(zhì)感漸變。
2）相反的是Applelogo質(zhì)感一路從簡(jiǎn)，從富質(zhì)感的到簡(jiǎn)單的灰白漸變。
3）標(biāo)簽字體和搜索icon反白處理，逐漸和深色的背景拉開層次。
search框：1）將search框和導(dǎo)航從視覺層面上結(jié)合在一起，整體設(shè)計(jì)。不再簡(jiǎn)單的白底處理。
2）只保留搜索icon，去除"Search"
3）tab寬度增加，壓縮search框?qū)挾?。鼠?biāo)click后，搜索框自動(dòng)展開，區(qū)別出搜索框default和輸入的使用狀態(tài)。
每次以普通用戶的角度去使用，都有一種快速高效的感覺，能第一時(shí)間讓你感受到它想告訴你什么，它最近又哪些變化剛好是你想知道的。想找一個(gè)記憶中的東西并不難，search是最后一個(gè)利器。每一個(gè)配色，每一個(gè)像素的把控，每個(gè)文案的精彩都值得設(shè)計(jì)細(xì)細(xì)的品味。
以上是我在設(shè)計(jì)導(dǎo)航時(shí)遇到一些盲點(diǎn)和發(fā)現(xiàn)積累。在這次誠(chéng)信中國(guó)改版的項(xiàng)目中被討論最多的就是導(dǎo)航，從結(jié)構(gòu)組織到信息層次，從交互形式到視覺樣式。討論到最后大家對(duì)導(dǎo)航的概念已經(jīng)模糊，常常在每次的討論ending中自問：到底什么是導(dǎo)航？為什么要導(dǎo)航？導(dǎo)航只能長(zhǎng)這樣么？在做設(shè)計(jì)的過程中，要經(jīng)常對(duì)交互控件的基本概念究一究來源，會(huì)讓自己清晰的多。這里只是把我在設(shè)計(jì)導(dǎo)航的過程中遇到疑惑和想法小結(jié)一下，希望對(duì)大家在設(shè)計(jì)導(dǎo)航時(shí)有些許的幫助。
好的導(dǎo)航它的作用是讓用戶更加清晰明了網(wǎng)站，起到指路人的作用，大家都可以發(fā)揮自己的專長(zhǎng)，制作出優(yōu)美和功能作用并進(jìn)的效果來，最后歡迎大家和首創(chuàng)網(wǎng)絡(luò)一起交流心得學(xué)習(xí)成果。
