電子商務(wù)網(wǎng)站設(shè)計(jì)分析系列之二：首屏設(shè)計(jì)

屏（above the fold）是指不動(dòng)彈web網(wǎng)頁(yè)屏幕就能被用戶看到的畫面。

世界聞名的頁(yè)面易用性專家尼爾森曾經(jīng)有演說(shuō)顯現(xiàn)，首屏以上的重視度為80.3%，首屏以下的重視度僅有19.7%。這兩個(gè)數(shù)據(jù)足以表明，首屏對(duì)每一個(gè)需要轉(zhuǎn)化率的網(wǎng)站都很重要，尤其是電商網(wǎng)站。
 

在電子商務(wù)網(wǎng)站中，用戶最急切需要獲得的不過(guò)乎兩點(diǎn)：吸惹人的商品或店鋪，以及網(wǎng)站能夠給予他的信任感。信任需要積累，因此，各類宣傳推廣信息就成了電商首屏展示的不二之選。

一個(gè)能惹人駐足逗留的首屏必定會(huì)為網(wǎng)站帶來(lái)更多的客戶和利益，筆者會(huì)通知你怎么策劃規(guī)劃出一個(gè)美觀好用的電商首屏。

1.確定可視范圍

 根據(jù)統(tǒng)計(jì)講演顯示，2014年。以此為例，瀏覽器邊框?qū)挾缺榧霸?1左右，所以頁(yè)面首屏寬度在無(wú)攪擾要素的情況下可以確定為1345；而屏幕總高度為768，除去任務(wù)欄高度40、店鋪?lái)?yè)頭106、瀏覽器（工具欄、邊框等）160和方位工具欄30，開(kāi)始預(yù)算首屏高度控制在432較為合適。因此我們可以得出，最契合時(shí)下趨勢(shì)的首屏規(guī)劃寬高基本范圍是1345*432，重要的內(nèi)容能夠盡量放在這個(gè)區(qū)間里。
 

2.展示吸引用戶的信息

 首頁(yè)的首屏位置在整個(gè)網(wǎng)站中都稱得上寸土寸金，正由于如斯，此處展示的文字應(yīng)該短小精悍，盡可能用起碼的篇幅就把信息表達(dá)清晰。標(biāo)題性文字更應(yīng)該把商家的貿(mào)易訴求清楚直接的表達(dá)出來(lái)，在這類文字的策劃上需留意符合網(wǎng)站的整體風(fēng)格。

3.視覺(jué)焦點(diǎn)要顯眼

大多數(shù)用戶的瀏覽習(xí)慣是走馬觀花式的，以如今海內(nèi)電商網(wǎng)站普遍的布局來(lái)看，用戶在第一屏中的視覺(jué)焦點(diǎn)基本上以Banner和導(dǎo)航為主。因此，其中所表現(xiàn)的不管是文字仍是大圖，都應(yīng)該讓用戶一眼看清內(nèi)容，減少其思索時(shí)間。設(shè)計(jì)師在設(shè)計(jì)時(shí)可以用“去色”的方法來(lái)檢修實(shí)際效果。

4.圖片讓內(nèi)容更利于理解

要讓用戶在短短的幾秒鐘之內(nèi)就了解網(wǎng)站或商家發(fā)布的一系列信息，單憑簡(jiǎn)短的文字是不夠的，還需借力于圖片的匡助。圖片的使用能從側(cè)面蘊(yùn)藉的襯托主題，因此，在圖片素材的選擇上應(yīng)該保證對(duì)主旨的表達(dá)有匡助，并且在視覺(jué)上保持風(fēng)格一致。

5.用風(fēng)格夸大主題

 網(wǎng)站首屏的風(fēng)格是根據(jù)目的來(lái)決定的，在設(shè)計(jì)之前，必需要了解這個(gè)首屏畢竟在整個(gè)網(wǎng)站中會(huì)起到什么樣的作用。一般來(lái)說(shuō)，電子商務(wù)網(wǎng)站的首頁(yè)首屏?xí)�用�?lái)進(jìn)行推廣宣傳，好比單品推廣、店鋪推廣和流動(dòng)宣傳等。
 

以單品推廣作為主題的首屏一般會(huì)用賣點(diǎn)組成案牘，再配上簡(jiǎn)樸的圖片。

店鋪的推廣實(shí)在并不需要用很大的篇幅來(lái)詳細(xì)說(shuō)明，只要將一些用戶在意的樞紐點(diǎn)表現(xiàn)出來(lái)即可，例如優(yōu)惠信息，流動(dòng)形式范圍等。

一項(xiàng)流動(dòng)的宣傳很難用簡(jiǎn)樸的案牘在首屏中描述清晰，所以要盡量用有沖擊力的字詞來(lái)吸引用戶點(diǎn)擊到詳情頁(yè)。

6.鎖定用戶的視覺(jué)重點(diǎn)

當(dāng)用戶對(duì)網(wǎng)站還不太認(rèn)識(shí)的時(shí)候，進(jìn)入首頁(yè)必定會(huì)一頭霧水，此時(shí)，給予用戶視覺(jué)上的引導(dǎo)變得格外重要。引導(dǎo)的方法多種多樣，好比醒目的大字或圖片，吸惹人的標(biāo)題、或是條理清楚整體布局等。所謂引導(dǎo)，并不只是代表讓顧客購(gòu)買商品，更意味著讓用戶點(diǎn)擊進(jìn)入其他頁(yè)面，發(fā)生更多的消費(fèi)。

7.動(dòng)畫招引用戶視野

在網(wǎng)站用戶體驗(yàn)比較流暢的基礎(chǔ)上，在首屏中可以適當(dāng)?shù)募尤胍恍┦髽?biāo)互動(dòng)效果，或是Flash動(dòng)畫效果會(huì)讓頁(yè)面看起來(lái)更加生動(dòng)有趣，這種做法也能增加一定數(shù)目的點(diǎn)擊，并且吸引用戶的留意力。但這些效果只能作為點(diǎn)綴，大面積的使用反而會(huì)適得其反。

8.契合視覺(jué)習(xí)氣的圖文混排

大片單一的文字或圖像會(huì)讓用戶發(fā)生厭倦感，而圖文混排很好的彌補(bǔ)了這一點(diǎn)。圖文混排的方式有良多，比如顏色上的比照、文字或圖像的擴(kuò)大等等，在規(guī)劃上盡量做到錯(cuò)落有致，讓用戶的視野順利的轉(zhuǎn)移。不管用哪一種形式，都必需確保的是主要內(nèi)容的可讀性。

總結(jié)：

筆者以為，首屏是吸引用戶至關(guān)重要的通道，良多網(wǎng)站由于對(duì)首屏的忽視，從而產(chǎn)生了一些用戶體驗(yàn)上的題目。電商網(wǎng)站比擬較普通的官方網(wǎng)站在性質(zhì)上更特殊一些，電商首屏應(yīng)該帶著商家的目的性去迎適用戶的常規(guī)使用習(xí)慣，而不是漫無(wú)目的地把首屏變成布告欄。

規(guī)劃師在做一個(gè)規(guī)劃項(xiàng)目之前，無(wú)妨多從用戶的視點(diǎn)思索，也許會(huì)有意想不到的收成。