王棋濤

發(fā)展電商需要了解的那些事之美工視覺(jué)設(shè)計(jì)視覺(jué)設(shè)計(jì)的規(guī)范與應(yīng)用

王棋濤

隨著人們對(duì)于視覺(jué)享受的要求越來(lái)越高，一張平庸的圖片已經(jīng)越來(lái)越難吸引人們的眼球。尤其在電子商務(wù)活動(dòng)中，一個(gè)好的視覺(jué)設(shè)計(jì)能夠準(zhǔn)確指向潛在客戶需求，不僅可以錦上添花，而且有可能決定成敗、決定活動(dòng)成效的重要因素。通過(guò)一幅圖片可打動(dòng)需求本產(chǎn)品的客戶，并吸引消費(fèi)者點(diǎn)擊圖片鏈接，帶著期待去查看活動(dòng)推廣的寶貝詳情，從而達(dá)到活動(dòng)推廣目的，促進(jìn)產(chǎn)品銷售。那么，在視覺(jué)設(shè)計(jì)中有哪些規(guī)范呢？

頁(yè)面尺寸規(guī)范

PC端頁(yè)面的尺寸寬度1920px，高度尺寸按照頁(yè)面所需信息來(lái)定即可，顯示尺寸1920×1080px；手機(jī)端頁(yè)面的尺寸寬度750px，高度尺寸按照頁(yè)面所需信息來(lái)定即可。其中，蘋(píng)果ios系統(tǒng)顯示尺寸為750×1334px，安卓系統(tǒng)顯示尺寸為720×1280px。

PC端首頁(yè)橫幅廣告尺寸為730×400px，手機(jī)端首頁(yè)橫幅廣告尺寸為750×400px。

專題活動(dòng)頁(yè)，主業(yè)頁(yè)面寬度為1920px，高度為580—700px，最好不要超過(guò)700px，其中顯示區(qū)域液面高度為1210px。產(chǎn)品詳情頁(yè)，寬度尺寸790px，高度尺寸充分展示所需信息即可。

文字規(guī)范

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

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

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

顏色規(guī)范

顏色規(guī)范分兩類，第一類頁(yè)面顏色配色要求，第二類配色理論。

頁(yè)面顏色要求

第一，頁(yè)面中使用的顏色不得多于5種，黑白灰不算色；

第二，針對(duì)不同的主體使用合理的色系；

第三，主題顏色和輔助顏色要根據(jù)配色原理搭配。

總體原則

顏色搭配總體原則是“總體和諧，局部對(duì)比”，但應(yīng)注意嚴(yán)格控制顏色數(shù)量，優(yōu)先使用鄰近色，同色系的顏色。在運(yùn)用不熟練的情況下，盡可能少出現(xiàn)紅配綠、黃配藍(lán)這樣的純色對(duì)比搭配。

配色理論基礎(chǔ)

色環(huán)是將彩色光譜中的長(zhǎng)條色彩序列首尾連在一起，通常會(huì)看到不同版本的色環(huán)，色相之間略有偏差，但掌握好公式原理就不會(huì)出現(xiàn)偏差了。

常見(jiàn)的配色方式包括：?jiǎn)紊⑼蹬渖?；相似色配色；互補(bǔ)色配色；單邊補(bǔ)色分割配色；補(bǔ)色分割配色；對(duì)比色配色；矩形分割配色；廣場(chǎng)分割配色。這里可以把補(bǔ)色分割、對(duì)比色、矩形分割、廣場(chǎng)分割統(tǒng)稱為一例。

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

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

補(bǔ)色系：這里把互補(bǔ)色、單邊補(bǔ)色分割、補(bǔ)色分割3種情況一同來(lái)說(shuō)，因?yàn)槿咴诖蠓懂爟?nèi)上下浮動(dòng)，效果也頗為相似，并無(wú)特別明顯的區(qū)分，主要因?yàn)檎麄€(gè)畫(huà)面調(diào)性要活潑，加之產(chǎn)品都屬于色彩明快的品類，色彩上的愉悅感更容易激起點(diǎn)擊欲望。補(bǔ)色系的運(yùn)用應(yīng)注意面積搭配及顏色灰度的調(diào)整，對(duì)于補(bǔ)色系的運(yùn)用可在今后多嘗試。

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

版式規(guī)范

規(guī)范分兩類：設(shè)計(jì)風(fēng)格規(guī)范、版式排版構(gòu)圖規(guī)范。

設(shè)計(jì)風(fēng)格

第一，頁(yè)面設(shè)計(jì)色彩要清新，布局要大方。

第二，頁(yè)面設(shè)計(jì)要有整體性、一致性等。一致性包括色彩的統(tǒng)一、版式的統(tǒng)一和字體的統(tǒng)一等。

第三，頁(yè)面布局應(yīng)主次簡(jiǎn)約分明，中心突出，大小搭配，互相呼應(yīng)，圖文并茂，適當(dāng)?shù)目瞻桌谙M(fèi)者閱讀。

版式排版中構(gòu)圖高效快速的法則

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

