無(wú)論是APP還是網(wǎng)頁(yè)，第一印象都很重要。再優(yōu)質(zhì)的內(nèi)容，都需要首屏這個(gè)漂亮的臉面來(lái)吸引用戶(hù)駐留，才能被人注意到。在競(jìng)爭(zhēng)激烈的數(shù)字產(chǎn)品領(lǐng)域，這是難以辯駁的殘酷經(jīng)驗(yàn)。這也引出了今天要探討的話(huà)題：網(wǎng)頁(yè)的首屏設(shè)計(jì)。

什么是首屏

相比于首屏，大家對(duì)于首頁(yè)的概念會(huì)更熟悉一些。和傳統(tǒng)的報(bào)紙行業(yè)類(lèi)似，報(bào)紙第一版被稱(chēng)為頭版，由于報(bào)紙常常會(huì)折疊起來(lái)運(yùn)輸，當(dāng)用戶(hù)拿到報(bào)紙看到的是露出來(lái)的頭版頭條(Above the fold)，這就像如今的首頁(yè)和首屏之間的關(guān)系。用戶(hù)打開(kāi)網(wǎng)頁(yè)的第一刻，還沒(méi)開(kāi)始滾動(dòng)頁(yè)面的時(shí)候，所看到的就是首屏。

首屏要能夠吸引用戶(hù)才行。

從內(nèi)容角度上來(lái)說(shuō)，首屏要涵蓋關(guān)鍵的信息，一目了然。從設(shè)計(jì)上來(lái)看，首屏也是最適合發(fā)揮設(shè)計(jì)創(chuàng)意的地方，許多優(yōu)質(zhì)的首屏設(shè)計(jì)都采用了簡(jiǎn)潔明了的布局，打磨出引人入勝的體驗(yàn)。首屏通常還承載著網(wǎng)站的導(dǎo)航模塊，是整個(gè)站點(diǎn)布局和導(dǎo)航的關(guān)鍵。

這個(gè)在線漫畫(huà)書(shū)店就是個(gè)優(yōu)秀的范例。頂部的文字LOGO和主干導(dǎo)航都在同一水平線上，超人插畫(huà)突破頁(yè)頭布局充滿(mǎn)了力量感，在視覺(jué)上也非常抓人，同時(shí)作為認(rèn)知度最廣的超級(jí)英雄，它也非常適合作為首圖而置頂。下面的漫畫(huà)列表恰到好處的露了個(gè)頭，讓訪客意識(shí)到能夠向下翻頁(yè)。

首屏包含哪些部分

既然首屏是關(guān)鍵，所包含的元素也不會(huì)太少。最常見(jiàn)的是下面這些：

·基本的品牌標(biāo)識(shí)：LOGO，品牌名稱(chēng)，Slogan，吉祥物等

·產(chǎn)品、服務(wù)和主題的主要文案

·網(wǎng)站類(lèi)別鏈接

·社交媒體鏈接

·基本聯(lián)系信息(電話(huà)電子郵件等)

·多語(yǔ)言切換按鈕

·搜索框

·訂閱按鈕

·產(chǎn)品、APP 下載/試用鏈接等

這并不是意味著所有的這些元素都應(yīng)該呈現(xiàn)在首屏當(dāng)中，太多的模塊會(huì)讓首屏中的首圖和標(biāo)題的視覺(jué)重量被稀釋?zhuān)^(guò)多的信息會(huì)讓用戶(hù)難以聚焦到真正重要的內(nèi)容上。所以，首屏的設(shè)計(jì)常常需要設(shè)計(jì)師和營(yíng)銷(xiāo)人員通力合作，來(lái)作出最合理的選擇。

看看下面的幾個(gè)案例，你應(yīng)該能大概明白不同類(lèi)型的網(wǎng)頁(yè)應(yīng)該采取怎樣的策略。

Bjorn 是一個(gè)室內(nèi)設(shè)計(jì)網(wǎng)站，網(wǎng)站的頂欄被制作成懸浮的，隨著頁(yè)面的滾動(dòng)會(huì)一直會(huì)在頂部顯示，左側(cè)是品牌LOGO，右側(cè)是導(dǎo)航，常見(jiàn)的四個(gè)分類(lèi)中 Product、Studio、Press 是作為常規(guī)導(dǎo)航而存在，但是Shop 則被制作成CTA按鈕，相比之下更容易吸引用戶(hù)去點(diǎn)擊。借助大量的留白，設(shè)計(jì)師將LOGO、導(dǎo)航和首屏的文案劃分開(kāi)來(lái)。

