網(wǎng)站設(shè)計(jì)時(shí)，不必全部元素都添加在header上，也不要給header設(shè)計(jì)大量留白。Header信息過(guò)多或過(guò)少，都會(huì)讓用戶不能在短時(shí)間內(nèi)弄清楚頁(yè)面信息，而離開轉(zhuǎn)向其他競(jìng)品網(wǎng)站。那網(wǎng)站header該如何設(shè)計(jì)？

　　網(wǎng)站header應(yīng)該是令人難忘、簡(jiǎn)潔且有用的，因此要想利用網(wǎng)站header增加網(wǎng)站的曝光度，就不要被任何東西限制創(chuàng)造力。

　     尺寸

　　網(wǎng)站header圖片大小通常沒(méi)有確切的答案，而這也成為網(wǎng)站設(shè)計(jì)中最大的難點(diǎn)之一。因?yàn)榧词箖蓚€(gè)屏幕尺寸相同，但分辨率不同，用戶所按到的內(nèi)容頁(yè)不一定完全一樣，更何況是兩個(gè)屏幕尺寸不同。

　　因此，不要拘泥于精確的像素概念，header設(shè)計(jì)應(yīng)具有不干擾內(nèi)容感知的高度，例如對(duì)于信息豐富的頁(yè)面，較小的header會(huì)不錯(cuò)的選擇；而對(duì)于著落頁(yè)，header的長(zhǎng)度應(yīng)該增加。

　　當(dāng)header較長(zhǎng)的情況，最好給下屏內(nèi)容露出一些空間，讓用戶意識(shí)到頁(yè)面還有其他內(nèi)容，繼而引導(dǎo)用戶滾動(dòng)。

　　 視覺(jué)層次

　　當(dāng)用戶處于陌生網(wǎng)站時(shí)，總會(huì)習(xí)慣從屏幕左上角開始瀏覽網(wǎng)站。因此別輕易因?yàn)樗^新穎的版式設(shè)計(jì)，而打破用戶的閱讀習(xí)慣。如果用戶無(wú)法按照自己的習(xí)慣找到預(yù)期的信息，那么他們將會(huì)花費(fèi)更多時(shí)間和精力重新適應(yīng)，繼而判定頁(yè)面是難用和不規(guī)范的。

　　關(guān)于header視覺(jué)層次的設(shè)計(jì)技巧：

　　Logo：盡量放置頁(yè)面的左側(cè)，方便用戶記憶；如果品牌使用的是圓形Logo，也可把它居中放置，但有效性會(huì)比左側(cè)偏低。

　　導(dǎo)航：導(dǎo)航不要設(shè)計(jì)得過(guò)于復(fù)雜，也不要存在太多連結(jié)。盡量只保留網(wǎng)站最重要的類別，讓用戶輕松了解自己的所在位置及下一步操作。

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

　　 隱藏式導(dǎo)航

　　隱藏式導(dǎo)航多以漢堡菜單為主，平常以三條條紋的小圖標(biāo)出現(xiàn)，單擊時(shí)會(huì)顯示完整的菜單。通常設(shè)計(jì)師希望用戶專注頁(yè)面內(nèi)容時(shí)，都會(huì)采用這種導(dǎo)航設(shè)計(jì)。

　　通常漢堡導(dǎo)航設(shè)計(jì)適用于以促銷為主的網(wǎng)站類型，這類網(wǎng)站主要透過(guò)高質(zhì)量圖片或視頻，向用戶展示產(chǎn)品；但對(duì)于線上商店等網(wǎng)站，這類方法可能不太合適，因?yàn)閷?duì)于用戶而言，將重要菜單隱藏?zé)o疑是增加他們的操作難度。

　　 固定header

　　所謂的固定header，其實(shí)就是「粘性標(biāo)題」，即用戶在滾動(dòng)頁(yè)面時(shí)，header會(huì)固定在頁(yè)面的頂部不消失。

