最近有客戶(hù)需要我們幫忙設(shè)計(jì)幾張電商詳情頁(yè)的設(shè)計(jì)，以前我們也有此類(lèi)型的客戶(hù)，也設(shè)計(jì)過(guò)不少的電商詳情頁(yè)，這次總結(jié)一下網(wǎng)站設(shè)計(jì)的經(jīng)驗(yàn)與技巧：
1、大英文字體的運(yùn)用
英文的運(yùn)用可以增加畫(huà)面逼格，甚至可以直接作為主題，傳達(dá)產(chǎn)品調(diào)性。絕對(duì)是提
升畫(huà)靣品質(zhì)、裝X耍帥之必備良藥。
2、選擇適合的字體
文案，是重中之重，首先你要保證它的識(shí)別度。其次，如果你掌握不了圖層樣式就
不要去用，重重的陰影和奇怪的樣式不僅降低文案的識(shí)別度，也讓你的作品質(zhì)雖大打折
扣。關(guān)于字體選擇，因?yàn)槭沁\(yùn)動(dòng)風(fēng)格，最好使用硬朗一點(diǎn)的字體去做大標(biāo)題。如：造字
工坊系列、銳字系列等。
3、層級(jí)關(guān)系
層級(jí)和對(duì)比是相輔相成的，有層級(jí)的文案排版會(huì)讓人易于閱讀。
你也可以這樣，讓文字與產(chǎn)品形成相互遮擋的關(guān)系，來(lái)營(yíng)造層次感
4、選擇模特
電商BANNER設(shè)計(jì)，有模特一般都會(huì)比純文字更出效果，但是選擇過(guò)程中有些模特
更容易出彩，讓模特和文案產(chǎn)生聯(lián)系可以更好的突出氛圍。關(guān)鍵詞：模特視覺(jué)線(xiàn)方向、
模特動(dòng)作。
模特的視覺(jué)線(xiàn)和文案的聯(lián)系如下圖，眼神仿佛在看著文案
模特的動(dòng)作和文案的聯(lián)系如下圖，紅框內(nèi)的文案正好填補(bǔ)了頁(yè)面中的空白部分
5、處理模特
處理模特的色調(diào)和膚質(zhì)，也可以提升圖片質(zhì)墾。關(guān)鍵詞：硬粗黑哥哥、降飽和（但要稍
微保留模特固有色）、加對(duì)比（不要過(guò)頭了哦）、適當(dāng)銳化。
6、靈話(huà)布局
我們通常情況下會(huì)認(rèn)為電商頁(yè)面只是采用橫向棑版，然后分區(qū)往下進(jìn)行即可，但是
，優(yōu)惠券模塊和爆款模塊是首屏之后很重要的兩個(gè)區(qū)，我們應(yīng)該做點(diǎn)什么讓他捫產(chǎn)生差
異化，吸引用戶(hù)關(guān)注。
這是我彳門(mén)通常情況下會(huì)認(rèn)為的電商頁(yè)面攤版樣式，下面我丨n看看一些靈活多變的排版
樣式比較下。如下圖：
可以注意下它每個(gè)框內(nèi)產(chǎn)品名稱(chēng)和購(gòu)買(mǎi)按鈕的布局，切換成中文，我們是不是也可以這樣去排版布局。
注意下它的標(biāo)題層級(jí)和標(biāo)題小元素，圖文排版，采用英文去填充版面空白，這樣的排版布局不止是適用于首頁(yè)專(zhuān)題頁(yè)設(shè)計(jì)，也可以適用于
想請(qǐng)優(yōu)化外泉展示模塊。
8、増加美觀(guān)度
在陳品陳列模坱中，我們通常認(rèn)為鞋子在上面，價(jià)格文案在下面，主要把這些信息羅列出來(lái)就可以，其實(shí)并不是，這一模坱，依然有我們?cè)撟⒁獾狞c(diǎn)。
這樣做是沒(méi)錯(cuò)，也不會(huì)造成什么影響。但我們是做設(shè)計(jì)的，我們要盡自己最大的能力本著
消除丑陋的原則去設(shè)計(jì)一個(gè)頁(yè)面。我認(rèn)為可以改進(jìn)的點(diǎn)有幾個(gè)
1、 產(chǎn)品名稱(chēng)是否可以使用16-18像素字體？
2、 價(jià)格是否可以把RMB、：、199拆分來(lái)排版？讓他們底部對(duì)齊，縮小RMB和：，突出
199這個(gè)明碼標(biāo)價(jià)的重要信息。
3、 購(gòu)買(mǎi)按鈕是否可以右移？給它一定的留白，去突出按鈕。并且點(diǎn)擊購(gòu)買(mǎi)是否可以用更小
一點(diǎn)的字體，讓按紐更顯精致？
4、 鞋子是否可以稍微縮小一點(diǎn)，讓鞋子與邊框有一定的呼吸空間，更顯精致？
下面我找了一些參考，大家可以比較下。
渝公網(wǎng)安備 50010802001760號(hào)
