??無論是APP還是網頁题山，第一印象都很重要。再優(yōu)質的內容故痊，都需要首屏這個漂亮的臉面來吸引用戶駐留顶瞳，才能被人注意到。在競爭激烈的數(shù)字產品領域愕秫，這是難以辯駁的殘酷經驗慨菱。這也引出了今天要探討的話題：網頁的首屏設計。

1.什么是首屏

相比于首屏豫领，大家對于首頁的概念會更熟悉一些抡柿。和傳統(tǒng)的報紙行業(yè)類似，報紙第一版被稱為頭版等恐，由于報紙常常會折疊起來運輸洲劣，當用戶拿到報紙看到的是露出來的頭版頭條（Above the fold）备蚓，這就像如今的首頁和首屏之間的關系。用戶打開網頁的第一刻囱稽，還沒開始滾動頁面的時候郊尝，所看到的就是首屏。

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

從內容角度上來說流昏，首屏要涵蓋關鍵的信息，一目了然吞获。從設計上來看况凉，首屏也是最適合發(fā)揮設計創(chuàng)意的地方，許多優(yōu)質的首屏設計都采用了簡潔明了的布局各拷，打磨出引人入勝的體驗刁绒。首屏通常還承載著網站的導航模塊，是整個站點布局和導航的關鍵烤黍。

?

這個在線漫畫書店就是個優(yōu)秀的范例知市。頂部的文字LOGO和主干導航都在同一水平線上，超人插畫突破頁頭布局充滿了力量感速蕊，在視覺上也非常抓人嫂丙，同時作為認知度最廣的超級英雄，它也非常適合作為首圖而置頂规哲。下面的漫畫列表恰到好處的露了個頭跟啤，讓訪客意識到能夠向下翻頁。

2.首屏包含哪些部分

既然首屏是關鍵媳叨，所包含的元素也不會太少腥光。最常見的是下面這些：

①基本的品牌標識：LOGO关顷，品牌名稱糊秆，Slogan，吉祥物等

②產品议双、服務和主題的主要文案

③網站類別鏈接

④社交媒體鏈接

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

⑥多語言切換按鈕

⑦搜索框

⑧訂閱按鈕

⑨產品痘番、APP 下載/試用鏈接等

這并不是意味著所有的這些元素都應該呈現(xiàn)在首屏當中，太多的模塊會讓首屏中的首圖和標題的視覺重量被稀釋平痰，過多的信息會讓用戶難以聚焦到真正重要的內容上汞舱。所以，首屏的設計常常需要設計師和營銷人員通力合作宗雇，來作出最合理的選擇昂芜。

看看下面的幾個案例，你應該能大概明白不同類型的網頁應該采取怎樣的策略赔蒲。

?

Bjorn 是一個室內設計網站泌神，網站的頂欄被制作成懸浮的良漱，隨著頁面的滾動會一直會在頂部顯示，左側是品牌LOGO欢际，右側是導航母市，常見的四個分類中 Product、Studio损趋、Press 是作為常規(guī)導航而存在患久，但是Shop 則被制作成CTA按鈕，相比之下更容易吸引用戶去點擊浑槽。借助大量的留白蒋失，設計師將LOGO、導航和首屏的文案劃分開來桐玻。

?

Event Agency是另外一個范例高镐，在首屏設計上相對而言更加別具一格。整個首屏都是圍繞著LOGO和品牌名稱來設計的畸冲，左右平衡嫉髓，各兩個鏈接，背景的星河和前景的超大文本嵌套疊加邑闲，構成視覺主體算行。

3.首屏為何重要

首屏對于許多網頁而言是至關重要的組成部分。

用戶是如何同網頁進行互動的苫耸？用戶研究領域的先驅 Nielsen Norman Group 曾經針對這一用戶行為進行了深入的研究州邢，為設計師和可用性設計專家們提供了更好的素材和設計依據。

