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

相关推荐

  • 交互设计七大定律之Tesler's Law 泰思勒定律(复杂性守恒定律)

      最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从…

    交互设计 2015-08-27
  • 和华为交互设计师一起聊聊“如何让别人认可你的设计” 交互设计

    和华为交互设计师一起聊聊“如何让别人认可你的设计”

    当你的设计被人否定的时,相信大多数人都会感觉很憋屈。什么鬼?辛苦完成的工作,又要重新改过。这感觉就像自己的价值被否认,没存在感。马斯洛需求层次最高层是自我实现的需要,相信如果长期处于这么一个状态,久而久之可能会迷失自我,失去对设计的敏锐嗅觉,不敢贸然做出决策。甚至慢慢变得上级要求你什么,就做什么,毫无想法,沦为设计的“工具”。

    2017-06-05
  • 菲茨定律与未来交互方式 交互设计

    菲茨定律与未来交互方式

    未来已来,随着科技的不断发展,交互的方式也发生巨大的变化,它正一步步颠覆着我们的生活习惯。

    2017-04-27
  • 为什么扁平化设计辣么火?它会过时么? 交互设计

    为什么扁平化设计辣么火?它会过时么?

    很多时候,设计本身最核心的东西一直都没变,即更好的解决问题,风格什么的都是为解决问题而服务的

    2017-05-09
  • 微信热点

    用户体验双语术语,附阿里招聘广场舞达人资深用研专员

    这两天朋友圈被一则特殊的招聘刷屏了。先看看关键词:年薪40万,60+,广场舞 KOL(意见领袖)优先!一时间,网友沸腾了。这则招聘发布于1月16日,来自阿里巴巴集团社会招聘网站。从招聘网页上看,阿里对此职位的描述是“淘宝资深用研专员”,全称“淘宝资深用户研究专员”。记者推算了下,大致为阿里P序列中的P6等级。岗位给出的薪水待遇还不低,年薪范围是35万~40万。感兴趣的小伙伴可以转给符合要求的人士哦!点击阅读原文就可以看到这则招聘了。今天...

    2018-01-30
  • 关于“下一步 ”的设计思考 交互设计

    关于“下一步 ”的设计思考

    用户在使用 App的过程中,总会进入各种页面,并且对于页面之间的跳转, “<” 返回或者物理键均可回溯到上一级页面。但是进入下一级页面的入口,可以是各种操作按钮、缩略图、 tab或者导航切换,在工具性产品中,…

    2016-03-14
  • 防火防盗防父母:95后隐私观报告 交互设计

    防火防盗防父母:95后隐私观报告

    今天,结合QQ大数据以及对95后的采访,我们共享一份有趣的——《95后迷之隐私观报告》。 来,看看95后们是如何“防火防盗防父母,相爱相杀为自由”: 看来,95后对家长的怨念,收集起来都可以发电了。但魔高一尺,道高…

    2016-05-09
  • 微信热点

    纽约大学交互设计研究生

    恭喜马同学收到纽约大学(NYU)Interactive Telecommunications 研究生offerOFFER展示:学生作品展示:作品集要求:CREATIVE PORTFOLIOSubmission of a creative portfolio is optional due to the diversity of applicant backgrounds. Portfolio materials need not be ...

    2018-03-09
  • 用户体验设计师越来越流行,难道真的是以前的网页设计师披上了时髦的外衣?【UXRen译】

    Design+体验设计精英人才职前训练营。体验设计出国留学作品集打磨。体验设计国内考研专业培训。体验设计咨询与服务。寒假审校的一篇文章,分享给大家。回答者1:Melanie Polkosky(博士, UX心理学家)啊…有点小怀疑,是不是?我并不认为用户体验设计师就是那些穿着昂贵服装以及拥有良好自我提升技能的网页设计师。实际上,作为一名用户体验研究员兼设计师我可以告诉你,在我20多年的职业生涯中,只有少数的几次的工作是和网页相关的。与普通...

    微信热点 2018-02-28
  • 微信热点

    改善用户体验或是中小型IOT平台突围的唯一出路

    全屋智能、智慧城市成人们关注的新焦点,智能音箱、智能冰箱、智能手环、智能珠宝皆得益于物联网的发展。据推测,在2045年,最保守预测将会有超过一千亿的设备连接在互联网上,而最先在物联网上开花的便是智能家居了。网上数据显示,2021年全球智能家居市场规模将达5000亿元。前景如此可观的智能家居市场不仅催生了不少了智能家居企业,同样也催生了不少提供智能化解决方案的物联网平台,如国外的AWS、IBM、微软、谷歌,以及国内阿里云、京东微联、华为等...

    2018-05-08
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

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