時間：2013-04-01 來源：合肥網hfw.cc 作者：hfw.cc 我要糾錯
導航是互聯網產品中利用最普遍的基本元素之一，領導用戶懂得到網站的內容結構進而找到所求。作為基本控件，導航看起來簡略，但卻是產品設計中最龐雜繁瑣的一局部。由于咱們想要讓網站構造更清楚、想要向用戶轉達所有的信息，所以就賦予了導航越來越多的內容，使他們宏大異樣，非常糾結。簡化了，用戶無奈懂得到頁面構造以及本人的處境，發生迷惑;龐雜了，導航臃腫不堪，層巒疊嶂，既不雅觀也不好用。
那么，在清晰的信息架構下能不能讓導航盡可能的更輕巧、更靈動，是筆者本文想要探討的話題。筆者看來，為導航塑身能夠從以下多少個角度來進行：1.簡化結構;2.優化情勢;3.打磨UI。
2.優化形式
有些時候，我們無法斷定用戶在閱讀產品或網站時是否是線性思維，也無奈對導航結構進行再精簡，那么我們怎么讓導航再“瘦”那么一點呢。
A.將一維導航變為二維導航
將一維導航轉化為二維導航，可能有效的減少層疊導航帶給人的反復感跟復雜感，可以讓操作富有變更，進而晉升休會。
相似的列子也有良多：
B.將復雜的層級獨自處理
當某一層級的導航內容豐盛到必定水平，他就可以充任一個獨破控件來獨自設計了，他們可以作為頁面的元素來單獨存在，可能看起來都不太像是導航。
網站作為信息的聚集體，要囊括海量的資源，從首頁到二級頁再到專題頁進而底層頁等等等等，信息的層級多且復雜，所以就輕易造成tab套tab再套tab的局勢。那么作為導航塑身的第一步，我們要做的就是把這負責的結構盡量簡化，讓導航變得輕盈起來，或者至少看起來不那么臃腫。
A.通過面包屑來簡化導航結構
面包屑通常水平川呈現在頁面頂部，個別會位于題目或頁頭的下方。它們提供應用戶返回之前任何一個頁面的鏈接(這些鏈接也是能達到當前頁面的門路)，在層級架構中通常是這個頁面的父級頁面。面包屑提供應用戶回溯到網站首頁或進口頁面的一條疾速門路。
一個門戶網站常見的結構是首頁-頻道頁-專題頁-子專題-底層頁。如果我們想在門戶網站看NBA的視頻直播，那么我們來看下他的導航：
假如把信息層級全體展當初用戶眼前，就會構成上面的這種tab套tab的情勢，使得導航臃腫不堪，盤踞頁面很大的空間。可是假如咱們把用戶關懷的導航內容提掏出來，就會得到下面的結構：
再扁平化一下：
這就是清晰的面包屑導航。綜上，面包屑導航可以讓復雜的層級結構扁平化，使得導航更加輕巧。
面包屑導航還有一些變體，是基于用戶線性操作邏輯衍生出來的。在無線端產品中運用更為普遍，由于挪動裝備的顯示區域有限，無力支持宏大的導航結構。在用戶點擊當前導航內容后，當前導航消散進去下一級導航，并供給返回按鈕。
當然，應用面包屑來簡化導航結構也是有前提的，不是所有的導航層級都可以用這種方法來簡化。面包屑導航更合乎用戶線性思維導向下的操作邏輯，例如，用戶想要看NBA直播，那么他必定不關懷娛樂圈產生了哪些八卦，也不care足球或者網球有什么消息，CBA，CUBA他可能也不十分在意，那么面包屑的線性導航就可以滿意用戶的需要�；蛘呤且驗榭臻g或者裝備起因，我們無法供給更為具體的導航，而采取線性簡化導航的處理方法。
B.合并導航層級
導航的龐大往往是因為層級過多導致，那么減少層級的一種有效方式就是合并導航層級，例如把二級和三級導航合并，就減少了三級導航，讓導航輕便一些。
如上圖，圖片庫包含動態圖片和靜態圖片，每個分類下面又有小的分類，這樣的導航層級在產品中非常常見，略顯臃腫。那么通過合并層級就可以把導航精簡到兩級，處理后的導航如下：
瘦身后的導航看起來結構也比擬清楚，而且不影響到信息的轉達產品經理 。
對照下美團和糯米的導航：
美團把注冊登錄跟個人信息等功效性導航和網站主導航做了合并處理，為網站首屏節儉出了可貴的空間。
C.暗藏局部導航
簡化導航結構的第三種辦法是把部門層級或者導航內容暗藏起來，使得導航看上去輕巧一些。
當導航里的內容特殊多的時候，能夠抉擇把重要內容留下，次要內包庇藏的方式來處置。例如：
當頁面空間有限，無法包容更多層級的時候，可以取舍把次層級隱蔽收起，鼠標滑過或者點擊后觸發此層級的辦法處理，這樣的例子有許多：
3.打磨 UI
說到讓導航輕巧，UI是最為常用的伎倆，在此筆者不做太多的陳說，然而須要留神的是，導航的輕盈與否與導航所處的頁面以及主要水平有很大關聯。比方在首頁，用戶須要對頁面有整體認知的情形下，導航的UI就不能改太輕薄，而是應當先聲奪人，讓用戶直接注意，并閱讀發明所求;同樣的，當用戶進入到相干的頁面開端瀏覽時，導航的作用就是路燈和司南，這時的導航就不如在首頁時那樣主要，那么導航就需要微微的、偷偷的在用戶旁邊隨時等候著被留神并應用。
電商首頁的導航UI上吸引了不少眼球，然而到了成果頁導航變成了簡直不裝潢的后果，因為在成果頁，用戶重要是來瀏覽產品，所以導航的作用就弱了。
綜上，是筆者對導航塑身的一點意識，清晰的導航可能讓頁面簡略易用，反之也會大大影響頁面的信息流利度，所以在導航設計時要精心處置，一點淺見與大家分享。交互設計
本文由http://www***ixueba***/ 整理并發布！
|
|
|
|
|
|
|
|
 |