Event Agency是另外一個(gè)范例，在首屏設(shè)計(jì)上相對(duì)而言更加別具一格。整個(gè)首屏都是圍繞著LOGO和品牌名稱(chēng)來(lái)設(shè)計(jì)的，左右平衡，各兩個(gè)鏈接，背景的星河和前景的超大文本嵌套疊加，構(gòu)成視覺(jué)主體。

首屏為何重要

首屏對(duì)于許多網(wǎng)頁(yè)而言是至關(guān)重要的組成部分。

用戶(hù)是如何同網(wǎng)頁(yè)進(jìn)行互動(dòng)的?用戶(hù)研究領(lǐng)域的先驅(qū) Nielsen Norman Group 曾經(jīng)針對(duì)這一用戶(hù)行為進(jìn)行了深入的研究，為設(shè)計(jì)師和可用性設(shè)計(jì)專(zhuān)家們提供了更好的素材和設(shè)計(jì)依據(jù)。

簡(jiǎn)而言之，當(dāng)人們?cè)L問(wèn)某個(gè)網(wǎng)站的時(shí)候，尤其是初次訪問(wèn)網(wǎng)站的時(shí)候，他們通常不會(huì)特別仔細(xì)的查看所有的內(nèi)容，而是快速的掃視，找到能夠吸引他們注意力的信息，這些內(nèi)容就是他們繼續(xù)停留在這個(gè)網(wǎng)站上的理由。通過(guò)眼動(dòng)測(cè)試和不同實(shí)驗(yàn)，他們發(fā)現(xiàn)訪問(wèn)者的視覺(jué)瀏覽模式，可以歸結(jié)為幾種典型的模式。設(shè)計(jì)師 Steven Bradley 在自己的文章中，總結(jié)了這三種常見(jiàn)的模式：古騰堡式，Z圖模式和F圖模式。

對(duì)于信息結(jié)構(gòu)層次并不那么分明的網(wǎng)頁(yè)，用戶(hù)常常會(huì)使用古騰堡式的瀏覽模式，用戶(hù)大范圍掃視頁(yè)面內(nèi)容，整個(gè)視線路徑是一個(gè)大號(hào)的Z，其中最開(kāi)始的兩個(gè)視覺(jué)駐留點(diǎn)就在頁(yè)頭上。

Z圖模式也不難理解，用戶(hù)從上到下，視線沿著Z字形來(lái)回掃視，用戶(hù)會(huì)左右快速掃視，視線的起點(diǎn)首先是左上角，行跨頂部一欄到右上角，然后向下延伸。

F圖模式，或者說(shuō)是F式布局，我們就更加熟悉了。在Nielsen Norman Group 的研究當(dāng)中，這種閱讀模式最為典型：

·用戶(hù)先會(huì)沿著水平方向?yàn)g覽，優(yōu)先瀏覽內(nèi)容塊的上部，這個(gè)時(shí)候的眼動(dòng)構(gòu)成了字母F 最上面一橫。

·接下來(lái)視線會(huì)沿著屏幕左側(cè)向下垂直掃視，尋找段落中能引起興趣點(diǎn)的內(nèi)容，當(dāng)他們發(fā)現(xiàn)引起他們興趣的內(nèi)容之時(shí)，繼續(xù)橫向仔細(xì)瀏覽，而通常這些內(nèi)容對(duì)應(yīng)的視線范圍會(huì)比第一次橫向?yàn)g覽的范疇要更小一些，而這個(gè)視線軌跡則構(gòu)成了字母F 中間的一橫。

·接下來(lái)用戶(hù)會(huì)將視線移到屏幕左側(cè)，繼續(xù)向下瀏覽。

不論用戶(hù)是遵循哪種模式來(lái)閱讀，他們通常都會(huì)優(yōu)先掃視頁(yè)面的頂部，從左上角到右上角這一欄的信息。所以，在頁(yè)面頂部顯示關(guān)鍵的信息是符合網(wǎng)站和用戶(hù)雙方的訴求的最優(yōu)策略：讀者可以快速掃視正確的信息，而網(wǎng)站顯示的內(nèi)容如果能夠吸引到他們，則能夠留下用戶(hù)。這就是為什么UI和UX設(shè)計(jì)師甚至內(nèi)容策略專(zhuān)家和營(yíng)銷(xiāo)專(zhuān)家都會(huì)傾向于這樣設(shè)計(jì)。

