淘宝网设计规范及设计禁忌

淘宝网设计规范&设计禁忌of142视觉设计规范of2421.淘宝字体：视觉设计规范•中文：•英文：of3422.淘宝网Logo使用规范：视觉设计规范•淘宝网主品牌Logo：of4422.淘宝网Logo使用规范：视觉设计规范•淘宝网频道Logo：淘宝字体+橙色+域名主体+频道/类目/产品名机票of5422.淘宝网Logo使用规范：视觉设计规范•其他特殊业务：图形化/字体+个性化颜色+域名of6423.栅格规范：视觉设计规范•什么是栅格系统：of7423.栅格规范：视觉设计规范•栅格系统的应用：12x80的应用24x40的应用16x60的应用of8423.栅格规范：视觉设计规范•淘宝网栅格系统：（40*n）-10=W（50*n）-10=Wof9423.栅格规范：视觉设计规范•建议使用的栅格结构：950宽度990宽度190750230710270670270470190950190790240740190990240540of10424.30%原则：视觉设计规范•5%吊顶+10%头部+10%导航+5%底部导航+搜索of11424.30%原则：视觉设计规范•5%吊顶of12424.30%原则：视觉设计规范•20%头部+导航of13424.30%原则：视觉设计规范•5%底部of14425.Banner设计规范：视觉设计规范•文案标准•字体使用•体验一致•色彩协调•图片限制of15425.Banner设计规范：视觉设计规范•文案标准简洁，阅读顺畅；少用英文，确保拼写正确；中文不可出现错别字；of16425.Banner设计规范：视觉设计规范•字体使用最多不超过3种字体；只能使用授权字体-方正字体；文字清晰可读；of17425.Banner设计规范：视觉设计规范•体验一致设计形式与点击预期保持一致；of18425.Banner设计规范：视觉设计规范•色彩协调明亮，干净，与整体页面协调；of19425.Banner设计规范：视觉设计规范•图片限制选择切合主题的图片；不可使用有版权纠纷的图片和违禁图片（色情，反动等...）of20426.常用控件介绍：视觉设计规范•色彩•图片•文字•留白•Bar•Tab•弹出层•输入反馈•表单•分页•面包屑•斑马线•步骤条•加载中•级联列表of21426.常用控件介绍：视觉设计规范•色彩交易线主色交易线辅色商户平台主色商户平台辅色of22426.常用控件介绍：视觉设计规范•图片商品图片使用基本原则：图片比例为1:1；广告位：参考栅格规则；of23426.常用控件介绍：视觉设计规范•文字文本文字：链接文字：深灰为基本文字颜色，当文字内容有主次等级时，应用辅助颜色;文字大小：of24426.常用控件介绍：视觉设计规范•留白1.板块间距留白为10px；2.板块与内容间距留白为10px；3.内容单元与单元之间留白为10px；4.内容的间距为10px；注：以上原则从1到4优先等级从高到低，原则1、2必须遵守，原则3、4可根据实际情况调整；of25426.常用控件介绍：视觉设计规范•Bar样式举例：of26426.常用控件介绍：视觉设计规范•Tab样式举例：of27426.常用控件介绍：视觉设计规范•弹出层样式举例：of28426.常用控件介绍：视觉设计规范•输入反馈of29426.常用控件介绍：视觉设计规范•表单控件of30426.常用控件介绍：视觉设计规范•分页控件通用样式：适用场景：淘宝产品的列表和搜索结果页面。小分页：适用场景：空间小、结构较紧密的列表页面。of31426.常用控件介绍：视觉设计规范•面包屑样式举例：of32426.常用控件介绍：视觉设计规范•斑马线样式举例：of33426.常用控件介绍：视觉设计规范•步骤条of34426.常用控件介绍：视觉设计规范•加载中适用场景：加载页面、上传图片、文件时出现，从无内容到有内容的场景。样式举例：of35426.常用控件介绍：视觉设计规范•级联列表of3642设计禁忌•交互设计3大禁忌；•推广设计基本禁忌6条；of37421.页面信息拼写或内容错误：设计禁忌—交互设计3大禁忌案例A：页面信息拼写错误：案例B：页面内容错误：of38422.操作产生无效或错误反馈：设计禁忌—交互设计3大禁忌案例A：由设计缺陷造成的链接无效或悬停无反应:由于整个交互操作范围超出了一屏，因此会让用户感觉链接无效等错误发生：of39423.操作完成后与预期不符：设计禁忌—交互设计3大禁忌案例A：如左右滚动按钮操作后结果是上下滚动：of4042设计禁忌—推广设计基本禁忌1.合法。2.显示正常。3.反馈明显且有效。4.贴合主题。5.控制体积和大小。6.拼写正确。推广设计基本禁忌of4142谢谢Thanksof4242