網(wang)頁首屏的(de)(de)重要性是不言而(er)喻的(de)(de)，用(yong)戶打開網(wang)頁的(de)(de)第(di)(di)一眼看到(dao)的(de)(de)就是首屏中的(de)(de)信(xin)息，它(ta)是網(wang)頁的(de)(de)門(men)面(mian)，顏值擔當，也是給予(yu)用(yong)戶第(di)(di)一印(yin)象(xiang)(xiang)的(de)(de)核心(xin)部(bu)分，也是品(pin)牌形象(xiang)(xiang)呈(cheng)現的(de)(de)窗口。

      值(zhi)得一(yi)提(ti)的(de)(de)(de)是(shi)，網頁(ye)(ye)首(shou)(shou)頁(ye)(ye)的(de)(de)(de)首(shou)(shou)屏當(dang)然是(shi)要好(hao)好(hao)設計的(de)(de)(de)，而其他頁(ye)(ye)面的(de)(de)(de)首(shou)(shou)屏也不(bu)能忽略。畢竟(jing)相當(dang)一(yi)部分(fen)的(de)(de)(de)用戶并不(bu)是(shi)從首(shou)(shou)頁(ye)(ye)入(ru)口進(jin)入(ru)你的(de)(de)(de)網頁(ye)(ye)的(de)(de)(de)。今(jin)天分(fen)享一(yi)下首(shou)(shou)屏設計的(de)(de)(de)7個技巧，它們(men)并不(bu)復雜，卻(que)能幫你的(de)(de)(de)首(shou)(shou)圖設計更上一(yi)層樓。

1、使用驚艷的圖片(pian)

      相當(dang)一部分的(de)網頁首屏(ping)是(shi)(shi)使用圖片作為視(shi)(shi)覺傳達的(de)主(zhu)體，而無(wu)論是(shi)(shi)選擇圖片、視(shi)(shi)頻、動畫(hua)還是(shi)(shi)其他(ta)的(de)視(shi)(shi)覺化的(de)元素(su)，每個Banner或者說(shuo)帶有標題的(de)內容(rong)區塊最好是(shi)(shi)帶有漂亮、驚艷的(de)視(shi)(shi)覺化元素(su)作為支撐(cheng)。當(dang)然，最常用的(de)還是(shi)(shi)圖片。

      首圖在(zai)首屏中的重要性無疑是巨大(da)的，它不僅要漂(piao)亮，還要同網站內容深入地結合搭(da)配(pei)起(qi)來。所以，它的設(she)計還可以更(geng)加深入一些。

單(dan)獨的(de)圖片表現力是有限的(de)，通過排版設計，將它(ta)同(tong)其他的(de)元素結(jie)合起(qi)來(lai)使用會有不錯的(de)效果(guo)：

      文字與標題

      LOGO 和品牌標識

      按鈕和行(xing)為召喚語句

      導航元(yuan)素(su)

      搜(sou)索框

     ; 在進行(xing)排版設計的(de)時候，應該注(zhu)意幾點：銳(rui)利搞(gao)分辨率(lv)的(de)圖(tu)片和(he)(he)標題文本之間應該保持良好的(de)對(dui)比度；人們希(xi)望看到(dao)臉和(he)(he)表情，這會更容易傳遞情緒和(he)(he)感情；注(zhu)意引導用戶和(he)(he)網站首(shou)屏進行(xing)互動。

2、強化導航元素的運(yun)用

      在(zai)首屏(ping)當中，元素與元素之間是相互配合構成整(zheng)(zheng)體設計(ji)(ji)的(de)(de)(de)，而(er)導航(hang)是首屏(ping)當中無(wu)法忽略的(de)(de)(de)一個重(zhong)要(yao)組成部分，無(wu)論你喜歡的(de)(de)(de)是完整(zheng)(zheng)展(zhan)開的(de)(de)(de)導航(hang)，還是為了(le)干凈的(de)(de)(de)布(bu)局而(er)將導航(hang)隱藏在(zai)漢堡菜單中，導航(hang)的(de)(de)(de)設計(ji)(ji)應該和首屏(ping)的(de)(de)(de)整(zheng)(zheng)體設計(ji)(ji)合而(er)唯一的(de)(de)(de)。

       導航(hang)的目的是將用(yong)(yong)戶引導到他們想去(qu)的不同頁面，所以，推薦使用(yong)(yong)置(zhi)頂懸浮式導航(hang)，這樣(yang)用(yong)(yong)戶不論瀏覽到頁面哪個地方都(dou)能夠輕松跳轉。

      導航元(yuan)素(su)(su)在(zai)首(shou)屏(ping)當中，和其(qi)他的(de)(de)元(yuan)素(su)(su)組合(he)使用的(de)(de)時候，它(ta)們會和其(qi)他的(de)(de)元(yuan)素(su)(su)構(gou)成對比，還能形成層(ceng)(ceng)次(ci)(ci)感，而這種(zhong)層(ceng)(ceng)次(ci)(ci)感的(de)(de)構(gou)建和整個(ge)設計方案息(xi)息(xi)相關，應該(gai)根據具(ju)體情況(kuang)具(ju)體安排(pai)。

