最美UI

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

小美说:很多公司在开发产品设计的时候都会进行设计规范书写,本着是为让设计的协作效率更加提升,但是规范多半在产品1.0版本之后才会诞生。对于设计师而言,规范很重要的意义在于解决效率问题,但同时也在一定程度上扼杀了设计师的创造力。待大家有过撰写设计规范的经验后,便能更好地把握规范的度,也能找到最有效地撰写设计规范的方法了。

如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。

1. Brand Style Guide Examples

http://saijogeorge.com/brand-style-guide-examples/

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

品牌类(VI)一般以产品宣传手册形式呈现,帮助塑造企业形象

平台、系统类面向第三方开发者,介绍平台、系统生态的设计指南,要说明平台理念,开发者要遵循什么,以及遵循这套规范有什么好处。

产品业务类面向产品内部,规范侧重在产品设计和实现层面,需要将内容梳理清楚,实用性第一,设计文档和标注都配好,设计师或者工程师可以直接参考和使用。

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

Brand Guidelines品牌规范

2.任天堂角色设计规范(1993年)

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

http://www.pressthebuttons.com/2014/12/mario-kirby-and-samus-aran-shine-in-the-nintendo-character-manual.html

3. Dropbox

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

httPS://www.dropbox.com/branding

4. Airbnb

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

http://designairs.com/inside-brand-evolution/


5. Uber

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

http://brand.uber.com/#menu

Design Language 平台规范

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

apple

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

6. iOS Human Interface Guidelines

httPS://developer.apple.com/library/iOS/DOCumentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/DOC/uid/TP40006556-CH66-SW1

7. OS X Human Interface Guidelines

httPS://developer.apple.com/library/mac/DOCumentation/UserExperience/Conceptual/OSXHIGuidelines/

8. UI Design Do’s and Don’ts

9. apple Watch

httPS://developer.apple.com/watch/human-interface-guidelines/


10. apple TV

httPS://developer.apple.com/tvos/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

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

http://www.ibm.com/design/language/framework/experience

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

Product Guidelines 产品规范

13. MIKADO

http://mikado.infojobs.net/

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


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

14. MailChimp

http://mailchimp.com/resources/email-design-guide/


Frontend Guidelines 前端规范

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

15. Bootstrap

http://getbootstrap.com/components/

16. Semantic UI

http://semantic-ui.com/introduction/integrations.html

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

17. Homify

httPS://www.homify.de/assets/styleguide.html#admin-area

18. FontShop

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

19. MailChimp

http://ux.mailchimp.com/patterns/

20. LonelyPlanet

http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

选择WEB版还是PDF/ppt版?

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

更加灵活,可以实时修改并更新;

扩展性强,根据需要可以继续添加模块;

降低浏览成本,打开网址就可以查看规范详情,省去了下载文件的麻烦。

不得不说

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

参考:

如何建立一套 UI 设计规范

How To Create a Web Design Style Guide

InspirationalExamples of UI Style Guides

转载请注明:文章来自微信公众帐号–yoyofootprint


微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
高手之路:浅谈多终端产品视觉一致性
下一篇
关于一个移动记账App的设计思考