美的集团电商VIS系统手册

美的生活电器网络终端视觉规范 前 言Forewords 美的生活电器事业部成立于2002年，隶属美的集团成员，是厨房电热电器、饮水净水电器、按摩电器专业制造服务商。主要产品包括电饭煲、电磁炉、饮水机、电压力锅、电水壶、豆浆机、净水设备、煎烤器、商用厨房电器等，是目前世界最大的电饭煲、电磁炉、电压力锅和饮水机制造基地。 品牌是信誉的长期积累，标志着企业的产品性能，服务质量的状况。对美的生活电器来说，美的品牌是我们一个很大的优势，我们要坚持去走品牌路线，才能保持可持续高速发展。 随着电子商务的飞速发展，电器产品网络销售的爆发增长是大趋势，我们必须确保美的生活电器品牌形象在网络终端视觉表现上是统一和一致的。为达到这一目标，我们希望每位使用者能理解并严格遵守《美的生活电器网络终端设计规范》中的所有准则。 视觉识别是传播中的关键元素。《美的生活电器网络终端设计规范》主要用于指导美的生活电器经销商在网络终端视觉设计上的创作，从而确立美的生活电器领先行业的品牌形象。 店铺规范 素材规范 基础系统 01 人物形象应用02 人物形象应用03 人物形象应用04 场景素材选择05 场景素材选择 01 店铺结构02 店标03 店招04 客服区域（横版）05 客服区域06 产品分类07 橱窗banner08 主图规范09 主图规范 01 标志02 标志 辅助色块03 标志 保护空间04 标志 版本05 标志 位置06 标志 禁用样例07 颜色系统 主色与辅助色08 颜色系统 产品系列色09 标志 字体规范10 标志 辅助图形版本11 标志 辅助图形的构成12 标志 应用规范 尺寸和比例13 标志 应用规范14 标志 应用规范15 标志 应用规范16 标志 淘宝天猫应用17 标志 组合 新增网络输出规范 描述规范 01 淘宝天猫首焦应用规范02 淘宝天猫钻展应用规范03 淘宝天猫聚划算应用规范04 淘宝天猫聚划算品牌团banner应用规范05 京东商城首焦应用规范06 京东商城钻展应用规范 01 页面结构02 形象广告03 产品参数04 品牌介绍05 售后服务 Visual IdentityMideaConsumer Electric 美的生活电器网络终端视觉规范 基础系统 13 标志 应用规范14 标志 应用规范15 标志 应用规范16 标志 淘宝天猫应用17 标志 组合 07 颜色系统 主色与辅助色08 颜色系统 产品系列色09 标志 字体规范10 标志 辅助图形版本11 标志 辅助图形的构成12 标志 应用规范 尺寸和比例 01 标志02 标志 辅助色块03 标志 保护空间04 标志 版本05 标志 位置06 标志 禁用样例 A 基础系统 01 标志 美的标志是由中文“美的”字标与英文“Midea”字标组合而成，是美的品牌形象中最重要的元素之一。中英文标志应用于国内市场，英文标志应用于海外市场，国内市场原则上不建议使用英文标志。保持标志的正确性和统一性是品牌传播的关键，在网络上应用标志时，请严格遵循规范；制作标志时，请使用标准文档，以免出现偏差。 中英文标志组合 网格规范 英文标志 网格规范 A 基础系统 02 标志 辅助色块 通常情况下，美的标志为白色，叠在美的蓝辅助色块上，增加其视觉冲击力和识别性。网络中的应用，除特殊情况外，务必使用首选辅助色块。首选辅助色块长边为短边的一倍，标志左右居中放置。标志距离底边一个“M”字母高。辅助色块与标志为固定搭配，不可修改。为保证正确性，请使用统一提供的标准文件，切勿自行制作！注：英文标志应用于海外市场，国内市场原则上不建议使用英文标志。 A 基础系统 03 标志 保护空间 在不可使用首选辅助色块时，我们设定保护空间来保证此时标志的最佳识别性，确保其他元素不会产生干扰。严格遵循保护空间的规范，对于标志的传播以及识别是非常重要的。标志的常规最小保护空间为英文字标中M字母的高度。 A 基础系统 04 标志 版本 为了适应不同媒介的应用，我们提供了首选标志、单色标志、以及它们的反白版本可供选择。请根据不同的网络平台媒介自身应用的局限性选用识别性最佳的标志版本。 单色标志 单色反白标志 A 基础系统 05 标志 位置 标志通常放置于画布的右上角。 当标志应用在很窄的画布上，比如画布宽度≤2个标志宽，而同时又要保证标志的可识别性，则不可以缩小标志放在右上角。此时标志应居中对齐在画布的顶部。 A 基础系统 06 标志 禁用样例 保持标志的正确性和统一性是品牌传播的关键，应用标志时，请严格遵循美的标志规范；制作标志时，请使用标准文档，以免出现偏差。 下方列举了美的标志网络应用的不规范例子。包括：拆分标志的元素；辅助色块被描边；标志被变形；特殊效果；标志使用美的蓝以外的颜色；背景色与辅助色块太相近；标志被镂空；标志不完整；保护空间过小等。 A 基础系统 07 颜色系统 主色与辅助色 美的在企业视觉形象传播中使用规范的颜色系统。在网络传播中也同样适用。主色为美的蓝，也是品牌识别最重要的元素之一，常用于标志及品牌层面的元素。白色作为大面积使用的主色，为美的蓝的识别提供了足够的空间。辅助色由几个不同的黑色阶组成。可用于文字、窗口元素、图片背景等。 美的蓝 A 基础系统 08 颜色系统 产品系列色 为了使消费者更容易识别理解，参照2013年《美的集团品牌设计指导手册-试行版》相关规范，我们采用两种不同的颜色来区分美的生活电器不同的品类。 CMYK=0.30.100.0RGB=250.190.0 CMYK=30.0.100.0RGB=196.215.0 A 基础系统 09 标志 字体规范 中文字体采用方正兰亭系列黑体，稳重优雅。适合作为国际化的美的企业品牌字体。字体系列有中粗黑、准黑、黑三种不同的粗度可供选择。英文字体采用同样优雅现代的Gotham字体系列。配合方正兰亭黑体系列的三个粗度分别有Gothambold、Gothammedium、Gothambook与其相对应。在中英文企业字体缺失的情况下可以使用系统默认字体代替。中文使用华文黑体系列，英文使用Arial字体系列。注：字体的颜色最高不能超过90%黑 方正兰亭中粗黑（FZLanTingHei-DB1-GBK） ｛｝美的生活电器网络终端视觉规范 字体规范补充 方正兰亭准黑（FZLanTingHei-M-GBK） ｛｝美的生活电器网络终端视觉规范 1、店铺使用网络字体需严格按照指引，应用方正兰亭中粗黑简体、方正兰亭准黑简体、方正兰亭黑简体，明确避免侵权纠纷；2、尽 量 不 要 使 用 集 团 授 权 范 围 外 的 其 他 字 体 ， 如 方 正 字 体（除授权范围内三种字体外）、汉仪字体（属于高危字体）、博洋字体、雅坊字体等；却因使用需要应用特殊字体，也必须进行修改，保证与原字体形成区别；3、因使用非授权字体产生的侵权纠纷，均由店铺自行承担相关责任。 方正兰亭黑（FZLanTingHei-DB1-GBK） ｛｝美的生活电器网络终端视觉规范 A 基础系统 10 标志 辅助图形版本 辅助图形主要作用是充当版式的信息承载物，使画面感更稳重、大气。辅助图形分为灰白、浅灰和深灰，来适应不同背景色、图片的搭配。 辅助图形(灰白) 辅助图形(浅灰) 辅助图形(深灰) A 基础系统 11 标志 辅助图形的构成 辅助图形由两层组成。上层为具有透明质感的斜线纹理，下层为带有透明度和层叠方式的色块。辅助图形使用到的颜色仅为白色、25%黑、75%黑三种。构成方式见下图。注：实际应用中请勿自行设计辅助图形，请使用辅助图形纹理的标准文件（见附件）。 A 基础系统 12 标志 应用规范 尺寸和比例 美的标志网络终端应用常用以下比例：横版：1:11:21:41:7>1:7竖版：2:1>2:1标志大小与画布比例是固定的。标志宽度总与画布的短边成比例。标志比例规则同时适用于横、竖版网络终端应用。 A 基础系统 13 标志 应用规范 B.保护空间规范(以一个M的高度为1个X单位) 1.靠右边应用，右边保护空间2个X（X的标准值等于一个美的标志的大写M的高度）。 注：适用于网络终端的外投广告钻展素材（除淘宝首焦钻展统一规范外）。 应用举例（网络广告钻展素材）：A.标志区域B.主画面文案区域C.主画面产品区域其中规范的区域是建议的使用区域，可根据实际情况微调内容的位置。 主画面创作保护空间(度量标准：以一个M的高度为1个X单位) A 基础系统 14 标志 应用规范 B.保护空间规范(以一个M的高度为1个X单位) 标志置于画布的顶部居中。此时左右的保护空间可以允许大于2X。当标志应用在很窄的画布上，比如画布宽度≤2个标志宽，而同时又要保证标志的可识别性，则不可以缩小标志放在右上角。此时标志应居中对齐在画布的顶部。 注：适用于网络终端的外投广告钻展素材（除淘宝首焦钻展统一规范外）。 应用举例（竖版网络广告钻展素材）：A.标志区域B.主画面文案区域C.主画面产品区域其中规范的区域是建议的使用区域，可根据实际情况微调内容的位置。不同内容请勿更换区域位置。 主画面创作保护空间(度量标准：以一个M的高度为1个X单位) A 基础系统 15 标志 应用规范 C.不同形式logo 背景颜色搭配建议 A 基础系统 16 标志 淘宝天猫应用 2013年9月淘宝网改版，首焦、钻展出台了新规范。淘宝首焦规定模版LOGO呈现，适用由中文“美的”字标与英文“Midea”字标组合的logo。（见下图）自由创作的首焦LOGO呈现沿用下图。21 A 基础系统 17 标志组合 美的标志与其他渠道网络电子商务平台标志组合，仅在促销或推广活动中使用，请勿作为常规活动使用 。（度量标准：以一个M的高度为1个X单位） 创作案例 Visual IdentityMideaConsumer Electric 美的生活电器网络终端视觉规范 店铺规范 01 店铺结构02 店标03 店招04 客服区域（横版）05 客服区域06 产品分类 07 橱窗banner08 主图规范09主图规范 B 店铺规范 01 店铺结构 B 店铺规范 02 店标 店标必须出现完整店铺名称，分两大类：1、旗舰店，如：美的旗舰店；2、专卖店，如：美的专卖店。生活电器小冰火人部分根据各自店铺属性修改。以下是展现规范：红色字 B 店铺规范03 店招 B 店铺规范 04 客服区域（横版） B 店铺规范 创作案例： B 店铺规范 B 店铺规范 07 橱窗banner B 店铺规范 08 主图规范 常规销售主图规范建议： A.标志区域B.促销及广告区域C.产品位置



D.赠品位置




E.活动主题2F.价格位置其中规范的区域是建议的使用区域美的标志的摆放位置固定右上角，标志颜色可选用白底蓝logo和蓝底白logo两种产品位置固定在正中，价格位置固定在右下角其他区域可根据实际情况微调内容 创作案例： B 店铺规范 09 主图规范 Visual IdentityMideaConsumer Electric 美的生活电器网络终端视觉规范 描述规范 01 页面结构02 形象广告03 产品参数04 品牌介绍05 售后服务 C 描述规范 01 页面结构 C 描述规范 02 形象广告 注：描述页除了第一张品牌广告需要LOGO外，其余模块都不需要加LOGO。 C 描述规范 03 产品参数 A.标题区域B.参数区域C.广告图形区域其中规范的区域是建议的使用区域，可根据实际情况微调内容的位置。注：描述页除了第一张品牌广告需要LOGO外，其余模块都不需要加LOGO。 A.标题区域沿用模块导航条的相关规范 C 描述规范 04 品牌介绍 A.标题区域B.创意区域注：描述页除了第一张品牌广告需要LOGO外，其余模块都不需要加LOGO。