淘宝商城首页售出广告视觉规范
V2.0 最后更新 2011年1月9日
以下设计规则,均基于商城品牌视觉调性主旨出发:
·淘宝商城品品牌调性关键词 —— 优雅、简洁、丰富。
·banner设计关键字 —— 清晰、品牌、简洁、优雅
目前售出广告存在的普遍问题:
1. 图片、素材、文字等元素不清晰
2. 使用饱和度过高的对比色
3. 文字、按钮等元素质感太重太多
4. 文字字体过大,字体特效很多,造成山寨感
5. 跟商城首页的设计不够协调
对应的解决方案及详解:
1. 形式
只能使用静态设计, 不接受GIF、FLASH等一切动画形式
2. 素材:
商城要求:图片、素材、文字等元素必须高精度,清晰可读。
【图片、素材、文字等元素不清晰案例】
不清晰定义:
元素、文字、图片等因拉伸或压缩出现的 “锯齿”、 “噪点”、“模糊”的现象。
【锯齿案例】
【噪点案例】
【模糊案例】
本素材的Logo是典型的小图强行拉伸变大的案例
本素材的产品图比较模糊, 清晰度不够, 也是由于小图强行拉伸变大造成的
本素材的洗衣液、文案都存在了拉伸导致模糊的现象
解析:造成不清晰原因:
(1)素材本身取材问题,精度不够高,原材料不清晰。
-- 原始照片、素材必须足够清晰。
(2)素材被强行拉伸放大,导致精度不够,变得模糊。
-- 可以缩小素材, 勿强行拉伸放大,必须使用较大的原始素材。
(3)图片存储的压缩程度太大,导致色彩失真。或者压缩格式不适合。
-- 推荐存储方法:
格式:PNG-8 | 对于颜色数比较少、尺寸比较小的图片表现较好,存储图片节省空间。
K数:(长x宽x0.35)+2K=最终K数 | 可在“颜色”选项微调来达到这个结果
2.配色:
商城要求:
(1) 不能使用高饱和度撞色,会造成用户浏览的眼球不适。
(2) 除产品(包括模特)、LOGO之外,文案与背景的主色彩总数不能超过3种 (同色系除外)
1.【反面案例】
高饱和度的配色对眼睛又很强的刺激, 极易引起视觉躲避和视觉疲劳
解析:高饱和度: 饱和度是指色彩的鲜艳程度,高饱和度指颜色鲜艳程度过高,会直接引起用户的视觉疲劳。也是山寨感的很大原因之一!
如上案例中所用绿色,在饱和度轴中已属于最高级别:
更多饱和度色谱案例:绿、蓝、粉、红、黄、蓝
应避免的撞色:
参考上图案例,圈定色区均为饱和度太高,均不可以互相搭配!
同时,此类颜色也不能和黑色撞色。例如:亮红配纯黑、亮蓝配纯黑等。
【反面案例】
本素材颜色过多, 显得过于杂乱
3. 背景:
商城要求:
(1) 背景不得使用白色(会使焦点图开天窗)
(2) 不能使用高饱和度颜色做背景色(高饱和度定义参见配色)
【反面案例】
本素材饱和度过高、配色不成体系容易造成山寨感
该案例同时有高饱和度撞色问题
4. 文案:
商城要求:
(1)文字不得使用图层样式(包括投影、阴影、浮雕、渐变、描边、外发光)
(2)文字整体占构图比例不能超过50%
【反面案例】
图层样式使用不当, 极易造成视角混乱、风格不统一而产生的山寨感
本素材文字过大, 排版很生硬, 视觉体验不太好
(3)文字字体、大小、颜色的使用均不能超过3种(不包括Logo及特殊文案*)
* Logo及特殊文案:
a. 注册商标(不包括说明文字)
b. 代言人签名(不包括说明文字)
c. 素材中出现的带有文字的图片
d. 产品系列标识(不包括说明文字) 。
右侧手写签名部分算做特殊文案, 但品牌代言人等说明文字部分仍按普通文案处理
BellaColla是Logo, 但”日本原装”就要按普通文按处理
(4)文字必须满足:左对齐、右对齐、居中对齐的其中一项。
(5)文字同背景的颜色对比必须清晰可读。
(6)不能使用纯文字的Banner形式, Banner中必须出现相应产品图。
(7)不能出现:包括但不仅限于xx折、满xx减xx、满xx优惠xx、满xx省xx,sale xx%、xx%off等字样。 现在可以出现 多少元起。满多少元包邮。。。。
(8)天猫首页的所有描述型文案不允许使用繁体字
纯文字的Banner把首页搞得像大字报, 有悖于”品质之城”的方向
【字体有图层样式】
·投影
·内阴影
·外发光、内发光
·浮雕
·渐变
·描边
【文字综合案例】
【字体没有对齐案例】
文案没有使用对齐, 使得页面看起来凌乱不堪
【正面案例:居中对齐】
【正面案例:左对齐】
【文字不能与背景同色系案例】
文字很难辨识, 对素材的点击效果影响很大
8.构图:
商城要求:不能使用切割构图 切割构图指有贯穿色块、贯穿切割线的构图形式。
【反面案例】
切割构图使得首屏被分的很零散, 严重影响视觉品质
9.版权:
商城要求:广告所用文字、产品、模特等出现的素材均需有对应的使用版权,不得侵权使用。同时, 不能使用聚划算、蘑菇街等未经授权的电子商务公司的Logo
10.对于反例的处理:
欢迎卖家、招商小二指出线上、审核过程中对规范执行不严的案例, 一旦确认违规将会立即要求卖家修改并重新上传!但是决不可能因为之前的失误而放宽对报错卖家的审核标准.
11.审核流程:
请在上线前3天提交至UED
12.官方模板:
为使设计能力较为欠缺的初级卖家也能较为高效的传达促销信息并通过审核, 我们准备了一套通用的官方模板, 其中有多种配色供卖家选择使用. 使用官方模板有利于提高素材审核效率
PSD文件共包含10余种配色, 后续将会整理更多的模板供卖家使用
13.审核邮件模板:
1. 邮件分为内容、附件两部分, 其中内容部分应写明排期及Banner缩略图, 附件应包含素材本身的图片文件, 以便审核素材清晰度.
内容模板:
商城焦点图广告 |
MRING |
广告计划排期 |
从(2011/09/12 00:00)到(2011/09/12 23:59)时间段内发布; |
广告图片视觉初稿1 |
|
14.奖励措施:
商城会对设计出众、点击效率好、积极配合工作的卖家予以首页资源位的奖励。
奖励位置:
类目对应楼层的某个资源位, 卖家可以提前1周指定使用奖励资源位的日期, 由首页资源负责人(谢樱)安排奖励位置.
奖励周期:
每个月初真对上一月的Banner评选一次. 奖励时间为一天。
奖励规则:
由招商部负责小二整理出每月点击数据最好的20个Banner邮件至UED, UED审核负责人将会组织UED所有视觉设计师对Banner的视觉品质进行打分, 具体的分数权重如下:
构图 |
配色 |
利益点呈现 |
跟首页和谐程度 |
2分 |
3分 |
2分 |
3分 |
乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。