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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　Logo 或品牌標(biāo)識

　　交互指引

　　標(biāo)題

　　導(dǎo)航要素

　　搜索功能

　　不必一次將它們?nèi)刻砑?，有必要在豐富的信息與元素的和諧安排之間找到平衡。

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

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

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

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

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

　　1. 尺寸

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

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

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

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

　　2. 視覺層次

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

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

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

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

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

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

　　行動指引——實施視覺層次結(jié)構(gòu)原則以自然地突出 CTA(號召性用語)。

　　3. 固定header

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

　　如果Header不違反整體設(shè)計理念，請將其固定。無論是PC端還是移動端設(shè)計，這都是一個好主意：

　　電商網(wǎng)站-購物車總是在用戶的面前。

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

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

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

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

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

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

　　促使消費者做一些事情

　　建立信任

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

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

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

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

　　6. 視頻或動畫

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

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

　　使設(shè)計更具吸引力、生動和令人難忘的另一種方法是添加動畫，它可以使網(wǎng)站header變得非常酷。如果想制作一個吸引用戶的交互網(wǎng)頁，動畫是一個很好的選擇。

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

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

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

　　8. 最佳字體

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

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

　　9. 簡單的標(biāo)題設(shè)計

　　通過保持標(biāo)題的清晰和整潔，網(wǎng)站的訪問者會覺得輕松愉悅。一個富有創(chuàng)意的網(wǎng)頁header也可以看起來非常簡單。

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

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

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

　　11. 移動端header設(shè)計

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

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

　　結(jié)論

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

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