誰都知道， 網站的頭圖是很重要的， 因為他是用戶第一時間看的， 也大部分的因素決定著用戶的去留。
當用戶登錄你的主頁時， 在頁面打開後的瞬間， 你可以通過設計將更多的頁面讓他們看到。 然而大多數網站都錯失了這個給用戶留下好印象的機會。
如何讓Hero Header從眾多其他要素中脫穎而出呢？讓我們來詳細檢查一下吧。
什麼是Hero Header的必要元素？
Hero Header納入設計要素的方法有很多， 如新商品的介紹， 必要的品牌說明等。 大多數Hero Header都利用了以下要素。
搶眼的標題， 頭條
Call-To-Action 按鈕
令人印象深刻的背景圖或視頻
嵌入式類型的描述視頻或動畫
介紹特色內容的滾動效果
品牌元素 - logo和宣傳語
品牌和導航
那麼在各種各樣的要素之中怎樣靈活運用才能創建一個良好的Hero Header呢？讓我們來一探究竟吧。
搶眼的標題， 頭條
訪問者第一個見到的就是他， 讓我們來看一看標題吧。 能讓人精確瞭解的資訊是必要的。 例如以下案例：「Send Better Email（發送一個更好的EMAIL。 ）」或「Sell More Stuff（想賣更多的東西。 ）」在創建一個易於理解的導航標題之前， 你必須明白你是否明確的傳達出了想提供的是什麼服務。
適當的樣式
文字文本要時刻保持清晰， 能夠清楚地顯示出來。 以前面這個樣品為例， 在白色背景使用黑色文字文本， 讓你你不會漏掉標題。 他也為字體使用了加粗。
以下面這個樣本為例， 在背景圖像上重疊字元文本， 由於給照片使用了淡出效果， 文字部分就顯得很顯眼了。
當您使用背景圖片時， 通常白色的字比黑色字更容易閱讀。
Call-to-Action 按鈕
一旦你確定了有吸引力的標題， 接下來我們要誘導訪問用戶的行動。 比如讓他們點擊“註冊”按鈕、顯示您的商品或專案、輸入E-mail位址等各種各樣的行動。 通常這種採用按鈕或形式的形式、我們稱之為「Call-to-Action」。
當你設計一個Call-to-Action時， 讓他更顯眼是必要的。 在背景上利用品牌顏色， 將他們配置在畫面中顯眼的位置。 這是比較受歡迎的標題配置方法， 但也不一定準確。
正如下面的案例一樣， 使用高亮的顏色， 將右上角的 Call-to-Action 按鈕強調出來了。
[Submit（提交）」或「Go（運行）」之類的用語， 應儘量避免使用。 曖昧的文字會讓使用者感到迷惑， 要有能讓用戶能充滿自信的按下按鈕這樣的心去設計。
背景圖片
大多數Hero Header， 使用的都是大尺寸的背景圖像。
有很多能夠自由使用圖片的網站， 讓你的收藏變得更充實吧。 嘗試各種設計， 讓我們來確認什麼樣的圖片才是最恰當的。
尺寸和文件大小
當你找到了理想的圖片時， 你就該準備好你的Hero Header了。 為了全屏表示你可以使用大尺寸的圖片， 但相應的， 他載入的時間將會變得很長。 因為在大螢幕上網站圖片會擴大很多， 所以我們通常將圖片調整為1400到1600圖元， 這樣在大螢幕看起來也會非常清楚。
將照片壓縮保存為JPGE吧。 但因為照片的類型不同， 我們一般保證大小在200-500KB之間就可以了。 因為圖片的尺寸大所以處理速度將會變慢， 這也將影響該網站的載入時間。 為了快速顯示Hero Header，讓我們來確認一下照片是否被壓縮了吧。我常使用的是TinyPNG。無論PNG和JPEG都是支持的。
自我調整畫面的方法
螢幕有各種各樣的尺寸。在大多數情況下，我們是不知道使用者螢幕的寬度和高度的。這個問題我們將介紹2種解決方法。將Background-size設置為cover，height設置為100vh吧。
通過將background-size設置為cover，流覽器中顯示的頁面上配置的圖片，將會自動進行擴大縮小和裁剪。但值得注意的是，這樣也會使過高的圖片兩邊被裁掉，或者過寬的圖片上下部分被裁掉。（提示:使用 media query，讓不同的畫面使用不同的圖片就能解決這個問題。）
vh表示的是顯示幕幕的高度（英: Viewport Height），表示的方法是百分比。也就是說100vh指的是全屏高度。
漸變圖片的重疊方法
當你找到了期待已久的漂亮的背景圖片，很難清楚的閱讀標題這一問題就會頻繁出現。要解決這個問題，我們得考慮一些方法。首先，試著模糊圖片或降低圖片的亮度吧。
還有一種方法便是有效的利用CSS的功能。通過使用CSS，可以在Hero Header的圖片上使用漸變調和，創建一個偽元素（英: Pseudo-Element）。
這裡的偽元素：通過使用before，在背景圖片上使用灰色的漸變調和。另外，也可以更換背景圖片或使用減淡或別的漸變調和，此外，作為代替你也可以在圖片上追加標題的背景色。
正如在下面的案例一樣，主要的思路就是突出背景圖片上的文字文本。
背景視頻
有時候，你會不會不滿足於大尺寸的圖片？在這種情況下，將背景圖替換為視頻，在讀取之後便自動播放也是一個受歡迎的方法。在下面的設計案例中，展示了該公司正在工作的全屏動畫的狀態。
使用視頻來引人注意是非常不錯的想法，但進行網路優化也是非常有必要的。為了縮短視頻的持續時間，一般控制在10-20秒之內。此外，解析度也該稍微下調，壓縮在10MB之內也是非常重要的。
影片可以存儲在我們自己的伺服器上，你也可以利用如Embed.ly這樣的協力廠商服務。
如果你想找一些免費的視頻使用，可以試試像Coverr這樣的網站。上面所公開的視頻，都是可以免費利用的視頻網站。像下面這個案例一樣，通過重疊半透明的圖片和視頻，完成了一個非常不錯的設計工作。
解說視頻
在某些情況下僅僅靠背景圖像或視頻就設置Hero Header顯然是不夠的。也可以通過利用視頻，在傳達品牌故事之前設置好吧。像下面的案例，設置為在載入頁面的同時，動畫自動播放。
也可以嵌入YouTube視頻，在這種情況下最簡單的方法，是使用iframe來進行設置。為了進一步改善外觀，您還可以進行一些自訂設置。
【】
在這裡、modestbranding設定為1，vq設置為hd720。rel設置為0。
modestbranding是用來顯示YouTube的logo，vq表示的則是默認使用高畫質、rel表示在視頻播放完畢後不顯示其他關聯視頻。至於其他的選項設置，你可以在YouTube的播放機參數上進行確認。
滾動顯示
這種技術則比較麻煩。原本是在網路形成的早期，試圖利用第一屏以下空間的想法。但如今我們仍然可以使用這個技術。在使用滾動之前，我們來仔細看一看如何良好的使用這些技術的教程。因為這項技術，有可能你完全沒有必要使用。
就像下面這個案例，已通過在主頁上使用滾動技術，可以緩慢的切換較少的圖片。在Hero Header上使用滾動時，可以在下方配置點擊按鈕就能使動畫停止的導航條。
滾動顯示，對Hero Header來說可能是有用的，但使用時需多加注意。當資訊龐大時，請不要讓訪問的用戶感到混亂。
打造品牌和導航
如果你準備好了有魅力的標題，直觀的Call-to-Action按鈕和好看的圖片或動畫，然而你的Hero Header看起來卻並不是很好。請不要忘了打造品牌與導航。
在上面的案例中，logo被放置在左上方，右上方則放置了導航。通過這種方法，你可以説明使用者尋找資訊。Call-to-Action 按鈕和導航功能表也一起配置好吧。這可以突出按鈕，讓最重要的操作脫穎而出。
logo和導航菜單，你應該檢查他們是否易於理解。你也可以通過利用背景圖片設置分隔，讓logo和導航功能表變得更顯眼。
考慮第一屏之外的事
Hero Header在富有魅力的同時，也能很好的傳達出在下面的頁面中有著更多內容這一資訊。使用者習慣了滾動，在移動終端點擊也會很方便。通過閱讀頁面下面的目錄，還可以促進使用者進行滾動操作。
在最近的研究中，我們可以看到，使用者最初所看到的資訊比其他頁面更加重要。
所以能在頁面在最初打開的時候所展示內容，就不要讓使用者進行滾動。
打破規則
這裡所介紹的方法雖然會幫助你，但不要忘了嘗試你自己的方法。就像下面的例子，一眼看上去感覺非常混亂，在中央設置了logo。導航菜單被分在兩邊，設置了3個標題。
在這裡表現出解決這些問題的，便是右上角強調出的Call-to-Action按鈕和佈局鼓勵使用者進行向下滾動。
嘗試添加動效
完成了一個精美的標題設計，但還是感覺缺少了什麼。那就是在載入的同時頁面突然出現這一問題。在接下來的工作中，我們嘗試著添加一些動效。使用動效，讓我們的Hero Header變得更加精彩。
為了快速顯示Hero Header，讓我們來確認一下照片是否被壓縮了吧。我常使用的是TinyPNG。無論PNG和JPEG都是支持的。自我調整畫面的方法
螢幕有各種各樣的尺寸。在大多數情況下，我們是不知道使用者螢幕的寬度和高度的。這個問題我們將介紹2種解決方法。將Background-size設置為cover，height設置為100vh吧。
通過將background-size設置為cover，流覽器中顯示的頁面上配置的圖片，將會自動進行擴大縮小和裁剪。但值得注意的是，這樣也會使過高的圖片兩邊被裁掉，或者過寬的圖片上下部分被裁掉。（提示:使用 media query，讓不同的畫面使用不同的圖片就能解決這個問題。）
vh表示的是顯示幕幕的高度（英: Viewport Height），表示的方法是百分比。也就是說100vh指的是全屏高度。
漸變圖片的重疊方法
當你找到了期待已久的漂亮的背景圖片，很難清楚的閱讀標題這一問題就會頻繁出現。要解決這個問題，我們得考慮一些方法。首先，試著模糊圖片或降低圖片的亮度吧。
還有一種方法便是有效的利用CSS的功能。通過使用CSS，可以在Hero Header的圖片上使用漸變調和，創建一個偽元素（英: Pseudo-Element）。
這裡的偽元素：通過使用before，在背景圖片上使用灰色的漸變調和。另外，也可以更換背景圖片或使用減淡或別的漸變調和，此外，作為代替你也可以在圖片上追加標題的背景色。
正如在下面的案例一樣，主要的思路就是突出背景圖片上的文字文本。
背景視頻
有時候，你會不會不滿足於大尺寸的圖片？在這種情況下，將背景圖替換為視頻，在讀取之後便自動播放也是一個受歡迎的方法。在下面的設計案例中，展示了該公司正在工作的全屏動畫的狀態。
使用視頻來引人注意是非常不錯的想法，但進行網路優化也是非常有必要的。為了縮短視頻的持續時間，一般控制在10-20秒之內。此外，解析度也該稍微下調，壓縮在10MB之內也是非常重要的。
影片可以存儲在我們自己的伺服器上，你也可以利用如Embed.ly這樣的協力廠商服務。
如果你想找一些免費的視頻使用，可以試試像Coverr這樣的網站。上面所公開的視頻，都是可以免費利用的視頻網站。像下面這個案例一樣，通過重疊半透明的圖片和視頻，完成了一個非常不錯的設計工作。
解說視頻
在某些情況下僅僅靠背景圖像或視頻就設置Hero Header顯然是不夠的。也可以通過利用視頻，在傳達品牌故事之前設置好吧。像下面的案例，設置為在載入頁面的同時，動畫自動播放。
也可以嵌入YouTube視頻，在這種情況下最簡單的方法，是使用iframe來進行設置。為了進一步改善外觀，您還可以進行一些自訂設置。
【】
在這裡、modestbranding設定為1，vq設置為hd720。rel設置為0。
modestbranding是用來顯示YouTube的logo，vq表示的則是默認使用高畫質、rel表示在視頻播放完畢後不顯示其他關聯視頻。至於其他的選項設置，你可以在YouTube的播放機參數上進行確認。
滾動顯示
這種技術則比較麻煩。原本是在網路形成的早期，試圖利用第一屏以下空間的想法。但如今我們仍然可以使用這個技術。在使用滾動之前，我們來仔細看一看如何良好的使用這些技術的教程。因為這項技術，有可能你完全沒有必要使用。
就像下面這個案例，已通過在主頁上使用滾動技術，可以緩慢的切換較少的圖片。在Hero Header上使用滾動時，可以在下方配置點擊按鈕就能使動畫停止的導航條。
滾動顯示，對Hero Header來說可能是有用的，但使用時需多加注意。當資訊龐大時，請不要讓訪問的用戶感到混亂。
打造品牌和導航
如果你準備好了有魅力的標題，直觀的Call-to-Action按鈕和好看的圖片或動畫，然而你的Hero Header看起來卻並不是很好。請不要忘了打造品牌與導航。
在上面的案例中，logo被放置在左上方，右上方則放置了導航。通過這種方法，你可以説明使用者尋找資訊。Call-to-Action 按鈕和導航功能表也一起配置好吧。這可以突出按鈕，讓最重要的操作脫穎而出。
logo和導航菜單，你應該檢查他們是否易於理解。你也可以通過利用背景圖片設置分隔，讓logo和導航功能表變得更顯眼。
考慮第一屏之外的事
Hero Header在富有魅力的同時，也能很好的傳達出在下面的頁面中有著更多內容這一資訊。使用者習慣了滾動，在移動終端點擊也會很方便。通過閱讀頁面下面的目錄，還可以促進使用者進行滾動操作。
在最近的研究中，我們可以看到，使用者最初所看到的資訊比其他頁面更加重要。
所以能在頁面在最初打開的時候所展示內容，就不要讓使用者進行滾動。
打破規則
這裡所介紹的方法雖然會幫助你，但不要忘了嘗試你自己的方法。就像下面的例子，一眼看上去感覺非常混亂，在中央設置了logo。導航菜單被分在兩邊，設置了3個標題。
在這裡表現出解決這些問題的，便是右上角強調出的Call-to-Action按鈕和佈局鼓勵使用者進行向下滾動。
嘗試添加動效
完成了一個精美的標題設計，但還是感覺缺少了什麼。那就是在載入的同時頁面突然出現這一問題。在接下來的工作中，我們嘗試著添加一些動效。使用動效，讓我們的Hero Header變得更加精彩。