是(shi)(shi)時候讓(rang)我們(men)來(lai)討(tao)論(lun)一(yi)(yi)(yi)下關于網頁(ye)設(she)計的(de)(de)中的(de)(de)首屏頁(ye)面(mian)的(de)(de)一(yi)(yi)(yi)些設(she)計思路了。首屏頁(ye)面(mian)是(shi)(shi)用戶初步瀏覽(lan)你(ni)的(de)(de)網站所接觸的(de)(de)“第一(yi)(yi)(yi)視覺(jue)”，它可以說(shuo)是(shi)(shi)你(ni)的(de)(de)整體網站設(she)計的(de)(de)門面(mian)工(gong)程了。無論(lun)用戶是(shi)(shi)從桌面(mian)設(she)備(bei)，平板電(dian)腦(nao)還是(shi)(shi)移動(dong)設(she)備(bei)訪(fang)問你(ni)的(de)(de)網站，所有內容都是(shi)(shi)在這個頁(ye)面(mian)上會被集(ji)中體現(xian)。

所(suo)以(yi)，你在這個(ge)“第一屏幕”中(zhong)包含(han)的(de)信息是網站設計(ji)成功的(de)關(guan)(guan)鍵。該設計(ji)關(guan)(guan)系到你的(de)網頁設計(ji)是吸(xi)引(yin)用戶(hu)停留并(bing)做出(chu)你預期的(de)動作，或迫使他們(men)離開(kai)你的(de)網站。用戶(hu)開(kai)始滾動瀏覽之前需要在屏幕上展示(shi)什么(me)呢？讓我們(men)來看看。

1.創建一個獨特的首屏

所有(you)的網(wang)站都是(shi)開(kai)始(shi)于第一印象的。所以，你需要創(chuang)建一個有(you)影響(xiang)力，能夠在第一眼就吸引用戶(hu)的網(wang)站。

首先(xian)，你可以試著(zhu)最大(da)化你的(de)視覺(jue)體驗——通過大(da)尺寸且高(gao)清的(de)照片，視頻或插(cha)圖(tu)，可以有(you)效地(di)吸引觀眾。你所選用的(de)圖(tu)像應該是(shi)人們(men)不想停止觀看的(de)，它(ta)應該完全具備你獨有(you)的(de)元素，以便使它(ta)區別(bie)于任何(he)其他的(de)網站設計。

你(ni)可以將圖像與幾個關鍵詞相結合(he)，告訴用戶他(ta)們是為(wei)了什(shen)么來到這里以及(ji)你(ni)的(de)網(wang)站可以提供給(gei)他(ta)們什(shen)么內容(rong)。

這是你(ni)將它們全部放在一(yi)起所應該考(kao)慮的(de)事情(qing)：首(shou)屏的(de)大小尺寸(cun)必須恰好(hao)適合所有(you)終端(duan)設(she)備的(de)第一(yi)個屏幕。所以你(ni)需要對內容進行響應式縮放，以便(bian)使整個圖(tu)像和所有(you)相關的(de)內容文本(ben)在不滾動的(de)情(qing)況(kuang)下依(yi)然(ran)能在首(shou)屏清晰可見。

2.導航應直觀

將導航放置在邊欄或屏(ping)幕頂部的日(ri)子一去不(bu)復返了。隱藏和(he)彈出的導航樣式(shi)目前來看已經成為大勢(shi)，也被用戶們縮(suo)認可和(he)接(jie)受(部分歸因于移動(dong)設(she)備)，所有網站設(she)計都是可以接(jie)受這種樣式(shi)的。

但(dan)不要完全隱(yin)藏(zang)導(dao)(dao)(dao)航(hang)或使其變得難(nan)以(yi)使用。不管你(ni)對漢堡風格的(de)導(dao)(dao)(dao)航(hang)喜歡與否，你(ni)已經不能(neng)否認這種樣式導(dao)(dao)(dao)航(hang)已經成為隱(yin)藏(zang)導(dao)(dao)(dao)航(hang)中最主(zhu)要的(de)角色。用戶已經學會了使用它(ta)，并且可以(yi)輕(qing)松地在頁(ye)面上找到他們(men)想(xiang)要的(de)東西。

