關於web導航欄的狀態梳理(非觸屏環境)

關於網站導航欄的常見狀態有三種:固定頂欄/向下滑動隱藏,向上反之/頂欄隨頁面;針對這幾種情況的使用做了簡單梳理。沒有絕對標準。


頂欄固定

優點:用戶可以在網頁的任何位置不進行任何操作即可看到頂欄信息狀態以及快速鏈接頂欄功能;缺點:不適用於對沉浸要求高的使用範圍,如強調作品的深度閱讀和創作(不只是文字);

網站基於或者突出某一功能,需要直觀明顯方便快捷:工具型網站等

??為什麼淘寶、京東都做了搜索框頂端固定,而amazon、newegg都沒有?

??為什麼百度做了搜索框頂端固定,而google、bing、yahoo都沒有?

網頁內容主題明確,提示用戶當前內容主題:企業產品的詳情頁

apple

簡訊息流,同時相關功能需要快捷操作或者顯示即時信息:各大社交網站;

twitter

向下滑動隱藏,向上反之(同縮小放大)

優點:全屏!!!有很好的沉浸感;用戶可以在網頁的任何位置較方便的查看頂欄信息狀態以及鏈接頂欄功能;(將用戶瀏覽頁面拆分成上下滑動兩種場景,對應用戶不同的使用場景)缺點:使用範圍比較明確,對於不需要這種交互的網站反而用戶覺得啰嗦;對於用戶有一段小小的適應期;

注重網站內容的沉浸體驗,如較重體量的信息體驗或者創作:在線中/長文字的欣賞或者創作;medium、知乎專欄;(挖坑:關於在medium和知乎專欄的寫作場景下產品的思考)

medium-向下滑動頂欄收回

medium-向上滑動頂欄滑出

頂欄隨頁面

優點:常規做法;缺點:不適用於頁面很長同時對頂欄的實時可見以及可用有要求的網站,不然用戶回頂欄會很費事;

頁面內容長度較短,對頂欄的實時性功能沒有特別要求;


結~~我~一雙慧眼吧

web導航欄固定與否取決於網站的定位、網站的使用場景、網站的運營階段還有網站內容的展示方式等,總之具體問題具體分析,除了頂欄還可以使用側欄、底欄等。


Painting by Alexej Jawlensky - Portrait of a Girl


推薦閱讀:

怎樣的圖文混排設計讓你的網頁更具歐美風?
PS基礎操作小技巧:如何利用PS給衣服更換顏色
Web註冊設計:參考下這5種類型的網站設計
設計技巧之網頁中的字間距

TAG:網頁設計 | 設計 | 產品設計 |