Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
淘宝网设计规范&设计禁忌
淘宝北京UED 岱岩
2012.03.01
of1 42
视觉设计规范
of2 42 淘宝北京UED 岱岩
1. 淘宝字体:
视觉设计规范
• 中文:
• 英文:
淘宝北京UED 岱岩of3 42
2.淘宝网Logo使用规范:
视觉设计规范
• 淘宝网主品牌Logo:
淘宝北京UED 岱岩of4 42
2.淘宝网Logo使用规范:
视觉设计规范
• 淘宝网频道Logo:
淘宝字体+橙色+域名 主体+频道/类目/产品名
机票
淘宝北京UED 岱岩of5 42
2.淘宝网Logo使用规范:
视觉设计规范
• 其他特殊业务:
图形化/字体+个性化颜色+域名
淘宝北京UED 岱岩of6 42
3.栅格规范:
视觉设计规范
• 什么是栅格系统:
淘宝北京UED 岱岩of7 42
3.栅格规范:
视觉设计规范
• 栅格系统的应用:
12 x 80的应用 24 x 40的应用 16 x 60的应用
淘宝北京UED 岱岩of8 42
3.栅格规范:
视觉设计规范
• 淘宝网栅格系统:
(40*n)-10=W (50*n)-10=W
淘宝北京UED 岱岩of9 42
3.栅格规范:
视觉设计规范
• 建议使用的栅格结构:
950宽度 990宽度
190 750
230 710
270 670
270 470 190
950
190 790
240 740
190
990
240 540
淘宝北京UED 岱岩...
4. 30%原则:
视觉设计规范
• 5%吊顶+10%头部+10%导航+5%底部
导航+搜索
淘宝北京UED 岱岩of11 42
4. 30%原则:
视觉设计规范
• 5%吊顶
淘宝北京UED 岱岩of12 42
4. 30%原则:
视觉设计规范
• 20%头部+导航
淘宝北京UED 岱岩of13 42
4. 30%原则:
视觉设计规范
• 5%底部
淘宝北京UED 岱岩of14 42
5. Banner设计规范:
视觉设计规范
• 文案标准
• 字体使用
• 体验一致
• 色彩协调
• 图片限制
淘宝北京UED 岱岩of15 42
5. Banner设计规范:
视觉设计规范
• 文案标准
简洁,阅读顺畅;少用英文,确保拼写正确;
中文不可出现错别字;
淘宝北京UED 岱岩of16 42
5. Banner设计规范:
视觉设计规范
• 字体使用
最多不超过3种字体;只能使用授权字体-方正
字体;文字清晰可读;
淘宝北京UED 岱岩of17 42
5. Banner设计规范:
视觉设计规范
• 体验一致
设计形式与点击预期保持一致;
淘宝北京UED 岱岩of18 42
5. Banner设计规范:
视觉设计规范
• 色彩协调
明亮,干净,与整体页面协调;
淘宝北京UED 岱岩of19 42
5. Banner设计规范:
视觉设计规范
• 图片限制
选择切合主题的图片;不可使用有版权纠纷的
图片和违禁图片(色情,反动等...)
淘宝北京UED 岱岩of20 42
6. 常用控件介绍:
视觉设计规范
• 色彩
• 图片
• 文字
• 留白
• Bar
• Tab
• 弹出层
• 输入反馈
• 表单
• 分页
• 面包屑
• 斑马线
• 步骤条
• 加载中
• 级联列表
淘宝北京UED 岱岩of21 42
6. 常用控件介绍:
视觉设计规范
• 色彩
交易线主色
交易线辅色
商户平台主色
商户平台辅色
淘宝北京UED 岱岩of22 42
6. 常用控件介绍:
视觉设计规范
• 图片
商品图片使用基本原则:
图片比例为1:1;
广告位:
参考栅格规则;
淘宝北京UED 岱岩of23 42
6. 常用控件介绍:
视觉设计规范
• 文字
文本文字: 链接文字:
深灰为基本文字颜色,当文
字内容有主次等级时,应用
辅助颜色;
文字大小:
淘宝北京UED 岱岩of24 42
6. 常用控件介绍:
视觉设计规范
• 留白
1.板块间距留白为10px;
2.板块与内容间距留白为10px;
3.内容单元与单元之间留白为10px;
4.内容的间距为10px;
注:
以上原则从1到4优先等级从高到低,原则1、2
必须遵守,原...
6. 常用控件介绍:
视觉设计规范
• Bar
样式举例:
淘宝北京UED 岱岩of26 42
6. 常用控件介绍:
视觉设计规范
• Tab
样式举例:
淘宝北京UED 岱岩of27 42
6. 常用控件介绍:
视觉设计规范
• 弹出层
样式举例:
淘宝北京UED 岱岩of28 42
6. 常用控件介绍:
视觉设计规范
• 输入反馈
淘宝北京UED 岱岩of29 42
6. 常用控件介绍:
视觉设计规范
• 表单控件
淘宝北京UED 岱岩of30 42
6. 常用控件介绍:
视觉设计规范
• 分页控件
通用样式:
适用场景:淘宝产品的列表和搜索结果页面。
小分页:
适用场景:空间小、结构较紧密的列表页面。
淘宝北京UED 岱岩of31 42
6. 常用控件介绍:
视觉设计规范
• 面包屑
样式举例:
淘宝北京UED 岱岩of32 42
6. 常用控件介绍:
视觉设计规范
• 斑马线
样式举例:
淘宝北京UED 岱岩of33 42
6. 常用控件介绍:
视觉设计规范
• 步骤条
淘宝北京UED 岱岩of34 42
6. 常用控件介绍:
视觉设计规范
• 加载中
适用场景:加载页面、上传图片、文件时出现,从无内容到有内容的场景。
样式举例:
淘宝北京UED 岱岩of35 42
6. 常用控件介绍:
视觉设计规范
• 级联列表
淘宝北京UED 岱岩of36 42
设计禁忌
淘宝北京UED 岱岩
• 交互设计3大禁忌;
• 推广设计基本禁忌6条;
of37 42
1. 页面信息拼写或内容错误:
设计禁忌—交互设计3大禁忌
案例A:页面信息拼写错误:
案例B:页面内容错误:
淘宝北京UED 岱岩of38 42
2. 操作产生无效或错误反馈:
设计禁忌—交互设计3大禁忌
案例A:由设计缺陷造成的链接无效或悬停无反应:由于整个交互
操作范围超出了一屏,因此会让用户感觉链接无效等错误发生:
淘宝北京UED 岱岩of39 42
3. 操作完成后与预期不符:
设计禁忌—交互设计3大禁忌
案例A:如左右滚动按钮操作后结果是上下滚动:
淘宝北京UED 岱岩of40 42
设计禁忌—推广设计基本禁忌
1.合法。
2.显示正常。
3.反馈明显且有效。
4.贴合主题。
5.控制体积和大小。
6.拼写正确。
淘宝北京UED 岱岩
推广设计基本禁忌
of41 42
谢谢
Thanks
淘宝北京UED 岱岩of42 42
Upcoming SlideShare
Loading in …5
×

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

