Soumettre la recherche
Mettre en ligne
淘宝网设计规范及设计禁忌
•
1 j'aime
•
1,097 vues
T
tanzer723
Suivre
Design
Signaler
Partager
Signaler
Partager
1 sur 42
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
10 Banner Ad Design Mistakes You Don't Want to Make
10 Banner Ad Design Mistakes You Don't Want to Make
Canned Banners
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Recommandé
10 Banner Ad Design Mistakes You Don't Want to Make
10 Banner Ad Design Mistakes You Don't Want to Make
Canned Banners
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
ChatGPT webinar slides
ChatGPT webinar slides
Alireza Esmikhani
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Project for Public Spaces & National Center for Biking and Walking
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
DevGAMM Conference
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
Erica Santiago
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software
Contenu connexe
En vedette
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
ChatGPT webinar slides
ChatGPT webinar slides
Alireza Esmikhani
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Project for Public Spaces & National Center for Biking and Walking
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
DevGAMM Conference
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
Erica Santiago
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software
En vedette
(20)
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
How to have difficult conversations
How to have difficult conversations
Introduction to Data Science
Introduction to Data Science
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
The six step guide to practical project management
The six step guide to practical project management
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
ChatGPT webinar slides
ChatGPT webinar slides
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
淘宝网设计规范及设计禁忌
1.
淘宝网设计规范&设计禁忌 淘宝北京UED 岱岩 2012.03.01 of1 42
2.
视觉设计规范 of2 42 淘宝北京UED
岱岩
3.
1. 淘宝字体: 视觉设计规范 • 中文: •
英文: 淘宝北京UED 岱岩of3 42
4.
2.淘宝网Logo使用规范: 视觉设计规范 • 淘宝网主品牌Logo: 淘宝北京UED 岱岩of4
42
5.
2.淘宝网Logo使用规范: 视觉设计规范 • 淘宝网频道Logo: 淘宝字体+橙色+域名 主体+频道/类目/产品名 机票 淘宝北京UED
岱岩of5 42
6.
2.淘宝网Logo使用规范: 视觉设计规范 • 其他特殊业务: 图形化/字体+个性化颜色+域名 淘宝北京UED 岱岩of6
42
7.
3.栅格规范: 视觉设计规范 • 什么是栅格系统: 淘宝北京UED 岱岩of7
42
8.
3.栅格规范: 视觉设计规范 • 栅格系统的应用: 12 x
80的应用 24 x 40的应用 16 x 60的应用 淘宝北京UED 岱岩of8 42
9.
3.栅格规范: 视觉设计规范 • 淘宝网栅格系统: (40*n)-10=W (50*n)-10=W 淘宝北京UED
岱岩of9 42
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.
4. 30%原则: 视觉设计规范 • 5%吊顶+10%头部+10%导航+5%底部 导航+搜索 淘宝北京UED
岱岩of11 42
12.
4. 30%原则: 视觉设计规范 • 5%吊顶 淘宝北京UED
岱岩of12 42
13.
4. 30%原则: 视觉设计规范 • 20%头部+导航 淘宝北京UED
岱岩of13 42
14.
4. 30%原则: 视觉设计规范 • 5%底部 淘宝北京UED
岱岩of14 42
15.
5. Banner设计规范: 视觉设计规范 • 文案标准 •
字体使用 • 体验一致 • 色彩协调 • 图片限制 淘宝北京UED 岱岩of15 42
16.
5. Banner设计规范: 视觉设计规范 • 文案标准 简洁,阅读顺畅;少用英文,确保拼写正确; 中文不可出现错别字; 淘宝北京UED
岱岩of16 42
17.
5. Banner设计规范: 视觉设计规范 • 字体使用 最多不超过3种字体;只能使用授权字体-方正 字体;文字清晰可读; 淘宝北京UED
岱岩of17 42
18.
5. Banner设计规范: 视觉设计规范 • 体验一致 设计形式与点击预期保持一致; 淘宝北京UED
岱岩of18 42
19.
5. Banner设计规范: 视觉设计规范 • 色彩协调 明亮,干净,与整体页面协调; 淘宝北京UED
岱岩of19 42
20.
5. Banner设计规范: 视觉设计规范 • 图片限制 选择切合主题的图片;不可使用有版权纠纷的 图片和违禁图片(色情,反动等...) 淘宝北京UED
岱岩of20 42
21.
6. 常用控件介绍: 视觉设计规范 • 色彩 •
图片 • 文字 • 留白 • Bar • Tab • 弹出层 • 输入反馈 • 表单 • 分页 • 面包屑 • 斑马线 • 步骤条 • 加载中 • 级联列表 淘宝北京UED 岱岩of21 42
22.
6. 常用控件介绍: 视觉设计规范 • 色彩 交易线主色 交易线辅色 商户平台主色 商户平台辅色 淘宝北京UED
岱岩of22 42
23.
6. 常用控件介绍: 视觉设计规范 • 图片 商品图片使用基本原则: 图片比例为1:1; 广告位: 参考栅格规则; 淘宝北京UED
岱岩of23 42
24.
6. 常用控件介绍: 视觉设计规范 • 文字 文本文字:
链接文字: 深灰为基本文字颜色,当文 字内容有主次等级时,应用 辅助颜色; 文字大小: 淘宝北京UED 岱岩of24 42
25.
6. 常用控件介绍: 视觉设计规范 • 留白 1.板块间距留白为10px; 2.板块与内容间距留白为10px; 3.内容单元与单元之间留白为10px; 4.内容的间距为10px; 注: 以上原则从1到4优先等级从高到低,原则1、2 必须遵守,原则3、4可根据实际情况调整; 淘宝北京UED
岱岩of25 42
26.
6. 常用控件介绍: 视觉设计规范 • Bar 样式举例: 淘宝北京UED
岱岩of26 42
27.
6. 常用控件介绍: 视觉设计规范 • Tab 样式举例: 淘宝北京UED
岱岩of27 42
28.
6. 常用控件介绍: 视觉设计规范 • 弹出层 样式举例: 淘宝北京UED
岱岩of28 42
29.
6. 常用控件介绍: 视觉设计规范 • 输入反馈 淘宝北京UED
岱岩of29 42
30.
6. 常用控件介绍: 视觉设计规范 • 表单控件 淘宝北京UED
岱岩of30 42
31.
6. 常用控件介绍: 视觉设计规范 • 分页控件 通用样式: 适用场景:淘宝产品的列表和搜索结果页面。 小分页: 适用场景:空间小、结构较紧密的列表页面。 淘宝北京UED
岱岩of31 42
32.
6. 常用控件介绍: 视觉设计规范 • 面包屑 样式举例: 淘宝北京UED
岱岩of32 42
33.
6. 常用控件介绍: 视觉设计规范 • 斑马线 样式举例: 淘宝北京UED
岱岩of33 42
34.
6. 常用控件介绍: 视觉设计规范 • 步骤条 淘宝北京UED
岱岩of34 42
35.
6. 常用控件介绍: 视觉设计规范 • 加载中 适用场景:加载页面、上传图片、文件时出现,从无内容到有内容的场景。 样式举例: 淘宝北京UED
岱岩of35 42
36.
6. 常用控件介绍: 视觉设计规范 • 级联列表 淘宝北京UED
岱岩of36 42
37.
设计禁忌 淘宝北京UED 岱岩 • 交互设计3大禁忌; •
推广设计基本禁忌6条; of37 42
38.
1. 页面信息拼写或内容错误: 设计禁忌—交互设计3大禁忌 案例A:页面信息拼写错误: 案例B:页面内容错误: 淘宝北京UED 岱岩of38
42
39.
2. 操作产生无效或错误反馈: 设计禁忌—交互设计3大禁忌 案例A:由设计缺陷造成的链接无效或悬停无反应:由于整个交互 操作范围超出了一屏,因此会让用户感觉链接无效等错误发生: 淘宝北京UED 岱岩of39
42
40.
3. 操作完成后与预期不符: 设计禁忌—交互设计3大禁忌 案例A:如左右滚动按钮操作后结果是上下滚动: 淘宝北京UED 岱岩of40
42
41.
设计禁忌—推广设计基本禁忌 1.合法。 2.显示正常。 3.反馈明显且有效。 4.贴合主题。 5.控制体积和大小。 6.拼写正确。 淘宝北京UED 岱岩 推广设计基本禁忌 of41 42
42.
谢谢 Thanks 淘宝北京UED 岱岩of42 42
Télécharger maintenant