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

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