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

相关推荐

  • 作为体验或界面设计师,你可知什么时候、什么地方用动效来提升可用性? 交互设计

    作为体验或界面设计师,你可知什么时候、什么地方用动效来提升可用性?

    本文将表述我对这个问题的回答——“作为体验或界面设计师,如何得知什么时候、什么地方用动效来提升可用性?”Z Yuhan:这篇文章真的超级难翻译啊,原文的描绘非常细腻隐晦,大部分句子根本没法直译,只能理解后用中文的表达方式重新造句,幸好我的翻译水平也有进步啦~大家要是发现有什么问题,不论是翻译还是错字,欢迎评论我指正 : )

    2017-08-04
  • 浙大教授告诉你用户体验的知识、内容、流程 交互设计

    浙大教授告诉你用户体验的知识、内容、流程

    作为一门新兴学科,在具体的设计操作过程中,用户体验设计吸取了多个学科的知识。除了第一章所讲述的面向人的学科和面向技术的学科之外,还包括面向设计的学科。面向人的学科包括心理学、生理学、社会学、文化学、语言学、哲学和美学等方面的知识;面向设计的学科包括工业设计、艺术设计、数字媒体设计和动画设计等;面向技术的学科主要指信息沟通技术,涉及到计算机技术、信息技术、电子技术、网络技术、软件工程、人机交互技术和数据库等。

    2017-05-29
  • 交互设计

    想成为高级交互设计师?这是我的5个经验总结

    Echo :交互设计师真正提高的标志是思维思想上的提高,而非专业技能的提高。

    2017-10-16
  • 运营设计常用“套路”拾趣(附实战案例) 交互设计

    运营设计常用“套路”拾趣(附实战案例)

    阳春白日风花香,又是一年芳菲至,在这最美的时节,各种运营活动又开启了,就此从视觉角度结合实战案例的小心得,对运营设计的“套路”浅谈一二。罗伯特.庞德说过:“这是一个两分钟的世界,你只有一分钟展示给人们,另一分钟让他们喜欢你。”

    2017-04-30
  • 设计师升级篇|动感特效轻松get 交互设计

    设计师升级篇|动感特效轻松get

    新手设计师相较于资深设计师,后者技能更丰富且全动感特效轻松get 面,很多人想要进阶资深却苦于培养新技能,笔者在经手不少视频动效项目后,对于技能进阶颇有心得。

    2017-05-07
  • 微信热点

    Sketchelp·2018暑期工业设计考研课程

    还是你们熟悉的Eric,还是你们熟悉的二师兄。2014年的夏天,天气热的没羞没臊,我们第一次开辅导考研手绘,那时只有三个人,一套笔。那时很开心,每天举着煎饼果子画手绘。两周年,四学期,已完善的课程,将在这个暑假全新开始:是不是临摹还行,轮到自己设计就歇菜?想知道有没有考研的“套路”?一个产品换个角度画,却死活画不出?产品+交互界面真的有很难?故事版的卡通形象一点也不卡通怎么办?“那天”万一考卷画坏了怎么办?答案都在这里。。。真实一线从业...

    2018-05-04
  • 如何完美碾压用户体验职位面试 【UXRen译#152】

    作者: Patrick Neeman |  翻译:Shea ,校审:Ariel   当你成功进入了电话面试或者面对面面试的阶段,这就意味着你已经通过了最艰难的考验:你已经具备了在该公司工作的技能。现在要被评估是否具备软实力以及能否…

    交互专题 2017-08-07
  • 在进入网易后,我对用户体验界限的思考 交互设计

    在进入网易后,我对用户体验界限的思考

    作为一个用户体验设计师,除了接需求做需求之外,需要定期的对自己的项目进行反思,在反思的过程中,总结经验教训,这是在专业上成长的一个重要方式。这篇文章,就是来自于对自己进入网易后的一个反思。在我日常的反思中,比较天马行空,并没有特定的线索,也许是页面上一个按钮的使用方式,也许是当前业务的商业化路线。而本文的这个题目是今年最常思考的一个问题,主要关于自己对于界限的理解。

    2017-05-10
  • 微信热点

    用户体验扩展:一个设计管理者的4步走框架

    用户体验不是一个有规则去衡量的工程,它是科学与艺术的一部分。所有的设计流程最终都会被打破,用户体验扩展的诀窍是创建一个灵活应对设计规模和时间推移直到完成的框架。基于我们的朋友Jason Culbertson(Airbnb设计经理)在Airbnb、GUSTO等公司的产品设计研究中,他在用户体验实践中创建了以下几个方面的框架:.方法&系统-UX领导人和他的团队保证核心标准的工具是什么?如何做一个系统化的设计,而不是碎片化的?.团队结构-随着...

    2018-03-02
  • 用户行为的“及时”理论 【UXRen译#184】

    作者:Jeff Atwood   |  翻译:露露,校审:Chen Jing   我一直认为软件设计对用户在使用该软件时的行为有着深远的影响。 从两方面来讲: 有意地让“正确”的操作容易操作。 有意地让 “错误”的操作不容易操作。 无论…

    交互专题 2017-11-01
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

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