3、清晰的信息傳達方式(shi)

      視覺傳達是一(yi)項(xiang)系(xi)統工(gong)程，單(dan)靠一(yi)張圖片(pian)是不夠的(de)(de)。所以，你(ni)需要(yao)系(xi)統的(de)(de)考慮整個首屏的(de)(de)信息傳達：

      首屏是(shi)否告訴了用戶可(ke)以(yi)做什么，或(huo)者用戶能(neng)從中獲得什么內容？

      首屏是否(fou)向用戶傳達了唯一的(de)(de)(de)、清(qing)晰的(de)(de)(de)、易于(yu)理解的(de)(de)(de)信息？

      首屏是否為用(yong)戶提供了直觀可(ke)交(jiao)互的(de)控件（按鈕、輸入框、跳(tiao)轉鏈(lian)接等）？

      用戶能否從首屏跳(tiao)轉(zhuan)到(dao)下一(yi)個頁面/步驟？

      這些問題能夠幫(bang)你梳(shu)理出整(zheng)個首(shou)屏(ping)的細節設計思路。

4、試(shi)試(shi)超大(da)字(zi)體元素

      想要讓首屏更加醒目，超大的字(zi)體總是(shi)最有效的辦法。即使文字(zi)內(nei)容很簡(jian)單(dan)，當用(yong)戶打開首屏的時候也會一(yi)眼就(jiu)注(zhu)意到它(ta)們，在閱讀其他內(nei)容之前，只會注(zhu)意這些內(nei)容。

      盡管字體(ti)和排版千變萬(wan)化，但是在(zai)字體(ti)的(de)(de)選取和首(shou)屏設計上盡量遵循下面的(de)(de)的(de)(de)兩(liang)個規則來進行：

      首(shou)頁首(shou)屏上的(de)展示性的(de)內容采用(yong)更(geng)加引人注(zhu)意的(de)字體，和(he)其(qi)他地方截(jie)然(ran)不同

      其(qi)他(ta)頁面的正文(wen)和(he)主要文(wen)本(ben)部分，選用統一(yi)的、簡約(yue)耐看(kan)的字(zi)體，甚(shen)至整體排版框架也保(bao)持一(yi)致

5、遵循基本的閱(yue)讀模式

      用(yong)戶研(yan)(yan)究(jiu)(jiu)領(ling)域的先驅 Nielsen Norman Group 曾經針對這一用(yong)戶行為(wei)進行了(le)深入的研(yan)(yan)究(jiu)(jiu)，為(wei)設計師(shi)和可用(yong)性設計專家們(men)提供了(le)更好的素材和設計依據。

      簡(jian)而言之，當(dang)人(ren)們(men)(men)訪問某(mou)個網(wang)站(zhan)的(de)(de)(de)時候，尤其是(shi)初次訪問網(wang)站(zhan)的(de)(de)(de)時候，他們(men)(men)通(tong)常(chang)(chang)不會特別仔細的(de)(de)(de)查看(kan)所有(you)的(de)(de)(de)內容，而是(shi)快(kuai)速的(de)(de)(de)掃(sao)視(shi)，找到能夠吸引他們(men)(men)注意力的(de)(de)(de)信息(xi)，這(zhe)(zhe)些內容就是(shi)他們(men)(men)繼(ji)續停留(liu)在這(zhe)(zhe)個網(wang)站(zhan)上的(de)(de)(de)理由。通(tong)過眼動測試(shi)和不同實(shi)驗(yan)，他們(men)(men)發現訪問者(zhe)的(de)(de)(de)視(shi)覺瀏覽模式(shi)，可(ke)以歸結為幾種典型(xing)的(de)(de)(de)模式(shi)。設計師 Steven Bradley 在自(zi)己的(de)(de)(de)文(wen)章中(zhong)，總結了這(zhe)(zhe)三種常(chang)(chang)見的(de)(de)(de)模式(shi)：古騰堡式(shi)，Z圖模式(shi)和F圖模式(shi)。

      古騰(teng)堡式(shi)(shi)：對于(yu)信(xin)息結構層次并不那(nei)么分(fen)明的(de)網頁(ye)，用(yong)(yong)戶常常會使用(yong)(yong)古騰(teng)堡式(shi)(shi)的(de)瀏覽模式(shi)(shi)，用(yong)(yong)戶大范圍掃視頁(ye)面內容，整個視線(xian)路徑是一個大號的(de)Z，其中最開始的(de)兩個視覺駐留(liu)點就在頁(ye)頭上。

      Z圖(tu)模式也(ye)不(bu)難理解(jie)，用戶從(cong)上(shang)到(dao)下(xia)，視(shi)(shi)線沿著Z字(zi)形(xing)來(lai)回掃(sao)視(shi)(shi)，用戶會左右(you)快速掃(sao)視(shi)(shi)，視(shi)(shi)線的起點(dian)首先(xian)是左上(shang)角，行(xing)跨(kua)頂部(bu)一欄到(dao)右(you)上(shang)角，然后向(xiang)下(xia)延(yan)伸。

      F圖(tu)模(mo)(mo)式，或者(zhe)說(shuo)是F式布(bu)局，我們就更加熟(shu)悉了。在Nielsen Norman Group 的研究當(dang)中，這種閱讀(du)模(mo)(mo)式最為典(dian)型：

      用戶(hu)先(xian)會沿著水平方向瀏(liu)覽，優先(xian)瀏(liu)覽內容(rong)塊的(de)上(shang)部，這個時候(hou)的(de)眼動(dong)構(gou)成了字母(mu)F 最上(shang)面(mian)一橫。

      接下來視(shi)線會沿著屏(ping)幕左側向下垂直掃(sao)視(shi)，尋找段落中能引起(qi)興趣(qu)(qu)點的(de)內容，當(dang)他們發現引起(qi)他們興趣(qu)(qu)的(de)內容之(zhi)時，繼續橫向仔(zi)細瀏覽，而通常(chang)這(zhe)些內容對應的(de)視(shi)線范圍會比第一次(ci)橫向瀏覽的(de)范疇要(yao)更小一些，而這(zhe)個視(shi)線軌(gui)跡(ji)則構成了字母F 中間的(de)一橫。

      接下(xia)來用(yong)戶會將(jiang)視線移到(dao)屏幕左側，繼續向(xiang)下(xia)瀏覽。

      所以(yi)，將最關鍵的元素置于(yu)用戶的瀏覽路徑上，讓用戶可以(yi)更輕松地消(xiao)化(hua)信息(xi)，也(ye)能最高效(xiao)地執(zhi)行交互。

