網頁 UI 設計模型 — 導航和路徑規劃

05-19

來自專欄產品阿蘭

一：搜索

facebook

當期最普遍的做法是將搜索功能放在導航區域，並且右上角放一個搜索框。

要點：

1. 如果空間有限，推薦使用可擴展的輸入框，帶有放大鏡圖標；

2. 內容越多的情況下，就越是需要將搜索放在明顯的位置。例如，Facebook 並沒有採取傳統的方法，將搜索框放右上角，而是放在了中間偏左的位置；

3. 自動填充能夠節省用戶時間，給出建議內容和合適的詞；

4. 如果用戶能夠多重條件搜索，使用「輸入提示」模式。

二：通知

知乎

隨著社交媒體網站的流行，讓用戶知道何時有人產生互動的「通知」也普遍開來。網站和 APP 可以推送新的內容、產品、評論或折扣信息，用戶也可以選擇想要接收哪種通知信息。

Google 採用了跨產品的混合通知：用戶登錄 Gmail 後，可以快速查看是否有人在 YouTube 上發出新的評論。

要點：

1. 最普遍的通知圖標是一個「鈴鐺」；

2. 通知通常帶有顏色並且接著一個數字，選擇一個醒目的顏色來吸引注意力；

3. 偶爾的更新提示是適當的，但是不能濫用通知，利用通知發一些營銷信息，否則會降低消息的價值；

4. 如果用戶長時間未登錄（如一周或以上），可以考慮通過增加快速通知，為用戶總結過去這段時間內發生的重要信息。

三：跳轉

簡書

無論是文字鏈接還是圖標形式的跳轉都能夠節省用戶時間。作為可選功能，不能太顯眼，最常見的跳轉是「返回頂部」。

要點：

1. 不要太顯眼，可以考慮固定在側邊欄；

2. 同樣可以採用下拉到一定距離顯示按鈕。

四：固定導航欄

Facebook

通常會採用固定頂部導航欄，也可見一些固定側邊和底部導航欄。好處是用戶在瀏覽內容時候，突然需要搜索或查看通知，有便捷的入口。

要點：

1. 由於總是需要佔據一些屏幕空間，導航設計的越小越好；

2. 對於單頁站點強烈推薦用這種導航，否則用戶會丟失導航信息；

3. 為了更好的移動端體驗，針對移動用戶做導航收縮；

4. 對於卡片式風格的網站，不建議採用這種方式的導航，用戶在下翻的時候容易迷失。

五：垂直導航

Wikipedia

放在兩邊的垂直導航能夠節省空間。對於有很多分頁的網站，同時可以為用戶提供很多選項，當然也可以為其他導航增加變化的空間。

垂直導航的好處是允許用戶在不同頁面間自由跳轉，更簡單的獲取不同內容。

要點：

1. 如果想要節省更多空間，垂直導航可以考慮採用抽屜式；

2. 不必拘泥於左側垂直導航，有時候採用右側垂直導航能夠讓網站更加突出。

3. 如果想要更加有創造性，可以結合垂直導航和跳轉功能，例子：Heart Kids New Zealand

六：彈出框

Bing

適用於用戶不想離開當前位置，但是能夠獲取更多信息的情境，這樣做的好處是不會分散用戶的任務流。通常在滑鼠懸浮時彈出。

要點：

1. 完美適用於卡片式布局：設計師可以在頁面展示大量的內容，同時以彈出的方式顯示信息來節省空間；

七：模態

Weibo

由於涉及到交互，模態是一種交流重要信息的方式。和彈出框一樣，模態可以讓用戶在當前頁面完成操作，不同的是模態需要交互，即使是最簡單的點擊「跳過」或「是」。

模態通常有兩個用處：

·吸引用戶注意某個功能

·營銷

要點：

1. 模態彈出時背景需要處理一下，通常是將背景變暗；

2. 允許用戶通過點擊背景框和按「ESC」鍵退出模態；

3. 如果覺得強迫用戶點擊會影響用戶體驗，可以考慮使用自動最小化的動畫；

4. 對於教程頁面，推薦使用多頁面模態；

5. 對於郵件訂閱的模態，在用戶滾動到相應位置觸發。

八：行為召喚

行為召喚意為用明顯的按鈕引導用戶進行某項操作，通常用於購買、註冊、邀請參加某項活動等。對於行為召喚，最重要的是視覺效果：顯眼且實在。實際上，行為召喚應當是用戶看到的第一元素，畢竟這個功能通常都帶有商業目標。

要點：

1. 顏色時讓行為召喚顯眼的最有效方式，橘色或綠色是吸引人注意力的顏色，使用黑vs白強烈對比的顏色也可以;

2. 另外一個是位置，在最常見的位置放置行為召喚;

3. 滑鼠移上時變化顏色是近來的趨勢，能夠增加視覺愉悅感；

九：推薦

Facebook

推薦最常見於電商頁面，依據用戶的購買/瀏覽行為推薦商品。現在，任何網站只要能夠收集用戶數據都能夠做推薦，也可以基於用戶的個人資料。

Facebook 會基於你的好友和關注列表來推薦你可能感興趣的人，而視頻網站可能僅僅依據你的觀看記錄推薦同一類的內容。

Amazon 做的最超前，依據不同維度來做推薦，如：搜索、瀏覽、收藏等。

要點：

1. 個性化是關鍵。對用戶了解越多，推薦就能越精準。使用所有你可以用到的數據。

2. 用戶簡歷個人資料時，可以邀請他們選擇一些特點標籤來區分偏好。

十：相關內容

Ebay

在電商、博客、雜誌網站中最為流行，和「推薦」功能一樣非常有效，但是不需要用戶數據。通常通過標籤或關鍵字推薦相關內容。

要點：

1. 相關內容的準確性常常依賴於標籤系統，更多的精準標籤創造更有效的結果。