成人免费网站黄色电影一级片_欧美成人在线播放亚洲_日产一区二区三区无码不卡视频_欧美精品_99爱这里只有精品

網(wǎng)頁(yè)頂部導(dǎo)航條設(shè)計(jì)技巧

日期：2019-01-23 20:40:00     閱讀：404     文章來(lái)源：源美網(wǎng)絡(luò)     標(biāo)籤：導(dǎo)航條設(shè)計(jì)

網(wǎng)頁(yè)中的header，一般我們稱(chēng)之為頂部導(dǎo)航條，這裡為了行文方便，以下都簡(jiǎn)稱(chēng)頂部條。頂部條對(duì)於一個(gè)網(wǎng)站的用戶(hù)體驗(yàn)來(lái)說(shuō)是至關(guān)重要的，因為根據(jù)用戶(hù)的瀏覽習(xí)慣（從左到右，從上到下），當(dāng)他們進(jìn)入一個(gè)新的網(wǎng)站，頂部欄通常是他們最先看到的地方。我們都知道用戶(hù)對(duì)於你產(chǎn)品的第一印象是很重要的，因為它會(huì)一直伴隨接下來(lái)的使用過(guò)程，而且第一印象無(wú)法更改。但是頂部欄卻是我們設(shè)計(jì)的一個(gè)盲區(qū)，我們很少花心思的去研究它。因為我們覺得頂部條無(wú)非是一個(gè)logo，幾個(gè)文字連結(jié)堆砌起來(lái)作為菜單，著實(shí)沒有什麼需要注意的地方。但是事實(shí)上頂部導(dǎo)航條設(shè)計(jì)的學(xué)問(wèn)遠(yuǎn)不止這些。


導(dǎo)航條設(shè)計(jì).jpg


一、Header的內(nèi)容

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

1 品牌logo

2 菜單

3 搜索框

4 提示消息

5 登錄／註冊(cè)

6 聯(lián)繫方式

7 語言切換(huàn)

8 其他產(chǎn)品或者移動(dòng)端app的下載連結(jié)

9 行為召喚連結(jié)（我要投稿，我要發(fā)博）

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


二、漢堡包按鈕

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

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

漢堡按鈕可以通過(guò)將一些次要的信息隱藏來(lái)釋放頁(yè)面的空間，這樣使頂部欄更加的清爽簡(jiǎn)潔，用戶(hù)的注意力可以更好的集中在那些重要的信息上。

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


三、雙層菜單

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

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

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


四、文字和配色

我們在確定頂部欄上內(nèi)容和展示方式後要考慮的是設(shè)計(jì)風(fēng)格。產(chǎn)品的設(shè)計(jì)風(fēng)格要立足於產(chǎn)品自身的定位，這個(gè)就意味著設(shè)計(jì)師的工作不應(yīng)該僅限於視覺呈現(xiàn)還要懂產(chǎn)品。這裡我就不展開(kāi)來(lái)說(shuō)，因為我其實(shí)也不是太懂。

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

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

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


五、固定型頂部欄

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

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


六、極簡(jiǎn)風(fēng)格

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

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

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


七、總結(jié)

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


文章引用：http://www.szymweb.com/new/1077.html

本站文章為深圳網(wǎng)站建設(shè)·源美網(wǎng)絡(luò)原創(chuàng)策劃(huà)，如有版權(quán)糾紛或者違規(guī)問(wèn)題，請聯(lián)繫我們刪除，謝謝！

最新案例
OUR ADVANTAGE WORKS

售後保障

承諾任何問(wèn)題1小時(shí)內(nèi)解決

數(shù)據(jù)備份

更安全、更高效、更穩(wěn)定

價(jià)格公道精準(zhǔn)

項(xiàng)目經(jīng)理精準(zhǔn)報(bào)價(jià)不弄虛作假

合作無(wú)風(fēng)險(xiǎn)

重合同講信譽(yù)，無(wú)效全額退款