精致的首屏設(shè)計(jì)可以吸引用戶的注意力，延長他們在網(wǎng)站上的訪問時(shí)間，增加用戶對網(wǎng)站的好感。做好網(wǎng)頁的首屏設(shè)計(jì)至關(guān)重要。上回我們講到了首屏設(shè)計(jì)的概念、重要性以及涵蓋的布局元素，今天小飛就帶大家具體看一下在網(wǎng)站設(shè)計(jì)中究竟應(yīng)該怎樣做好首屏設(shè)計(jì)，改善網(wǎng)站留給用戶的第一印象。
怎樣做好首屏設(shè)計(jì)?
在網(wǎng)站的首屏設(shè)計(jì)中，文本、圖片的排版或配色等確實(shí)很重要，但導(dǎo)航菜單的地位也不容撼動(dòng)。良好的導(dǎo)航菜單有助于幫助用戶理解網(wǎng)站的基本框架和內(nèi)容分類，下面有好幾條建議都是圍繞這一點(diǎn)展開的。每條建議還有相應(yīng)的范例，希望大家能好好琢磨，學(xué)以致用。
注重可讀性和視覺層次
在首屏設(shè)計(jì)當(dāng)中，要將網(wǎng)站內(nèi)容或各種元素合理布局，在視覺上形成層次提高網(wǎng)站的可讀性，這樣用戶在獲取信息時(shí)會(huì)更加便捷，首屏設(shè)計(jì)也會(huì)更加用戶友好。要做到這一點(diǎn)，意味著我們需要仔細(xì)考量導(dǎo)航、Logo和標(biāo)題等元素的字體，慎重選擇背景圖片、配色方案，讓網(wǎng)站在保持協(xié)調(diào)一致的同時(shí)錯(cuò)落有致。Daily Bugle是一個(gè)做雜志的網(wǎng)站。在它的首屏中，居中的文字Logo相當(dāng)于一個(gè)分界線，導(dǎo)航菜單項(xiàng)和搜索框均勻地分布在兩側(cè)，整個(gè)網(wǎng)站沿用了傳統(tǒng)報(bào)紙?jiān)O(shè)計(jì)的襯線體，灰白色背景足夠典雅、大方，圖片、文字布局合理，在首屏設(shè)計(jì)上很是美觀。
而The Big Landscape 這個(gè)網(wǎng)站在整體布局上沒有遵循柵格系統(tǒng)，因此它的首屏設(shè)計(jì)也選用了非對稱的設(shè)計(jì)方法。頂欄的左邊是網(wǎng)站Logo和3個(gè)導(dǎo)航菜單項(xiàng)，右側(cè)是搜索框和一個(gè)醒目的CTA按鈕。主題部分是幾何形狀的圖片、明亮的標(biāo)題、錯(cuò)落的文本。整個(gè)網(wǎng)站重點(diǎn)突出又不失重點(diǎn)。
使用漢堡圖標(biāo)
由于首屏的空間有限，漢堡圖標(biāo)是近年興起的一種比較流行的解決方法。盡管現(xiàn)在關(guān)于漢堡圖標(biāo)的使用還存在著一些爭議，但是它們?nèi)匀皇艿讲簧僭O(shè)計(jì)師的喜愛。漢堡圖標(biāo)也逐漸成為首屏設(shè)計(jì)中一個(gè)經(jīng)典的交互元素，用戶也更加熟悉漢堡圖標(biāo)在網(wǎng)站中的角色。這種隱藏式的菜單可以讓整個(gè)頁面看上去更加簡約，給其他元素充分發(fā)揮的空間，在不同的設(shè)備上顯示時(shí)也會(huì)更加統(tǒng)一。
Ice這個(gè)網(wǎng)站就很好的展現(xiàn)了漢堡圖標(biāo)的使用方法。由于網(wǎng)站的頁面很多，設(shè)計(jì)師很貼心的將漢堡圖標(biāo)放在頁面的左上角，當(dāng)用戶點(diǎn)擊時(shí)，它會(huì)彈出許多菜單選項(xiàng)。這樣的設(shè)計(jì)為網(wǎng)站節(jié)省了不少空間，整個(gè)網(wǎng)站看上去也更加簡潔。頁眉處的元素安排也比較合理，左側(cè)是品牌Logo和介紹，右側(cè)是社交媒體分享鏈接，實(shí)現(xiàn)了平衡。而背景圖片、行為按鈕、文本等的配合也很協(xié)調(diào)，在視覺上保持了一致。
Slopes在網(wǎng)站采用了漢堡圖標(biāo)的另一種設(shè)計(jì)形式，那就是時(shí)下流行的側(cè)邊欄。不給設(shè)計(jì)師卻沒有將導(dǎo)航菜單顯示在側(cè)邊上，這可能也是因?yàn)轫撁姹容^多吧!側(cè)邊欄上僅僅保留了品牌Logo，營造了一種非對稱的布局。頁眉處是四個(gè)導(dǎo)航菜單，而左側(cè)是漢堡圖標(biāo)，這樣一來，交互的層次就出來了。帶有動(dòng)效的背景圖片也更能抓住用戶的注意力。
懸浮固定頂欄
當(dāng)用戶開始向下滾動(dòng)翻頁的時(shí)候，首屏頂欄要如何處理也是一個(gè)我們需要關(guān)心的問題。有的網(wǎng)頁采取傳統(tǒng)的策略，選擇隱藏頂欄。而懸浮固定式的頂欄也是時(shí)下流行的一個(gè)趨勢。它為用戶提供了持續(xù)的可交互的導(dǎo)航服務(wù)，這對于許多一頁式長滾動(dòng)網(wǎng)站來說非常有用。當(dāng)然還有一種折中的方法，那就是當(dāng)用戶向下滾動(dòng)時(shí)，導(dǎo)航菜單縮小或變成菜單按鈕，降低視覺上的權(quán)重，保留網(wǎng)站核心元素。今天主要介紹固定頂欄的兩個(gè)栗子：
Structure Blog 的設(shè)計(jì)就采用了懸浮固定的頂欄，當(dāng)訪客向下滾動(dòng)時(shí)，頂欄一直出現(xiàn)。它的設(shè)計(jì)還遵循了極簡主義，品牌名稱居中，漢堡圖標(biāo)隱藏菜單，放大鏡圖標(biāo)代表搜索框，在保證功能的同時(shí)實(shí)現(xiàn)了布局的清爽。
Photography Workshops網(wǎng)站的首屏在頁眉設(shè)計(jì)上要更有創(chuàng)意。最開始頂欄在翻頁時(shí)保持不變，不過當(dāng)你向上滾動(dòng)時(shí)，它會(huì)反過來出現(xiàn)在頁面的底部。頂欄上也呈現(xiàn)了網(wǎng)站的一些菜單選項(xiàng)，但更多的菜單項(xiàng)被隱藏在漢堡圖標(biāo)之中。這有助于維持網(wǎng)站的一致性，在訪客與網(wǎng)站內(nèi)容的互動(dòng)中能發(fā)揮積極的作用。
雙層導(dǎo)航菜單
首屏中的導(dǎo)航菜單還可以設(shè)計(jì)為雙層的，已經(jīng)有不少網(wǎng)站開始了這樣的嘗試。
Bakery 這個(gè)網(wǎng)站就是一個(gè)栗子，上層頁頭中呈現(xiàn)的是Logo和社交媒體帳號、搜索和購物車以及漢堡菜單，而第二層導(dǎo)航則是交互的核心區(qū)域：產(chǎn)品目錄、銷售地點(diǎn)、新聞和特別優(yōu)惠等。整個(gè)設(shè)計(jì)視覺層次清晰，更有利于用戶體驗(yàn)的提升。
首屏是網(wǎng)站重要的戰(zhàn)略位置。即使用戶可以滾動(dòng)屏幕，首屏在人們心中還是占據(jù)很重要的地位的，不要小看首屏的作用。而關(guān)于怎樣做好首屏設(shè)計(jì)，上面的建議只是輔助性的，最重要的是做好用戶調(diào)查。每個(gè)網(wǎng)站的自身特點(diǎn)不同，目標(biāo)受眾喜好多樣，滿足用戶需要、受到用戶歡迎的網(wǎng)站才有可能成功。根據(jù)調(diào)查結(jié)果決定你的首屏設(shè)計(jì)是應(yīng)該遵循傳統(tǒng)還是銳意創(chuàng)新吧!快來起飛頁自助建站平臺做一個(gè)屬于自己的響應(yīng)式網(wǎng)站吧!
【 延伸閱讀 】
- 如何改善網(wǎng)站留給用戶的第一印象？（上）
申請創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
