在ui設(shè)計(jì)中，網(wǎng)站的頭圖是很重要的，因?yàn)樗怯脩舻谝粫r(shí)間看的，也大部分的因素決定著用戶的去留。當(dāng)用戶登錄你的主頁(yè)時(shí)，在頁(yè)面打開后的瞬間，你可以通過設(shè)計(jì)將更多的頁(yè)面讓他們看到。然而大多數(shù)網(wǎng)站都錯(cuò)失了這個(gè)給用戶留下好印象的機(jī)會(huì)。如何讓Hero Header從眾多其他要素中脫穎而出呢?UI設(shè)計(jì)師注意了，今天帶給大家的就是網(wǎng)站頭圖的10個(gè)黃金法則，有興趣就跟著小編一起學(xué)起來吧。

　　什么是Hero Header的必要元素?

Hero Header納入設(shè)計(jì)要素的方法有很多，如新商品的介紹，必要的品牌說明等。大多數(shù)Hero Header都利用了以下要素。

　　搶眼的標(biāo)題，頭條

Call-To-Action 按鈕

　　令人印象深刻的背景圖或視頻

　　嵌 入 式類型的描述視頻或動(dòng)畫

　　介紹特色內(nèi)容的滾動(dòng)效果

　　品牌元素 – logo和宣傳語(yǔ)

　　品牌和導(dǎo)航

　　那么在各種各樣的要素之中怎樣靈活運(yùn)用才能創(chuàng)建一個(gè)良好的Hero Header呢?讓我們來一探究竟吧。

　　搶眼的標(biāo)題，頭條

　　訪問者第一個(gè)見到的就是他，讓我們來看一看標(biāo)題吧。能讓人精確了解的信息是必要的。例如以下案例：「Send Better Email(發(fā)送一個(gè)更好的EMAIL。)」或「Sell More Stuff(想賣更多的東西。)」在創(chuàng)建一個(gè)易于理解的導(dǎo)航標(biāo)題之前，你必須明白你是否明確的傳達(dá)出了想提供的是什么服務(wù)。

適當(dāng)?shù)臉邮?/span>

　　文字文本要時(shí)刻保持清晰，能夠清楚地顯示出來。以前面這個(gè)樣品為例，在白色背景使用黑色文字文本，讓你你不會(huì)漏掉標(biāo)題。他也為字體使用了加粗。

　　以下面這個(gè)樣本為例，在背景圖像上重疊字符文本，由于給照片使用了淡出效果，文字部分就顯得很顯眼了。

當(dāng)您使用背景圖片時(shí)，通常白色的字比黑色字更容易閱讀。

Call-to-Action 按鈕

　　一旦你確定了有吸引力的標(biāo)題，接下來我們要誘導(dǎo)訪問用戶的行動(dòng)。比如讓他們點(diǎn)擊“注冊(cè)”按鈕、顯示您的商品或項(xiàng)目、輸入E-mail地址等各種各樣的行動(dòng)。通常這種采用按鈕或形式的形式、我們稱之為「Call-to-Action」。

　　當(dāng)你設(shè)計(jì)一個(gè)Call-to-Action時(shí)，讓他更顯眼是必要的。在背景上利用品牌顏色，將他們配置在畫面中顯眼的位置。這是比較受歡迎的標(biāo)題配置方法，但也不一定準(zhǔn)確。

　　正如下面的案例一樣，使用高亮的顏色，將右上角的 Call-to-Action 按鈕強(qiáng)調(diào)出來了。

一旦決定了配置的場(chǎng)所，接下來我們就該考慮寫上什么樣的文字了。[Get Started(開始。)」或「Download Now(下載)」、「Sign Up(注冊(cè))」之類的文字，都有著表示行動(dòng)的作用，能幫助用戶理解按鈕的意義。[Submit(提交)」或「Go(運(yùn)行)」之類的用語(yǔ)，應(yīng)盡量避免使用。曖昧的文字會(huì)讓用戶感到迷惑，要有能讓用戶能充滿自信的按下按鈕這樣的心去設(shè)計(jì)。

　　背景圖片

　　大多數(shù)Hero Header，使用的都是大尺寸的背景圖像。令人印象深刻的設(shè)計(jì)工作，能夠幫助用戶理解設(shè)計(jì)的意義與信息。

　　有很多能夠自由使用圖片的網(wǎng)站，讓你的收藏變得更充實(shí)吧。嘗試各種設(shè)計(jì)，讓我們來確認(rèn)什么樣的圖片才是最恰當(dāng)?shù)摹?/span>

　　尺寸和文件大小

　　當(dāng)你找到了理想的圖片時(shí)，你就該準(zhǔn)備好你的Hero Header了。為了全屏表示你可以使用大尺寸的圖片，但相應(yīng)的，他加載的時(shí)間將會(huì)變得很長(zhǎng)。因?yàn)樵诖笃聊簧暇W(wǎng)站圖片會(huì)擴(kuò)大很多，所以我們通常將圖片調(diào)整為1400到1600像素，這樣在大屏幕看起來也會(huì)非常清楚。

