王棋濤

發(fā)展電商需要了解的那些事之美工視覺設計視覺設計的規(guī)范與應用

王棋濤

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

頁面尺寸規(guī)范

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

PC端首頁橫幅廣告尺寸為730×400px，手機端首頁橫幅廣告尺寸為750×400px。

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

文字規(guī)范

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

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

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

顏色規(guī)范

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

頁面顏色要求

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

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

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

總體原則

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

配色理論基礎

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

常見的配色方式包括：單色、同色系配色；相似色配色；互補色配色；單邊補色分割配色；補色分割配色；對比色配色；矩形分割配色；廣場分割配色。這里可以把補色分割、對比色、矩形分割、廣場分割統(tǒng)稱為一例。

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

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

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

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

版式規(guī)范

規(guī)范分兩類：設計風格規(guī)范、版式排版構圖規(guī)范。

設計風格

第一，頁面設計色彩要清新，布局要大方。

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

第三，頁面布局應主次簡約分明，中心突出，大小搭配，互相呼應，圖文并茂，適當的空白利于消費者閱讀。

版式排版中構圖高效快速的法則

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

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

版式構圖主要包括四種：

中心集中式構圖

中心集中式構圖，畫面由一個主要元素撐滿，主標題作為次要元素配合畫面平衡，根據畫面需求添加小標簽裝飾。整體視覺沖擊力強、張力足，適用于單個產品以及細節(jié)較為豐富的產品。多個物體集中式構圖和此方法同理。

杠桿式構圖

杠桿式構圖。如圖所示，畫面由主體物和此主次斜面對稱而形成的杠桿關系，與主標題之間形成穩(wěn)固的三角構造關系，此構圖方式畫面很飽滿、穩(wěn)固，適合兩種產品或一個產品兩面展示時使用。

頂視角分散式構圖

折線跳躍式式構圖

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

折線跳躍式構圖，如右上圖所示，折線跳躍式構圖。產品懸浮在畫面中，上下可跨出畫面，加以恰當的文字排版和輔助裝飾，整體畫面效果很活躍，延展性很強，是一種能快速達到視覺表現的展現方式，此構圖方式應用廣泛。折線跳躍式構圖在一些電商網站的banner中很常見。

小貼士：

關于輔助元素的應用

網站banner在輔助圖形的應用上特別廣泛，一來增加畫面豐富性，二來強化產品特性，主要是提取產品相關的元素進行圖形化，有小面積的純屬強化功能或增加趣味性的添加，也有大范圍的對產品紋樣或特性的延屬。主要還是在產品特點基礎上進行提取。

廣告語規(guī)范

廣告語要注意極限用語的應用。

根據廣告法，極限用語不得出現在商品列表頁、商品的標題、副標題、主圖、詳情頁以及商品包裝等位置。極限用語包括如下詞匯：

國家級、世界級、最高級、最佳、最大、第一、唯一、首個、首選、最好、最大、精確、頂級、最高、最低、最、最具、最便宜、最新、最先進、最大程度、最新技術、最先進科學、國家級產品、填補國內空白、絕對、獨家、首家、最新、最先進、第一品牌、金牌、名牌、優(yōu)秀、最先、頂級、獨家、全網銷量第一、全球首發(fā)、全國首家、全網首發(fā)、世界領先、頂級工藝、最新科學、最新技術、最先進加工工藝、最時尚、極品、頂級、頂尖、終極、最受歡迎、王牌、銷量冠軍、第一(NO.1或者Top1)、極致、永久、王牌、掌門人、領袖品牌、獨一無二、獨家、絕無僅有、前無古人、史無前例、萬能等。

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