設計規範如何寫,這20個精選案例讓你大開眼界

數十萬互聯網從業者的共同關注!

作者:周莜yoyo
微信公眾號:yoyofootprint
作者授權早讀課發表,轉載請聯繫作者。

歡迎投稿到早讀課,投稿郵箱:[email protected]

作為一篇乾貨貼,開篇必須來點鎮樓的。

如下為規範匯總頁,裡面囊括了許多大家熟知品牌的規範。

1.Brand Style Guide Examples

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

設計規範如何寫,這20個精選案例讓你大開眼界

從中大致可以總結出規範的分類:

  • 品牌類(VI)

    一般以產品宣傳手冊形式呈現,幫助塑造企業形象。

  • 平台、系統類

    面向第三方開發者,介紹平台、系統生態的設計指南,要說明平台理念,開發者要遵循什麼,以及遵循這套規範有什麼好處。

  • 產品業務類

    面向產品內部,規範側重在產品設計和做到層面,需要將內容梳理清楚,實用性第一,設計文檔和標註都配好,設計師或者工程師可以直接參考和使用。

根據這三大類,以下精選了各類別的規範案例。

BrandGuidelines品牌規範

2. 任天堂角色設計規範(1993年)

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

這是一份很早期的設計規範,對每個人物角色以及使用場景都有說明,這對於如今的動畫形象設計有很重要的參考意義。

設計規範如何寫,這20個精選案例讓你大開眼界

3. Dropbox

https://www.dropbox.com/branding

Dropbox的這份規範算得上是最為基礎的品牌規範,其對Logo的應用場合進行了說明。如果將此品牌形象擴展到信封、工裝、茶杯等,便是更加完整的VI(視覺識別系統)設計了。

設計規範如何寫,這20個精選案例讓你大開眼界

4. Airbnb

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

Airbnb的品牌進化讓我們感受到了更加開放的品牌文化,它甚至歡迎所有人創造自己的Logo,一起創造Airbnb。

設計規範如何寫,這20個精選案例讓你大開眼界
設計規範如何寫,這20個精選案例讓你大開眼界

5. Uber

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

除了規範內容清晰的梳理外,Uber細膩的動效真的打動了我,這絕對是精美之作。

設計規範如何寫,這20個精選案例讓你大開眼界

DesignLanguage 平台規範

Apple和Google Guidelines想必是大家最為熟知的平台規範了。面向第三方開發者,這類規範不僅傳遞了平台的設計和開發理念,還告訴開發者需要遵循什麼,以及精選出案例以供開發者參考。

Apple


iOS和OS X HumanInterfaceGuidelines是每位開發者都熟知的平台規範,除此,這裡也推薦一個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. OSX Human Interface Guidelines

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

設計規範如何寫,這20個精選案例讓你大開眼界

8. UIDesign Do’sand Don’ts

https://developer.apple.com/design/tips/

設計規範如何寫,這20個精選案例讓你大開眼界

9. Apple Watch

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

設計規範如何寫,這20個精選案例讓你大開眼界

10. Apple TV

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

設計規範如何寫,這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

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

很多大公司,國外如Apple、Google,國內如騰訊、阿里等,每個公司幾乎都有自己的設計風格。IBM這個規範庫就是告訴你IBM的設計風格是如何定義的。

設計規範如何寫,這20個精選案例讓你大開眼界

其中,這份規範還包括下圖還有很多精選圖表設計案例。

設計規範如何寫,這20個精選案例讓你大開眼界

ProductGuidelines 產品規範

13.MIKADO

http://mikado.infojobs.net/

這是一份寫的非常完整、清晰的產品規範,不僅針對web、ios、andriod平台均有相對應的規範,而且還提供了UI樣式表,這對於設計師復用UI元素非常實用(力薦)。

設計規範如何寫,這20個精選案例讓你大開眼界
設計規範如何寫,這20個精選案例讓你大開眼界

產品規範除了對每個元素進行尺寸規範外,在基本規範已有的基礎上,可以就某一些特別的產品或者功能進行說明。如下面介紹的MailChimp Email規範,在MailChimp產品規範基礎上,針對Email一些特別情況進行了說明。

14. MailChimp

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

設計規範如何寫,這20個精選案例讓你大開眼界

Frontend Guidelines 前端規範

Bootstrap和Semantic UI算是很好用的前端開源工具,這也可以看作是一個豐富的前端規範案例。

15. Bootstrap

http://getbootstrap.com/components/

設計規範如何寫,這20個精選案例讓你大開眼界

16.Semantic UI

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

除此,還有一些結構複雜、式樣繁多的對外產品也會梳理前端規範,就比如下面的Homify、FontShop、MailChimp、LonelyPlanet。

設計規範如何寫,這20個精選案例讓你大開眼界

17.Homify

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

設計規範如何寫,這20個精選案例讓你大開眼界

18. FontShop

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

設計規範如何寫,這20個精選案例讓你大開眼界

19. MailChimp

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

設計規範如何寫,這20個精選案例讓你大開眼界

20. LonelyPlanet

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

設計規範如何寫,這20個精選案例讓你大開眼界

選擇WEB版還是PDF/PPT版?

以上介紹的設計規範主要以WEB版為主,較之於PDF/PPT等靜態文本格式,WEB版的優勢在於:

  • 更加靈活,可以實時修改並更新;

  • 擴展性強,根據需要可以繼續添加模塊;

  • 降低瀏覽成本,打開網址就可以查看規範詳情,省去了下載文件的麻煩。

不得不說


規範多半在產品1.0版本之後才會誕生。對於設計師而言,規範很重要的意義在於解決效率問題,但同時也在一定程度上扼殺了設計師的創造力。待大家有過撰寫設計規範的經驗後,便能更好地把握規範的度,也能找到最有效地撰寫設計規範的方法了。

參考

如何建立一套 UI 設計規範?

http://www.zhihu.com/question/29936125

How To Createa Web Design Style Guide

http://designmodo.com/create-style-guides/

InspirationalExamples of UI Style Guides

http://speckyboy.com/2015/01/15/inspirational-examples-ui-style-guides/

作者介紹: 周莜yoyo,一枚騰訊交互設計師,從事設計行業時間越長,越能感受到設計無處不在。她希望將設計思維應用到生活中。

設計規範如何寫,這20個精選案例讓你大開眼界

互聯網早讀課,每天八點,風雨無阻
專注產品、設計、交互、經營
微博:@互聯網早讀課
QQ 10群:215027395
加群密碼:地區-職位-昵稱

互聯網早讀課是WeMedia自媒體成員之一,
WeMedia是自媒體第一聯盟,覆蓋5000萬人群

設計規範如何寫,這20個精選案例讓你大開眼界

閱讀原文


關於作者:
專注互聯網產品、用研、交互、設計、經營領域精選內容。信息爆炸的社會,每天用心的去讀一篇文章,也許勝過你的走馬觀花。每早八點,我們等你。

微信號:zaoduke