&

網(wǎng)站頂部導(dǎo)航欄設(shè)計(jì)攻略：搞定logo+菜單設(shè)計(jì)！：

網(wǎng)頁中的header，一般我們稱之為頂部導(dǎo)航欄，這里為了行文方便，以下都簡稱頂部欄。頂部欄對于一個網(wǎng)站的用戶體驗(yàn)來說是至關(guān)重要的，因?yàn)楦鶕?jù)用戶的瀏覽習(xí)慣（從左到右，從上到下），當(dāng)他們進(jìn)入一個新的網(wǎng)站，頂部欄通常是他們最先看到的地方。我們都知道用戶對于你產(chǎn)品的第一印象是很重要的，因?yàn)樗鼤恢卑殡S接下來的使用過程，而且第一印象無法更改。

但是頂部欄卻是我們設(shè)計(jì)的一個盲區(qū)，我們很少花心思的去研究它。因?yàn)槲覀冇X得頂部欄無非是一個logo，幾個文字鏈接堆砌起來作為菜單，著實(shí)沒有什么需要注意的地方。但是事實(shí)上頂部欄設(shè)計(jì)的學(xué)問遠(yuǎn)不止這些。

頂部欄的內(nèi)容

在進(jìn)行頂部欄設(shè)計(jì)前，首先我們要確定的是應(yīng)該要展示哪些內(nèi)容。一般來說，頂部欄有以下一些內(nèi)容：

1.品牌logo

2.菜單

3.搜索框

4.提示消息

5.登錄／注冊

6.聯(lián)系方式

7.語言切換

8.其他產(chǎn)品或者移動端app的下載鏈接

9.行為召喚鏈接（我要投稿，我要發(fā)博）

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

漢堡包按鈕

取舍當(dāng)然意味著既有“保留”也有“舍棄”，但是UI設(shè)計(jì)中的“舍棄”更多的是指“隱藏”——隱藏一些次要的功能。

在隱藏的同時(shí)，我們也希望當(dāng)用戶需要的時(shí)候，這些隱藏的功能可以隨時(shí)隨地的呈現(xiàn)出來。漢堡按鈕可以幫助我們實(shí)現(xiàn)這一點(diǎn)。常見的漢堡按鈕是由三條水平線條構(gòu)成的，很像兩層面包一層肉的漢堡包，所以我們形象的稱之為漢堡按鈕。

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

雙層菜單

雙層菜單的樣式在近來的頂部欄設(shè)計(jì)中也愈發(fā)受到設(shè)計(jì)師的青睞。因?yàn)殡S著產(chǎn)品功能的不斷增加與完善，漸漸出現(xiàn)了一些單層菜單無法解決的情況，那就是頂部欄需要展示的內(nèi)容過多，而且某些特定功能不屬于同一層級。為了更好的應(yīng)對這類情況，設(shè)計(jì)師們創(chuàng)造性的使用雙層菜單這種樣式。

文字和配色

我們在確定頂部欄上內(nèi)容和展示方式后要考慮的是設(shè)計(jì)風(fēng)格。產(chǎn)品的設(shè)計(jì)風(fēng)格要立足于產(chǎn)品自身的定位，這個就意味著設(shè)計(jì)師的工作不應(yīng)該僅限于視覺呈現(xiàn)還要懂產(chǎn)品。

一般來說，頂部欄的設(shè)計(jì)風(fēng)格由配色、文字和圖標(biāo)來構(gòu)成。因?yàn)檫@是頂部欄上最主要的三個元素，圖標(biāo)的使用相對較少，最常見的是下拉箭頭和放大鏡圖標(biāo)。

再說文字，大部分用戶不會一個字一個字去讀頁面中的信息，他們是“掃描”式閱讀。所以頂部欄上的文字設(shè)計(jì)首要考慮的是可讀性，要讓用戶在短時(shí)間內(nèi)就可以獲取這些信息。所以我們的文字要做到能夠從背景中凸顯出來，必要的時(shí)候可以加粗字體樣式。

固定型頂部欄

固定頂部欄代表著另一種設(shè)計(jì)思路：無論用戶進(jìn)行何種操作，頂部欄對用戶來說都是可見的。這類的頂部欄適用于頁面內(nèi)容比較多，需要用戶不斷下拉滑動的網(wǎng)站。

極簡風(fēng)格

在上面我一直強(qiáng)調(diào)頂部欄設(shè)計(jì)要簡潔明了，要讓用戶一眼就能看明白。因?yàn)轫敳繖趯儆趯?dǎo)航體系的一部分，是為了避免用戶迷路，幫助他們更好的使用產(chǎn)品。歸根結(jié)底用戶使用你的產(chǎn)品是為了你提供的內(nèi)容或服務(wù)，而不是來看狂拽酷炫的頂部欄。所以我們不能本末倒置，將頂部欄做的過于花哨，進(jìn)而分散用戶的注意力。

此外極簡風(fēng)格很適合響應(yīng)式設(shè)計(jì)，可以在多設(shè)備上追求一致的用戶體驗(yàn)。

簡約設(shè)計(jì)的另一大優(yōu)點(diǎn)就是，設(shè)計(jì)師會經(jīng)常遇到臨時(shí)的迭代需求，領(lǐng)導(dǎo)突然讓你在這里加一個按鈕那里加一個文字標(biāo)簽，簡約設(shè)計(jì)為這種突然的迭代需求提供了操作空間。

總結(jié)

設(shè)計(jì)師的工作不應(yīng)該僅限于視覺呈現(xiàn)，還應(yīng)該考慮交互原則，注重產(chǎn)品的用戶體驗(yàn)。一款產(chǎn)品的功能性和美觀性是相輔相成的，光做視覺的設(shè)計(jì)師的作品也無法令用戶的眼睛滿意。希望這篇文章可以給你帶來收獲。

本文由廣州網(wǎng)站建設(shè)公司-三行網(wǎng)絡(luò)原創(chuàng)，轉(zhuǎn)載請保留版權(quán)（廣州網(wǎng)站建設(shè)www.stevenmarcscott.com ）三行網(wǎng)絡(luò)——專注于企業(yè)網(wǎng)站建設(shè)、響應(yīng)式營銷型網(wǎng)站定制，歡迎來電咨詢！熱線：020-85628720、15915767698