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

6年前，深入電商設計這個圈子；

6年后，淡出電商設計這個圈子。

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

有一些基礎點和要點，分幾期整理后給大家。

也是給本身的總結，更是歸零！

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

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

一?基礎技法１、首屏重設計

這里說的首屏設計，指平臺類的專題頭圖或者店鋪類的首屏。

什么是首屏？

首屏，第一眼的視覺設計！

首屏，是不拖滾動條直接看到的位置；

首屏，是信息傳達的起點；

首屏，是電商與平面設計所差別的地方之一；

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

問題來了：首屏設計怎么做？

２、關于首屏設計的規(guī)律

下面是我整理了5個關于首屏設計的規(guī)律：

（１）點出亮點【擺出好看】

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

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

表示亮點的方法有：

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

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

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

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

表示賣點的方法有

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

（３）點出引導【提示向下】

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

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

表示引導的方法有

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

回顧一下首屏設計基本要點：

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

這一步很重要

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

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

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

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

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

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

①1920×1080分辨率

首屏高度計算工式

②1366×768分辨率

首屏高度計算工式

最后得出的結論就是：首屏高度必然要控制在450-760內！

這一步很重要

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

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

標簽：東營 鹽城 九江 林芝 烏魯木齊