電子商務網站設計分析系列之二：首屏設計

　　屏(above the fold)是指不滾動web網頁螢幕就能被使用者看到的畫面。

　　世界著名的網頁易用性專家尼爾森曾經有報告顯示，首屏以上的關注度為80.3%，首屏以下的關注度僅有19.7%。這兩個資料足以表明，首屏對每一個需要轉化率的網站都很重要，尤其是電商網站。

　　相關閱讀：電子商務網站設計分析系列之一：首頁導航

　　在電子商務網站中，使用者最急切需要獲得的不外乎兩點：迷人的商品或店鋪，以及網站能夠給予他的信任感。信任需要積累，因此，各類宣傳推廣資訊就成了電商首屏展示的不二之選。

　　一個能引人駐足停留的首屏一定會為網站帶來更多的客戶和利益，筆者會告訴你如何策劃設計出一個好看好用的電商首屏。

　　1. 確定可視範圍

　　  根據統計報告顯示，2014年使用率最高的Internet使用者螢幕解析度為1366px*768px。以此為例，瀏覽器邊框寬度普遍在21左右，所以網頁首屏寬度在無幹擾因素的情況下可以確定為1345;而螢幕總高度為768，除去工作列高度40、店鋪頁頭 106、瀏覽器(工具列、邊框等)160和位置工具列30，初步估算首屏高度控制在432較為合適。因此我們可以得出，最符合時下趨勢的首屏設計寬高基本範圍是1345*432，重要的內容可以盡量放在這個區間裡。

　　2. 展示吸引使用者的資訊

　　  首頁的首屏位置在整個網站中都稱得上寸土寸金，正因為如此，此處展示的文字應該短小精悍，儘可能用最少的篇幅就把資訊表達清楚。標題性文字更應該把商家的商業訴求清晰直接的表達出來，在這類文字的策划上需注意符合網站的整體風格。

　　一號店的banner文案就能很好的抓住瀏覽者的眼球，有趣的標題文字加上“0元領”這樣的醒目的字眼，讓使用者充滿了好奇心。

　　Gap的首屏雖然沒有將廣告的下半部分很完整的展現出來，但是這似乎並沒有影響到使用者想要繼續點擊的心情，真正吸引使用者的資訊點都被整齊的陳列在首屏中，供使用者逐一瞭解。

　　3. 視覺焦點要顯眼

　　大多數使用者的瀏覽習慣是走馬觀花式的，以如今國內電商網站普遍的布局來看，使用者在第一屏中的視覺焦點基本上以Banner和導航為主。因此，其中所表現的無論是文字還是大圖，都應該讓使用者一眼看清內容，減少其考慮時間。設計師在設計時可以用“去色”的方法來檢驗實際效果。

　　去色前：

　　去色後：

　　易迅首屏算是個反面教材。首屏原圖會令人覺得太過繁複，所以視覺焦點自然會分散開來。

　　通過去色前後的對比圖我們可以發現，去色後，導航上的文字內容會變得不夠清晰，因此我們可以得出，色彩是鎖定使用者視覺焦點的主要問題。

　　去色前：

　　去色後：

　　唯品會首屏去色後的效果就截然不同了。去色後，Banner上的內容仍然可以很容易的辨認出來，文字和背景都很清晰。

　　4. 圖片讓內容更利於理解

　　要讓使用者在短短的幾秒鐘之內就瞭解網站或商家發布的一系列資訊，單憑簡短的文字是不夠的，還需借力於圖片的協助。圖片的使用能從側面含蓄的襯托主題，因此，在圖片素材的選擇上應該保證對主旨的表達有協助，並且在視覺上保持風格一致。

　　凡客誠品的首屏走的是極簡路線，沒有什麼修飾，讓使用者可以專註於商品本身。配圖沒有把商品全貌都展現出來，但在極簡的風格下，也能增強使用者的點擊欲。

　　5. 用風格強調主題

　　  網站首屏的風格是根據目的來決定的，在設計之前，必須要瞭解這個首屏究竟在整個網站中會起到什麼樣的作用。一般來說，電子商務網站的首頁首屏會用來進行推廣宣傳，比如單品推廣、店鋪推廣和活動宣傳等。

　　單品：

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

　　店鋪：

　　店鋪的推廣其實並不需要用很大的篇幅來具體說明，只要將一些使用者在意的關鍵點表現出來即可，例如優惠資訊，活動形式範圍等。

　　活動：

　　一項活動的宣傳很難用簡單的文案在首屏中描述清楚，所以要盡量用有衝擊力的字詞來吸引使用者點擊到詳情頁。

　　6. 鎖定使用者的視覺重點

　　當使用者對網站還不太熟悉的時候，進入首頁必然會一頭霧水，此時，給予使用者視覺上的引導變得格外重要。引導的方法多種多樣，比如醒目的大字或圖片，迷人的標題、或是條理清晰整體布局等。所謂引導，並不只是代表讓顧客購買商品，更意味著讓使用者點擊進入其他頁面，產生更多的消費。

　　很少有電商網站的首屏像好樂買一樣乾淨整潔、分類明確，清晰的布局讓使用者一眼就能找到自己的需求。

　　7. 動畫吸引使用者視線

　　在網站使用者體驗比較流暢的基礎上，在首屏中可以適當的加入一些滑鼠互動效果，或是Flash動畫效果會讓頁面看起來更加生動有趣，這種做法也能增加一定數量的點擊，並且吸引使用者的注意力。但這些效果只能作為點綴，大面積的使用反而會適得其反。

　　淘寶網在右上方有一個小小的滑鼠互動效果，點擊後進入的是一個活動專區，翻頁效果在心理學上被認為更容易觸發使用者想要點擊的衝動。

　　8. 符合視覺習慣的圖文混排

　　大片單一的文字或圖片會讓使用者產生厭倦感，而圖文混排很好的彌補了這一點。圖文混排的方式有很多，比如色彩上的對比、文字或圖片的放大等等，在布局上盡量做到錯落有致，讓使用者的視線順暢的轉移。無論用哪一種形式，都必須確保的是主要內容的可讀性。

　　一淘網的首屏不太符合大多數人的使用習慣。當使用者進入一個電商網站，首先一定會被圖片吸引，很少有人會願意逐字逐句的看完大段文字，所以詳細的描述並不適合放在首屏的位置。

　　聚美優品首屏的圖文搭配恰如其分，簡單的大圖和一些短句，兩者之間相輔相成，圖片便於使用者理解，文字很精簡，重點分明。

　　總結：

　　筆者認為，首屏是吸引使用者至關重要的通道，很多網站因為對首屏的忽視，從而產生了一些使用者體驗上的問題。電商網站相比較普通的官方網站在性質上更特殊一些，電商首屏應該帶著商家的目的性去迎合使用者的常規使用習慣，而不是漫無目的地把首屏變成布告欄。

　　設計師在做一個設計項目之前，不妨多從使用者的角度思考，也許會有意想不到的收穫。