簡而言之褪子，當人們訪問某個網站的時候量淌，尤其是初次訪問網站的時候，他們通常不會特別仔細的查看所有的內容嫌褪，而是快速的掃視呀枢，找到能夠吸引他們注意力的信息，這些內容就是他們繼續(xù)停留在這個網站上的理由笼痛。通過眼動測試和不同實驗裙秋，他們發(fā)現(xiàn)訪問者的視覺瀏覽模式，可以歸結為幾種典型的模式缨伊。設計師 Steven Bradley 在自己的文章中摘刑，總結了這三種常見的模式：古騰堡式，Z圖模式和F圖模式刻坊。

對于信息結構層次并不那么分明的網頁枷恕，用戶常常會使用古騰堡式的瀏覽模式，用戶大范圍掃視頁面內容谭胚，整個視線路徑是一個大號的Z徐块，其中最開始的兩個視覺駐留點就在頁頭上隶校。

?

?

Z圖模式也不難理解，用戶從上到下蛹锰，視線沿著Z字形來回掃視深胳，用戶會左右快速掃視，視線的起點首先是左上角铜犬，行跨頂部一欄到右上角舞终，然后向下延伸。

?

F圖模式癣猾，或者說是F式布局敛劝，我們就更加熟悉了。在Nielsen Norman Group 的研究當中纷宇，這種閱讀模式最為典型：

①用戶先會沿著水平方向瀏覽夸盟，優(yōu)先瀏覽內容塊的上部，這個時候的眼動構成了字母F 最上面一橫像捶。

②接下來視線會沿著屏幕左側向下垂直掃視上陕，尋找段落中能引起興趣點的內容，當他們發(fā)現(xiàn)引起他們興趣的內容之時拓春，繼續(xù)橫向仔細瀏覽释簿，而通常這些內容對應的視線范圍會比第一次橫向瀏覽的范疇要更小一些，而這個視線軌跡則構成了字母F 中間的一橫硼莽。

③接下來用戶會將視線移到屏幕左側庶溶，繼續(xù)向下瀏覽。

不論用戶是遵循哪種模式來閱讀懂鸵，他們通常都會優(yōu)先掃視頁面的頂部偏螺，從左上角到右上角這一欄的信息。所以匆光，在頁面頂部顯示關鍵的信息是符合網站和用戶雙方的訴求的最優(yōu)策略：讀者可以快速掃視正確的信息套像，而網站顯示的內容如果能夠吸引到他們，則能夠留下用戶殴穴。這就是為什么UI和UX設計師甚至內容策略專家和營銷專家都會傾向于這樣設計凉夯。

在另外一篇關于首屏最佳實踐的文章當中货葬，作者 Bogdan Sandu 提到的一點應該讓每個設計師都牢記：“人們通常只會在短短的幾秒鐘內判斷一個網站的素質采幌，第二印象這種東西是不存在的。一個網站必須足夠搶眼才行震桶，否則就是失敗休傍。”

另外值得考慮的一點在于蹲姐，導航確實可以很好的為用戶呈現(xiàn)網站的基本框架和內容分類磨取，這是網站體驗的一個重要部分人柿。不過許多創(chuàng)意解決方案會調整布局，采用更加激進或者不同的導航設計忙厌。每個網站的設計方案凫岖，都要根據需求和目標受眾的不同來進行調整，這是自然而然的逢净。

4.可讀性和視覺層次

首屏當中哥放，導航、LOGO和標題等元素的字體選擇仔細考量爹土，它們應該和背景構成良好的對比度甥雕，確保可讀性胀茵。用戶最好能夠一目了然地獲取其中的信息社露。

?

在Daily Bugle?magazine 這個電子雜志網站中，Daily Bugle 作為標題居中琼娘，延續(xù)自傳統(tǒng)報紙設計的襯線體貫穿了整個網站的設計峭弟。居中的文字LOGO，分類導航和搜索框平均分布在左右脱拼。

?

The Big Landscape 這個網站在導航的設計上采用了突破柵格的不對稱設計孟害，左邊是LOGO和三個鏈接，為了平衡整個設計挪拟，頂欄右邊是搜索框和一個有顏色填充的按鈕挨务。這種設計不僅兼顧了視覺上的平衡，還讓頁頭的可讀性得到了保證玉组。

