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

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（50*n）

2、-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. 常用控件介绍：视觉设计规范色彩图片文字留白BarTab弹出层输入反馈表单分页面包屑斑马线步骤条

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

5、实际情况调整；of25426. 常用控件介绍：视觉设计规范Bar样式举例：of26426. 常用控件介绍：视觉设计规范Tab样式举例：of27426. 常用控件介绍：视觉设计规范弹出层样式举例：of28426. 常用控件介绍：视觉设计规范输入反馈of29426. 常用控件介绍：视觉设计规范表单控件of30426. 常用控件介绍：视觉设计规范分页控件通用样式：适用场景：淘宝产品的列表和搜索结果页面。小分页：适用场景：空间小、结构较紧密的列表页面。of31426. 常用控件介绍：视觉设计规范面包屑样式举例：of32426. 常用控件介绍：视觉设计规范斑马线样式举例：of33426. 常用控件介绍：

6、视觉设计规范步骤条of34426. 常用控件介绍：视觉设计规范加载中适用场景：加载页面、上传图片、文件时出现，从无内容到有内容的场景。样式举例：of35426. 常用控件介绍：视觉设计规范级联列表of3642设计禁忌交互设计3大禁忌；推广设计基本禁忌6条；of37421. 页面信息拼写或内容错误：设计禁忌交互设计3大禁忌案例A：页面信息拼写错误：案例B：页面内容错误：of38422. 操作产生无效或错误反馈：设计禁忌交互设计3大禁忌案例A：由设计缺陷造成的链接无效或悬停无反应:由于整个交互操作范围超出了一屏，因此会让用户感觉链接无效等错误发生：of39423. 操作完成后与预期不符：设计禁忌交互设计3大禁忌案例A：如