　　將照片壓縮保存為JPGE吧。但因?yàn)檎掌念愋筒煌覀円话惚ＷC大小在200-500KB之間就可以了。因?yàn)閳D片的尺寸大所以處理速度將會(huì)變慢，這也將影響該網(wǎng)站的加載時(shí)間。為了快速顯示Hero Header，讓我們來確認(rèn)一下照片是否被壓縮了吧。我常使用的是TinyPNG。無論PNG和JPEG都是支持的。

　　自適應(yīng)畫面的方法

　　屏幕有各種各樣的尺寸。在大多數(shù)情況下，我們是不知道用戶屏幕的寬度和高度的。這個(gè)問題我們將介紹2種解決方法。將Background-size設(shè)置為cover，height設(shè)置為100vh吧。

通過將background-size設(shè)置為cover，瀏覽器中顯示的頁(yè)面上配置的圖片，將會(huì)自動(dòng)進(jìn)行擴(kuò)大縮小和裁剪。但值得注意的是，這樣也會(huì)使過高的圖片兩邊被裁掉，或者過寬的圖片上下部分被裁掉。(提示:使用media query，讓不同的畫面使用不同的圖片就能解決這個(gè)問題。)

vh表示的是顯示屏幕的高度(英: Viewport Height)，表示的方法是百分比。也就是說100vh指的是全屏高度。

　　漸變圖片的重疊方法

　　當(dāng)你找到了期待已久的漂亮的背景圖片，很難清楚的閱讀標(biāo)題這一問題就會(huì)頻繁出現(xiàn)。要解決這個(gè)問題，我們得考慮一些方法。首先，試著模糊圖片或降低圖片的亮度吧。

　　還有一種方法便是有效的利用CSS的功能。通過使用CSS，可以在Hero Header的圖片上使用漸變調(diào)和，創(chuàng)建一個(gè)偽元素(英: Pseudo-Element)。

?這里的偽元素：通過使用before，在背景圖片上使用灰色的漸變調(diào)和。另外，也可以更換背景圖片或使用減淡或別的漸變調(diào)和，此外，作為代替你也可以在圖片上追加標(biāo)題的背景色。

　　正如在下面的案例一樣，主要的思路就是突出背景圖片上的文字文本。

背景視頻

　　有時(shí)候，你會(huì)不會(huì)不滿足于大尺寸的圖片?在這種情況下，將背景圖替換為視頻，在讀取之后便自動(dòng)播放也是一個(gè)受歡迎的方法。在下面的設(shè)計(jì)案例中，展示了該公司正在工作的全屏動(dòng)畫的狀態(tài)

使用視頻來引人注意是非常不錯(cuò)的想法，但進(jìn)行網(wǎng)絡(luò)優(yōu)化也是非常有必要的。為了縮短視頻的持續(xù)時(shí)間，一般控制在10-20秒之內(nèi)。此外，分辨率也該稍微下調(diào)，壓縮在10MB之內(nèi)也是非常重要的。

　　影片可以存儲(chǔ)在我們自己的服務(wù)器上，你也可以利用如Embed.ly這樣的第三方服務(wù)。

　　如果你想找一些免費(fèi)的視頻使用，可以試試像Coverr這樣的網(wǎng)站。上面所公開的視頻，都是可以免費(fèi)利用的視頻網(wǎng)站。像下面這個(gè)案例一樣，通過重疊半透明的圖片和視頻，完成了一個(gè)非常不錯(cuò)的設(shè)計(jì)工作。

解說視頻

　　在某些情況下僅僅靠背景圖像或視頻就設(shè)置Hero Header顯然是不夠的。也可以通過利用視頻，在傳達(dá)品牌故事之前設(shè)置好吧。像下面的案例，設(shè)置為在加載頁(yè)面的同時(shí)，動(dòng)畫自動(dòng)播放。

