2013-10-24 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.chinatradebeam.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://sudasuta.com/cooler-photo.html
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
導(dǎo)航是互聯(lián)網(wǎng)產(chǎn)品中應(yīng)用最廣泛的基礎(chǔ)元素之一，引導(dǎo)用戶(hù)了解到網(wǎng)站的內(nèi)容結(jié)構(gòu)進(jìn)而找到所求。作為基礎(chǔ)控件，導(dǎo)航看起來(lái)簡(jiǎn)單，但卻是產(chǎn)品設(shè)計(jì)中最復(fù)雜繁瑣的一部分。因?yàn)槲覀兿胍尵W(wǎng)站結(jié)構(gòu)更清晰、想要向用戶(hù)傳達(dá)所有的信息，所以就賦予了導(dǎo)航越來(lái)越多的內(nèi)容，使他們龐大異常，十分糾結(jié)。簡(jiǎn)化了，用戶(hù)無(wú)法了解到頁(yè)面結(jié)構(gòu)以及自己的處境，產(chǎn)生困惑；復(fù)雜了，導(dǎo)航臃腫不堪，層巒疊嶂，既不美觀(guān)也不好用。
那么，在清晰的信息架構(gòu)下能不能讓導(dǎo)航盡可能的更輕便、更靈動(dòng)，是筆者本文想要探討的話(huà)題。筆者看來(lái)，為導(dǎo)航塑身可以從以下幾個(gè)角度來(lái)進(jìn)行：1.簡(jiǎn)化結(jié)構(gòu)；2.優(yōu)化形式；3.打磨UI。
網(wǎng)站作為信息的集合體，要囊括海量的資源，從首頁(yè)到二級(jí)頁(yè)再到專(zhuān)題頁(yè)進(jìn)而底層頁(yè)等等等等，信息的層級(jí)多且繁雜，所以就容易形成tab套tab再套tab的局面。那么作為導(dǎo)航塑身的第一步，我們要做的就是把這負(fù)責(zé)的結(jié)構(gòu)盡量簡(jiǎn)化，讓導(dǎo)航變得輕盈起來(lái)，或者至少看起來(lái)不那么臃腫。
A． 通過(guò)面包屑來(lái)簡(jiǎn)化導(dǎo)航結(jié)構(gòu)
面包屑通常水平地出現(xiàn)在頁(yè)面頂部，一般會(huì)位于標(biāo)題或頁(yè)頭的下方。它們提供給用戶(hù)返回之前任何一個(gè)頁(yè)面的鏈接（這些鏈接也是能到達(dá)當(dāng)前頁(yè)面的路徑），在層級(jí)架構(gòu)中通常是這個(gè)頁(yè)面的父級(jí)頁(yè)面。面包屑提供給用戶(hù)回溯到網(wǎng)站首頁(yè)或入口頁(yè)面的一條快速路徑。
一個(gè)門(mén)戶(hù)網(wǎng)站常見(jiàn)的結(jié)構(gòu)是首頁(yè)-頻道頁(yè)-專(zhuān)題頁(yè)-子專(zhuān)題-底層頁(yè)。如果我們想在門(mén)戶(hù)網(wǎng)站看NBA的視頻直播，那么我們來(lái)看下他的導(dǎo)航：
如果把信息層級(jí)全部展現(xiàn)在用戶(hù)面前，就會(huì)形成上面的這種tab套tab的形式，使得導(dǎo)航臃腫不堪，占據(jù)頁(yè)面很大的空間?？墒侨绻覀儼延脩?hù)關(guān)心的導(dǎo)航內(nèi)容提取出來(lái)，就會(huì)得到下面的結(jié)構(gòu)：
再扁平化一下：
這就是清晰的面包屑導(dǎo)航。綜上，面包屑導(dǎo)航能夠讓復(fù)雜的層級(jí)結(jié)構(gòu)扁平化，使得導(dǎo)航更加輕盈。
面包屑導(dǎo)航還有一些變體，是基于用戶(hù)線(xiàn)性操作邏輯衍生出來(lái)的。在無(wú)線(xiàn)端產(chǎn)品中應(yīng)用更為廣泛，因?yàn)橐苿?dòng)設(shè)備的顯示區(qū)域有限，無(wú)力支撐龐大的導(dǎo)航結(jié)構(gòu)。在用戶(hù)點(diǎn)擊當(dāng)前導(dǎo)航內(nèi)容后，當(dāng)前導(dǎo)航消失進(jìn)去下一級(jí)導(dǎo)航，并提供返回按鈕。
當(dāng)然，使用面包屑來(lái)簡(jiǎn)化導(dǎo)航結(jié)構(gòu)也是有條件的，不是所有的導(dǎo)航層級(jí)都可以用這種方法來(lái)簡(jiǎn)化。面包屑導(dǎo)航更符合用戶(hù)線(xiàn)性思維導(dǎo)向下的操作邏輯，例如，用戶(hù)想要看NBA直播，那么他一定不關(guān)心娛樂(lè)圈發(fā)生了哪些八卦，也不care足球或者網(wǎng)球有什么新聞，CBA，CUBA他可能也不十分在意，那么面包屑的線(xiàn)性導(dǎo)航就可以滿(mǎn)足用戶(hù)的需求。或者是由于空間或者設(shè)備原因，我們無(wú)法提供更為詳細(xì)的導(dǎo)航，而采用線(xiàn)性簡(jiǎn)化導(dǎo)航的處理方法。
B． 合并導(dǎo)航層級(jí)
導(dǎo)航的龐大往往是由于層級(jí)過(guò)多導(dǎo)致，那么減少層級(jí)的一種有效方法就是合并導(dǎo)航層級(jí)，例如把二級(jí)和三級(jí)導(dǎo)航合并，就減少了三級(jí)導(dǎo)航，讓導(dǎo)航輕便一些。
如上圖，圖片庫(kù)包括動(dòng)態(tài)圖片和靜態(tài)圖片，每個(gè)分類(lèi)下面又有小的分類(lèi)，這樣的導(dǎo)航層級(jí)在產(chǎn)品中十分常見(jiàn)，略顯臃腫。那么通過(guò)合并層級(jí)就可以把導(dǎo)航精簡(jiǎn)到兩級(jí)，處理后的導(dǎo)航如下：
瘦身后的導(dǎo)航看起來(lái)結(jié)構(gòu)也比較清晰，而且沒(méi)有影響到信息的傳達(dá)。
對(duì)比下美團(tuán)和糯米的導(dǎo)航：
美團(tuán)把注冊(cè)登錄和個(gè)人信息等功能性導(dǎo)航和網(wǎng)站主導(dǎo)航做了合并處理，為網(wǎng)站首屏節(jié)約出了寶貴的空間。
C.隱藏部分導(dǎo)航
簡(jiǎn)化導(dǎo)航結(jié)構(gòu)的第三種方法是把部分層級(jí)或者導(dǎo)航內(nèi)容隱藏起來(lái)，使得導(dǎo)航看上去輕便一些。
當(dāng)導(dǎo)航里的內(nèi)容特別多的時(shí)候，可以選擇把主要內(nèi)容留下，次要內(nèi)容隱藏的方法來(lái)處理。例如：
當(dāng)頁(yè)面空間有限，無(wú)法容納更多層級(jí)的時(shí)候，可以選擇把次層級(jí)隱藏收起，鼠標(biāo)滑過(guò)或者點(diǎn)擊后觸發(fā)此層級(jí)的方法處理，這樣的例子有很多：
2.優(yōu)化形式
有些時(shí)候，我們無(wú)法判斷用戶(hù)在瀏覽產(chǎn)品或網(wǎng)站時(shí)是否是線(xiàn)性思維，也無(wú)法對(duì)導(dǎo)航結(jié)構(gòu)進(jìn)行再精簡(jiǎn)，那么我們?cè)鯓幼寣?dǎo)航再“瘦”那么一點(diǎn)呢。
A．將一維導(dǎo)航變?yōu)槎S導(dǎo)航
將一維導(dǎo)航轉(zhuǎn)化為二維導(dǎo)航，能夠有效的減少層疊導(dǎo)航帶給人的重復(fù)感和復(fù)雜感，能夠讓操作富有變化，進(jìn)而提升體驗(yàn)。
類(lèi)似的列子也有很多：
B.將復(fù)雜的層級(jí)單獨(dú)處理
當(dāng)某一層級(jí)的導(dǎo)航內(nèi)容豐富到一定程度，他就可以充當(dāng)一個(gè)獨(dú)立控件來(lái)單獨(dú)設(shè)計(jì)了，他們可以作為頁(yè)面的元素來(lái)單獨(dú)存在，可能看起來(lái)都不太像是導(dǎo)航。
3.打磨UI
說(shuō)到讓導(dǎo)航輕盈，UI是最為常用的手法，在此筆者不做太多的陳述，但是需要注意的是，導(dǎo)航的輕盈與否與導(dǎo)航所處的頁(yè)面以及重要程度有很大關(guān)系。比如在首頁(yè)，用戶(hù)需要對(duì)頁(yè)面有整體認(rèn)知的情況下，導(dǎo)航的UI就不能改太輕薄，而是應(yīng)該先聲奪人，讓用戶(hù)直接注意，并瀏覽發(fā)現(xiàn)所求；同樣的，當(dāng)用戶(hù)進(jìn)入到相關(guān)的頁(yè)面開(kāi)始瀏覽時(shí)，導(dǎo)航的作用就是路燈和司南，這時(shí)的導(dǎo)航就不如在首頁(yè)時(shí)那樣重要，那么導(dǎo)航就需要輕輕的、悄悄的在用戶(hù)旁邊隨時(shí)等待著被注意并使用。
電商首頁(yè)的導(dǎo)航UI上吸引了不少眼球，但是到了結(jié)果頁(yè)導(dǎo)航變成了幾乎沒(méi)有裝飾的效果，因?yàn)樵诮Y(jié)果頁(yè)，用戶(hù)主要是來(lái)瀏覽產(chǎn)品，所以導(dǎo)航的作用就弱了。
綜上，是筆者對(duì)導(dǎo)航塑身的一點(diǎn)認(rèn)識(shí)，清晰的導(dǎo)航能夠讓頁(yè)面簡(jiǎn)單易用，反之也會(huì)大大影響頁(yè)面的信息流暢度，所以在導(dǎo)航設(shè)計(jì)時(shí)要精心處理，一點(diǎn)淺見(jiàn)與大家分享。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chinatradebeam.com