網頁頂部導航欄設計方法

作者：龍 時(shí)間：2018-07-30 浏覽：

網頁中的(de)header，一般我們稱之爲頂部導航欄，這(zhè)裏爲了(le)行文方便，以下(xià)都簡稱頂部欄。頂部欄對(duì)于一個(gè)網站的(de)用(yòng)戶體驗來(lái)說是至關重要的(de)，因爲根據用(yòng)戶的(de)浏覽習(xí)慣（從左到右，從上到下(xià)），當他(tā)們進入一個(gè)新的(de)網站，頂部欄通(tōng)常是他(tā)們最先看到的(de)地方。我們都知道用(yòng)戶對(duì)于你産品的(de)第一印象是很重要的(de)，因爲它會一直伴随接下(xià)來(lái)的(de)使用(yòng)過程，而且第一印象無法更改。

但是頂部欄卻是我們設計的(de)一個(gè)盲區(qū)，我們很少花心思的(de)去研究它。因爲我們覺得(de)頂部欄無非是一個(gè)logo，幾個(gè)文字鏈接堆砌起來(lái)作爲菜單，著(zhe)實沒有什(shén)麽需要注意的(de)地方。但是事實上頂部欄設計的(de)學問遠(yuǎn)不止這(zhè)些。

頂部欄的(de)内容

在進行頂部欄設計前，首先我們要确定的(de)是應該要展示哪些内容。一般來(lái)說，頂部欄有以下(xià)一些内容：

1.品牌logo

2.菜單

3.搜索框

4.提示消息

5.登錄／注冊

6.聯系方式

7.語言切換

8.其他(tā)産品或者移動端app的(de)下(xià)載鏈接

9.行爲召喚鏈接（我要投稿，我要發博）

以上這(zhè)些都是頂部欄中常見的(de)元素，在設計的(de)時(shí)候我們要根據産品自身的(de)實際情況進行取舍，畢竟這(zhè)些信息全部放上去也(yě)不太現實。信息過度加載會增加用(yòng)戶的(de)使用(yòng)負擔，注意力會被分(fēn)散。

漢堡包按鈕

取舍當然意味著(zhe)既有“保留”也(yě)有“舍棄”，但是UI設計中的(de)“舍棄”更多(duō)的(de)是指“隐藏”——隐藏一些次要的(de)功能。

在隐藏的(de)同時(shí)，我們也(yě)希望當用(yòng)戶需要的(de)時(shí)候，這(zhè)些隐藏的(de)功能可(kě)以随時(shí)随地的(de)呈現出來(lái)。漢堡按鈕可(kě)以幫助我們實現這(zhè)一點。常見的(de)漢堡按鈕是由三條水(shuǐ)平線條構成的(de)，很像兩層面包一層肉的(de)漢堡包，所以我們形象的(de)稱之爲漢堡按鈕。

漢堡按鈕可(kě)以通(tōng)過将一些次要的(de)信息隐藏來(lái)釋放頁面的(de)空間，這(zhè)樣使頂部欄更加的(de)清爽簡潔，用(yòng)戶的(de)注意力可(kě)以更好的(de)集中在那些重要的(de)信息上。

漢堡按鈕在頁面導航設計中使用(yòng)的(de)很頻(pín)繁，用(yòng)戶對(duì)此很熟悉，所以不會額外增加用(yòng)戶的(de)學習(xí)成本。漢堡按鈕設計最需要注意的(de)地方就是它很容易被用(yòng)戶忽視，所以我們在設計的(de)時(shí)候要通(tōng)過配色，尺寸，留白的(de)使用(yòng)來(lái)将其适當的(de)凸顯出來(lái)。一句話(huà)來(lái)說，漢堡按鈕既要做(zuò)到清晰展示，又不能占據太大(dà)的(de)空間。

雙層菜單

雙層菜單的(de)樣式在近來(lái)的(de)頂部欄設計中也(yě)愈發受到設計師的(de)青睐。因爲随著(zhe)産品功能的(de)不斷增加與完善，漸漸出現了(le)一些單層菜單無法解決的(de)情況，那就是頂部欄需要展示的(de)内容過多(duō)，而且某些特定功能不屬于同一層級。爲了(le)更好的(de)應對(duì)這(zhè)類情況，設計師們創造性的(de)使用(yòng)雙層菜單這(zhè)種樣式。