第二招，對(duì)比。無(wú)對(duì)比不設(shè)計(jì)，人們?cè)谝曈X(jué)上不喜歡平淡、千篇一律的東西，喜歡看有對(duì)比的畫(huà)面。使用對(duì)比的排版技巧可以最有效的增加畫(huà)面的視覺(jué)效果和沖擊力。

版式構(gòu)圖主要包括四種：

中心集中式構(gòu)圖

中心集中式構(gòu)圖，畫(huà)面由一個(gè)主要元素?fù)螡M，主標(biāo)題作為次要元素配合畫(huà)面平衡，根據(jù)畫(huà)面需求添加小標(biāo)簽裝飾。整體視覺(jué)沖擊力強(qiáng)、張力足，適用于單個(gè)產(chǎn)品以及細(xì)節(jié)較為豐富的產(chǎn)品。多個(gè)物體集中式構(gòu)圖和此方法同理。

杠桿式構(gòu)圖

杠桿式構(gòu)圖。如圖所示，畫(huà)面由主體物和此主次斜面對(duì)稱而形成的杠桿關(guān)系，與主標(biāo)題之間形成穩(wěn)固的三角構(gòu)造關(guān)系，此構(gòu)圖方式畫(huà)面很飽滿、穩(wěn)固，適合兩種產(chǎn)品或一個(gè)產(chǎn)品兩面展示時(shí)使用。

頂視角分散式構(gòu)圖

折線跳躍式式構(gòu)圖

頂視角分散式構(gòu)圖。如左上圖所示，頂視角度，以一個(gè)中心點(diǎn)向外發(fā)散，適用于產(chǎn)品展示比較多的情況。對(duì)于發(fā)散過(guò)程中的節(jié)奏以及氣韻走向的把握很重要，畫(huà)面出彩但比較難把握。

折線跳躍式構(gòu)圖，如右上圖所示，折線跳躍式構(gòu)圖。產(chǎn)品懸浮在畫(huà)面中，上下可跨出畫(huà)面，加以恰當(dāng)?shù)奈淖峙虐婧洼o助裝飾，整體畫(huà)面效果很活躍，延展性很強(qiáng)，是一種能快速達(dá)到視覺(jué)表現(xiàn)的展現(xiàn)方式，此構(gòu)圖方式應(yīng)用廣泛。折線跳躍式構(gòu)圖在一些電商網(wǎng)站的banner中很常見(jiàn)。

小貼士：

關(guān)于輔助元素的應(yīng)用

網(wǎng)站banner在輔助圖形的應(yīng)用上特別廣泛，一來(lái)增加畫(huà)面豐富性，二來(lái)強(qiáng)化產(chǎn)品特性，主要是提取產(chǎn)品相關(guān)的元素進(jìn)行圖形化，有小面積的純屬?gòu)?qiáng)化功能或增加趣味性的添加，也有大范圍的對(duì)產(chǎn)品紋樣或特性的延屬。主要還是在產(chǎn)品特點(diǎn)基礎(chǔ)上進(jìn)行提取。

廣告語(yǔ)規(guī)范

廣告語(yǔ)要注意極限用語(yǔ)的應(yīng)用。

根據(jù)廣告法，極限用語(yǔ)不得出現(xiàn)在商品列表頁(yè)、商品的標(biāo)題、副標(biāo)題、主圖、詳情頁(yè)以及商品包裝等位置。極限用語(yǔ)包括如下詞匯：

國(guó)家級(jí)、世界級(jí)、最高級(jí)、最佳、最大、第一、唯一、首個(gè)、首選、最好、最大、精確、頂級(jí)、最高、最低、最、最具、最便宜、最新、最先進(jìn)、最大程度、最新技術(shù)、最先進(jìn)科學(xué)、國(guó)家級(jí)產(chǎn)品、填補(bǔ)國(guó)內(nèi)空白、絕對(duì)、獨(dú)家、首家、最新、最先進(jìn)、第一品牌、金牌、名牌、優(yōu)秀、最先、頂級(jí)、獨(dú)家、全網(wǎng)銷量第一、全球首發(fā)、全國(guó)首家、全網(wǎng)首發(fā)、世界領(lǐng)先、頂級(jí)工藝、最新科學(xué)、最新技術(shù)、最先進(jìn)加工工藝、最時(shí)尚、極品、頂級(jí)、頂尖、終極、最受歡迎、王牌、銷量冠軍、第一(NO.1或者Top1)、極致、永久、王牌、掌門(mén)人、領(lǐng)袖品牌、獨(dú)一無(wú)二、獨(dú)家、絕無(wú)僅有、前無(wú)古人、史無(wú)前例、萬(wàn)能等。

據(jù)悉，極限用語(yǔ)包括但不僅限于商品列表頁(yè)、商品的標(biāo)題、副標(biāo)題、主圖以及詳情頁(yè)、商品包裝等。對(duì)于極限用語(yǔ)的店鋪，一經(jīng)發(fā)現(xiàn)違規(guī)店鋪將給予扣分并罰款，處以20萬(wàn)元以上100萬(wàn)元以下的罰款，出現(xiàn)情節(jié)嚴(yán)重將直接封店。而一旦遇顧客投訴極限用語(yǔ)，并維權(quán)成功，賠付金額將由商家全部承擔(dān)。