2020年新趨勢(shì)：掌握好頭部?jī)?nèi)容設(shè)計(jì)，讓曝光量提升200%

　　雖然本文說(shuō)的是PC端的網(wǎng)頁(yè)設(shè)計(jì)，其實(shí)對(duì)于移動(dòng)端的網(wǎng)頁(yè)設(shè)計(jì)，同樣是適用的，載體雖然不同，但是設(shè)計(jì)的原理是想通的，希望大家都能學(xué)以致用，共同進(jìn)步。

　　頭部?jī)?nèi)容在網(wǎng)頁(yè)設(shè)計(jì)中起著非常關(guān)鍵的作用，并為網(wǎng)站的其他各個(gè)方面設(shè)定了基調(diào)。尤其是在現(xiàn)在這個(gè)極簡(jiǎn)主義盛行的時(shí)代，各種各樣華而不實(shí)的內(nèi)容往往令人厭惡。有時(shí)沒(méi)有其他東西可以吸引用戶(hù)眼球，頭部?jī)?nèi)容的設(shè)計(jì)就顯得尤為重要。

　　網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站這部分時(shí)投入了大量精力，同時(shí)要兼顧創(chuàng)造力和生產(chǎn)力。根據(jù)Google的研究，用戶(hù)只需要50毫秒就可以形成對(duì)一個(gè)網(wǎng)站的看法，甚至有些觀點(diǎn)是在令人難以置信的17毫秒內(nèi)形成的。用戶(hù)對(duì)品牌的了解就是從這么短的時(shí)間內(nèi)開(kāi)始的。

　　要了解如何設(shè)計(jì)一個(gè)有效的網(wǎng)站頭部?jī)?nèi)容，以及它應(yīng)該包括哪些元素，請(qǐng)繼續(xù)閱讀，我們將結(jié)合案例講述。(彩云注：網(wǎng)頁(yè)中的header，是指網(wǎng)頁(yè)頭部?jī)?nèi)容，為防止贅述，以下直接用英文header。在代碼中，對(duì)于這部分也習(xí)慣性用header來(lái)標(biāo)識(shí)，用英文表達(dá)更為準(zhǔn)確。)

　　“Life is a first impression. You get one shot at it.Make it everlasting.”― J.R. Rim

　　01 什么是網(wǎng)頁(yè)header?

　　一個(gè)網(wǎng)站header就是網(wǎng)頁(yè)的頂部區(qū)域。在過(guò)去一段時(shí)間，人們將header理解為網(wǎng)站頂部的窄條，其中包含Logo、按鈕和聯(lián)系信息。但是在如今的設(shè)計(jì)中，首頁(yè)上方的整個(gè)空間都被視為header區(qū)域。

　　作為人們?cè)诩虞d網(wǎng)站后的最初幾秒內(nèi)看到部分，頭部信息起到了一種邀請(qǐng)作用，它應(yīng)該提供有關(guān)網(wǎng)站的基本信息，以便用戶(hù)能夠在幾秒內(nèi)了解網(wǎng)站的主要內(nèi)容。

　　一些設(shè)計(jì)師為網(wǎng)站的不同部分制作單獨(dú)的標(biāo)題。例如，可以為首頁(yè)設(shè)計(jì)較大的標(biāo)題，而為其他頁(yè)面留出較小的標(biāo)題，但是，風(fēng)格要保持一致。網(wǎng)站內(nèi)頁(yè)的標(biāo)題設(shè)計(jì)應(yīng)該是首頁(yè)的簡(jiǎn)潔版，這是一個(gè)很好的網(wǎng)站設(shè)計(jì)實(shí)踐。

　　02 Header應(yīng)該包含哪些內(nèi)容?

　　Header的任務(wù)是給用戶(hù)提供一些基本問(wèn)題的答案：代表什么品牌，提供什么商品和服務(wù)，如何取得聯(lián)系，目前有哪些交易等等。

　　除此之外，它還代表著網(wǎng)站的質(zhì)量甚至是特性。如果內(nèi)容引起了用戶(hù)情感上的共鳴，并且用戶(hù)覺(jué)得它是有價(jià)值的，那么就是正確的設(shè)計(jì)。

　　網(wǎng)站header的主要元素通常包括：

