淘寶商城首頁售出廣告視覺規(guī)范
V2.0 最后更新 2011年1月9日
以下設(shè)計規(guī)則，均基于商城品牌視覺調(diào)性主旨出發(fā)：
·淘寶商城品品牌調(diào)性關(guān)鍵詞 —— 優(yōu)雅、簡潔、豐富。
·banner設(shè)計關(guān)鍵字 —— 清晰、品牌、簡潔、優(yōu)雅
目前售出廣告存在的普遍問題：
1. 圖片、素材、文字等元素不清晰
2. 使用飽和度過高的對比色
3. 文字、按鈕等元素質(zhì)感太重太多
4. 文字字體過大，字體特效很多，造成山寨感
5. 跟商城首頁的設(shè)計不夠協(xié)調(diào)
對應(yīng)的解決方案及詳解：
1. 形式
只能使用靜態(tài)設(shè)計, 不接受GIF、FLASH等一切動畫形式
2. 素材：
商城要求：圖片、素材、文字等元素必須高精度，清晰可讀。
【圖片、素材、文字等元素不清晰案例】
不清晰定義：
元素、文字、圖片等因拉伸或壓縮出現(xiàn)的 “鋸齒”、 “噪點”、“模糊”的現(xiàn)象。
【鋸齒案例】
【噪點案例】
【模糊案例】
本素材的Logo是典型的小圖強行拉伸變大的案例
本素材的產(chǎn)品圖比較模糊, 清晰度不夠, 也是由于小圖強行拉伸變大造成的
本素材的洗衣液、文案都存在了拉伸導(dǎo)致模糊的現(xiàn)象
解析：造成不清晰原因：
（1）素材本身取材問題，精度不夠高，原材料不清晰。
-- 原始照片、素材必須足夠清晰。
（2）素材被強行拉伸放大，導(dǎo)致精度不夠，變得模糊。
-- 可以縮小素材, 勿強行拉伸放大，必須使用較大的原始素材。
（3）圖片存儲的壓縮程度太大，導(dǎo)致色彩失真。或者壓縮格式不適合。
-- 推薦存儲方法：
格式：PNG-8 | 對于顏色數(shù)比較少、尺寸比較小的圖片表現(xiàn)較好，存儲圖片節(jié)省空間。
K數(shù)：（長x寬x0.35）+2K=最終K數(shù) | 可在“顏色”選項微調(diào)來達到這個結(jié)果
2．配色：
商城要求：
（1） 不能使用高飽和度撞色，會造成用戶瀏覽的眼球不適。
（2） 除產(chǎn)品（包括模特）、LOGO之外，文案與背景的主色彩總數(shù)不能超過3種 （同色系除外）
1.【反面案例】
高飽和度的配色對眼睛又很強的刺激, 極易引起視覺躲避和視覺疲勞
解析：高飽和度: 飽和度是指色彩的鮮艷程度，高飽和度指顏色鮮艷程度過高，會直接引起用戶的視覺疲勞。也是山寨感的很大原因之一！
如上案例中所用綠色，在飽和度軸中已屬于最高級別：
更多飽和度色譜案例：綠、藍、粉、紅、黃、藍
應(yīng)避免的撞色：
參考上圖案例，圈定色區(qū)均為飽和度太高，均不可以互相搭配！
同時，此類顏色也不能和黑色撞色。例如：亮紅配純黑、亮藍配純黑等。
【反面案例】
本素材顏色過多, 顯得過于雜亂
3． 背景：
商城要求：
（1） 背景不得使用白色（會使焦點圖開天窗）
（2） 不能使用高飽和度顏色做背景色（高飽和度定義參見配色）
【反面案例】
本素材飽和度過高、配色不成體系容易造成山寨感
該案例同時有高飽和度撞色問題
4． 文案：
商城要求：
（1）文字不得使用圖層樣式（包括投影、陰影、浮雕、漸變、描邊、外發(fā)光）
（2）文字整體占構(gòu)圖比例不能超過50%
【反面案例】
圖層樣式使用不當, 極易造成視角混亂、風格不統(tǒng)一而產(chǎn)生的山寨感
本素材文字過大, 排版很生硬, 視覺體驗不太好
（3）文字字體、大小、顏色的使用均不能超過3種(不包括Logo及特殊文案*)
* Logo及特殊文案:
a. 注冊商標(不包括說明文字)
b. 代言人簽名(不包括說明文字)
c. 素材中出現(xiàn)的帶有文字的圖片
d. 產(chǎn)品系列標識(不包括說明文字) 。
右側(cè)手寫簽名部分算做特殊文案, 但品牌代言人等說明文字部分仍按普通文案處理
BellaColla是Logo, 但”日本原裝”就要按普通文按處理
（4）文字必須滿足：左對齊、右對齊、居中對齊的其中一項。
（5）文字同背景的顏色對比必須清晰可讀。
（6）不能使用純文字的Banner形式, Banner中必須出現(xiàn)相應(yīng)產(chǎn)品圖。
（7）不能出現(xiàn)：包括但不僅限于xx折、滿xx減xx、滿xx優(yōu)惠xx、滿xx省xx，sale xx%、xx%off等字樣。 現(xiàn)在可以出現(xiàn) 多少元起。滿多少元包郵。。。。
（8）天貓首頁的所有描述型文案不允許使用繁體字
純文字的Banner把首頁搞得像大字報, 有悖于”品質(zhì)之城”的方向
【字體有圖層樣式】
·投影
·內(nèi)陰影
·外發(fā)光、內(nèi)發(fā)光
·浮雕
·漸變
·描邊
【文字綜合案例】
【字體沒有對齊案例】
文案沒有使用對齊, 使得頁面看起來凌亂不堪
【正面案例：居中對齊】
【正面案例：左對齊】
【文字不能與背景同色系案例】
文字很難辨識, 對素材的點擊效果影響很大
8．構(gòu)圖：
商城要求：不能使用切割構(gòu)圖 切割構(gòu)圖指有貫穿色塊、貫穿切割線的構(gòu)圖形式。
【反面案例】
切割構(gòu)圖使得首屏被分的很零散, 嚴重影響視覺品質(zhì)
9．版權(quán)：
商城要求：廣告所用文字、產(chǎn)品、模特等出現(xiàn)的素材均需有對應(yīng)的使用版權(quán)，不得侵權(quán)使用。同時, 不能使用聚劃算、蘑菇街等未經(jīng)授權(quán)的電子商務(wù)公司的Logo
10．對于反例的處理：
歡迎賣家、招商小二指出線上、審核過程中對規(guī)范執(zhí)行不嚴的案例, 一旦確認違規(guī)將會立即要求賣家修改并重新上傳！但是決不可能因為之前的失誤而放寬對報錯賣家的審核標準．
11．審核流程：
請在上線前3天提交至UED
12．官方模板：
為使設(shè)計能力較為欠缺的初級賣家也能較為高效的傳達促銷信息并通過審核, 我們準備了一套通用的官方模板, 其中有多種配色供賣家選擇使用. 使用官方模板有利于提高素材審核效率
PSD文件共包含10余種配色, 后續(xù)將會整理更多的模板供賣家使用
13．審核郵件模板：
1. 郵件分為內(nèi)容、附件兩部分, 其中內(nèi)容部分應(yīng)寫明排期及Banner縮略圖, 附件應(yīng)包含素材本身的圖片文件, 以便審核素材清晰度.
內(nèi)容模板:
|
商城焦點圖廣告 |
MRING |
|
廣告計劃排期 |
從（2011/09/12 00:00）到（2011/09/12 23:59）時間段內(nèi)發(fā)布； |
|
廣告圖片視覺初稿1 |
|
14．獎勵措施：
商城會對設(shè)計出眾、點擊效率好、積極配合工作的賣家予以首頁資源位的獎勵。
獎勵位置:
類目對應(yīng)樓層的某個資源位, 賣家可以提前1周指定使用獎勵資源位的日期, 由首頁資源負責人(謝櫻)安排獎勵位置.
獎勵周期:
每個月初真對上一月的Banner評選一次. 獎勵時間為一天。
獎勵規(guī)則:
由招商部負責小二整理出每月點擊數(shù)據(jù)最好的20個Banner郵件至UED, UED審核負責人將會組織UED所有視覺設(shè)計師對Banner的視覺品質(zhì)進行打分, 具體的分數(shù)權(quán)重如下:
|
構(gòu)圖 |
配色 |
利益點呈現(xiàn) |
跟首頁和諧程度 |
|
2分 |
3分 |
2分 |
3分 |
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進貨渠道。超市進貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則
