在電商行業(yè)里浸淫多年，發(fā)現(xiàn)越是基礎(chǔ)的內(nèi)容越是容易忽略。今天將這6年來整理的基礎(chǔ)知識和要點整理給大家。
一. 基礎(chǔ)技法
首屏重設(shè)計這里說的首屏設(shè)計，指平臺類的專題頭圖或者店鋪類的首屏
什么是首屏?
首屏，第一眼的視覺設(shè)計
首屏，是不拖滾動條直接看到的位置。
首屏，是信息傳達(dá)的起點
首屏，是電商與平面設(shè)計所不同的地方之一。
首屏，是否精彩直接關(guān)系到用戶停留時間。
首屏設(shè)計怎么做?
我整理了5個關(guān)于首屏設(shè)計的規(guī)律。
點出亮點：擺出好看
首屏，既是開門見山的亮點表達(dá)，又是一個由點到整體的區(qū)塊設(shè)計;
對首屏的設(shè)計時長往往會占我們整體設(shè)計時間的40%左右，如果不能在第一眼抓住用戶的眼球，給用戶視覺打上一種記憶點的話，就會直接降低用戶對活動，對店鋪的印象。
表現(xiàn)亮點的方法有：
1. 文案和活動策劃的新穎
2. 設(shè)計緊跟現(xiàn)有流行設(shè)計趨勢
3. 用故事化的方式去設(shè)計賣貨場景
點出賣點：說出折扣
首屏，吸引用戶的第二點：就是活動力度。在早年間的電商活動策劃中，重折扣，拼價格還是首位的。
首屏，主要功能就是把標(biāo)題、折扣信息合理的放在固定的高度中，讓用戶打開專題或者店鋪時第一眼看到信息。
表現(xiàn)賣點的方法有：
1. 直接折扣
2. 福利優(yōu)惠
3. 主推產(chǎn)品特點
點出引導(dǎo)：提示向下，只有首屏的視覺往往不夠，在電商視覺中并不是做完首屏后整體設(shè)計工作就算完成了。
在常規(guī)的需求中，首屏下面往往是更為重要的單品羅列及重要的活動呈現(xiàn)，利用首屏(第一眼)的優(yōu)勢抓住眼球，并且通過視覺，引導(dǎo)用戶向下參與發(fā)現(xiàn)感興趣的活動或商品，這樣的首屏設(shè)計才會更有用。
表現(xiàn)引導(dǎo)的方法有：
1. 元素具有明確的向下指引性
2. 重點活動一屏到二屏間露出
回顧一下首屏設(shè)計基本要點
看全
一眼看到重要信息
頁面整體風(fēng)格體現(xiàn)
不只做首屏
小結(jié)
首屏，是對整體頁面空間的合理利用，是對整體活動信息的直觀呈現(xiàn)。
首屏，第一目的是突出活動。
首屏，不能以為完成首屏設(shè)計就完成了全部設(shè)計的心態(tài)去思考。
高度的安全：首屏多大適合
首屏高度的具體值并不是一成不變的，首屏的高度界定，只是對主要信息畫個安全框而已，用來保證用戶在打開頁面時第一眼看到的信息是完整和直接的。
首屏的高度值等于用現(xiàn)有主流用戶的電腦設(shè)備分辨率「減去」瀏覽器環(huán)境大小。
為此我特意查到一篇來自廣告公司AdDuplex的大數(shù)據(jù)統(tǒng)計，和百度流量研究院的分辨率使用情況。其中下圖中(二個分辨率仍是現(xiàn)在主流)
△ 廣告公司AdDuplex 大數(shù)據(jù)顯示(最主流的PC屏幕分辨率依然是1366×768，而Win10系統(tǒng)下依然有近34%的設(shè)備保持這個分辨率，只有27%以上的PC在全高清或者更高級別)
1920*1080分辨率：
1366*768分辨率：
最后得出的結(jié)論就是：
首屏高度一定要控制在450-760內(nèi)!
小結(jié)：
1. 首屏，高度并不是死的，可以根據(jù)不同的設(shè)計需求和活動目的靈活調(diào)整。
2. 首屏，最基本的規(guī)律：重要信息一定在視覺安全高度內(nèi)。
3. 首屏，設(shè)計時保證主要信息一眼可見。
安全區(qū)兩側(cè)：
上面說的是首屏高度對于主要信息的影響，下面我們再來說下首屏寬度對于設(shè)計寬度外的發(fā)揮余地。
如上圖所示，寬度990-1100間做主要的視覺元素和標(biāo)題，對于這么寬的位置，在刻畫了主體后還有很大的留白可用。
寬度1100-1440間做一些輔助的，用于烘托氛圍的元素，比如：現(xiàn)在流行的放各種飛著的圓球等。
寬度1440-1920間做可有可無的元素，用于從主視覺延伸出來的，或者是用于細(xì)節(jié)表現(xiàn)的;對于這一部分的表現(xiàn)，屬于最后再完善的地方，中心還是在主視覺區(qū)域的刻畫上。
以上所說的是電商視覺中專題或店鋪類首屏設(shè)計的特點和尺寸基礎(chǔ)的總結(jié)，但是如果你是做整體專題視覺的話，它只是整頁視覺當(dāng)中的一小塊，更多的是以整體性的完成度和視覺連貫為主的。
那分享了基礎(chǔ)技法后，我們再來分享幾個做電商視覺常碰到的細(xì)節(jié)：
二. 基礎(chǔ)技巧
明確需求時間
通過面對面的和運營溝通后，了解大概需求和看到框架后，你應(yīng)該對自己的工作量有一個了解。在電商行業(yè)中，3天做完一個中型或大型活動的事情是常有的需求，所以在規(guī)定的時間內(nèi)，如何準(zhǔn)確的找準(zhǔn)需求點，并且集中精力做好，其實真的很鍛煉人。
常用的技巧：
1. 有活動需求時，坐下來溝通，如果前期需求方給你框架圖了，那么你在和需求方溝通前可以針對性的準(zhǔn)備一些適合這個案例或者風(fēng)格的參考圖片，和需求方碰面。
2. 在初步確認(rèn)感覺沒有問題后，根據(jù)需求量的大小，根據(jù)自己當(dāng)時的大腦狀態(tài)，把自己的時間調(diào)成對應(yīng)的模式。舉個例子：當(dāng)你一眼看到這個需求，靈感如泉涌時，那么你就抓住這個感覺，在一天左右的時間里快速的完成初稿和大致構(gòu)圖。然后可以適當(dāng)休息下，想想接下來的內(nèi)容怎么做。
小結(jié)
它的重要性就是讓你在特定的時間內(nèi)針對性的提高。當(dāng)然，你對需求理解的越準(zhǔn)確。你花費的時間也就越少。
明確的時間并不是用來困住你，而是讓你把問題解決得更高效，這個問題不僅是需求，也是指全神貫注的集中考慮。
長圖要折分
做電商需求少則3000px以上，多則10000+高度，都是常有的事，對一般或中等配置的電腦來說，卡死或保存不了或打開需要1分鐘的現(xiàn)象是常見的問題之一。
一個平臺型大活動頁面的設(shè)計需求，分工協(xié)作是不可少的一種方式。
常用的技巧：
1. 文件劃分是好事，但是文件內(nèi)圖層組的劃分也很重要。去掉多余，或者合并、柵格一些圖層后，不僅能快速找到相應(yīng)的圖層，還可以降低文件的大小。
2. 文件內(nèi)不同的入口設(shè)計也不一樣。舉個例子：活動入口和單品推薦的在設(shè)計上肯定不同，前者是要根據(jù)整體風(fēng)格去表現(xiàn)，多以顏色結(jié)合人物加文案的形式出現(xiàn);后者是以賣貨為主，清晰的告訴用戶價格、名稱即可。
小結(jié)
折分文件并不意味著每個文件里的設(shè)計元素和風(fēng)格相互脫離，而是為了提高效率分工協(xié)作的一種工作技巧。如果需求是分配給不同的設(shè)計師去設(shè)計的話，那么在前期內(nèi)部的風(fēng)格設(shè)計，元素設(shè)計上就要有規(guī)范，模版，就要有共用的元素，最后讓相互分開的文件，合在一起也是個整體。
模擬上線效果
為了讓需求方更好的設(shè)想出設(shè)計稿后期上線的效果，包括它在瀏覽器中、界面中、不同設(shè)備中的預(yù)覽效果，我們在完成設(shè)計后，有必要去把做好的設(shè)計稿植入到整體環(huán)境中進(jìn)行細(xì)節(jié)的調(diào)整。
舉個例子：你做的是某專題的彈出窗，如果你單獨做，也沒問題。但是很有可能會和整體專題視覺有出入。這時就需要把設(shè)計稿植入到整體中，進(jìn)行統(tǒng)一。
常用的技巧：
1. 把首頁設(shè)計稿置入到完整的加了(瀏覽器使用環(huán)境和平臺網(wǎng)站使用環(huán)境)的截圖進(jìn)行整體預(yù)覽。
2. 把某個彈窗元素，置入到完整設(shè)計稿中進(jìn)行預(yù)覽。
小結(jié)
模擬上線的效果是為了讓需求方更加清晰的設(shè)想到上線后的真實效果，同時也可以更好的進(jìn)行設(shè)計的整體查看。
A5創(chuàng)業(yè)網(wǎng)為電商提供優(yōu)質(zhì)渠道推廣，帶貨文案撰寫，微信公眾號、抖音短視頻等渠道投放，詳情請掃描二維碼：
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
