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

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

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

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

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

1.確定可視范圍

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

2.展示吸引用戶的信息

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

3.視覺焦點要顯眼

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

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

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

5.用風格夸大主題

 網(wǎng)站首屏的風格是根據(jù)目的來決定的，在設計之前，必需要了解這個首屏畢竟在整個網(wǎng)站中會起到什么樣的作用。一般來說，電子商務網(wǎng)站的首頁首屏會用來進行推廣宣傳，好比單品推廣、店鋪推廣和流動宣傳等。
 

以單品推廣作為主題的首屏一般會用賣點組成案牘，再配上簡樸的圖片。

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

一項流動的宣傳很難用簡樸的案牘在首屏中描述清晰，所以要盡量用有沖擊力的字詞來吸引用戶點擊到詳情頁。

6.鎖定用戶的視覺重點

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

7.動畫招引用戶視野

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

8.契合視覺習氣的圖文混排

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

總結：

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

規(guī)劃師在做一個規(guī)劃項目之前，無妨多從用戶的視點思索，也許會有意想不到的收成。