在另外一篇關(guān)于首屏好實(shí)踐的文章當(dāng)中，作者 Bogdan Sandu 提到的一點(diǎn)應(yīng)該讓每個(gè)設(shè)計(jì)師都牢記：“人們通常只會(huì)在短短的幾秒鐘內(nèi)判斷一個(gè)網(wǎng)站的素質(zhì)，第二印象這種東西是不存在的。一個(gè)網(wǎng)站必須足夠搶眼才行，否則就是失敗。”

另外值得考慮的一點(diǎn)在于，導(dǎo)航確實(shí)可以很好的為用戶(hù)呈現(xiàn)網(wǎng)站的基本框架和內(nèi)容分類(lèi)，這是網(wǎng)站體驗(yàn)的一個(gè)重要部分。不過(guò)許多創(chuàng)意解決方案會(huì)調(diào)整布局，采用更加激進(jìn)或者不同的導(dǎo)航設(shè)計(jì)。每個(gè)網(wǎng)站的設(shè)計(jì)方案，都要根據(jù)需求和目標(biāo)受眾的不同來(lái)進(jìn)行調(diào)整，這是自然而然的。

可讀性和視覺(jué)層次

首屏當(dāng)中，導(dǎo)航、LOGO和標(biāo)題等元素的字體選擇仔細(xì)考量，它們應(yīng)該和背景構(gòu)成良好的對(duì)比度，確?？勺x性。用戶(hù)最好能夠一目了然地獲取其中的信息。

在Daily Bugle magazine 這個(gè)電子雜志網(wǎng)站中，Daily Bugle 作為標(biāo)題居中，延續(xù)自傳統(tǒng)報(bào)紙?jiān)O(shè)計(jì)的襯線體貫穿了整個(gè)網(wǎng)站的設(shè)計(jì)。居中的文字LOGO，分類(lèi)導(dǎo)航和搜索框平均分布在左右。

The Big Landscape 這個(gè)網(wǎng)站在導(dǎo)航的設(shè)計(jì)上采用了突破柵格的不對(duì)稱(chēng)設(shè)計(jì)，左邊是LOGO和三個(gè)鏈接，為了平衡整個(gè)設(shè)計(jì)，頂欄右邊是搜索框和一個(gè)有顏色填充的按鈕。這種設(shè)計(jì)不僅兼顧了視覺(jué)上的平衡，還讓頁(yè)頭的可讀性得到了保證。

另外，還有一個(gè)值得注意的問(wèn)題，當(dāng)用戶(hù)開(kāi)始向下滾動(dòng)翻頁(yè)的時(shí)候，首屏頂部的頁(yè)頭要如何處理。有的網(wǎng)頁(yè)會(huì)傾向于使用懸浮固定的導(dǎo)航，讓用戶(hù)隨時(shí)可以點(diǎn)擊導(dǎo)航跳轉(zhuǎn)到其他的地方，或者進(jìn)行搜索。有的網(wǎng)頁(yè)則還是采取傳統(tǒng)的策略，當(dāng)然也有采用折中的設(shè)計(jì)，當(dāng)用戶(hù)滾動(dòng)到首屏之后，導(dǎo)航縮小懸浮到頂上，或者變?yōu)椴藛伟粹o，降低視覺(jué)重量，保留核心的元素和它們的可交互性。

漢堡菜單

首屏設(shè)計(jì)中，漢堡菜單是近年來(lái)非常流行的一個(gè)解決方案，將導(dǎo)航鏈接都隱藏在漢堡按鈕菜單之后。

漢堡按鈕通常放置在首屏，現(xiàn)在已經(jīng)成為一個(gè)經(jīng)典的交互元素。目前的用戶(hù)也已經(jīng)熟悉了它的存在，無(wú)需額外的解釋?zhuān)麄兙椭涝跐h堡菜單中尋找鏈接和其他選項(xiàng)。漢堡菜單讓整個(gè)頁(yè)面更加簡(jiǎn)約，釋放了空間，節(jié)省了布局元素，在不同的設(shè)備上的顯示也更加統(tǒng)一。

