導航UI設計(上) — 網頁上的導航設計怎麼想怎麼做？
今天要繼續來跟大家分享一些界面設計的小技巧，這篇我們來聊聊界面中不可或缺的重要組件：導航（Navigation），導航能告訴用戶當前所在的位置，也能提供用戶其他功能或內容入口，是界面設計中非常重要的一個部分。
在網頁跟 App 上的導航會有不同的設計要點，這邊我們會分開討論，那麼就先從網頁的部分開始吧！
導航中包含多少個選項？
在決定怎麼設計你的導航前，首先你要先釐清你導航的數量跟層級。你可以先將所有選項列出來，當選項非常多時，就對選項做權重區分，可以將重要度低的選項移除，或對選項做分類，避免資訊過多造成用戶的認知負擔。
記得我們在 心理學在 UI / UX 設計中的運用（上） 中有提過的席克定律（Hick’s Law），當一個人面對的選擇愈多時，作出決定花費的時間就愈長，還有米勒定律（Miller’s Law）中也提到當選項超過 9 個時，大腦出錯的機率就提高了，可以參考之前提過的一些小技巧，幫助你規劃導航的選項及層級。
選擇頂部導航或側邊導航？
大家有沒有發現，網站上的導航欄不是在上面就是在左側，這其實跟 F型瀏覽模式理論有關，這個是在2006年由 Jakob Nielsen 提出的理論，在2017年他的團隊也更新了這個模型相關的實驗結果，有興趣的人可以讀一讀原文，這邊直接提結論：用戶在第一次瀏覽頁面的時候，視線通常會用F字型的方式瀏覽內容，也就是注意力通常會集中在頂部跟左側。
這樣你是不是就明白為什麼為什麼導航總是在頂部跟左側啦！那我們如何選擇要用哪種導航呢？讓我們先來看看這張圖：
從上面這張圖我們就可以發現，當你的視覺範圍固定在一個點上時，側邊導航可以比頂部導航容納更多的內容，更有利於快速掌握所有選項。不過同樣的道理，側邊導航的內容也比較容易受到其他選項分散注意，頂部導航則可以給每個選項各自的權重。
頂部導航：選項5個以下使用頂部導航
如果僅考慮選項數量的話，如果選項不超過5個，使用頂部導航可以更好的控制網站的整體體驗，能有更大的空間去設計網站主要內容。而根據前面提到的F型瀏覽模式，頂部導航上最左邊的選項視覺權重最高，所以順序的安排也十分重要。
側邊導航：選項多或優先級相同時，可以使用側邊導航
當選項多時，使用側邊導航就是一個提高效率的好方法。就像前面提到的，側邊導航是用垂直的方式排列，當我們的視覺集中在一個位置上時，側邊導航可以容納更多選項，有利於用戶完整的瀏覽全部的內容，左側也是F型瀏覽模式的熱區，能夠快速地抓到用戶的注意，讓他們快速找到對自己重要的內容。
這只是比較簡單的選擇方式，當你的選項比較多，有二級甚至是三級導航時，考量的方式也會有所不同。
二級導航跟三級導航該怎麼設計？
當你的網站功能跟內容較多的時候，無法避免會需要更多的選項，勢必要將選項分級分層，但菜單的分層愈多，必定會需要花更多時間才能讓用戶找到他需要的內容，如何提高這個行為的效率，就是設計導航欄的一大重點。
二級導航
如果一級選項跟二級選項有直接的關係，在hover或點擊時展開選項，是很常見的設計，對用戶來說這就是一種很直覺的操作。另外一種方式，就是在頂部導航下設置水平導航來進一步細分內容，這個方式直接展開二級的內容，同時也可以提示用戶當前位置。
當你的二級導航和主導航沒有直接關係，而是權重比較低的其他內容，通常會使用頂部欄與側邊欄互相搭配，來作為導航的樣式。
而就像前面提到的，選項多的比較適合放在側邊欄，以提高操作的效率，即使一級選項跟二級選項有相互關係，因為二級選項非常多，我們會選擇使用頂部導航跟側邊欄的搭配，以利用戶快速且完整的瀏覽選項。
這邊做個小結：
- 當主導航與二級導航有直接關係時，Hover/點擊展開選項，或使用頂部導航跟水平導航的搭配
- 當主導航與二級導航沒有直接關係時，使用頂部欄跟側邊欄的搭配
- 主導航與二級導航有相互關係，但二級選項多時，使用頂部導航與側邊欄搭配
三級導航
三級導航的設計就比較複雜了，這我們一步一步來說明。首先根據前面提到的視覺集中跟F型瀏覽模式的概念，一級導航設置在左側會比頂部導航來得有效率，而當一級導航跟二、三級導航分開時，賦予一級導航的權重更高，識別速度又更快了。
除了考慮識別速度，也需要考慮內容的相關性與用戶操作的效率，如果一層層的內容都有從屬關係，那把一級導航、二級導航、三級導航放在上-左-上這樣的順序，不只增加用戶找到目標的難度，而且也會增加游標移動的距離，不但降低效率還會提高錯誤率。
小結：
- 一級導航設置在左側效率最高
- 一級導航與二、三級導航在不同方向，更能凸顯主導航的優先級
- 相關的內容應該放在同一個方向上
創意導航設計
除了上面提到的基礎用法，其實在網站的導航上也有很多創意發揮的空間，只要能確保用戶瀏覽時的效率以及順暢度，設計一個創意吸睛的導航也能讓你的網站更令人印象深刻，我們就來看一些實際的例子吧！
這個網站主要的選項只有三個，直接將整個界面切成三個部分，用短影片呈現導航的選項，讓網頁的主視覺也具備導航的功能。
這是一個日本的設計工作室，官網運用旋轉的方式瀏覽，非常吸睛，每個模塊都是一個內容的入口，是令人很印象深刻的導航方式。
這個網站需要用拖動的方式瀏覽，入口遍佈在各處，其實不利於用戶快速找到需要的內容，但這樣的體驗有別於大部分的網站設計，如果你目的是想讓用戶覺得耳目一新，那這也是一個設計的方式，另外這個網站也保留了頂部的導航欄，從這邊也能快速找到全部的入口，讓網站還是能有良好的用戶體驗。
我覺得這個網站導航的方式很有趣，即使選項有50個這麼多，還是會讓人忍不住全部看完，用幾何圖形作為側邊導航的選項，可以快速定位到中間的位置，視覺效果也非常吸睛，讓人眼前一亮。
導航的設計牽涉到整個網站的架構跟用戶體驗，到底要放幾個選項、分成幾個層級、放在什麼位置、想要給用戶什麼第一印象？這些眉眉角角都是設計師需要好好考慮的，希望大家看完這篇文章，能對網站導航的設計有更多的想法！今天的分享先到這裡啦！下篇會繼續介紹關於App導航的設計，敬請期待！
