電子商務(wù)網(wǎng)站設(shè)計分析

來源:站酷 作者:尛沫尛沫 學習:8368人次

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

世界著名的網(wǎng)頁易用性專家尼爾森曾經(jīng)有報告顯示,首屏以上的關(guān)注度為80.3%,首屏以下的關(guān)注度僅有19.7%。這兩個數(shù)據(jù)足以表明,首屏對每一個需要轉(zhuǎn)化率的網(wǎng)站都很重要,尤其是電商網(wǎng)站。

電子商務(wù)網(wǎng)站設(shè)計分析

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

一個能引人駐足停留的首屏一定會為網(wǎng)站帶來更多的客戶和利益,AnyForWeb會告訴你如何策劃設(shè)計出一個好看好用的電商首屏。

1.確定可視范圍
根據(jù)統(tǒng)計報告顯示,2014年使用率最高的Internet用戶屏幕分辨率為1366px*768px。以此為例,瀏覽器邊框?qū)挾绕毡樵?1左右,所以網(wǎng)頁首屏寬度在無干擾因素的情況下可以確定為1345;而屏幕總高度為768,除去任務(wù)欄高度40、店鋪頁頭106、瀏覽器(工具欄、邊框等)160和位置工具欄30,初步估算首屏高度控制在432較為合適。因此我們可以得出,最符合時下趨勢的首屏設(shè)計寬高基本范圍是1345*432,重要的內(nèi)容可以盡量放在這個區(qū)間里。

電子商務(wù)網(wǎng)站設(shè)計分析

2.展示吸引用戶的信息

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

電子商務(wù)網(wǎng)站設(shè)計分析

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

電子商務(wù)網(wǎng)站設(shè)計分析

 

Gap的首屏雖然沒有將廣告的下半部分很完整的展現(xiàn)出來,但是這似乎并沒有影響到用戶想要繼續(xù)點擊的心情,真正吸引用戶的信息點都被整齊的陳列在首屏中,供用戶逐一了解。

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
舞動時代金堂副會長陽光定格美麗2019-03-28 08:05
必須支持
王宗光呀2019-03-28 06:55
加油
木年瑾昔@2018-09-21 10:54
喜歡
冬日正暖2018-01-17 01:41
感謝分享
破魔大帝2017-05-29 02:51
感謝分享
破魔大帝2017-05-29 02:51
感謝分享
我眺望世界的北2017-05-28 12:19
嘗試著模仿,細節(jié)好難把握
我眺望世界的北2017-05-28 12:19
嘗試著模仿,細節(jié)好難把握

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!