6、引(yin)入可點擊的元素

      你的網(wang)站首屏能夠吸引用戶去操作么？它是否包含有可(ke)點擊的元素？

      想要引(yin)導用(yong)戶(hu)，首屏幾乎是完美的存(cun)在。在這里，你可(ke)以使用(yong)行(xing)為召喚(huan)按(an)鈕來引(yin)導用(yong)戶(hu)點擊跳轉到特定的地方(fang)，可(ke)以用(yong)來吸引(yin)用(yong)戶(hu)郵(you)件訂閱，但是無論如何，盡量讓整個(ge)首屏集中(zhong)執行(xing)特定的任(ren)務，而(er)不要因為過多(duo)的可(ke)操作(zuo)選項讓用(yong)戶(hu)分心(xin)。

      不知道(dao)想要(yao)在首屏當中包含(han)哪些元素(su)？選擇(ze)你最希(xi)望用戶執行的操作，所有的元素(su)都圍繞(rao)著它來(lai)設(she)計。 

7、簡單(dan)的(de)圖層設(she)計

      想要將上面提及的(de)技巧都融會貫(guan)通、呈現在(zai)你(ni)的(de)網頁首圖當(dang)中？那(nei)么(me)你(ni)需要讓所有的(de)元素高(gao)效、合理地整(zheng)合在(zai)一起，用簡(jian)單的(de)幾個(ge)分層，將它們收納到一起。

      分(fen)層(ceng)對象能(neng)夠幫你搞定這個問題(ti)。在確定需要呈(cheng)現(xian)哪些元素以(yi)及各個部分(fen)的功(gong)(gong)能(neng)之后，將不同(tong)功(gong)(gong)能(neng)的元素用(yong)不同(tong)的分(fen)層(ceng)來承載(zai)。分(fen)層(ceng)盡(jin)量(liang)簡單，這樣不僅更(geng)(geng)加易于控(kong)制，也是讓設計(ji)更(geng)(geng)加專注于核心的視(shi)覺和功(gong)(gong)能(neng)。

      多(duo)嘗試(shi)幾次，找到真正高效的搭配，讓用(yong)戶打開首屏的時候真正被驚(jing)艷到。

結語

      首屏的(de)設計往往處于整個設計流(liu)程當(dang)中靠前的(de)位置，隨后(hou)在設計其他子(zi)頁(ye)面(mian)的(de)時(shi)候，設計師難免(mian)會松懈。其實，這些子(zi)頁(ye)面(mian)和首屏是同(tong)樣重要的(de)，兩者要協調統一，才能讓用(yong)戶打(da)開網頁(ye)的(de)時(shi)候始(shi)終保持(chi)一致的(de)體驗。