IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

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

Catherine • 2017-06-02 00:11 • 交互设计

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

文章目录[隐藏]

  • BrandGuidelines品牌规范
  • DesignLanguage 平台规范
    • Apple
    • Google
  • ProductGuidelines 产品规范
  • Frontend Guidelines 前端规范

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

1.Brand Style Guide Examples

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

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

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

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

BrandGuidelines品牌规范

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

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

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

3. Dropbox

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

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

4. Airbnb

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

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

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

5. Uber

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

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

DesignLanguage 平台规范

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

Apple

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

6. iOS Human Interface Guidelines

7. OSX Human Interface Guidelines

https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/

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

8. UIDesign Do’sand Don’ts

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

9. Apple Watch

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

10. Apple TV

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

Google

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

11. Material design

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

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

12. IBM

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

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

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

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

ProductGuidelines 产品规范

13.MIKADO

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

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

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

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

14. MailChimp

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

Frontend Guidelines 前端规范

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

15. Bootstrap

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

16.Semantic UI

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

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

17.Homify

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

18. FontShop

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

19. MailChimp

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

20. LonelyPlanet

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

选择WEB版还是PDF/PPT版?

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

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

不得不说

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

参考

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

How To Createa Web Design Style Guide

InspirationalExamples of UI Style Guides

 

作者:周莜yoyo(微信公众号:yoyofootprint),一枚腾讯交互设计师,从事设计行业时间越长,越能感受到设计无处不在。她希望将设计思维应用到生活中。

版权声明:若该文章涉及版权问题,请联系我们主编,QQ:419297645

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

Apple WatchGoogleGUIioslogoMaterial designPSUIWEB交互交互设计交互设计师产品产品经理产品设计动效动画场景微信案例分析经验视觉设计设计师设计案例设计规范
赞 (0)
CatherineCatherine
0
生成海报
网页设计中如何利用“黄金比例”?
上一篇 2017-06-01 23:19
2016年设计师必须掌握的微交互知识
下一篇 2017-06-02 01:18

相关推荐

  • 帮助视觉设计师高效工作的三大招 交互设计

    帮助视觉设计师高效工作的三大招

    互联网视觉设计师如何在职业上精深一直是我在思考的,遇到过许多视觉设计师想转行去做交互或者项目经理,找不到视觉设计师的价值和专深入点。我也在思考与探索中,下文是我现在想到的一些点,也欢迎同道中人一同探讨,互相启发。

    2017-05-05
  • 移动端文字与排版设计的六个原则 交互设计

    移动端文字与排版设计的六个原则

    .space-betw {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    }

    - (NSDictionary *)demoTextAttributes {
    NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new];
    ps.alignment = NSTextAlignmentJustified;
    // here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.
    return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};
    }

    2017-05-31
  • 专业干货!一个特别好用的搜索框必须考虑的五个方面 交互设计

    专业干货!一个特别好用的搜索框必须考虑的五个方面

    编者按:今天@励定洲 这篇译文开门见山,从搜索框的可见性、范围搜索、局部搜索、高级搜索以及输入五个方面聊聊如何设计出一个特别好用的搜索功能,内附大量实例(想知道谷歌搜索有哪个交互不好吗),结合实践,深入浅出,帮你掌握在线搜索的这五个方面。

    2017-06-02
  • 3种空状态出现场景,5种消灭空状态的技能教你玩转空状态 交互设计

    3种空状态出现场景,5种消灭空状态的技能教你玩转空状态

    举个例子:假设有一款图片分享类的应用,然后有个页面是“我的图片”,如果在我从来没有发布过图片的时候,这个页面理所应当就是空的。并且在这个时候,第一种方法显然是不可行的。当然,空荡荡的界面有不好,所以此时可以通过操作指引来引导用户产生内容。

    2017-05-28
  • IxD案例

    【交互设计】【装置艺术】传统昆曲与数字视觉的结合

    ▼数字与戏曲在数字时代大势所趋的背景下,传统戏曲也进行了一些试探性的尝试。交互性能和身临其境成为了戏曲的一种新的模式。演员通过光影达到像素化的效果,圆滑光影与演员的冲突,减少真实与虚拟的隔阂。打造沉浸式的戏曲艺术。▼沉浸与交互数字技术润滑了装置与观众的联系,发挥更大的互动作用。利用空间互动装置设计,以评估演出、空间和观众之间的联系,从而为观众提供一种身临其境的体验。▼古典与未来昆曲是一种东方古典戏剧艺术形式。数字技术的使用可以带来一种新...

    2018-04-17
  • BRD、MRD 和 PRD 之间的区别与联系有哪些

    今天看到一篇讲述产品设计中几种文档的文章(一个老外的blog,Michael on Product Management & Marketing),感觉很好,结合工作的实际整理一下。按照那篇文章的思路,从产品的抽象到具体主要产出的文档有BRD…

    交互设计WiKi 2015-11-09
  • 干货推荐|关于无线C端产品的一些UX建议 交互设计

    干货推荐|关于无线C端产品的一些UX建议

    开始之前,先来看一下Eric WK.See-To的一项最新研究成果(Eric WK.See-To等人针对如何提升移动端视频的UX满意度做了以下研究)。

    2017-05-29
  • 听说,昨天网上打了这么一场营销+公关大战~ 交互设计

    听说,昨天网上打了这么一场营销+公关大战~

    你喜欢我们这些文字的话就推荐给更多的人吧。姐姐先行谢过了!我们公众号是:Aioued,记得分享哦,么么哒! ----------------------------我是一条分割线,你看不见我!-------------------- 正文: 这件事的起因,…

    2014-10-30
  • 移动端下拉表单的更好选择 交互设计

    移动端下拉表单的更好选择

    在表单中使用下拉菜单看起来并不重要:它们在用户界面上占用的空间不大,它们自动验证输入,所有浏览器和平台都可以支持它们,它们实现起来容易且方便,用户知道它们的好。

    2017-04-28
  • 三招让你的APP假装“更快” 交互设计

    三招让你的APP假装“更快”

    天下武功,唯快不破。体验也是如此,往往app的反应越快越流畅,用户的体验就会越好。尽管移动设备的硬件、系统、网速等都不是你能所控制的,但仍有办法让你的app看起来加载得很快,一起来看看这些小技巧吧。

    2017-06-03
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress