導航設計：直達電梯

超大信息類站點的導航條就像中藥鋪的抽屜，一字排開氣勢恢宏，分別拉開，別有洞天。

國人喜好：多！大！全！最好全部鋪開才有氣勢。從不爭氣的‘S浪’網多年沒怎麼變的首頁導航模式可見一般。至此，對比浏覽了同類大型新聞信息類站點，發現中/洋；東/西，界面感受果然不同。

今天只說導航，只對比了新聞類站點：

（娛樂類，設計類，個人站點導航形式多樣，邏輯復雜，暫來不及鋪開）

Yahoo News / BBC News / CNN / abc News / China Daily / CCTV News / The Japan Times / The Korea Times / 騰訊新聞 / 新浪

首先關注首頁橫向主導航：

（常規縱向導航通常配合橫向主導航試用，且在商務型，大型信息類站點主頁中單獨使用頻率不高，通常在次級頁面出現，且一定是信息內容量大，分類繁瑣的站點。）

可見基本導航條模式如下：

1. 對於信息統一，歸納性強的站點，通常會使用簡單模式：

2. 對於有豐富次級信息的，通常會使用以下兩種模式：

a. 鼠標hover下拉

b. tab展開

a 型導航方便快捷預覽， b 型導航直接展開次級信息，也有站點把a/b模式合並。

3. 特別案例，蓋澆飯類型的，把所有信息都鋪出來，比如s浪：

（與其說導航，不如說是歸納過的標簽）

導航操作性：

一個完美的導航，最基本最重要的是隨時隨地，快速引導用戶去相關頁面，而且能及時返回，方便跳轉到其他頁面。

有意思的是，去容易，反而找到來時路就千差萬別了。

比如：用戶很可能是從首頁任何一個興趣點，誤入了詳情頁面，去的容易，1步到～！但從詳情頁面返回到其他模塊或想去其他分支類別頁面，就要仰賴導航了。

為了提供必要引導，當用戶進入到足夠深的詳細頁面，各種索引，面包屑都配合導航條應運而生。

做一個反向測試，看哪種導航配套設置更便捷。

測試內容：從A類詳情頁【1】去B類詳情頁【2】：

測試站點：

Korea Times

http://www.koreatimes.co.kr/www/news/nation/2011/10/115_97248.html

BBC News

http://www.bbc.co.uk/news/uk-england-leeds-15438299

Yahoo News

http://news.yahoo.com

China Daily

http://www.chinadaily.com.cn/china/2011-10/25/content_13968775.htm

導航配套類型：

Korea Times

主導航 ＋ 面包屑 ＋ 左側縱向索引導航

BBC News

主導航 （展開tab）

Yahoo News 和 China Daily

主導航 （展開tab ＋ 鼠標懸停下拉列表）

操作：

Korea Times ：

第一種方式：從主導航返回――進入其他模塊B――分支次級頁面――詳情頁

第二種方式：從左側便捷索引直接抵達其他模塊B――分支次級頁面――詳情頁

（面包屑對應同一目錄下的內容切換更便捷，但和左側索引導航一起，功能性不突出。）

BBC News ：

從主導航Tab選擇其他模塊B――抵達其他模塊分支次級頁面――詳情頁

Yahoo News 和 China Daily

Mouse on主導航第一層其他模塊B――展開下拉點擊進入其他模塊分支次級頁面――詳情頁

測試體會：

使用便捷性Yahoo News 和 China Daily最方便，Korea Times第二種基於左側縱向導航輔助的操作是最快的。Korea Times功能方式多，且樣式不統一，分類太細節化，反而在使用時覺得有點手足無措，操作時會停頓猶疑。BBC News沒有整合hover下拉查看其他模塊選項的效果，不如Yahoo News 和 China Daily靈活，但是感官上BBC News更利落。

所以說，如果用一個控件可以解決得很漂亮的問題，為什麼要到處鋪開各設據點？！功能模塊集中，操作行為更靈便，使用感覺更舒暢，減少操作中的反復思考，停頓點更有前途。

其實一個舒服的導航，除了歸納清晰，操作便捷，乍一看第一印象也很重要～

不要一口氣把全部底細都攤在人家面前是好習慣。有的導航雖然強大，但是內容一多，功能一高級，看著就煩了。這種時候，需要

解套選擇恐懼症：

以BBC為例，它的主頁導航正如首頁頭條展示的信息，簡單直接，只有大模塊：

當點擊到感興趣的模塊後，例如進入單獨News頁面：

導航展開，信息量非常更大，且所在頁面導航次級信息也一並羅列。

感受：如果直接進入信息頁面，可能無從下手，正是第一步的簡單模塊引導，剝離了選擇困難。

再來看China Daily，雖然不是個特別貼合的例子，但是可以說明一些問題。初始進入所看到的導航其實是最簡單的【一】字導航，最多加了個mouse on下拉功能，但依然是大模塊讓選擇有了個范圍：

當點擊任何一個模塊或者使用下拉到達次級頁面，導航終於鋪開了：

這是個快速索引，同時合並其hover功效，導航就強大了：

最後廢話又要說回來了，站點導航到底用那種方式？還是弄個變形金剛什麼都包括了，要看站點的信息分類，同時也要從分類開始就要考慮到整個站點鋪開有多少點？導航才能牽得了線，小頭套不了大帽子，反之亦然。

作者：密封罐頭

文章來源：攜程UED 轉載請注明出處鏈接。