網站的頭圖是很重要的好渠，因為他是用戶第一時間看的蹄殃，也大部分的因素決定著用戶的去留。當用戶登錄你的主頁時裹纳，在頁面打開后的瞬間歧斟，你可以通過設計將更多的頁面讓他們看到。然而大多數(shù)網站都錯失了這個給用戶留下好印象的機會晌畅。如何讓Hero

Header從眾多其他要素中脫穎而出呢?UI設計師注意了但指，今天帶給大家的就是網站頭圖的10個黃金法則，有興趣就跟著小編一起學起來吧抗楔。

什么是Hero Header的必要元素?

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

搶眼的標題，頭條

Call-To-Action　按鈕

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

嵌入式類型的描述視頻或動畫

介紹特色內容的滾動效果

品牌元素 – logo和宣傳語

品牌和導航

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

搶眼的標題拍棕，頭條

訪問者第一個見到的就是他，讓我們來看一看標題吧勺良。能讓人精確了解的信息是必要的绰播。例如以下案例：「Send Better

Email(發(fā)送一個更好的EMAIL。)」或「Sell More

Stuff(想賣更多的東西尚困。)」在創(chuàng)建一個易于理解的導航標題之前蠢箩，你必須明白你是否明確的傳達出了想提供的是什么服務。

?

適當?shù)臉邮?/p>

文字文本要時刻保持清晰，能夠清楚地顯示出來谬泌。以前面這個樣品為例滔韵，在白色背景使用黑色文字文本，讓你你不會漏掉標題掌实。他也為字體使用了加粗陪蜻。

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

當您使用背景圖片時忱嘹，通常白色的字比黑色字更容易閱讀嘱腥。

Call-to-Action 按鈕

一旦你確定了有吸引力的標題，接下來我們要誘導訪問用戶的行動拘悦。比如讓他們點擊“注冊”按鈕齿兔、顯示您的商品或項目、輸入E-mail地址等各種各樣的行動础米。通常這種采用按鈕或形式的形式分苇、我們稱之為「Call-to-Action」。

當你設計一個Call-to-Action時屁桑，讓他更顯眼是必要的医寿。在背景上利用品牌顏色，將他們配置在畫面中顯眼的位置蘑斧。這是比較受歡迎的標題配置方法靖秩，但也不一定準確。

正如下面的案例一樣竖瘾，使用高亮的顏色沟突，將右上角的 Call-to-Action 按鈕強調出來了。

?

一旦決定了配置的場所捕传，接下來我們就該考慮寫上什么樣的文字了惠拭。[Get Started(開始。)」或「Download Now(下載)」庸论、「Sign

Up(注冊)」之類的文字职辅，都有著表示行動的作用，能幫助用戶理解按鈕的意義聂示。[Submit(提交)」或「Go(運行)」之類的用語域携，應盡量避免使用。曖昧的文字會讓用戶感到迷惑催什，要有能讓用戶能充滿自信的按下按鈕這樣的心去設計。

背景圖片

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

有很多能夠自由使用圖片的網站旋圆，讓你的收藏變得更充實吧宠默。嘗試各種設計，讓我們來確認什么樣的圖片才是最恰當?shù)摹?/p>

尺寸和文件大小

當你找到了理想的圖片時灵巧，你就該準備好你的Hero

Header了搀矫。為了全屏表示你可以使用大尺寸的圖片，但相應的刻肄，他加載的時間將會變得很長瓤球。因為在大屏幕上網站圖片會擴大很多，所以我們通常將圖片調整為1400到1600像素敏弃，這樣在大屏幕看起來也會非常清楚卦羡。

將照片壓縮保存為JPGE吧。但因為照片的類型不同麦到，我們一般保證大小在200-500KB之間就可以了绿饵。因為圖片的尺寸大所以處理速度將會變慢，這也將影響該網站的加載時間瓶颠。為了快速顯示Hero

Header拟赊，讓我們來確認一下照片是否被壓縮了吧。我常使用的是TinyPNG粹淋。無論PNG和JPEG都是支持的吸祟。

自適應畫面的方法

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

?

通過將background-size設置為cover，瀏覽器中顯示的頁面上配置的圖片第步，將會自動進行擴大縮小和裁剪疮装。但值得注意的是，這樣也會使過高的圖片兩邊被裁掉粘都，或者過寬的圖片上下部分被裁掉廓推。(提示:使用

media query，讓不同的畫面使用不同的圖片就能解決這個問題翩隧。)

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

漸變圖片的重疊方法

當你找到了期待已久的漂亮的背景圖片专缠，很難清楚的閱讀標題這一問題就會頻繁出現(xiàn)雷酪。要解決這個問題，我們得考慮一些方法涝婉。首先哥力，試著模糊圖片或降低圖片的亮度吧。

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

Pseudo-Element)渔工。

