学习别人的设计规范如何写?

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

1.Brand Style Guide Examples

Brand Style Guide Examples, Hand-picked by Saijo George

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

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

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

一、BrandGuidelines品牌规范 2. 任天堂角色设计规范(1993年)

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

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

3. Dropbox

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

12. IBM

IBM Design Language

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

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

三、ProductGuidelines 产品规范 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

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

文章来源:优设

作者:@周莜视界

(0)

相关推荐

  • 如何写好代码

    以硬件代码Verilog为例,其他编程语言也有许多相通甚至相同的地方.Verilog代码是硬件设计人员必须掌握,甚至要熟练运用的硬件语言,通过该Verilog代码你几乎可以实现任何你想要的功能,大到一 ...

  • 怎么在myeclipse中导入已经写好的项目

    经常我们需要学习别人写好了的源码来提升自己的编码能力,本文将介绍如何从外部导入别人已经写好的项目到我们myeclipse里面.同时也将介绍怎么给导入的工程改名的问题. 操作方法 01 打开myecli ...

  • 新手写百度经验的注意事项/新手怎么写百度经验

    每天还是会有很多新人参加.对于新人来说,写百度经验有很多需要注意的事情,小编也是一个新人,这里就和大家一起探讨一下有那些需要注意的事项. 方法/步骤1 01 [不要写伪原创] 有些新手对原创的概念可能 ...

  • 怎样才能在头条上发表文章赚钱(怎样写头条赚钱)

    很多新加入头条的朋友,都喜欢在头条刷金币.但有些朋友刷着刷着,就想在头条上写写东西,增加一下自己的收益.但由于刚玩头条,所以不知道该怎么操作?那么,今天我就在这里就手把手教你,在头条创作,该怎么顺利进 ...

  • Win8系统下如何开启手写数学公式的操作步骤

    随着网络与信息技术的发展,网络对于教育的支撑作用不断加大,在远程教育基于Web的教学模式已经成为主导.大家如果平常接触到数学,需要用到电脑查阅资料,比如教师.学生.他们会很焦躁因为在电脑中几乎不能顺利 ...

  • 如何让别人认可你的设计?

    当你的设计被人否定的时,相信大多数人都会感觉很憋屈.什么鬼?辛苦完成的工作,又要重新改过.这感觉就像自己的价值被否认,没存在感.马斯洛需求层次最高层是自我实现的需要,相信如果长期处于这么一个状态,久而 ...

  • 职前通App视觉设计规范(附完整规范文档)

    之前有些同学问我设计规范怎么写,下面就职前通app写了一部分,至于规范什么时候写,在首页确定了之后就可以写部分规范了,比如:主体颜色,文字大小,间距,部分组件,其他内容页面设计完成之后,再给予补充. ...

  • 怎么在图片上写文字?

    在写的时候为了把操作说的更明白 我们需要在图片上写文字,用于表达我们的意思,怎么用简单的方法来对图片进行简单的编辑并写上文字,今天小编就和各位学习 怎样在图片上写文字. 怎么在图片上写文字 01 首先 ...

  • 百度输入法开启手写注音功能?

    小编今天也是醉了,写了12篇图文,写的要吐血,写的是真的累,但是这又怎么样呢出?这就是生活呀!我们的生活就是这样构成的,学习:输入法开启手写注音功能? 操作方法 01 百度输入法开启手写注音功能,先第 ...