你需要(yao)確(que)(que)保將導航收(shou)起的(de)圖標放置在(zai)用(yong)(yong)戶(hu)容易找到(dao)的(de)位置，你可(ke)以(yi)使其(qi)比典型圖標更(geng)大以(yi)增強他(ta)的(de)存(cun)在(zai)感(當然，不要(yao)做(zuo)(zuo)太過了)，并(bing)確(que)(que)保導航功能完全可(ke)用(yong)(yong)。在(zai)上面Uve的(de)網頁設計(ji)中(zhong)，它就(jiu)做(zuo)(zuo)了一個(ge)優秀的(de)示范。一個(ge)突(tu)出的(de)漢堡包菜單(dan)圖標，可(ke)以(yi)擴(kuo)展到(dao)全屏菜單(dan)選項列表(biao)。最重要(yao)的(de)是，用(yong)(yong)戶(hu)不必猜測該如何使用(yong)(yong)它。

3.創建一個關聯點

當(dang)你在你的(de)網(wang)頁設(she)計(ji)工(gong)作中思考應該如何設(she)計(ji)頁面的(de)時候，比如首屏，最重要(yao)的(de)是(shi)創建單(dan)個(ge)焦點或實用(yong)(yong)消息。用(yong)(yong)戶有意或偶然地(di)訪問了你的(de)網(wang)站(zhan)，他們(men)最先需要(yao)的(de)是(shi)清(qing)楚這個(ge)網(wang)站(zhan)到底(di)是(shi)做什么的(de)。

單一(yi)的(de)視覺概念(nian)可以幫助用(yong)戶聯(lian)想(或關聯(lian))出(chu)你(ni)(ni)是(shi)誰以及你(ni)(ni)局提示在(zai)做什(shen)么。這可以通過(guo)多種不同方式的(de)圖像或文(wen)本來實現。

雖然(ran)復雜的(de)(de)(de)設計風(feng)格(ge)也(ye)可以達(da)到這種(zhong)效(xiao)果，但是(shi)(shi)何不開始(shi)思考簡單的(de)(de)(de)方式(shi)呢。極(ji)簡主義既是(shi)(shi)時尚的(de)(de)(de)，也(ye)是(shi)(shi)傳達(da)信息的(de)(de)(de)有效(xiao)途徑。

4.有目的的使用文本元素

想想首屏(ping)作為(wei)一本書封(feng)面，而不是(shi)小(xiao)說的第一頁。

它應該包括足(zu)夠的(de)(de)(de)(de)文本信息來幫(bang)助用戶參與到里面(mian)。一(yi)(yi)個(ge)(ge)簡單的(de)(de)(de)(de)標題和小的(de)(de)(de)(de)文本塊通常就足(zu)以做到這一(yi)(yi)點。雖然這個(ge)(ge)內(nei)(nei)容很少，但(dan)這可能是一(yi)(yi)個(ge)(ge)需(xu)要大量工作的(de)(de)(de)(de)過程。寫作需(xu)要簡潔，對于梳理出(chu)一(yi)(yi)套清(qing)晰的(de)(de)(de)(de)文本內(nei)(nei)容可能是具有(you)挑戰性的(de)(de)(de)(de)。

以你(ni)的(de)網站(zhan)目標為準則。為什么用戶在這里?你(ni)想要他們(men)做些什么?使用文本創建(jian)該關聯(lian)性并開始(shi)講述你(ni)的(de)故事(shi)。請記住向用戶展示你(ni)的(de)網站(zhan)相對于其(qi)他的(de)同(tong)類網站(zhan)具有哪些優勢或好(hao)處。

5.給用戶一些要做的事情

網(wang)站(zhan)設(she)計(ji)提供獨特視(shi)覺體驗(yan)的(de)(de)同時(shi)，也需(xu)要提供一個(ge)理由給用(yong)戶(hu)，使他們能夠盡可(ke)能久的(de)(de)在(zai)你的(de)(de)網(wang)站(zhan)上(shang)停(ting)留并瀏覽信息。所以，當你在(zai)考(kao)慮你的(de)(de)網(wang)站(zhan)設(she)計(ji)應該(gai)在(zai)第一屏加入什么元素時(shi)，切記(ji)要讓用(yong)戶(hu)可(ke)以參(can)與到里面。

行動可以包括：

• 填寫表單，例如提供電子郵件地址;
  
• 設置互動游戲;
  
• 社交媒體上分享;
  
• 為了銷售而展示流動商品;
  
• 評論或參與內容;
  
• 觀看電影或輪播圖。