　　Logo 或品牌標(biāo)識(shí)

　　交互指引

　　標(biāo)題

　　導(dǎo)航要素

　　搜索功能

　　不必一次將它們?nèi)刻砑樱斜匾谪S富的信息與元素的和諧安排之間找到平衡。

　　給header設(shè)計(jì)大量留白也不見(jiàn)得一個(gè)好主意，用戶(hù)不能在短時(shí)間內(nèi)弄清楚頁(yè)面信息就很可能會(huì)離開(kāi)。一個(gè)糟糕的header可能會(huì)將用戶(hù)推向其他競(jìng)品網(wǎng)站。

　　在極簡(jiǎn)主義的標(biāo)題設(shè)計(jì)中，只有網(wǎng)站重要部分的鏈接和公司 Logo 才會(huì)被展示出來(lái)。這個(gè)技巧在設(shè)計(jì)著落頁(yè)時(shí)非常有用。

　　03 最佳header設(shè)計(jì)實(shí)踐

　　在設(shè)計(jì)網(wǎng)站header時(shí)，沒(méi)有任何東西會(huì)限制你的創(chuàng)造力，它應(yīng)該是令人難忘的、簡(jiǎn)潔的和有用的，是一個(gè)可以進(jìn)行更具創(chuàng)造性的開(kāi)放領(lǐng)域。

　　讓我們復(fù)習(xí)一下要點(diǎn)。

　　1. 尺寸

　　對(duì)于網(wǎng)頁(yè)header圖片的大小沒(méi)有確切的答案。一些文章試圖提供一組準(zhǔn)確的數(shù)字，但目前網(wǎng)頁(yè)設(shè)計(jì)最大的難點(diǎn)之一是很難確保每個(gè)屏幕尺寸的有效性。即使兩個(gè)屏幕的尺寸相同，分辨率也可能不同，因此用戶(hù)看到的內(nèi)容也不一定完全一樣。

　　因此，不要拘泥于精確的像素概念，最好遵循簡(jiǎn)單的常識(shí)規(guī)則。

　　Header應(yīng)具有不干擾內(nèi)容感知的高度。對(duì)于信息資源，較小的header將是一個(gè)不錯(cuò)的選擇，而對(duì)于著陸頁(yè)，header可能會(huì)更大。

　　在header較長(zhǎng)的情況下，最好給下一頁(yè)內(nèi)容露出一些空間，這樣用戶(hù)就可以意識(shí)到下一頁(yè)還有內(nèi)容，引導(dǎo)用戶(hù)滾動(dòng)。

　　2. 視覺(jué)層次

　　尼爾森·諾曼集團(tuán)( Nielsen Norman Group )于 2006 年首次提出了他們關(guān)于網(wǎng)絡(luò)閱讀的F型模式理論，直到今天，這一理論仍然具有指導(dǎo)意義。

　　當(dāng)一個(gè)人發(fā)現(xiàn)自己在陌生網(wǎng)站上，總是習(xí)慣于從屏幕的左上角開(kāi)始瀏覽網(wǎng)站。如果他們?cè)谀抢镎也坏筋A(yù)期的信息，將會(huì)不假思索地認(rèn)為這個(gè)頁(yè)面是難用的和不規(guī)范的，需要花費(fèi)很多的努力才能理解。

　　Logo ——尼爾·森諾曼集團(tuán)的另一項(xiàng)研究發(fā)現(xiàn)，與居中或右側(cè)放置相比，用戶(hù)更容易記住那些 Logo 放在左邊的品牌。

　　如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側(cè)要低。

　　導(dǎo)航——請(qǐng)密切注意不要把網(wǎng)站的這一部分弄得過(guò)于雜亂，太多的鏈接讓訪問(wèn)者不堪重負(fù)。有時(shí)，一個(gè)網(wǎng)站整體布局的迭代可能是為了給最重要的類(lèi)別清理出一些空間。

　　使訪問(wèn)者輕松了解自己所在的位置以及如何進(jìn)一步操作，同時(shí)可以使用鼠標(biāo)懸停效果引導(dǎo)用戶(hù)。

　　行動(dòng)指引——實(shí)施視覺(jué)層次結(jié)構(gòu)原則以自然地突出 CTA(號(hào)召性用語(yǔ))。