?這里的偽元素：通過使用before锌钮，在背景圖片上使用灰色的漸變調和。另外涨缚，也可以更換背景圖片或使用減淡或別的漸變調和轧粟，此外，作為代替你也可以在圖片上追加標題的背景色脓魏。

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

?

背景視頻

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

使用視頻來引人注意是非常不錯的想法悔政，但進行網絡優(yōu)化也是非常有必要的晚吞。為了縮短視頻的持續(xù)時間，一般控制在10-20秒之內谋国。此外槽地，分辨率也該稍微下調，壓縮在10MB之內也是非常重要的芦瘾。

影片可以存儲在我們自己的服務器上捌蚊，你也可以利用如Embed.ly這樣的第三方服務。

如果你想找一些免費的視頻使用近弟，可以試試像Coverr這樣的網站缅糟。上面所公開的視頻，都是可以免費利用的視頻網站祷愉。像下面這個案例一樣窗宦，通過重疊半透明的圖片和視頻赦颇，完成了一個非常不錯的設計工作。

?

解說視頻

在某些情況下僅僅靠背景圖像或視頻就設置Hero

Header顯然是不夠的赴涵。也可以通過利用視頻沐扳，在傳達品牌故事之前設置好吧。像下面的案例句占，設置為在加載頁面的同時，動畫自動播放躯嫉。

?

也可以嵌入YouTube視頻纱烘，在這種情況下最簡單的方法，是使用iframe來進行設置祈餐。為了進一步改善外觀擂啥，您還可以進行一些自定義設置。

【】

在這里帆阳、modestbranding設定為1哺壶，vq設置為hd720。rel設置為0蜒谤。modestbranding是用來顯示YouTube的logo山宾，vq表示的則是默認使用高畫質、rel表示在視頻播放完畢后不顯示其他關聯(lián)視頻鳍徽。至于其他的選項設置资锰，你可以在Youtube的播放器參數(shù)上進行確認。

滾動顯示

這種技術則比較麻煩阶祭。原本是在網絡形成的早期绷杜，試圖利用第一屏以下空間的想法。但如今我們仍然可以使用這個技術濒募。在使用滾動之前鞭盟，我們來仔細看一看如何良好的使用這些技術的教程。因為滾動這項技術瑰剃，有可能你完全沒有必要使用齿诉。

就像下面這個案例，已通過在主頁上使用滾動技術培他，可以緩慢的切換較少的圖片鹃两。在Hero

Header上使用滾動時，可以在下方配置點擊按鈕就能使動畫停止的導航條舀凛。

?滾動顯示俊扳，對Hero Header來說可能是有用的，但使用時需多加注意猛遍。當信息龐大時馋记，請不要讓訪問的用戶感到混亂号坡。

打造品牌和導航

如果你準備好了有魅力的標題，直觀的Call-to-Action按鈕和好看的圖片或動畫梯醒，然而你的Hero

Header看起來卻并不是很好宽堆。請不要忘了打造品牌與導航。

在上面的案例中茸习，logo被放置在左上方畜隶，右上方則放置了導航。通過這種方法号胚，你可以幫助用戶尋找信息籽慢。Call-to-Action

按鈕和導航菜單也一起配置好吧。這可以突出按鈕猫胁，讓最重要的操作脫穎而出箱亿。

logo和導航菜單，你應該檢查他們是否易于理解弃秆。你也可以通過利用背景圖片設置分隔届惋，讓logo和導航菜單變得更顯眼。

考慮第一屏之外的事

Hero

Header在富有魅力的同時菠赚，也能很好的傳達出在下面的頁面中有著更多內容這一信息脑豹。用戶習慣了滾動，在移動終端點擊也會很方便衡查。通過閱讀頁面下面的目錄晨缴，還可以促進用戶進行滾動操作。

在最近的研究中峡捡，我們可以看到击碗，用戶最初所看到的信息比其他頁面更加重要。

所以能在頁面在最初打開的時候所展示內容们拙，就不要讓用戶進行滾動稍途。

打破規(guī)則

這里所介紹的方法雖然會幫助你，但不要忘了嘗試你自己的方法砚婆。就像下面的例子械拍，一眼看上去感覺非常混亂装盯，在中央設置了logo坷虑。導航菜單被分在兩邊，設置了3個標題埂奈。

在這里表現(xiàn)出解決這些問題的迄损，便是右上角強調出的Call-to-Action按鈕和布局鼓勵用戶進行向下滾動。

嘗試添加動效

完成了一個精美的標題設計账磺，但還是感覺缺少了什么芹敌。那就是在加載的同時頁面突然出現(xiàn)這一問題痊远。在接下來的工作中，我們嘗試著添加一些動效氏捞。使用動效碧聪，讓我們的Hero

Header變得更加精彩。那今天的UI設計師注意液茎，網站頭圖的10個黃金法則就結束了逞姿，記得多多關注我們。

資源地址: http://blog.silucg.com/UI/wy/6703.html