在人與人的交往中,第一印象很重要。雖然第一印象并不一定正確,但卻是鮮明、牢固的,直接影響著雙方以后溝通交流的過程。網頁設計中也是一樣,而首屏就是網站留給訪客的第一印象,漂亮精致的首屏設計能讓用戶停留更長時間,讓他們有意愿更深層次的了解網站內容,這有助于提高用戶轉化率,增加產品銷量;而糟糕的首屏設計則會讓有用的信息大打折扣,讓有趣的內容索然無味,訪客甚至會因此直接放棄瀏覽。首屏設計的重要性不言而喻,那么在今天這個競爭激烈的網絡世界中,怎樣才能充分發揮首屏設計的積極作用呢?今天小飛就帶大家了解一下網站的首屏設計,首屏設計中可以包括哪些元素。
為什么首屏設計很重要?
為什么首屏設計對于網頁很重要?除了上面我們提及的一些優點以外,這還要從用戶的瀏覽模式來分析。Nielsen Norman團隊重點研究分析用戶行為以及用戶與網站內容互動的實現途徑,在不斷的探究之后得出了一些結論:當人們訪問某個網站時,尤其是初次訪問時,他們通常不會仔細瀏覽所有內容,而是會快速的掃視,看是否有值得關注的點。如果存在感興趣的內容,他們才會繼續留在這個網站。
其實無論用戶遵循哪種瀏覽模式,他們通常都會優先掃視頁面頂部的水平區域。因此在頁面頂部顯示關鍵的信息最能同時滿足網站和用戶雙方的訴求:網站可以充分激發用戶的興趣、維系顧客;而訪客能夠快速獲取重要信息,決定是否繼續瀏覽。這就是為什么UI和UX設計師甚至內容策略專家和營銷專家都認為首屏設計十分重要。人們往往會在短短的幾秒鐘內形成對一個網站的整體認知,第二印象這種東西是不存在的。一個網站在首屏上必須足夠搶眼才行,不然很容易走向失敗。
一個網站的首屏可以包含哪些元素?
既然網站的首屏如此重要,那么怎樣才能做好首屏設計呢?在介紹首屏設計方法和一些實例之前,小飛先帶大家了解一下首屏中可以包含哪些有意義的布局元素:
基本的品牌標識:Logo、品牌名稱、Slogan、吉祥物、企業圖片或色彩等
產品或服務的主題文案
導航菜單選項
重要的社交媒體鏈接
基本聯系信息(電話、郵箱等)
多語言切換按鈕
搜索框
訂閱按鈕
產品APP 下載或試用版本的鏈接等
雖然小飛列舉了很多可以在首屏中使用的元素,但這并不意味著你應該將這些元素全部應用在首屏設計中。過猶不及,如果你在首屏中呈現過多元素,很容易會給訪客帶來信息負載,太多的元素也會分散用戶的注意力,使他們難以集中注意力關注網站中最重要的元素。因此,網站的首屏設計需要設計師和營銷人員通力合作,哪些需要選用,哪些應該刪除,做出戰略性的合理的安排。也許你覺得這樣的說法還是太過于空洞了,那就看看下面這兩個栗子,這兩個不同類型的網站在首屏上使用了不同的設計策略,快來找些靈感吧!
Bjorn是一個室內設計網站。首屏的頂欄由Logo和導航菜單(Product、Studio、Press、Shop)組成,而其中shop這個菜單項則制作成了CTA按鈕,更容易引起用戶點擊的興趣。而且就算主頁面不斷滑動,頂欄都會一直出現在網頁頂部,方便訪客進行跳轉。除此以外,網站的首屏中還有大段的文本,不過設計師充分利用了留白,將Logo、導航和文案很好的區分開來,讓整個頁面顯得整潔、大方。
Event Agency網站是另外一個范例,它在首屏使用的設計方法要更加特別一點。這個網站的首屏主要是圍繞著Logo和品牌名稱設計,布局左右平衡,各有兩個菜單項供訪客快速瀏覽自己感興趣的內容。更引人注目的還要數星河的背景圖片和超大字體文本的配合,在第一時間帶來了令人震撼的視覺效果。