2017-8-11 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
網(wǎng)頁(yè)中的header,一般我們稱之為頂部導(dǎo)航欄,這里為了行文方便,以下都簡(jiǎn)稱頂部欄。頂部欄對(duì)于一個(gè)網(wǎng)站的用戶體驗(yàn)來(lái)說(shuō)是至關(guān)重要的,因?yàn)楦鶕?jù)用戶的瀏覽習(xí)慣(從左到右,從上到下),當(dāng)他們進(jìn)入一個(gè)新的網(wǎng)站,頂部欄通常是他們看到的地方。我們都知道用戶對(duì)于你產(chǎn)品的第一印象是很重要的,因?yàn)樗鼤?huì)一直伴隨接下來(lái)的使用過(guò)程,而且第一印象無(wú)法更改。
但是頂部欄卻是我們?cè)O(shè)計(jì)的一個(gè)盲區(qū),我們很少花心思的去研究它。因?yàn)槲覀冇X(jué)得頂部欄無(wú)非是一個(gè)logo,幾個(gè)文字鏈接堆砌起來(lái)作為菜單,著實(shí)沒(méi)有什么需要注意的地方。但是事實(shí)上頂部欄設(shè)計(jì)的學(xué)問(wèn)遠(yuǎn)不止這些。
頂部欄的內(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 語(yǔ)言切換
8 其他產(chǎn)品或者移動(dòng)端app的下載鏈接
9 行為召喚鏈接(我要投稿,我要發(fā)博)
以上這些都是頂部欄中常見(jiàn)的元素,在設(shè)計(jì)的時(shí)候我們要根據(jù)產(chǎn)品自身的實(shí)際情況進(jìn)行取舍,畢竟這些信息全部放上去也不太現(xiàn)實(shí)。信息過(guò)度加載會(huì)增加用戶的使用負(fù)擔(dān),注意力會(huì)被分散。
漢堡包按鈕
取舍當(dāng)然意味著既有“保留”也有“舍棄”,但是UI設(shè)計(jì)中的“舍棄”更多的是指“隱藏”——隱藏一些次要的功能。
在隱藏的同時(shí),我們也希望當(dāng)用戶需要的時(shí)候,這些隱藏的功能可以隨時(shí)隨地的呈現(xiàn)出來(lái)。漢堡按鈕可以幫助我們實(shí)現(xiàn)這一點(diǎn)。常見(jiàn)的漢堡按鈕是由三條水平線條構(gòu)成的,很像兩層面包一層肉的漢堡包,所以我們形象的稱之為漢堡按鈕。
(ps:漢堡按鈕最初是由國(guó)外設(shè)計(jì)師使用并命名,如果是中國(guó)設(shè)計(jì)師發(fā)明了它,沒(méi)準(zhǔn)就叫肉夾饃按鈕了。)
漢堡按鈕可以通過(guò)將一些次要的信息隱藏來(lái)釋放頁(yè)面的空間,這樣使頂部欄更加的清爽簡(jiǎn)潔,用戶的注意力可以更好的集中在那些重要的信息上。
漢堡按鈕在頁(yè)面導(dǎo)航設(shè)計(jì)中使用的很頻繁,用戶對(duì)此很熟悉,所以不會(huì)額外增加用戶的學(xué)習(xí)成本。漢堡按鈕設(shè)計(jì)最需要注意的地方就是它很容易被用戶忽視,所以我們?cè)谠O(shè)計(jì)的時(shí)候要通過(guò)配色,尺寸,留白的使用來(lái)將其適當(dāng)?shù)耐癸@出來(lái)。一句話來(lái)說(shuō),漢堡按鈕既要做到清晰展示,又不能占據(jù)太大的空間。
雙層菜單
雙層菜單的樣式在近來(lái)的頂部欄設(shè)計(jì)中也愈發(fā)受到設(shè)計(jì)師的青睞。因?yàn)楝F(xiàn)在隨著產(chǎn)品功能的不斷增加與完善,漸漸出現(xiàn)了一些單層菜單無(wú)法解決的情況,那就是頂部欄需要展示的內(nèi)容過(guò)多,而且某些特定功能不屬于同一層級(jí)。為了更好的應(yīng)對(duì)這類情況,設(shè)計(jì)師們創(chuàng)造性的使用雙層菜單這種樣式。
以上面的網(wǎng)站為例,上層的菜單有社交網(wǎng)絡(luò)的鏈接(Facebook,Instagram和Twitter),企業(yè)logo,搜索框,購(gòu)物車和漢堡按鈕。下層的菜單有產(chǎn)品種類,營(yíng)業(yè)網(wǎng)點(diǎn)地址,新聞,關(guān)于我們和聯(lián)系我們。在這種情況下,如果將這些信息以傳統(tǒng)的單行菜單展示,勢(shì)必會(huì)放不下,造成頂部欄的過(guò)度擁擠。
此外雙層菜單這種設(shè)計(jì)樣式很新潮,可以給用戶耳目一新的感覺(jué)。
文字和配色
我們?cè)诖_定頂部欄上內(nèi)容和展示方式后要考慮的是設(shè)計(jì)風(fēng)格。產(chǎn)品的設(shè)計(jì)風(fēng)格要立足于產(chǎn)品自身的定位,這個(gè)就意味著設(shè)計(jì)師的工作不應(yīng)該僅限于視覺(jué)呈現(xiàn)還要懂產(chǎn)品。這里我就不展開(kāi)來(lái)說(shuō),因?yàn)槲移鋵?shí)也不是太懂。
一般來(lái)說(shuō),頂部欄的設(shè)計(jì)風(fēng)格由配色、文字和圖標(biāo)來(lái)構(gòu)成。因?yàn)檫@是頂部欄欄上最主要的三個(gè)元素,圖標(biāo)的使用相對(duì)較少,最常見(jiàn)的是下拉箭頭和放大鏡圖標(biāo)。
首先來(lái)說(shuō)配色,配色主要是指背景色。通常來(lái)說(shuō),不要給頂部欄添加過(guò)重的背景色,選擇淺色或者直接白色。因?yàn)轭伾^(guò)重會(huì)造成用戶注意力的分散。此外頂部欄下方是banner,我們?cè)谶M(jìn)行banner設(shè)計(jì)時(shí)候會(huì)考慮banner配色和頁(yè)面整體風(fēng)格是否搭配。如果頂部欄的顏色過(guò)重會(huì)制約banner的設(shè)計(jì),如果是白色和淺色就沒(méi)有這種顧慮了。當(dāng)然這也不是絕對(duì)的,有些網(wǎng)站頂部欄采用深色同樣很好看,有些網(wǎng)站的頂部欄直接是透明,跟頁(yè)面內(nèi)容融為一體。
再說(shuō)文字,大部分用戶不會(huì)一個(gè)字一個(gè)字去讀頁(yè)面中的信息,他們是“掃描”式閱讀。所以頂部欄上的文字設(shè)計(jì)首要考慮的是可讀性,要讓用戶在短時(shí)間內(nèi)就可以獲取這些信息。所以我們的文字要做到能夠從背景中凸顯出來(lái),必要的時(shí)候可以加粗字體樣式。
固定型頂部欄
固定頂部欄代表著另一種設(shè)計(jì)思路:無(wú)論用戶進(jìn)行何種操作,頂部欄對(duì)用戶來(lái)說(shuō)都是可見(jiàn)的。這類的頂部欄適用于頁(yè)面內(nèi)容比較多需要用戶不斷下拉滑動(dòng)的網(wǎng)站。
這種交互模式可以很好的提升頂部欄的易用性,但是這是建立在犧牲一部分頁(yè)面空間的基礎(chǔ)上換來(lái)的,所以我們?cè)谑褂玫臅r(shí)候一定要謹(jǐn)慎。
極簡(jiǎn)風(fēng)格
在上面我一直強(qiáng)調(diào)頂部欄設(shè)計(jì)要簡(jiǎn)潔明了,要讓用戶一眼就能看明白。因?yàn)轫敳繖趯儆趯?dǎo)航體系的一部分,是為了避免用戶迷路,幫助他們更好的使用產(chǎn)品。歸根結(jié)底用戶使用你的產(chǎn)品是為了你提供的內(nèi)容或服務(wù),而不是來(lái)看狂拽酷炫的頂部欄。所以我們不能本末倒置,將頂部欄做的過(guò)于花哨,進(jìn)而分散用戶的注意力。
此外極簡(jiǎn)風(fēng)格很適合響應(yīng)式設(shè)計(jì),可以在多設(shè)備上追求一致的用戶體驗(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)該僅限于視覺(jué)呈現(xiàn),還應(yīng)該考慮交互原則,注重產(chǎn)品的用戶體驗(yàn)。一款產(chǎn)品的功能性和美觀性是相輔相成的,光做視覺(jué)的設(shè)計(jì)師的作品也無(wú)法令用戶的眼睛滿意。希望這篇文章可以給你帶來(lái)收獲。
藍(lán)藍(lán)設(shè)計(jì)( 91whvog3.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://91whvog3.cn