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

6年前，深入電商設(shè)計(jì)這個(gè)圈子；

6年后，淡出電商設(shè)計(jì)這個(gè)圈子。

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

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

也是給本身的總結(jié)，更是歸零！

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

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

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

這里說的首屏設(shè)計(jì)，指平臺(tái)類的專題頭圖或者店鋪類的首屏。

什么是首屏？

首屏，第一眼的視覺設(shè)計(jì)！

首屏，是不拖滾動(dòng)條直接看到的位置；

首屏，是信息傳達(dá)的起點(diǎn)；

首屏，是電商與平面設(shè)計(jì)所差別的地方之一；

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

問題來了：首屏設(shè)計(jì)怎么做？

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

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

（１）點(diǎn)出亮點(diǎn)【擺出好看】

首屏，既是開門見山的亮點(diǎn)表達(dá)，又是一個(gè)由點(diǎn)到整體的區(qū)塊設(shè)計(jì)；

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

表示亮點(diǎn)的方法有：

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

首屏，吸引用戶的第二點(diǎn)：就是活動(dòng)力度。

在早年間的電商活動(dòng)策劃中，重折扣，拼價(jià)格還是首位的。

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

表示賣點(diǎn)的方法有

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

（３）點(diǎn)出引導(dǎo)【提示向下】

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

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

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

元素具有明確的向下指引性重點(diǎn)活動(dòng)一屏到二屏間露出

回顧一下首屏設(shè)計(jì)基本要點(diǎn)：

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

這一步很重要

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

（４）高的安適 【首屏多大適合】

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

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

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

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

①1920×1080分辨率

首屏高度計(jì)算工式

②1366×768分辨率

首屏高度計(jì)算工式

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

這一步很重要

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

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

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