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

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

首屏要能夠吸引用戶才行。

從內(nèi)容角度上來說，首屏要涵蓋關(guān)鍵的信息，一目了然。從設(shè)計(jì)上來看，首屏也是最適合發(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è)在線漫畫書店就是個(gè)優(yōu)秀的范例。頂部的文字LOGO和主干導(dǎo)航都在同一水平線上，超人插畫突破頁(yè)頭布局充滿了力量感，在視覺上也非常抓人，同時(shí)作為認(rèn)知度最廣的超級(jí)英雄，它也非常適合作為首圖而置頂。下面的漫畫列表恰到好處的露了個(gè)頭，讓訪客意識(shí)到能夠向下翻頁(yè)。

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

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

·產(chǎn)品、辦事和主題的主要案牘

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

·社交媒體鏈接

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

·多語言切換按鈕

·搜索框

·訂閱按鈕

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

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

看看下面的幾個(gè)案例，你應(yīng)該能大概明白差別類型的網(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)航，常見的四個(gè)分類中 Product、Studio、Press 是作為常規(guī)導(dǎo)航而存在，但是Shop 則被制作成CTA按鈕，比擬之下更容易吸引用戶去點(diǎn)擊。借助大量的留白，設(shè)計(jì)師將LOGO、導(dǎo)航和首屏的案牘劃分開來。

Event Agency是別的一個(gè)范例，在首屏設(shè)計(jì)上相對(duì)而言更加別出心裁。整個(gè)首屏都是圍繞著LOGO和品牌名稱來設(shè)計(jì)的，擺布平衡，各兩個(gè)鏈接，配景的星河和前景的超大文本嵌套疊加，構(gòu)成視覺主體。

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

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

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

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

標(biāo)簽：九江 東營(yíng) 鹽城 林芝 烏魯木齊