交互模式應用(2)：Navigation

　　導航的目的是讓應用程序的層次結構按照有條理的方式清晰展示，並引導用戶輕松找到並管理信息，讓用戶在體驗產品的過程中不會迷失。為了展示程序功 能，我們需要借助導航控件來對其內容進行邏輯分組和布局。在人機交互中，導航即在特定系統的用戶界面中對內容進行合理安排。無論是軟件、網頁還是移動設 備，用戶界面的成功與否很大程度上決定於導航的有效性，也就是能否高效的傳遞人機交互過程中的信息。 可以這麼說，一套完備的導航系統對於應用程序的成功有著舉足輕重的作用。網頁設計/交互設計

　　為了更好的歸納導航在交互設計中的應用模式，我們按以下結構分類：

　　Main Navigation

　　通常出現在界面的固定位置(比如頂部)並且吸引目光，用來組織應用程序的主要內容框架。幾乎所有的軟件、網頁或者移動應用都有一個main navigation模塊，我們還可以將其細分為幾種子類：

　　水平導航

　　垂直導航

　　倒L導航

　　水平導航

　　水平分布的一些可點擊的圖標或者標簽欄，當前選擇項高亮顯示或者有明顯的視覺區分，在頁面跳轉後也基本保持不變的導航模式。

　　特點：

　　根據文本長度有6-8項分類

　　向下層級不超過3層

　　比如常見的Ribbon工具欄，就是一種典型的Main Navigation。無論打開何種文件，Ribbon都固定顯示在屏幕頂部，能清楚辨別當前所選tab，Ribbon上面的工具層級一般不超過3層。

　　垂直導航

　　即將導航內容以垂直的方式展現，一般都放在屏幕左側，可以選擇全部隱藏或者部分隱藏，也叫左側導航。

　　特點：

　　垂直導航中可以顯示的內容更多，方便上下滾動頁面

　　可以將頂部視覺焦點留給主體內容

　　從左至右可以展示更多的層級

　　Porsche canada的網頁中，你可以通過垂直導航按類別找到中意的車型詳細信息。

　　倒L導航

　　有時候我們能把水平導航和垂直導航結合起來，方便展示更多內容以及層次，這種布局很像一個倒過來的字母L，於是就誕生了倒L導航。

　　特點：

　　水平導航展示第1層級，垂直導航展示第2,3層級，也可以反過來垂直導航展示第1層級，水平導航展示第2,3層級

　　用在信息條目過多，又需要分層展示時

　　Autodesk的網站就是一個倒L導航的例子，水平方向可以選擇不同的類別，同時展開的垂直導航裡有更多細分的條目可以參考。

　　Directory Navigation

　　應用內有一些分組的內容可供用戶直接選擇，無論是組內挑選還是組與組之間挑選，我們可以使用目錄式導航，這樣用戶可以對全局內容的選擇有一個大體的把握。

　　特點

　　多組內容分布

　　每組內容擁有不同的子內容

　　組內容或者子內容間快速切換

　　用戶在了解全局架構的同時能快速定位目標內容

　　上過淘寶的同學都知道，其主頁上的目錄式導航是很多購物目標明確的用戶尋找商品時最有力的導航工具。

　　Doormat Navigation

　　門墊式導航，就是把所有信息內容分成2層同時展示出來，第1層展示主要的類別，第2層展示主要類別下面的主要子項。它同目錄式導航有點相似，不過僅僅展示部分子項而不是全部。

　　特點：

　　3-4個主要類目，用戶能快速在第1層類目中作出選擇

　　不重要的子項隱藏起來，不需要展示所有子項，4-8個主要子項就可以了

　　一些網站時常采用這類導航模式，把最新最熱門的文章展示在主要類目下，通過點擊類目(highlight部分)可以進入該欄看到全部文章。

　　Double Tab Navigation

　　當擁有足夠多的頁面需要按照結構組織起來時，每個頁面使用一個tab來顯示，用戶需要知道他們目前在導航系統中的位置並且如何返回主頁面，這裡我們可以把tab分成兩層來進行導航。

　　特點：

　　雙層tab，首層tab下緊貼著次層tab

　　雙層tab在視覺上是相連的，首層tab中的一個選項對應次層所有的tab

　　當前所在位置跟tab中其他選項有視覺區別

　　DesignSensory就用了雙層tab來安排其頁面內容，我們可以看到，選中相應的tab後，主浏覽區域顯示對應內容，這樣很方便的可以在不同類型內容的頁面之間快速跳轉。

　　注：部分情況下，第二層tab可以隱藏起來，節省了不少頁面空間。

　　Map Navigation

　　用戶在地圖上根據位置選擇內容，點擊後的鏈接能跳轉到對應詳細信息。

　　特點：

　　信息組織與地理位置有關

　　與地理位置相關的內容同地圖上的位置一一對應

　　提供鏈接便於展開更多內容

　　Google Earth就是一種地圖導航，通過點擊地圖上不同方位的圖標，可以進一步獲得該位置信息的詳細內容。

　　Split Navigation

　　當信息內容按照一定的結構組織起來時，用戶需要展開不同的節點查看子節點來確定內容，我們可以選擇Split Navigation。

　　特點：

　　內容層級偏多，比如書的章節，一般有3-4層

　　末層內容間的快速切換，比如可以直接從第五章第四小節第六段直接跳轉到第二章第一小節第三段

　　PDF文檔的書簽，Powerpoint的outline，Outlook左側的導航欄，CHM幫助文檔的目錄等等都是這種分割式導航的應用。

　　Icon Navigation

　　使用圖標+少量文本描述導航模塊含義，便於用戶第一眼了解基本用途。在視覺引導越來越受重視的今天，這種模式是很多應用程序的普遍選擇，不失生動的同時也不會誤導用戶。

　　特點：

　　圖標+少量文字標簽

　　圖表內容通俗易懂，即時沒有文字解釋也能被用戶知曉，加上文字標簽可以進一步確認其用途

　　某設計師的博客便是這種風格。

　　Other Navigations

　　導 航是信息設計中最重要的部分，自從應用程序的布局不再局限於同現實世界完全映射後，導航欄的設計出現了很多新的方法，更簡潔，更直接更吸引眼球的成為人們 的首選。隨著技術的發展，一些新興的導航技術也逐漸被部分應用采用，這些導航方式主要是表現形式有所變化，大部分從邏輯結構上跟前面介紹的區別不大，大家 可以適當的選擇一些新導航模式來為自己的設計增加魅力。

　　手繪風格

　　反映真實溫度的月份導航

　　擬真映射式

　　色塊導航

　　基於Flash的導航