　　一般來(lái)說(shuō)，如果header不違反整體設(shè)計(jì)理念，無(wú)論是PC端還是移動(dòng)端網(wǎng)站設(shè)計(jì)，建議采用固定header，一來(lái)能增加用戶對(duì)品牌信息的記憶，二來(lái)提升用戶體驗(yàn)，方便用戶隨時(shí)進(jìn)行下步操作。

　　指引元素

　　設(shè)計(jì)網(wǎng)站header時(shí)，設(shè)計(jì)師都會(huì)添加一些CTA元素吸引用戶注意，從而產(chǎn)生用戶所需的行為。

　　想促使用戶從一開始就采取行動(dòng)，進(jìn)而提高網(wǎng)站的轉(zhuǎn)換率，將CTA元素放在具有戰(zhàn)略意義的位置，同時(shí)包含客戶可以理解的文案并區(qū)別于其他內(nèi)容，就是一個(gè)不錯(cuò)的機(jī)會(huì)。

　　 header所傳達(dá)的信息

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

　　如果是旨在展示產(chǎn)品的宣傳網(wǎng)站，header設(shè)計(jì)可能需要包含主要子頁(yè)面的連結(jié)，目的是有效地展示產(chǎn)品；如果網(wǎng)站是電商或商業(yè)網(wǎng)站，header就要盡可能簡(jiǎn)潔地凸顯其他類別，方便用戶操作。

　　相關(guān)圖片

　　Header中的圖片應(yīng)該直接傳達(dá)有關(guān)業(yè)務(wù)信息并極具吸引力，以便用戶進(jìn)入網(wǎng)站后，能從這里增加消費(fèi)欲。

　　想讓header圖片更有吸引力，可從以下方式入手：

　　高質(zhì)量攝影圖片：這類具有強(qiáng)烈沖擊力的攝影圖片，？？能很好地向用戶講述一個(gè)故事，并喚起他們的情感，繼而進(jìn)一步滾動(dòng)。

　　輪播圖片：選取幾張能代表網(wǎng)站業(yè)務(wù)的出色圖片，既能吸引用戶的眼球，同時(shí)還能讓用戶在短時(shí)間內(nèi)了解網(wǎng)站的主要內(nèi)容。

　　插畫：利用如今非常流行的插畫設(shè)計(jì)，能更容易地引起用戶的共鳴，建立界面與人之間的聯(lián)系。

　　視頻或動(dòng)畫

　　添加視頻或動(dòng)畫是網(wǎng)站header最有創(chuàng)意之一的設(shè)計(jì)。

　　很多網(wǎng)站都會(huì)利用視頻或動(dòng)畫展示公司的信息或產(chǎn)品，吸引用戶眼球之余，還能更好地與用戶互動(dòng)。

　　最佳字體

　　Header中的信息大多是概括整個(gè)網(wǎng)站的主要內(nèi)容，因此字體的選擇上應(yīng)該清晰易讀，能讓用戶一眼就能理解內(nèi)容的大意。

　　對(duì)于大的主頁(yè)標(biāo)題，也可嘗試使用一些粗體排版和富有想像力的元素吸引用戶注意，但一定不要選用難以閱讀的花俏字體。

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

　　Header不僅僅只會(huì)出現(xiàn)在PC端網(wǎng)站上，還會(huì)顯示移動(dòng)端的網(wǎng)站設(shè)計(jì)上，因此網(wǎng)站設(shè)計(jì)盡量采用響應(yīng)式設(shè)計(jì)，以更好地適應(yīng)各種終端設(shè)備。

　　網(wǎng)站header就像網(wǎng)站一張獨(dú)特的名片，因此設(shè)計(jì)網(wǎng)站時(shí)應(yīng)多花點(diǎn)心思在header設(shè)計(jì)上，同時(shí)定期更新以保持網(wǎng)站的新鮮感和時(shí)效性。