　　3. 固定header

　　固定Header，換句話說(shuō)就是“粘性標(biāo)題”，意味著當(dāng)你滾動(dòng)頁(yè)面時(shí)，Header在頁(yè)面中跟隨，這現(xiàn)在成了一個(gè)網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)。

　　如果Header不違反整體設(shè)計(jì)理念，請(qǐng)將其固定。無(wú)論是PC端還是移動(dòng)端設(shè)計(jì)，這都是一個(gè)好主意：

　　電商網(wǎng)站-購(gòu)物車(chē)總是在用戶(hù)的面前。

　　服務(wù)網(wǎng)站-電話號(hào)碼或 CTA 不斷地顯示。

　　固定導(dǎo)航欄提升了用戶(hù)體驗(yàn)，保持用戶(hù)導(dǎo)向并給予了他們更多控制權(quán)。

　　4. Header所傳達(dá)的信息

　　在設(shè)計(jì)header之前，請(qǐng)考慮網(wǎng)站的整體風(fēng)格及其主要目的。

　　如果這是一個(gè)旨在展示產(chǎn)品的宣傳網(wǎng)站，header的設(shè)計(jì)可能包含到主要子頁(yè)面的鏈接，結(jié)合 Banner 在第一屏上，因?yàn)檫@樣一個(gè)網(wǎng)站的主要目的是有效地展示產(chǎn)品。就電商或商業(yè)網(wǎng)站而言，情況可能有所不同。用戶(hù)需要輕松導(dǎo)航，了解最新的交易，如何快速聯(lián)系客服，以及在哪里查看他們已經(jīng)完成的訂單，所以在這種情況下，header要盡可能簡(jiǎn)潔從而凸顯其他類(lèi)別。

　　Header可能傳達(dá)的幾種消息:

　　促使消費(fèi)者做一些事情

　　建立信任

　　Header中的圖片應(yīng)該直接傳達(dá)有關(guān)業(yè)務(wù)的信息。例如，如果它代表的是送餐服務(wù)，那么圖像可能描繪的是一個(gè)整潔的快遞員和具有美學(xué)吸引力的食物。一般來(lái)說(shuō)，訪問(wèn)者在看過(guò)你的網(wǎng)站，應(yīng)該產(chǎn)生從這里購(gòu)買(mǎi)一些東西的消費(fèi)欲。

　　高質(zhì)量圖片——攝影對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)是一個(gè)強(qiáng)大的工具。它可以講述一個(gè)故事，喚起用戶(hù)的情感，并鼓勵(lì)您的訪問(wèn)者進(jìn)一步滾動(dòng)。對(duì)于那些有強(qiáng)烈沖擊力的圖片的網(wǎng)站，試著做一個(gè)透明的標(biāo)題，它可以更好地顯示圖像，并保留了主要鏈接。

　　輪播圖片——如果你有幾張代表了網(wǎng)站業(yè)務(wù)的出色照片，這種方式就沒(méi)有錯(cuò)!用戶(hù)可以滾動(dòng)瀏覽一組精美的高分辨率圖像。

　　插畫(huà)——網(wǎng)站的Header圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。如果圖片是獨(dú)特的且易于辨認(rèn)，即使是從網(wǎng)站標(biāo)題中剪切出來(lái)，效果也會(huì)很好，可以利用當(dāng)今的插圖潮流來(lái)實(shí)現(xiàn)這一點(diǎn)。

　　6. 視頻或動(dòng)畫(huà)

　　不要只關(guān)注靜態(tài)圖片。

　　添加視頻是最有效的網(wǎng)站header創(chuàng)意之一。如果可能的話，請(qǐng)嘗試著在header中添加主題視頻材料，很多網(wǎng)站利用它來(lái)吸引用戶(hù)，同時(shí)盡可能以最好的方式展示他們的公司或產(chǎn)品。

　　使設(shè)計(jì)更具吸引力、生動(dòng)和令人難忘的另一種方法是添加動(dòng)畫(huà)，它可以使網(wǎng)站header變得非?？帷Ｈ绻胫谱饕粋€(gè)吸引用戶(hù)的交互網(wǎng)頁(yè)，動(dòng)畫(huà)是一個(gè)很好的選擇。

