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