927 views

Published on

Published in: Design
  • Login to see the comments

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

  1. 1. 淘宝网设计规范&设计禁忌 淘宝北京UED 岱岩 2012.03.01 of1 42
  2. 2. 视觉设计规范 of2 42 淘宝北京UED 岱岩
  3. 3. 1. 淘宝字体: 视觉设计规范 • 中文: • 英文: 淘宝北京UED 岱岩of3 42
  4. 4. 2.淘宝网Logo使用规范: 视觉设计规范 • 淘宝网主品牌Logo: 淘宝北京UED 岱岩of4 42
  5. 5. 2.淘宝网Logo使用规范: 视觉设计规范 • 淘宝网频道Logo: 淘宝字体+橙色+域名 主体+频道/类目/产品名 机票 淘宝北京UED 岱岩of5 42
  6. 6. 2.淘宝网Logo使用规范: 视觉设计规范 • 其他特殊业务: 图形化/字体+个性化颜色+域名 淘宝北京UED 岱岩of6 42
  7. 7. 3.栅格规范: 视觉设计规范 • 什么是栅格系统: 淘宝北京UED 岱岩of7 42
  8. 8. 3.栅格规范: 视觉设计规范 • 栅格系统的应用: 12 x 80的应用 24 x 40的应用 16 x 60的应用 淘宝北京UED 岱岩of8 42
  9. 9. 3.栅格规范: 视觉设计规范 • 淘宝网栅格系统: (40*n)-10=W (50*n)-10=W 淘宝北京UED 岱岩of9 42
  10. 10. 3.栅格规范: 视觉设计规范 • 建议使用的栅格结构: 950宽度 990宽度 190 750 230 710 270 670 270 470 190 950 190 790 240 740 190 990 240 540 淘宝北京UED 岱岩of10 42
  11. 11. 4. 30%原则: 视觉设计规范 • 5%吊顶+10%头部+10%导航+5%底部 导航+搜索 淘宝北京UED 岱岩of11 42
  12. 12. 4. 30%原则: 视觉设计规范 • 5%吊顶 淘宝北京UED 岱岩of12 42
  13. 13. 4. 30%原则: 视觉设计规范 • 20%头部+导航 淘宝北京UED 岱岩of13 42
  14. 14. 4. 30%原则: 视觉设计规范 • 5%底部 淘宝北京UED 岱岩of14 42
  15. 15. 5. Banner设计规范: 视觉设计规范 • 文案标准 • 字体使用 • 体验一致 • 色彩协调 • 图片限制 淘宝北京UED 岱岩of15 42
  16. 16. 5. Banner设计规范: 视觉设计规范 • 文案标准 简洁,阅读顺畅;少用英文,确保拼写正确; 中文不可出现错别字; 淘宝北京UED 岱岩of16 42
  17. 17. 5. Banner设计规范: 视觉设计规范 • 字体使用 最多不超过3种字体;只能使用授权字体-方正 字体;文字清晰可读; 淘宝北京UED 岱岩of17 42
  18. 18. 5. Banner设计规范: 视觉设计规范 • 体验一致 设计形式与点击预期保持一致; 淘宝北京UED 岱岩of18 42
  19. 19. 5. Banner设计规范: 视觉设计规范 • 色彩协调 明亮,干净,与整体页面协调; 淘宝北京UED 岱岩of19 42
  20. 20. 5. Banner设计规范: 视觉设计规范 • 图片限制 选择切合主题的图片;不可使用有版权纠纷的 图片和违禁图片(色情,反动等...) 淘宝北京UED 岱岩of20 42
  21. 21. 6. 常用控件介绍: 视觉设计规范 • 色彩 • 图片 • 文字 • 留白 • Bar • Tab • 弹出层 • 输入反馈 • 表单 • 分页 • 面包屑 • 斑马线 • 步骤条 • 加载中 • 级联列表 淘宝北京UED 岱岩of21 42
  22. 22. 6. 常用控件介绍: 视觉设计规范 • 色彩 交易线主色 交易线辅色 商户平台主色 商户平台辅色 淘宝北京UED 岱岩of22 42
  23. 23. 6. 常用控件介绍: 视觉设计规范 • 图片 商品图片使用基本原则: 图片比例为1:1; 广告位: 参考栅格规则; 淘宝北京UED 岱岩of23 42
  24. 24. 6. 常用控件介绍: 视觉设计规范 • 文字 文本文字: 链接文字: 深灰为基本文字颜色,当文 字内容有主次等级时,应用 辅助颜色; 文字大小: 淘宝北京UED 岱岩of24 42
  25. 25. 6. 常用控件介绍: 视觉设计规范 • 留白 1.板块间距留白为10px; 2.板块与内容间距留白为10px; 3.内容单元与单元之间留白为10px; 4.内容的间距为10px; 注: 以上原则从1到4优先等级从高到低,原则1、2 必须遵守,原则3、4可根据实际情况调整; 淘宝北京UED 岱岩of25 42
  26. 26. 6. 常用控件介绍: 视觉设计规范 • Bar 样式举例: 淘宝北京UED 岱岩of26 42
  27. 27. 6. 常用控件介绍: 视觉设计规范 • Tab 样式举例: 淘宝北京UED 岱岩of27 42
  28. 28. 6. 常用控件介绍: 视觉设计规范 • 弹出层 样式举例: 淘宝北京UED 岱岩of28 42
  29. 29. 6. 常用控件介绍: 视觉设计规范 • 输入反馈 淘宝北京UED 岱岩of29 42
  30. 30. 6. 常用控件介绍: 视觉设计规范 • 表单控件 淘宝北京UED 岱岩of30 42
  31. 31. 6. 常用控件介绍: 视觉设计规范 • 分页控件 通用样式: 适用场景:淘宝产品的列表和搜索结果页面。 小分页: 适用场景:空间小、结构较紧密的列表页面。 淘宝北京UED 岱岩of31 42
  32. 32. 6. 常用控件介绍: 视觉设计规范 • 面包屑 样式举例: 淘宝北京UED 岱岩of32 42
  33. 33. 6. 常用控件介绍: 视觉设计规范 • 斑马线 样式举例: 淘宝北京UED 岱岩of33 42
  34. 34. 6. 常用控件介绍: 视觉设计规范 • 步骤条 淘宝北京UED 岱岩of34 42
  35. 35. 6. 常用控件介绍: 视觉设计规范 • 加载中 适用场景:加载页面、上传图片、文件时出现,从无内容到有内容的场景。 样式举例: 淘宝北京UED 岱岩of35 42
  36. 36. 6. 常用控件介绍: 视觉设计规范 • 级联列表 淘宝北京UED 岱岩of36 42
  37. 37. 设计禁忌 淘宝北京UED 岱岩 • 交互设计3大禁忌; • 推广设计基本禁忌6条; of37 42
  38. 38. 1. 页面信息拼写或内容错误: 设计禁忌—交互设计3大禁忌 案例A:页面信息拼写错误: 案例B:页面内容错误: 淘宝北京UED 岱岩of38 42
  39. 39. 2. 操作产生无效或错误反馈: 设计禁忌—交互设计3大禁忌 案例A:由设计缺陷造成的链接无效或悬停无反应:由于整个交互 操作范围超出了一屏,因此会让用户感觉链接无效等错误发生: 淘宝北京UED 岱岩of39 42
  40. 40. 3. 操作完成后与预期不符: 设计禁忌—交互设计3大禁忌 案例A:如左右滚动按钮操作后结果是上下滚动: 淘宝北京UED 岱岩of40 42
  41. 41. 设计禁忌—推广设计基本禁忌 1.合法。 2.显示正常。 3.反馈明显且有效。 4.贴合主题。 5.控制体积和大小。 6.拼写正确。 淘宝北京UED 岱岩 推广设计基本禁忌 of41 42
  42. 42. 谢谢 Thanks 淘宝北京UED 岱岩of42 42

×