　　7. 精心設(shè)計(jì)的指引元素

　　在設(shè)計(jì)網(wǎng)頁(yè)header時(shí)，設(shè)計(jì)師會(huì)添加一些行動(dòng)號(hào)召元素，如“登錄”、“注冊(cè)”、“聯(lián)系”等。為了吸引用戶(hù)的注意從而產(chǎn)生用戶(hù)所需的行為，按鈕應(yīng)該包含客戶(hù)可以理解的微文案，并且要區(qū)別于其他內(nèi)容。

　　將行動(dòng)號(hào)召按鈕放在具有戰(zhàn)略意義的位置是一個(gè)非常好的機(jī)會(huì)，可以促使用戶(hù)在一開(kāi)始就采取行動(dòng)，從而提高您的轉(zhuǎn)換率。有些CTA在一段時(shí)間內(nèi)用于促進(jìn)交易，有些則可以長(zhǎng)時(shí)間存在。

　　8. 最佳字體

　　首先，用戶(hù)會(huì)了解到各部分的名稱(chēng)和公司提供的信息：聯(lián)系方式、吸引人的優(yōu)惠。因此，你需要選擇清晰、易讀的字體，這些字體不會(huì)影響感知，而且一眼就能理解。

　　對(duì)于大的主頁(yè)標(biāo)題，你可以使用一些粗體的排版和富有想象力的元素來(lái)吸引用戶(hù)的注意，否則，最好不要選擇難以閱讀的花哨字體。

　　9. 簡(jiǎn)單的標(biāo)題設(shè)計(jì)

　　通過(guò)保持標(biāo)題的清晰和整潔，網(wǎng)站的訪問(wèn)者會(huì)覺(jué)得輕松愉悅。一個(gè)富有創(chuàng)意的網(wǎng)頁(yè)header也可以看起來(lái)非常簡(jiǎn)單。

　　10. 隱藏式導(dǎo)航(漢堡菜單)

　　這是一種越來(lái)越多地用于網(wǎng)站設(shè)計(jì)的解決方案。漢堡菜單是一個(gè)有三條條紋的小圖標(biāo)，單擊時(shí)會(huì)顯示完整的菜單。當(dāng)設(shè)計(jì)師需要專(zhuān)注于主屏幕上時(shí)，他們會(huì)采用這個(gè)技巧。

　　從網(wǎng)站可用性的角度來(lái)看，這是一個(gè)很好的選擇。這樣的菜單來(lái)自移動(dòng)端設(shè)計(jì)，用戶(hù)已經(jīng)很熟悉了。漢堡導(dǎo)航適用于促銷(xiāo)網(wǎng)站，促銷(xiāo)網(wǎng)站的主要重點(diǎn)是使用照片或視頻高質(zhì)量地展示產(chǎn)品。對(duì)于在線商店，這個(gè)方法可能不太合適，因?yàn)閷?duì)于用戶(hù)來(lái)說(shuō)，擁有購(gòu)物車(chē)、選定的產(chǎn)品以及快速訪搜索字段非常重要。

　　11. 移動(dòng)端header設(shè)計(jì)

　　Header不僅應(yīng)該正確顯示在PC端的網(wǎng)頁(yè)上，還應(yīng)該正確顯示在移動(dòng)端的網(wǎng)頁(yè)上。因此，它必須具有響應(yīng)性，并且能夠很好地適應(yīng)各種移動(dòng)設(shè)備。

　　移動(dòng)設(shè)備的日常使用影響網(wǎng)站設(shè)計(jì)，即使在桌面中，也看起來(lái)像是面向移動(dòng)設(shè)備的網(wǎng)站設(shè)計(jì)。例如，Banner和漢堡包菜單都起源于移動(dòng)設(shè)計(jì)。

　　結(jié)論

　　網(wǎng)站是以header為先導(dǎo)的，它就像是一張獨(dú)特的名片。因此，在設(shè)計(jì)網(wǎng)站時(shí)，要最大限度地關(guān)注header。

　　網(wǎng)站header設(shè)計(jì)的最后一個(gè)最佳實(shí)踐是：定期修改以保持網(wǎng)站的新鮮感和時(shí)效性。嘗試使用本文中的一些方案優(yōu)化網(wǎng)頁(yè)的header吧。