淘宝网设计规范及设计禁忌课件.ppt

1、淘宝网设计规范&设计禁忌视觉设计规范1.淘宝字体：视觉设计规范 中文：英文：2.淘宝网Logo使用规范：视觉设计规范 淘宝网主品牌Logo：of4422.淘宝网Logo使用规范：视觉设计规范 淘宝网频道Logo：淘宝字体+橙色+域名主体+频道/类目/产品名机票of5422.淘宝网Logo使用规范：视觉设计规范 其他特殊业务：图形化/字体+个性化颜色+域名of6423.栅格规范：视觉设计规范 什么是栅格系统：of7423.栅格规范：视觉设计规范 栅格系统的应用：12 x 80的应用24 x 40的应用16 x 60的应用of8423.栅格规范：视觉设计规范 淘宝网栅格系统：（40*n）-10=W

2、（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设计规范：视

3、觉设计规范 文案标准简洁，阅读顺畅；少用英文，确保拼写正确；中文不可出现错别字；of16425.Banner设计规范：视觉设计规范 字体使用最多不超过3种字体；只能使用授权字体-方正字体；文字清晰可读；of17425.Banner设计规范：视觉设计规范 体验一致设计形式与点击预期保持一致；of18425.Banner设计规范：视觉设计规范 色彩协调明亮，干净，与整体页面协调；of19425.Banner设计规范：视觉设计规范 图片限制选择切合主题的图片；不可使用有版权纠纷的图片和违禁图片（色情，反动等.）of20426.常用控件介绍：视觉设计规范 色彩 图片 文字 留白 Bar Tab 弹出层

4、 输入反馈 表单 分页 面包屑 斑马线 步骤条 加载中 级联列表of21426.常用控件介绍：视觉设计规范 色彩交易线主色交易线辅色商户平台主色商户平台辅色of22426.常用控件介绍：视觉设计规范 图片商品图片使用基本原则：图片比例为1:1；广告位：参考栅格规则；of23426.常用控件介绍：视觉设计规范 文字文本文字：链接文字：深灰为基本文字颜色，当文字内容有主次等级时，应用辅助颜色;文字大小：of24426.常用控件介绍：视觉设计规范 留白1.板块间距留白为10px；2.板块与内容间距留白为10px；3.内容单元与单元之间留白为10px；4.内容的间距为10px；注：以上原则从1到4优先

5、等级从高到低，原则1、2必须遵守，原则3、4可根据实际情况调整；of25426.常用控件介绍：视觉设计规范 Bar样式举例：of26426.常用控件介绍：视觉设计规范 Tab样式举例：of27426.常用控件介绍：视觉设计规范 弹出层样式举例：of28426.常用控件介绍：视觉设计规范 输入反馈of29426.常用控件介绍：视觉设计规范 表单控件of30426.常用控件介绍：视觉设计规范 分页控件通用样式：适用场景：淘宝产品的列表和搜索结果页面。小分页：适用场景：空间小、结构较紧密的列表页面。of31426.常用控件介绍：视觉设计规范 面包屑样式举例：of32426.常用控件介绍：视觉设计规范

6、 斑马线样式举例：of33426.常用控件介绍：视觉设计规范 步骤条of34426.常用控件介绍：视觉设计规范 加载中适用场景：加载页面、上传图片、文件时出现，从无内容到有内容的场景。样式举例：of35426.常用控件介绍：视觉设计规范 级联列表of3642设计禁忌 交互设计3大禁忌；推广设计基本禁忌6条；of37421.页面信息拼写或内容错误：设计禁忌交互设计3大禁忌案例A：页面信息拼写错误：案例B：页面内容错误：of38422.操作产生无效或错误反馈：设计禁忌交互设计3大禁忌案例A：由设计缺陷造成的链接无效或悬停无反应:由于整个交互操作范围超出了一屏，因此会让用户感觉链接无效等错误发生：of39423.操作完成后与预期不符：设计禁忌交互设计3大禁忌案例A：如左右滚动按钮操作后结果是上下滚动：of4042设计禁忌推广设计基本禁忌1.合法。2.显示正常。3.反馈明显且有效。4.贴合主题。5.控制体积和大小。6.拼写正确。推广设计基本禁忌of4142