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ā)揮余地。