您的位置:首頁 > 設計教程 > 網頁設計 > 內頁

網站導航菜單教程:網頁頂部導航欄設計總結

核心提示: 一般來說,頂部欄有以下一些內容:品牌logo、菜單、搜索框、提示消息、登錄/注冊、聯系方式、語言切換、其他產品或者移動端app的下載鏈接、行為召喚鏈接等,我們覺得頂部欄無非是一個logo,幾個文字鏈接堆砌起來作為菜單,著實沒有什么需要注意的地方。但是事實上頂部欄設計

網頁中的header,一般我們稱之為頂部導航欄,這里為了行文方便,以下都簡稱頂部欄。頂部欄對于一個網站的用戶體驗來說是至關重要的,因為根據用戶的瀏覽習慣(從左到右,從上到下),當他們進入一個新的網站,頂部欄通常是他們最先看到的地方。我們都知道用戶對于你產品的第一印象是很重要的,因為它會一直伴隨接下來的使用過程,而且第一印象無法更改。

但是頂部欄卻是我們設計的一個盲區,我們很少花心思的去研究它。因為我們覺得頂部欄無非是一個logo,幾個文字鏈接堆砌起來作為菜單,著實沒有什么需要注意的地方。但是事實上頂部欄設計的學問遠不止這些。

頂部欄的內容

在進行頂部欄設計前,首先我們要確定的是應該要展示哪些內容。一般來說,頂部欄有以下一些內容:

  1. 品牌logo
  2. 菜單
  3. 搜索框
  4. 提示消息
  5. 登錄/注冊
  6. 聯系方式
  7. 語言切換
  8. 其他產品或者移動端app的下載鏈接
  9. 行為召喚鏈接(我要投稿,我要發博)

以上這些都是頂部欄中常見的元素,在設計的時候我們要根據產品自身的實際情況進行取舍,畢竟這些信息全部放上去也不太現實。信息過度加載會增加用戶的使用負擔,注意力會被分散。

漢堡包按鈕

取舍當然意味著既有“保留”也有“舍棄”,但是UI設計中的“舍棄”更多的是指“隱藏”——隱藏一些次要的功能。

在隱藏的同時,我們也希望當用戶需要的時候,這些隱藏的功能可以隨時隨地的呈現出來。漢堡按鈕可以幫助我們實現這一點。常見的漢堡按鈕是由三條水平線條構成的,很像兩層面包一層肉的漢堡包,所以我們形象的稱之為漢堡按鈕。

(ps:漢堡按鈕最初是由國外設計師最先使用并命名,如果是中國設計師發明了它,沒準就叫肉夾饃按鈕了。)

漢堡按鈕可以通過將一些次要的信息隱藏來釋放頁面的空間,這樣使頂部欄更加的清爽簡潔,用戶的注意力可以更好的集中在那些重要的信息上。

漢堡按鈕在頁面導航設計中使用的很頻繁,用戶對此很熟悉,所以不會額外增加用戶的學習成本。漢堡按鈕設計最需要注意的地方就是它很容易被用戶忽視,所以我們在設計的時候要通過配色,尺寸,留白的使用來將其適當的凸顯出來。一句話來說,漢堡按鈕既要做到清晰展示,又不能占據太大的空間。

文章源自 設計聯盟 www.610640.tw 中國最具影響力的創意設計綜合網站

編輯:Beach

資訊標簽: 網頁 設計 總結 導航 菜單
搜索推薦
設計聯盟官方微信
設計聯盟官方微信
微信公眾號:designlinks
掃一掃 訂閱最新資訊
回到頂部
排列三试机号的金马