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

淘宝网设计规范设计禁忌2012.03.01of421视觉设计规范of422视觉设计规范1. 淘宝字体：中文：英文：of423视觉设计规范2.淘宝网Logo使用规范：淘宝网主品牌Logo：of424视觉设计规范2.淘宝网Logo使用规范：淘宝网频道Logo：主体+频道/类目/产品名淘宝字体+橙色+域名机票of425视觉设计规范2.淘宝网Logo使用规范：其他特殊业务：图形化/字体+个性化颜色+域名of426视觉设计规范3.栅格规范：什么是栅格系统：of427视觉设计规范3.栅格规范：栅格系统的应用：12 x 80的应用24 x 40的应用16 x 60的应用of428视觉设计规范3.栅格规范：淘宝网栅格系统：（40*n）-10=W（50*n）-10=Wof429视觉设计规范3.栅格规范：建议使用的栅格结构：950宽度990宽度190750190790240740230710270670240540190270470190990950of4210视觉设计规范4. 30%原则：5%吊顶+10%头部+10%导航+5%底部导航+搜索of4211视觉设计规范4. 30%原则：5%吊顶of4212视觉设计规范4. 30%原则：20%头部+导航of4213视觉设计规范4. 30%原则：5%底部of4214视觉设计规范5. Banner设计规范：文案标准字体使用体验一致色彩协调图片限制of4215视觉设计规范5. Banner设计规范：文案标准简洁，阅读顺畅；少用英文，确保拼写正确；中文不可出现错别字；of4216视觉设计规范5. Banner设计规范：字体使用最多不超过3种字体；只能使用授权字体-方正字体；文字清晰可读；of4217视觉设计规范5. Banner设计规范：体验一致设计形式与点击预期保持一致；of4218视觉设计规范5. Banner设计规范：色彩协调明亮，干净，与整体页面协调；of4219视觉设计规范5. Banner设计规范：图片限制选择切合主题的图片；不可使用有版权纠纷的图片和违禁图片（色情，反动等...）of4220视觉设计规范6. 常用控件介绍：表单分页面包屑斑马线步骤条加载中级联列表色彩图片文字留白BarTab弹出层输入反馈of4221视觉设计规范6. 常用控件介绍：色彩交易线主色交易线辅色商户平台主色商户平台辅色of4222视觉设计规范6. 常用控件介绍：图片商品图片使用基本原则：图片比例为1:1；广告位：参考栅格规则；of4223视觉设计规范6. 常用控件介绍：文字链接文字：文字大小：文本文字：深灰为基本文字颜色，当文字内容有主次等级时，应用辅助颜色;of4224视觉设计规范6. 常用控件介绍：留白1.板块间距留白为10px；2.板块与内容间距留白为10px；3.内容单元与单元之间留白为10px；4.内容的间距为10px；注：以上原则从1到4优先等级从高到低，原则1、2必须遵守，原则3、4可根据实际情况调整；of4225视觉设计规范6. 常用控件介绍：Bar样式举例：of4226视觉设计规范6. 常用控件介绍：Tab样式举例：of4227视觉设计规范6. 常用控件介绍：弹出层样式举例：of4228视觉设计规范6. 常用控件介绍：输入反馈of4229视觉设计规范6. 常用控件介绍：表单控件of4230视觉设计规范6. 常用控件介绍：分页控件通用样式：适用场景：淘宝产品的列表和搜索结果页面。小分页：适用场景：空间小、结构较紧密的列表页面。of4231视觉设计规范6. 常用控件介绍：面包屑样式举例：of4232视觉设计规范6. 常用控件介绍：斑马线样式举例：of4233视觉设计规范6. 常用控件介绍：步骤条of4234视觉设计规范6. 常用控件介绍：加载中适用场景：加载页面、上传图片、文件时出现，从无内容到有内容的场景。样式举例：of4235视觉设计规范6. 常用控件介绍：级联列表of4236设计禁忌交互设计3大禁忌；推广设计基本禁忌6条；of4237设计禁忌—交互设计3大禁忌1. 页面信息拼写或内容错误：案例A：页面信息拼写错误：案例B：页面内容错误：of4238设计禁忌—交互设计3大禁忌2. 操作产生无效或错误反馈：案例A：由设计缺陷造成的链接无效或悬停无反应:由于整个交互操作范围超出了一屏，因此会让用户感觉链接无效等错误发生：of4239设计禁忌—交互设计3大禁忌3. 操作完成后与预期不符：案例A：如左右滚动按钮操作后结果是上下滚动：of4240设计禁忌—推广设计基本禁忌推广设计基本禁忌1.合法。2.显示正常。3.反馈明显且有效。4.贴合主题。5.控制体积和大小。6.拼写正确。of4241谢谢Thanksof4242国有国法，家有家规；如果一个网站没有了设计规则，那么整个网站有可能会被设计的五花八门，千奇百怪，特