主頁 > 快速排名 > 常見問題 > 電商設(shè)計|首屏設(shè)計規(guī)律和首屏尺寸那些事

電商設(shè)計|首屏設(shè)計規(guī)律和首屏尺寸那些事

POST TIME:2018-12-03 21:35

 

在電商行業(yè)里從自學(xué)到現(xiàn)在發(fā)現(xiàn),越是基礎(chǔ)的內(nèi)容越是容易忽略。

6年前,深入電商設(shè)計這個圈子;

6年后,淡出電商設(shè)計這個圈子。

細想起,在電商行業(yè)里從自學(xué)到現(xiàn)在發(fā)現(xiàn),越是基礎(chǔ)的內(nèi)容越是容易忽略。以下講到的知識點,并不是一促而就的整理,而是在工作中從不懂到懂的點滴記錄。

有一些基礎(chǔ)點和要點,分幾期整理后給大家。

也是給本身的總結(jié),更是歸零!

「文中所用案例均來自銀泰網(wǎng)設(shè)計團隊」

那好,我今天先從1個技法和3個技巧出發(fā)。

一?基礎(chǔ)技法1、首屏重設(shè)計

這里說的首屏設(shè)計,指平臺類的專題頭圖或者店鋪類的首屏。

什么是首屏?

首屏,第一眼的視覺設(shè)計!

首屏,是不拖滾動條直接看到的位置;

首屏,是信息傳達的起點;

首屏,是電商與平面設(shè)計所差別的地方之一;

首屏,是否精彩直接關(guān)系到用戶停留多一秒。

問題來了:首屏設(shè)計怎么做?

2、關(guān)于首屏設(shè)計的規(guī)律

下面是我整理了5個關(guān)于首屏設(shè)計的規(guī)律:

(1)點出亮點【擺出好看】

首屏,既是開門見山的亮點表達,又是一個由點到整體的區(qū)塊設(shè)計;

對首屏的設(shè)計時長往往會占我們整體設(shè)計時間的40%擺布,如果不能在第一眼抓住用戶的眼球,給用戶視覺打上一種記憶點的話,就會直接降低用戶對活動,對店鋪的印象;

表示亮點的方法有:

案牘和活動策劃的新穎設(shè)計跟緊現(xiàn)有流行設(shè)計趨勢用故事化的方式去賣貨設(shè)計場景(2)點出賣點【說出折扣】

首屏,吸引用戶的第二點:就是活動力度。

在早年間的電商活動策劃中,重折扣,拼價格還是首位的。

首屏,主要功能就是把標(biāo)題、折扣信息合理的放在固定的高度中,讓用戶打開專題或者店鋪時第一眼看到信息。

表示賣點的方法有

直接折扣福利優(yōu)惠主推產(chǎn)品特點

(3)點出引導(dǎo)【提示向下】

只有首屏的視覺往往不夠,在電商視覺中并不是做完首屏后整體設(shè)計工作就算完成了。

在常規(guī)的需求中,首屏下面往往是更為重要的單品羅列及重要的活動呈現(xiàn),如何利用首屏(第一眼)的優(yōu)勢抓住眼球,而且通過視覺,引導(dǎo)用戶向下參與而且發(fā)現(xiàn)感興趣的活動或商品,這樣的首屏設(shè)計才會更有用。

表示引導(dǎo)的方法有

元素具有明確的向下指引性重點活動一屏到二屏間露出

回顧一下首屏設(shè)計基本要點:

看全一眼看到重要信息頁面整體風(fēng)格表現(xiàn)不只做首屏

這一步很重要

首屏,是對整體頁面空間的合理利用,是對整體活動信息的直不雅觀呈現(xiàn);首屏,第一目的是突出活動。首屏,不能以完成首屏設(shè)計就完成了全部設(shè)計的心態(tài)去思考;

(4)高的安適 【首屏多大適合】

對于首屏高度的具體值并不是一成不亂的,首屏的高度界定,只是是對主要信息畫個安適框罷了,用來保證用戶在打開頁面時第一眼看到的信息是完整的,和直接的。

首屏的高度值,用現(xiàn)有主流用戶的電腦設(shè)備分辨率「減去」瀏覽器環(huán)境大小。

為此我特意百度查到一篇來自廣告公司AdDuplex大數(shù)據(jù)統(tǒng)計,和百度流量研究院的分辨率使用情況。其中下圖中(二個分辨率仍是現(xiàn)在主流)

(來自:廣告公司AdDuplex 大數(shù)據(jù)顯示(最主流的PC屏幕分辨率依然是1366×768,而Win10系統(tǒng)下依然有近34%的設(shè)備連結(jié)這個分辨率,只有27%以上的PC在全高清或者更高級別))

①1920×1080分辨率

首屏高度計算工式

②1366×768分辨率

首屏高度計算工式

最后得出的結(jié)論就是:首屏高度必然要控制在450-760內(nèi)!

這一步很重要

首屏,高度并不是死的,可以按照差別的設(shè)計需求和活動目的靈活調(diào)整;首屏,最基本的規(guī)律:重要信息必然在視覺安適高度內(nèi);首屏,設(shè)計時保證主要信息一眼可見。(5)有用的寬 【安適區(qū)兩側(cè)】

上面說的是首屏高度對于主要信息的影響,下面我們再來說下首屏寬度對于設(shè)計寬度外的發(fā)揮余地。

標(biāo)簽:東營 鹽城 九江 林芝 烏魯木齊



收縮
  • 微信客服
  • 微信二維碼
  • 電話咨詢

  • 400-1100-266