網(wǎng)頁(yè)中頂部導航欄往往是網(wǎng)站網(wǎng)頁(yè)用戶(hù)進(jìn)入網(wǎng)站后最先看到的地方，決定著(zhù)用戶(hù)對網(wǎng)頁(yè)的頂部導航頂部導航第一印象，其重要性不言而喻。欄設欄設
網(wǎng)頁(yè)中的計網(wǎng)計總結header，一般我們稱(chēng)??之為頂部導航欄，站優(yōu)這里為了行文方便，網(wǎng)站網(wǎng)頁(yè)以下都簡(jiǎn)稱(chēng)頂部欄。頂部導航頂部導航頂部欄對于一個(gè)網(wǎng)站的欄設欄設用戶(hù)體驗來(lái)說(shuō)是至關(guān)重要的，因為根據用戶(hù)的計網(wǎng)計總??結(′?_?`)瀏覽習慣（從(cong)左到右，從??上到下），站優(yōu)當他們進(jìn)入一個(gè)(ge)新的網(wǎng)站網(wǎng)??頁(yè)網(wǎng)站，頂部欄通常是頂部導航頂部導航他們最先看到的地方。我們都知道用戶(hù)對于你(ni)產(chǎn)品的欄(′▽?zhuān)?設欄設第一印象是很重要的，因為它會(huì )一直伴隨接下來(lái)的計網(wǎng)計?總結使用過(guò)程，而且第一印象無(wú)法更改。站優(yōu)
但是頂部欄卻(′?_?`)是我們設計的一個(gè)盲區，我們很少花心思的去研究它。因為我們覺(jué)得頂部欄無(wú)非是一個(gè)logo，幾個(gè)文字鏈接堆砌起來(lái)作為菜單，著(zhù)實(shí)沒(méi)有什么需要注意的地方。但是事實(shí)上頂部欄設計的學(xué)問(wèn)遠不止這些。
頂部欄的內容
在進(jìn)行頂部欄設計前，首先我們要確定的是應該要展示哪些內容。一般來(lái)說(shuō)，頂部欄有以下一些內容：
品牌logo
菜單
搜索框
提示消息
登錄／注冊
聯(lián)系方式
語(yǔ)言切換
其他產(chǎn)品或者移動(dòng)端app??的下載鏈接
行為召喚鏈接（我要投稿，我要發(fā)博）
以上這些都是頂部欄中常見(jiàn)的元素，在設計的時(shí)候我們要根據產(chǎn)品自身的實(shí)際情況進(jìn)(jin)行取舍，畢竟這些信息全部放上去也不太現實(shí)。信息過(guò)??度加載會(huì )增加用戶(hù)的使用負擔，注意力會(huì )被分散。
漢堡包按鈕
取舍當然意味著(zhù)既有“保留”也有“舍棄”，但是UI設計中的“舍棄&??rdquo;( ???)更多的是指“隱藏”——隱藏一些次要的功能。
在隱藏的同時(shí)，我們也希望當用戶(hù)需要的時(shí)候，這些隱藏的功能可以隨時(shí)隨地的呈現出來(lái)。漢堡按鈕可以幫助我們實(shí)現這一點(diǎn)。常見(jiàn)的漢ヽ(′▽?zhuān)?/堡按鈕是由三條??水平(ping)線(xiàn)條構成的，很像兩層面(′?｀)包一層肉的漢堡包，所以我們形象的稱(chēng)之為漢堡按鈕。
（ps：漢堡按鈕最初是由國外設計師最先使用并命名，如果是中國設計師發(fā)明了???它，沒(méi)準就叫肉夾饃按鈕了。）
漢堡按鈕在頁(yè)面導航設計中使用的很頻繁，用戶(hù)對此很熟悉，所以不會(huì )額外增加用戶(hù)的學(xué)習成本。漢堡按鈕設計最需要注意的地方就?是它很容易被用戶(hù)忽視，所以我們在設計的時(shí)候要(′?｀)通過(guò)配色，尺??寸，(′；ω；`)留白的使用來(lái)將其適當的凸顯出來(lái)。一句話(huà)來(lái)說(shuō)，漢堡按鈕既要??做到清晰展示，又不能占據太大的空間。
雙層菜(O_O)單
雙層菜單的樣式在(′▽?zhuān)?近來(lái)的頂部欄設計中也愈發(fā)受到設計師的青睞。因為現在隨著(zhù)??產(chǎn)品功能的不斷增加與完善，漸漸出現了一( ?ヮ?)些單層菜單無(wú)法解決的情況，那就是(shi)頂部欄需要展示的內容過(guò)多，而且某些特定功能不屬于ヽ(′▽?zhuān)?ノ同一層級。為了更好的應對這類(lèi)情況，設計師們創(chuàng )造性的使用雙層菜單這種樣式。
以上面的網(wǎng)站為例，上層的菜單有社交網(wǎng)絡(luò )的鏈接（Facebook,Instagram和Twitter），企業(yè)logo，搜索框，購物車(chē)和漢堡按鈕。下層的菜單有產(chǎn)品種類(lèi)，營(yíng)業(yè)網(wǎng)點(diǎn)地址，新聞，關(guān)于我們和聯(lián)系我們。在這種情況下，如(╯°□°）╯︵ ┻━┻果將這些信息(???)以傳?統的單行菜單展示，勢必會(huì )放不下，造成頂部欄的過(guò)度擁擠。
此外雙層菜單這種設計樣式很新潮，可以給用戶(hù)耳目一新的感覺(jué)。
文字和配色
我們在確定頂部欄上內容(rong)和展示方式后要考慮的是設計風(fēng)(′▽?zhuān)?)格。產(chǎn)品的設計風(fēng)格要立足于產(chǎn)品自身的定位，這個(gè)就意味著(zhù)設計師的工作不應該僅限于視覺(jué)呈現還要懂產(chǎn)品。這里我就不展開(kāi)來(lái)說(shuō)，因為我其實(shí)也不是太懂。
一般來(lái)說(shuō)，頂部欄的設計風(fēng)格由配色、文字和圖標來(lái)構成。因為這是頂部欄欄上最主要的三個(gè)元素，圖標的使用相對較少，最常見(jiàn)的是下拉箭頭和放大鏡圖標。
首先來(lái)說(shuō)配色，配色主要是指背景色。通常??來(lái)說(shuō)，不要給頂部欄添加過(guò)重??的背景色，選擇淺色或者直接白色。因為顏色過(guò)重會(huì )造成用戶(hù)注意力的分散。此外頂部(╥_╥)欄下方是banner??，我們在進(jìn)行(′?_?`)banner設計時(shí)候會(huì )考慮banner配色和頁(yè)面整體風(fēng)格是否搭配。如果頂部欄(′；д；`)的顏色過(guò)重會(huì )制約banner的設計，如果是白色和淺色就沒(méi)有這種顧慮了。當然這也不是絕對的，有些網(wǎng)站頂部欄采用深色同樣很好看，有些網(wǎng)站的頂部欄直接是透明，跟頁(yè)面內容融為一體。
再說(shuō)文字，大部分用戶(hù)不會(huì )一個(gè)字一個(gè)字去讀頁(yè)面中的信息，他們是“掃描”式閱讀。所以頂??部欄上的文字設計首要考慮的是可讀性，要讓用戶(hù)在短時(shí)間內就可以獲取這些信息。所以我們的文字要做到能夠從背景中凸顯出來(lái)，必要的時(shí)候可以加粗字體樣式。
固定型頂部欄
固定(ding)頂部欄代表(biao)著(zhù)另一種設計思路：無(wú)論用戶(hù)??進(jìn)行何種操作，頂部欄對用戶(hù)來(lái)說(shuō)都是可見(jiàn)的。這類(lèi)的頂部欄適用于頁(yè)面內容比較多需要用戶(hù)不斷下拉滑動(dòng)的網(wǎng)站。
這種交互模式可以很好的提升頂部欄的易用性，但是這是建立在犧牲一部分頁(yè)面空間的基礎上換來(lái)的，所以我們在使用的時(shí)候一定要謹慎。
極簡(jiǎn)風(fēng)格
在上面我一直強調頂部欄設計要簡(jiǎn)潔明了，要讓用戶(hù)一眼就能看明白。因為頂部欄屬于導航體系的一部分，是為了避免用戶(hù)迷???路，幫助他們更好的使用產(chǎn)品。歸根結底用戶(hù)使用你的產(chǎn)品是為了你提??供的內容或服務(wù)，而不是來(lái)看狂拽酷炫的頂部欄。所以我們不能本末倒置，將頂部欄做的過(guò)于花哨，進(jìn)而分散用戶(hù)的注(???)意力。
此外極簡(jiǎn)風(fēng)格很適合響應式設計，可以在多設備上追求一致的(de)用戶(hù)體驗。
簡(jiǎn)約設計的另一大優(yōu)點(diǎn)就是，設計師會(huì )經(jīng)常遇到臨時(shí)的迭代需求，領(lǐng)導突然讓你在(°ロ°) !這(zhe)里加一個(gè)按鈕那里加一個(gè)文字標簽，簡(jiǎn)約設計為這種突然的迭代需求提供了操作空間。
總結
Copyright ? 2012-2018 天津九安特機電工程有限公司 版權所有 備案號：
