這20個設計規范精選案例讓你大開眼界

 　　作為一篇干貨貼，必須來點鎮樓的。如下為規范匯總頁，裡面囊括了許多大家熟知品牌的規范，全文共有四部分，分為品牌規范、設計語言規范、產品規范、前端規范，每一部分都有對應的典型案例供學習，絕對值得收藏!

　　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

　　https://www.dropbox.com/branding

　　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

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

　　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

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

　　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

　　作者微信公眾：yoyofootprint