網(wǎng)頁頂部導(dǎo)航欄設(shè)計總結(jié)——ui設(shè)計公司|杭州藍(lán)藍(lán)設(shè)計

時間：2023-09-30 02:54:01 | 來源：網(wǎng)站運營

時間：2023-09-30 02:54:01 來源：網(wǎng)站運營

網(wǎng)頁頂部導(dǎo)航欄設(shè)計總結(jié)——ui設(shè)計公司|杭州藍(lán)藍(lán)設(shè)計：

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，http://list.qq.com/cgi-bin/qf_invite?id=c9ec2469984764d3f85905dc077ec80703fb72066eda42d8請點這里

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










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




頂部欄的內(nèi)容




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




1 品牌logo

2 菜單

3 搜索框

4 提示消息

5 登錄／注冊

6 聯(lián)系方式

7 語言切換

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

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




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




漢堡包按鈕




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




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




（ps:漢堡按鈕最初是由國外設(shè)計師最先使用并命名，如果是中國設(shè)計師發(fā)明了它，沒準(zhǔn)就叫肉夾饃按鈕了。）













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










漢堡按鈕在頁面導(dǎo)航設(shè)計中使用的很頻繁，用戶對此很熟悉，所以不會額外增加用戶的學(xué)習(xí)成本。漢堡按鈕設(shè)計最需要注意的地方就是它很容易被用戶忽視，所以我們在設(shè)計的時候要通過配色，尺寸，留白的使用來將其適當(dāng)?shù)耐癸@出來。一句話來說，漢堡按鈕既要做到清晰展示，又不能占據(jù)太大的空間。




雙層菜單




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










以上面的網(wǎng)站為例，上層的菜單有社交網(wǎng)絡(luò)的鏈接（Facebook,Instagram和Twitter），企業(yè)logo，搜索框，購物車和漢堡按鈕。下層的菜單有產(chǎn)品種類，營業(yè)網(wǎng)點地址，新聞，關(guān)于我們和聯(lián)系我們。在這種情況下，如果將這些信息以傳統(tǒng)的單行菜單展示，勢必會放不下，造成頂部欄的過度擁擠。




此外雙層菜單這種設(shè)計樣式很新潮，可以給用戶耳目一新的感覺。










aHR0cDovL3dlaXhpbi5xcS5jb20vci9jWFdVaktMRXZmLUNyZWJ2OXlCag== (二維碼自動識別)




閱讀全文>>