Ice Website 這個(gè)網(wǎng)站的概念設(shè)計(jì)就展示了漢堡菜單的一種常見(jiàn)用法。由于網(wǎng)站包含了大量的頁(yè)面，設(shè)計(jì)師非常貼心的將漢堡按鈕置于頁(yè)面的左上角，當(dāng)用戶(hù)點(diǎn)擊它的時(shí)候，會(huì)彈出導(dǎo)航選項(xiàng)。這樣的設(shè)計(jì)極大程度的節(jié)省了頁(yè)面空間，讓整個(gè)設(shè)計(jì)都顯得足夠簡(jiǎn)約，也為頁(yè)頭省出了空間。在這個(gè)首屏當(dāng)中，頁(yè)頭左側(cè)是品牌LOGO和介紹，右側(cè)是社交媒體帳號(hào)鏈接，視覺(jué)設(shè)計(jì)也和整個(gè)頁(yè)面保持了一致。中間的留白讓整個(gè)頁(yè)頭保持了視覺(jué)上的平衡。

Slopes 這個(gè)網(wǎng)站采用了時(shí)下流行的側(cè)邊欄設(shè)計(jì)元素，不過(guò)設(shè)計(jì)師沒(méi)有將導(dǎo)航放置到側(cè)邊欄上，僅僅是保留了品牌LOGO，只是借由側(cè)邊欄制造出了這種非對(duì)稱(chēng)的首屏布局。頁(yè)頭右側(cè)是四個(gè)常用的鏈接，而左側(cè)是漢堡菜單，更多的鏈接被隱藏在漢堡菜單當(dāng)中，這樣一來(lái)，交互的層次就出來(lái)了。

雖然現(xiàn)在漢堡菜單的設(shè)計(jì)還存在著一些爭(zhēng)議，但是它們?nèi)匀槐粡V泛地運(yùn)用著。

懸浮固定導(dǎo)航

懸浮式的導(dǎo)航欄也是時(shí)下流行的一個(gè)趨勢(shì)，它為用戶(hù)提供了持續(xù)的可供交互的導(dǎo)航服務(wù)，這對(duì)于越來(lái)越長(zhǎng)的頁(yè)面設(shè)計(jì)而言，是個(gè)相當(dāng)合理的補(bǔ)充。

這個(gè) Structure Blog 的概念設(shè)計(jì)就采用了懸浮的頁(yè)頭，導(dǎo)航則主要是采用的漢堡菜單。這使得品牌更加突出，而整體設(shè)計(jì)則更加簡(jiǎn)約。

Photography Workshops 這個(gè)網(wǎng)站的首屏設(shè)計(jì)就非常的獨(dú)特。導(dǎo)航菜單開(kāi)始是在首屏的底部，隨著滾動(dòng)，它會(huì)到頁(yè)面的頂端并且懸浮固定存在。導(dǎo)航菜單的右側(cè)是關(guān)鍵鏈接，而非關(guān)鍵的更多選擇則隱藏在最左側(cè)的漢堡菜單中。

雙層菜單

導(dǎo)航還可以設(shè)計(jì)為雙層的，已經(jīng)有不少網(wǎng)站有了這樣的嘗試。

Bakery 這個(gè)網(wǎng)站就使用了雙層的導(dǎo)航設(shè)計(jì)，上層導(dǎo)航中承載的是LOGO和社交媒體帳號(hào)、搜索和購(gòu)物車(chē)以及漢堡菜單，而第二層導(dǎo)航則是交互的核心區(qū)域：產(chǎn)品目錄、銷(xiāo)售地點(diǎn)、新聞和特別優(yōu)惠等。整個(gè)設(shè)計(jì)視覺(jué)層次清晰，為整個(gè)用戶(hù)體驗(yàn)打足了基礎(chǔ)。

結(jié)語(yǔ)

對(duì)于網(wǎng)頁(yè)而言，首屏是關(guān)鍵。頁(yè)頭的導(dǎo)航和首圖、文案共同組成了這個(gè)關(guān)鍵的區(qū)域，多種因素共同作用于用戶(hù)，用心的設(shè)計(jì)才能讓用戶(hù)一見(jiàn)鐘情，不是么?

新聞標(biāo)題：解析網(wǎng)頁(yè)首屏設(shè)計(jì)
網(wǎng)頁(yè)URL：http://jinyejixie.com/news47/169597.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、網(wǎng)站排名、軟件開(kāi)發(fā)、ChatGPT、品牌網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷(xiāo)推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)