當用戶登錄你的主頁時,在頁面打開後的瞬間,你可以通過設計將更多的頁面讓他們看到。然而大多數網站都錯失了這個給用戶留下好印象的機會。
如何讓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 按鈕強調出來了。
一旦決定了配置的場所,接下來我們就該考慮寫上什麼樣的文字了。[Get Started(開始。)」或「Download Now(下載)」、「Sign Up(註冊)」之類的文字,都有着表示行動的作用,能幫助用戶理解按鈕的意義。
[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來進行設置。為了進一步改善外觀,您還可以進行一些自定義設置。
<iframe width="560" height="315" src="https://www.youtube.com/embed/0jhDAVkdsAI?modestbranding=1&cc_load_policy=0&iv_load_policy=3&vq=hd720&rel=0" frameborder="0" allowfullscreen></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變得更加精彩。