设计规范如何写？这20个精选案例让你大开眼界

@周莜视界 ：作为一篇干货贴，必须来点镇楼的。如下为规范汇总页，里面囊括了许多大家熟知品牌的规范，全文共有四部分，分为品牌规范、设计语言规范、产品规范、前端规范，每一部分都有对应的典型案例供学习，绝对值得收藏！

1.Brand Style Guide Examples

Brand Style Guide Examples, Hand-picked by Saijo George

从中大致可以总结出规范的分类：

• 品牌类（VI）一般以产品宣传手册形式呈现，帮助塑造企业形象。
• 平台、系统类面向第三方开发者，介绍平台、系统生态的设计指南，要说明平台理念，开发者要遵循什么，以及遵循这套规范有什么好处。
• 产品业务类面向产品内部，规范侧重在产品设计和实现层面，需要将内容梳理清楚，实用性第一，设计文档和标注都配好，设计师或者工程师可以直接参考和使用。

根据这三大类，以下精选了各类别的规范案例。

一、BrandGuidelines品牌规范

相关好文见：《怒赞！27个知名企业品牌VI视觉识别系统规范手册》

2. 任天堂角色设计规范（1993年）

Press The Buttons: Mario, Kirby, And Samus Aran Shine In The Nintendo Character Manual

这是一份很早期的设计规范，对每个人物角色以及使用场景都有说明，这对于如今的动画形象设计有很重要的参考意义。

3. Dropbox

https://www.dropbox.com/branding

Dropbox的这份规范算得上是最为基础的品牌规范，其对Logo的应用场合进行了说明。如果将此品牌形象扩展到信封、工装、茶杯等，便是更加完整的VI（视觉识别系统）设计了。

4. Airbnb

Inside our Brand Evolution

Airbnb的品牌进化让我们感受到了更加开放的品牌文化，它甚至欢迎所有人创造自己的Logo，一起创造Airbnb。

5. Uber

Uber Brand Guide

除了规范内容清晰的梳理外，Uber细腻的动效真的打动了我，这绝对是精美之作。

二、DesignLanguage 平台规范

Apple和Google Guidelines想必是大家最为熟知的平台规范了。面向第三方开发者，这类规范不仅传递了平台的设计和开发理念，还告诉开发者需要遵循什么，以及精选出案例以供开发者参考。
Apple

iOS和OS X HumanInterfaceGuidelines是每位开发者都熟知的平台规范，除此，这里也推荐一个Apple针对UI通用设计进行的可行示范，和apple watch 和apple tv的规范示例。

6. iOS Human Interface Guidelines

iOS Human Interface Guidelines: Designing for iOS

7. OSX Human Interface Guidelines

OS X Human Interface Guidelines: Designing for Yosemite

8. UIDesign Do’sand Don’ts

UI Design Do's and Don'ts

9. Apple Watch

Apple Watch Human Interface Guidelines

10. Apple TV

Apple TV Human Interface Guidelines

Google

Google的规范是一个非常好的案例。自Google 提出material design 以来，这份规范对materialdesign的阐释非常详尽。不论是规范的框架梳理，还是具体每个模块的呈现和说明都可圈可点。

11. Material design

http://www.google.com/design/spec/material-design/introduction.html#introduction-principles

12. IBM

IBM Design Language

很多大公司，国外如Apple、Google，国内如腾讯、阿里等，每个公司几乎都有自己的设计风格。IBM这个规范库就是告诉你IBM的设计风格是如何定义的。

其中，这份规范还包括下图还有很多精选图表设计案例。

三、ProductGuidelines 产品规范

相关好文：《脑洞大开！你应该知道的产品设计14招》

13.MIKADO

InfoJobs Design Styleguides

这是一份写的非常完整、清晰的产品规范，不仅针对web、ios、andriod平台均有相对应的规范，而且还提供了UI样式表，这对于设计师复用UI元素非常实用（力荐）。

产品规范除了对每个元素进行尺寸规范外，在基本规范已有的基础上，可以就某一些特别的产品或者功能进行说明。如下面介绍的MailChimp Email规范，在MailChimp产品规范基础上，针对Email一些特别情况进行了说明。

14. MailChimp

Email Design Guide

四、Frontend Guidelines 前端规范

Bootstrap和Semantic UI算是很好用的前端开源工具，这也可以看作是一个丰富的前端规范案例。

15. Bootstrap

Components · Bootstrap

16.Semantic UI

Integrations

除此，还有一些结构复杂、式样繁多的对外产品也会梳理前端规范，就比如下面的Homify、FontShop、MailChimp、LonelyPlanet。

17.Homify

Homify Living Style Guide: Components

18. FontShop

https://www.fontshop.com/styleguide/modules

19. MailChimp

Grid System | MailChimp

20. LonelyPlanet

Lonely Planet Travel Guides and Travel Information

选择WEB版还是PDF/PPT版？

以上介绍的设计规范主要以WEB版为主，较之于PDF/PPT等静态文本格式，WEB版的优势在于：

• 更加灵活，可以实时修改并更新；
• 扩展性强，根据需要可以继续添加模块；
• 降低浏览成本，打开网址就可以查看规范详情，省去了下载文件的麻烦。

不得不说

规范多半在产品1.0版本之后才会诞生。对于设计师而言，规范很重要的意义在于解决效率问题，但同时也在一定程度上扼杀了设计师的创造力。待大家有过撰写设计规范的经验后，便能更好地把握规范的度，也能找到最有效地撰写设计规范的方法了。

参考

How To Create a Web Design Style Guide

Inspirational Examples of UI Style Guides

作者微信公众：yoyofootprint

【优设人气超高的PS教程排行榜】

Top 1：效果超棒的极简风格海报！
《AI+PS新手教程！手把手教你打造简约现代的极简海报》

Top 2：给心爱的妹子画一个Q版头像！
《萌系PS教程！手把手教你打造Q版的个人头像》

Top 3：上帝说，要有光！
《PS高手教程！教你轻松打造效果美到爆的光照效果》

作者：@周莜视界

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量103万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com