你(ni)的首(shou)屏不僅(jin)僅(jin)只(zhi)是需要包含其中的一個操作(zuo)，同時應該完全清楚你(ni)的操作(zuo)是什(shen)么以及用(yong)戶應該做(zuo)什(shen)么。 你(ni)的網頁設計不能(neng)讓他們感到是被迫做(zuo)的。

在(zai)上面 The Big Short movie 的(de)(de)網站中(zhong)，為用(yong)戶提(ti)供了大量的(de)(de)信息。視頻剪(jian)輯足(zu)以使你(ni)(ni)對(dui)電影感(gan)興趣，并且有一(yi)個按(an)(an)鈕來(lai)觀看預告片。你(ni)(ni)對(dui)這個真實(shi)的(de)(de)故事感(gan)興趣嗎?同時，頁面上還具備一(yi)個按(an)(an)鈕來(lai)于(yu)專家會(hui)面。你(ni)(ni)有沒有看過它，想分享你(ni)(ni)的(de)(de)想法?這有社交媒(mei)體按(an)(an)鈕可以馬(ma)上幫你(ni)(ni)做到這一(yi)點(dian)。從一(yi)開始就有很(hen)多方法與網站進行互動(dong)。

6.為品牌創造空間

如果你(ni)不知道自己的(de)網站設計是為那(nei)一類用戶(hu)準備的(de)，那(nei)么這個網站可(ke)能(neng)不會如你(ni)預期的(de)那(nei)么有作用。基于這種考慮，你(ni)的(de)首屏應該至(zhi)少包括一個標志或能(neng)夠關聯到你(ni)網站背(bei)后的(de)品牌形(xing)象。

品(pin)牌或公司(si)名稱可(ke)以產生很強的(de)關聯(lian)性(xing)和可(ke)信度。這使得(de)網(wang)站看起來更(geng)“真實”(這對(dui)于包含任何類型的(de)財務或個人交易(yi)的(de)網(wang)站尤其(qi)重要，因為用戶關心具體是誰獲(huo)得(de)了他們(men)的(de)信息)。

一些比(bi)較(jiao)知(zhi)(zhi)名的(de)(de)品(pin)牌可(ke)以擺(bai)脫(tuo)以上的(de)(de)束縛，因為(wei)許多人可(ke)能已(yi)經(jing)知(zhi)(zhi)道它們。而對于(yu)較(jiao)小的(de)(de)品(pin)牌來(lai)說，我覺得是(shi)始終(zhong)有必要的(de)(de)，清(qing)楚地顯示(shi)標志和(he)風格對于(yu)用戶關聯和(he)信任的(de)(de)你(ni)的(de)(de)網(wang)站身份很(hen)重要。

7.減少分心

在(zai)首屏的網頁設(she)計(ji)中(zhong)，不要(yao)給用戶(hu)太多(duo)可看(kan)的或過(guo)多(duo)需要(yao)處理的內容(rong)。它應該足夠(gou)簡單，精簡以及集中(zhong)。

如(ru)果你有(you)很多內容，請在多個屏(ping)幕上有(you)條(tiao)理(li)的逐步展示(這可以促進用戶的參與感，并(bing)防(fang)止(zhi)混亂或混亂的網站結構)。

Melanie DaVeid 做了(le)一(yi)個(ge)(ge)優秀的(de)示范，通(tong)過一(yi)個(ge)(ge)簡單的(de)視覺呈現，使你對它的(de)其他工作(zuo)感興(xing)趣。通(tong)過動畫(hua)，顏(yan)色(se)和(he)特殊(shu)的(de)文字組合，在(zai)首屏(ping)就(jiu)為(wei)用(yong)戶創造了(le)獨(du)特的(de)感覺。

總結

當(dang)分(fen)屏(ping)式設(she)(she)計(ji)回歸(gui)時尚，我們在實際的網頁設(she)(she)計(ji)工作中(zhong)對(dui)于這一方向的設(she)(she)計(ji)已經發生(sheng)了(le)一些變化。最(zui)好的網站設(she)(she)計(ji)使(shi)用(yong)響應式設(she)(she)計(ji)和滾動功能(如視差)來為用(yong)戶創建基于屏(ping)幕的體驗。

首屏(ping)(ping)作(zuo)為你的“門戶”，可(ke)以說(shuo)是最重要的一(yi)屏(ping)(ping)內(nei)容了。確(que)保(bao)創建一(yi)個有趣(qu)，可(ke)讀性強(qiang)以及擁有不同于(yu)其他網站(zhan)視覺的效果，將用戶帶入你的網站(zhan)。