電商頁面設(shè)計如何入手？看看優(yōu)秀的時尚PSD分層模板，分分鐘搞定！

時間：2022-08-06 02:51:01 | 來源：網(wǎng)站運營

時間：2022-08-06 02:51:01 來源：網(wǎng)站運營

互聯(lián)網(wǎng)時代，電商行業(yè)依舊是主流行業(yè)之一。而經(jīng)營一家店鋪除了運營能力之外，產(chǎn)品的頁面設(shè)計同樣重要，如果你不知道電商設(shè)計該如何入手的話，看看專注電商素材資源的優(yōu)圖網(wǎng) （UPPSD) 帶來的優(yōu)秀的時尚PSD分層模板，分分鐘搞定！

電商頁面設(shè)計基礎(chǔ)規(guī)范

01

頁面尺寸規(guī)范

PC端頁面的尺寸寬度1920px，高度尺寸按照頁面所需信息來定即可，顯示尺寸1920×1080px；手機端頁面的尺寸寬度750px，高度尺寸按照頁面所需信息來定即可。

PC端首頁橫幅廣告尺寸為730×400px，手機端首頁橫幅廣告尺寸為750×400px。專題活動頁，主業(yè)頁面寬度為1920px，高度為580—700px，最好不要超過700px，其中顯示區(qū)域頁面高度為1210px。產(chǎn)品詳情頁，寬度尺寸790px，高度尺寸充分展示所需信息即可。



沙發(fā)落地?zé)魰r尚家具優(yōu)惠券電商頁面


沙灘度假行李鮮花優(yōu)惠禮券電商頁面

顏色規(guī)范

規(guī)范分兩類：設(shè)計風(fēng)格規(guī)范、版式排版構(gòu)圖規(guī)范。頁面顏色要求：頁面中使用的顏色不得多于5種，黑白灰不算色；針對不同的主體使用合理的色系；主題顏色和輔助顏色要根據(jù)配色原理搭配。

（1）單色、同色系：適合產(chǎn)品本身顏色比較統(tǒng)一，通過吸取產(chǎn)品較近的周邊顏色，再通過添加合適的輔助元素，使畫面變得統(tǒng)一而豐富，這種色系適合單品的一個橫幅廣告的設(shè)計。


（2）相似色、鄰近色系：相似色相對于單色系可變化的范疇會大很多，但也是在主色調(diào)明確的情況下輔助添加類似色，這類配色方式在橫幅廣告應(yīng)用中還比較常見。是一種比較好掌握的配色方式，同時配色運用得當(dāng)會使畫面看起來很時尚。


（3）補色系：這里把互補色、單邊補色分割、補色分割3種情況一同來說，因為三者在大范疇內(nèi)上下浮動，效果也頗為相似，并無特別明顯的區(qū)分，主要因為整個畫面調(diào)性要活潑，加之產(chǎn)品都屬于色彩明快的品類，色彩上的愉悅感更容易激起點擊欲望。補色系的運用應(yīng)注意面積搭配及顏色灰度的調(diào)整，對于補色系的運用可在今后多嘗試。


（4）多色搭配，可把對比色、矩形分割、廣場分割多顏色的搭配歸為一類來說，這三種跨度較大的配色方式，相對來說應(yīng)用的比較少，不是很容易掌握，一般比較適合小面積的應(yīng)用起到裝飾平衡的作用。


時尚美女夏季護膚產(chǎn)品促銷電商頁面

美妝護膚時尚美女PC端促銷美妝頁面

03

版式規(guī)范

頁面設(shè)計色彩要清新，布局要大方；頁面設(shè)計要有整體性、一致性等。版式排版快速法則：

（1）對齊。對齊分左對齊、右對齊和居中。最常見的電商海報，基本上都采用了左右對齊排版方式。對齊是最常見也是最基礎(chǔ)的板式排列方式，給人以穩(wěn)重、力量、統(tǒng)一、工整的感覺。左對齊的排版方式，版面不會顯得很凌亂，而會顯得很統(tǒng)一很有秩序感。居中的排版會給人正式、大氣、高端、有品質(zhì)感覺。在電商海報中居中排版經(jīng)常會見到文案直接打在產(chǎn)品上面，文案的遮擋匯合后面的產(chǎn)品營造出一前一后的層次感，加上一些光效會讓整張畫面空間感提升許多。

（2）對比。無對比不設(shè)計，人們在視覺上不喜歡平淡、千篇一律的東西，喜歡看有對比的畫面。使用對比的排版技巧可以最有效的增加畫面的視覺效果和沖擊力。

限時優(yōu)惠大促活動美食禮券電商促銷頁面

繩子牛油果新鮮食材美食優(yōu)惠券電商頁面

書本筆便簽辦公用品女孩優(yōu)惠券電商頁面

04

文字規(guī)范

在頁面中使用的中英文字體不得多于5種，頁面中出現(xiàn)3次以上為主要字體，其他文字作陪襯字體。在產(chǎn)品詳情頁設(shè)計中，一般主要字體為黑體。

在做橫幅廣告字體時要經(jīng)過設(shè)計變形，沒有字體設(shè)計能力的，應(yīng)在原字體基礎(chǔ)上適當(dāng)做些特殊效果；字體字號大小與顏色要和背景顏色對比分明，使消費者便于預(yù)覽閱讀。經(jīng)過設(shè)計后的文字，顯得很有擴張力，很有力量感。在原來的文字基礎(chǔ)上做了一些特效，做了一個漸變的效果，比之前的文字在活躍度上有了很明顯的提升。

橫幅廣告字體設(shè)計風(fēng)格要形成統(tǒng)一；字體要統(tǒng)一位置，達到有統(tǒng)一的秩序感，如果首頁有5張橫幅廣告圖，那必須要有3張達到統(tǒng)一風(fēng)格。

05

廣告語規(guī)范

廣告語要注意極限用語的應(yīng)用。根據(jù)廣告法，極限用語不得出現(xiàn)在商品列表頁、商品的標題、副標題、主圖、詳情頁以及商品包裝等位置。極限用語包括如下詞匯： 國家級、世界級、最高級、最佳、最大、第一、唯一、首個、首選、最好、最大、精確、頂級、最高、最低、最、最具、最便宜、最新、最先進、最大程度、最新技術(shù)、最先進科學(xué)、國家級產(chǎn)品、填補國內(nèi)空白、絕對、獨家、絕無僅有、前無古人、史無前例、萬能等。http://www.uppsd.com/item-126760.html

看書美女繪本讀物絲帶禮盒電商頁面

抽獎轉(zhuǎn)盤金幣草莓美味冰飲電商頁面
by 紫琉璃 in 頁面設(shè)計