2018.3淘宝网设计规范及设计禁忌讲义教材.pptxVIP

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