另外谎柄，還有一個值得注意的問題，當用戶開始向下滾動翻頁的時候惯雳，首屏頂部的頁頭要如何處理朝巫。有的網頁會傾向于使用懸浮固定的導航，讓用戶隨時可以點擊導航跳轉到其他的地方石景，或者進行搜索劈猿。有的網頁則還是采取傳統(tǒng)的策略，當然也有采用折中的設計潮孽，當用戶滾動到首屏之后揪荣，導航縮小懸浮到頂上，或者變?yōu)椴藛伟粹o往史，降低視覺重量仗颈，保留核心的元素和它們的可交互性。

5.漢堡菜單

首屏設計中椎例，漢堡菜單是近年來非常流行的一個解決方案挨决，將導航鏈接都隱藏在漢堡按鈕菜單之后请祖。

?

漢堡按鈕通常放置在首屏，現(xiàn)在已經成為一個經典的交互元素脖祈。目前的用戶也已經熟悉了它的存在肆捕，無需額外的解釋，他們就知道在漢堡菜單中尋找鏈接和其他選項盖高。漢堡菜單讓整個頁面更加簡約福压，釋放了空間，節(jié)省了布局元素或舞，在不同的設備上的顯示也更加統(tǒng)一荆姆。

?

?

Ice Website 這個網站的概念設計就展示了漢堡菜單的一種常見用法。由于網站包含了大量的頁面映凳，設計師非常貼心的將漢堡按鈕置于頁面的左上角胆筒，當用戶點擊它的時候，會彈出導航選項诈豌。這樣的設計極大程度的節(jié)省了頁面空間仆救，讓整個設計都顯得足夠簡約，也為頁頭省出了空間矫渔。在這個首屏當中颊亮，頁頭左側是品牌LOGO和介紹销凑，右側是社交媒體帳號鏈接，視覺設計也和整個頁面保持了一致。中間的留白讓整個頁頭保持了視覺上的平衡溜宽。

?

?

Slopes 這個網站采用了時下流行的側邊欄設計元素老厌，不過設計師沒有將導航放置到側邊欄上边翼，僅僅是保留了品牌LOGO腮敌，只是借由側邊欄制造出了這種非對稱的首屏布局。頁頭右側是四個常用的鏈接石咬，而左側是漢堡菜單揩悄，更多的鏈接被隱藏在漢堡菜單當中，這樣一來鬼悠，交互的層次就出來了删性。

雖然現(xiàn)在漢堡菜單的設計還存在著一些爭議，但是它們仍然被廣泛地運用著焕窝。

6.懸浮固定導航

懸浮式的導航欄也是時下流行的一個趨勢蹬挺，它為用戶提供了持續(xù)的可供交互的導航服務，這對于越來越長的頁面設計而言袜啃，是個相當合理的補充汗侵。

?

這個 Structure Blog 的概念設計就采用了懸浮的頁頭，導航則主要是采用的漢堡菜單群发。這使得品牌更加突出晰韵，而整體設計則更加簡約。

?

?

Photography Workshops 這個網站的首屏設計就非常的獨特熟妓。導航菜單開始是在首屏的底部雪猪，隨著滾動，它會到頁面的頂端并且懸浮固定存在起愈。導航菜單的右側是關鍵鏈接只恨，而非關鍵的更多選擇則隱藏在最左側的漢堡菜單中。

7.雙層菜單

導航還可以設計為雙層的抬虽，已經有不少網站有了這樣的嘗試官觅。

?

Bakery 這個網站就使用了雙層的導航設計，上層導航中承載的是LOGO和社交媒體帳號阐污、搜索和購物車以及漢堡菜單休涤，而第二層導航則是交互的核心區(qū)域：產品目錄、銷售地點笛辟、新聞和特別優(yōu)惠等功氨。整個設計視覺層次清晰，為整個用戶體驗打足了基礎手幢。

結語

對于網頁而言捷凄，首屏是關鍵。頁頭的導航和首圖围来、文案共同組成了這個關鍵的區(qū)域跺涤，多種因素共同作用于用戶，用心的設計才能讓用戶一見鐘情监透，不是么钦铁？