以上面的(de)網站爲例，上層的(de)菜單有社交網絡的(de)鏈接（Facebook,Instagram和(hé)Twitter），企業logo，搜索框，購(gòu)物(wù)車和(hé)漢堡按鈕。下(xià)層的(de)菜單有産品種類，營業網點地址，新聞，關于我們和(hé)聯系我們。在這(zhè)種情況下(xià)，如果将這(zhè)些信息以傳統的(de)單行菜單展示，勢必會放不下(xià)，造成頂部欄的(de)過度擁擠。

此外雙層菜單這(zhè)種設計樣式很新潮，可(kě)以給用(yòng)戶耳目一新的(de)感覺。

文字和(hé)配色

我們在确定頂部欄上内容和(hé)展示方式後要考慮的(de)是設計風格。産品的(de)設計風格要立足于産品自身的(de)定位，這(zhè)個(gè)就意味著(zhe)設計師的(de)工作不應該僅限于視覺呈現還(hái)要懂(dǒng)産品。

一般來(lái)說，頂部欄的(de)設計風格由配色、文字和(hé)圖标來(lái)構成。因爲這(zhè)是頂部欄上最主要的(de)三個(gè)元素，圖标的(de)使用(yòng)相對(duì)較少，最常見的(de)是下(xià)拉箭頭和(hé)放大(dà)鏡圖标。

首先來(lái)說配色，配色主要是指背景色。通(tōng)常來(lái)說，不要給頂部欄添加過重的(de)背景色，選擇淺色或者直接白色。因爲顔色過重會造成用(yòng)戶注意力的(de)分(fēn)散。此外頂部欄下(xià)方是banner，我們在進行banner設計時(shí)候會考慮banner配色和(hé)頁面整體風格是否搭配。如果頂部欄的(de)顔色過重會制約banner的(de)設計，如果是白色和(hé)淺色就沒有這(zhè)種顧慮了(le)。當然這(zhè)也(yě)不是絕對(duì)的(de)，有些網站頂部欄采用(yòng)深色同樣很好看，有些網站的(de)頂部欄直接是透明(míng)，跟頁面内容融爲一體。

再說文字，大(dà)部分(fēn)用(yòng)戶不會一個(gè)字一個(gè)字去讀頁面中的(de)信息，他(tā)們是“掃描”式閱讀。所以頂部欄上的(de)文字設計首要考慮的(de)是可(kě)讀性，要讓用(yòng)戶在短時(shí)間内就可(kě)以獲取這(zhè)些信息。所以我們的(de)文字要做(zuò)到能夠從背景中凸顯出來(lái)，必要的(de)時(shí)候可(kě)以加粗字體樣式。

固定型頂部欄

固定頂部欄代表著(zhe)另一種設計思路：無論用(yòng)戶進行何種操作，頂部欄對(duì)用(yòng)戶來(lái)說都是可(kě)見的(de)。這(zhè)類的(de)頂部欄适用(yòng)于頁面内容比較多(duō)，需要用(yòng)戶不斷下(xià)拉滑動的(de)網站。

這(zhè)種交互模式可(kě)以很好的(de)提升頂部欄的(de)易用(yòng)性，但是這(zhè)是建立在犧牲一部分(fēn)頁面空間的(de)基礎上換來(lái)的(de)，所以我們在使用(yòng)的(de)時(shí)候一定要謹慎。

極簡風格

在上面我一直強調頂部欄設計要簡潔明(míng)了(le)，要讓用(yòng)戶一眼就能看明(míng)白。因爲頂部欄屬于導航體系的(de)一部分(fēn)，是爲了(le)避免用(yòng)戶迷路，幫助他(tā)們更好的(de)使用(yòng)産品。歸根結底用(yòng)戶使用(yòng)你的(de)産品是爲了(le)你提供的(de)内容或服務，而不是來(lái)看狂拽酷炫的(de)頂部欄。所以我們不能本末倒置，将頂部欄做(zuò)的(de)過于花哨，進而分(fēn)散用(yòng)戶的(de)注意力。

此外極簡風格很适合響應式設計，可(kě)以在多(duō)設備上追求一緻的(de)用(yòng)戶體驗。

簡約設計的(de)另一大(dà)優點就是，設計師會經常遇到臨時(shí)的(de)叠代需求，領導突然讓你在這(zhè)裏加一個(gè)按鈕那裏加一個(gè)文字标簽，簡約設計爲這(zhè)種突然的(de)叠代需求提供了(le)操作空間。