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

一篇干货贴,开篇必须来点镇楼的。

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

1. Brand Style Guide Examples

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

6631212901235217902

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

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

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

Brand Guidelines品牌规范

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

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

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

6631374529444499837

3. Dropbox

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

https://www.dropbox.com/branding

6631344842630560170

4. Airbnb

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

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

6631238190002660839
6631345942142187952

5. Uber

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

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

6631240389025916405

Design Language 平台规范

Apple和Google 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 Dos and Don’ts

6631326150932878459

9. Apple Watch

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

6631343743118932467
10. Apple TV

https://developer.apple.com/tvos/human-interface-guidelines/

6631246986095663368

Google

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

11. Material design

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

6631350340188699148

12. IBM

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

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

6631441599653818561

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

6631241488537544255

Product Guidelines 产品规范

13. MIKADO

http://mikado.infojobs.net/

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

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

14. MailChimp

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

6631238190002661043
Frontend Guidelines 前端规范

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

15. Bootstrap

http://getbootstrap.com/components/

6631338245560780008

16. Semantic UI

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

6631344842630560406

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

17. Homify

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

6631355837746831270

18. FontShop

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

6631406415281705146

19. MailChimp

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

6631410813328217855

20. LonelyPlanet

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

6631292066072424989

选择WEB版还是PDF/PPT版?

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

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

不得不说

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

参考:

如何建立一套 UI 设计规范?

How To Create a Web Design Style Guide

InspirationalExamples of UI Style Guides

文章来自微信公众帐号 - yoyofootprint

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/10511/

(0)
iouedioued
上一篇 2015-11-08
下一篇 2015-11-09

相关推荐

  • 未来的汽车UI将惊艳世界

    今天多数汽车UI的设计,由于不直观、过时和缺乏美学表现力,一直饱受诟病。其他行业都将设计的品质奉为标准,汽车生产商在这方面则动作迟缓。所以,许多设计师抓住了这个机会,思考未来的汽车界面会如何改变我们的…

    2016-10-18
  • 网络和辅助线的使用- Sketch从入门到精通

    设计师一般在作图的时候都离不开网格和辅助线,以前在PS或AI里的时候辅助线你必须手动去调整辅助线的位置,有的时候也难免会有误差或者半像素的偏离。但在Sketch 3里面,辅助线极大的避免了失误,并且提高了效率。 …

    2015-07-13
  • 【Material Design】Chrome iOS版微交互创新(下拉管理tab)

    平时在手机上主要用Safari,今天用Chrome时下意识的手指下拉滑动,发现已经可以通过下拉操作来管理tab,而且不仅仅是下拉刷新,还有进一步的优化和创新: 直接下拉是刷新当前tab 下拉并往左滑可打开新的tab 下拉往…

    2015-08-19
  • 精进UCD设计总监第一字典——全局UI设计规范手册

    注:本文档由PM7V – Ian Huang整理于2016年9月初,随着硬件设备条件变更,最佳规范倍率可能随着时间推移需要加倍计算! 1 UI基础 1.1 像素 1.1.1 逻辑像素(Pt) 在软件层面构成了画面图像 也称逻辑点,是控制屏幕…

    设计规范 2016-09-13
  • 苹果再次更新《App Store审核指南》,新增内容多达25处!

    近日苹果再次对《App Store审核指南》进行了更新!(这是苹果今年第三次更新《App Store审核指南》,前两次更新的时间分别是6月13日和4月19日)。 对比此前的版本,此次的修改和完善不仅涉及了SiriKit(Siri开发包…

    iOS 2016-09-23
  • 如何评价微软的 UI 设计?

    个人认为微软的三大里程碑系统WindowsXP和WindowsVista以及Windows8标志了微软在过去的UI设计中的几次革新突破。

    2016-09-06
  • 【技巧分享1期】好的用户界面设计

    1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文…

    2015-10-12
  • 6个实用技巧提升Sketch使用效率

    Sketch 3 - Bohemian Coding带给我们的这款优秀的设计工具,在速度及灵活性等方面的表现都是其竞争对手难以匹敌的。 我(英文原文作者)自己是一名自由交互设计师,很早就开始使用Sketch了,它已然成为我设计工作流程…

    2015-09-30
  • 超全面的移动端尺寸基础知识科普指南

    初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是写给初学…

    图形用户界面 2015-08-26
  • 你的产品鸡肋了吗?

    如何保证自己的产品不成为鸡肋,除了成功的商业模式外,只有高频次的使用才能保证用户忠诚度,延长产品生命周期。所以,好的用户体验也就成为了其中非常重要的致胜王牌。

    2016-10-20