也可以嵌入YouTube視頻，在這種情況下最簡(jiǎn)單的方法，是使用iframe來進(jìn)行設(shè)置。為了進(jìn)一步改善外觀，您還可以進(jìn)行一些自定義設(shè)置。

　　在這里、modestbranding設(shè)定為1，vq設(shè)置為hd720。rel設(shè)置為0。modestbranding是用來顯示YouTube的logo，vq表示的則是默認(rèn)使用高畫質(zhì)、rel表示在視頻播放完畢后不顯示其他關(guān)聯(lián)視頻。至于其他的選項(xiàng)設(shè)置，你可以在Youtube的播放器參數(shù)上進(jìn)行確認(rèn)。

　　滾動(dòng)顯示

　　這種技術(shù)則比較麻煩。原本是在網(wǎng)絡(luò)形成的早期，試圖利用第一屏以下空間的想法。但如今我們?nèi)匀豢梢允褂眠@個(gè)技術(shù)。在使用滾動(dòng)之前，我們來仔細(xì)看一看如何良好的使用這些技術(shù)的教程。因?yàn)闈L動(dòng)這項(xiàng)技術(shù)，有可能你完全沒有必要使用。

　　就像下面這個(gè)案例，已通過在主頁(yè)上使用滾動(dòng)技術(shù)，可以緩慢的切換較少的圖片。在Hero Header上使用滾動(dòng)時(shí)，可以在下方配置點(diǎn)擊按鈕就能使動(dòng)畫停止的導(dǎo)航條。

滾動(dòng)顯示，對(duì)Hero Header來說可能是有用的，但使用時(shí)需多加注意。當(dāng)信息龐大時(shí)，請(qǐng)不要讓訪問的用戶感到混亂。

　　打造品牌和導(dǎo)航

　　如果你準(zhǔn)備好了有魅力的標(biāo)題，直觀的Call-to-Action按鈕和好看的圖片或動(dòng)畫，然而你的Hero Header看起來卻并不是很好。請(qǐng)不要忘了打造品牌與導(dǎo)航。

　　在上面的案例中，logo被放置在左上方，右上方則放置了導(dǎo)航。通過這種方法，你可以幫助用戶尋找信息。Call-to-Action按鈕和導(dǎo)航菜單也一起配置好吧。這可以突出按鈕，讓最重要的操作脫穎而出。

logo和導(dǎo)航菜單，你應(yīng)該檢查他們是否易于理解。你也可以通過利用背景圖片設(shè)置分隔，讓logo和導(dǎo)航菜單變得更顯眼。

　　考慮第一屏之外的事

Hero Header在富有魅力的同時(shí)，也能很好的傳達(dá)出在下面的頁(yè)面中有著更多內(nèi)容這一信息。用戶習(xí)慣了滾動(dòng)，在移動(dòng)終端點(diǎn)擊也會(huì)很方便。通過閱讀頁(yè)面下面的目錄，還可以促進(jìn)用戶進(jìn)行滾動(dòng)操作。

　　在最近的研究中，我們可以看到，用戶最初所看到的信息比其他頁(yè)面更加重要。

　　所以能在頁(yè)面在最初打開的時(shí)候所展示內(nèi)容，就不要讓用戶進(jìn)行滾動(dòng)。

　　打破規(guī)則

　　這里所介紹的方法雖然會(huì)幫助你，但不要忘了嘗試你自己的方法。就像下面的例子，一眼看上去感覺非?；靵y，在中央設(shè)置了logo。導(dǎo)航菜單被分在兩邊，設(shè)置了3個(gè)標(biāo)題。

在這里表現(xiàn)出解決這些問題的，便是右上角強(qiáng)調(diào)出的Call-to-Action按鈕和布局鼓勵(lì)用戶進(jìn)行向下滾動(dòng)。

　　嘗試添加動(dòng)效

　　完成了一個(gè)精美的標(biāo)題設(shè)計(jì)，但還是感覺缺少了什么。那就是在加載的同時(shí)頁(yè)面突然出現(xiàn)這一問題。在接下來的工作中，我們嘗試著添加一些動(dòng)效。使用動(dòng)效，讓我們的Hero Header變得更加精彩。那今天的UI設(shè)計(jì)師注意，網(wǎng)站頭圖的10個(gè)黃金法則就結(jié)束了，記得多多關(guān)注我們。

 

來源：ui中國(guó)