@周莜視界 ：作為一篇干貨貼，必須來點鎮樓的。如下為規范匯總頁，里面囊括了許多大家熟知品牌的規范，全文共有四部分，分為品牌規范、設計語言規范、產品規范、前端規范，每一部分都有對應的典型案例供學習，絕對值得收藏！
1.Brand Style Guide Examples
Brand Style Guide Examples, Hand-picked by Saijo George
從中大致可以總結出規范的分類：
- 品牌類（VI）一般以產品宣傳手冊形式呈現，幫助塑造企業形象。
- 平臺、系統類面向第三方開發者，介紹平臺、系統生態的設計指南，要說明平臺理念，開發者要遵循什么，以及遵循這套規范有什么好處。
- 產品業務類面向產品內部，規范側重在產品設計和實現層面，需要將內容梳理清楚，實用性第一，設計文檔和標注都配好，設計師或者工程師可以直接參考和使用。
根據這三大類，以下精選了各類別的規范案例。
一、BrandGuidelines品牌規范
相關好文見：《怒贊！27個知名企業品牌VI視覺識別系統規范手冊》
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
Airbnb的品牌進化讓我們感受到了更加開放的品牌文化，它甚至歡迎所有人創造自己的Logo，一起創造Airbnb。
5. Uber
除了規范內容清晰的梳理外，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
9. Apple Watch
Apple Watch Human Interface Guidelines
10. Apple TV
Apple TV Human Interface Guidelines
Google的規范是一個非常好的案例。自Google 提出material design 以來，這份規范對materialdesign的闡釋非常詳盡。不論是規范的框架梳理，還是具體每個模塊的呈現和說明都可圈可點。
11. Material design
http://www.google.com/design/spec/material-design/introduction.html#introduction-principles
12. IBM
很多大公司，國外如Apple、Google，國內如騰訊、阿里等，每個公司幾乎都有自己的設計風格。IBM這個規范庫就是告訴你IBM的設計風格是如何定義的。
其中，這份規范還包括下圖還有很多精選圖表設計案例。
三、ProductGuidelines 產品規范
相關好文：《腦洞大開！你應該知道的產品設計14招》
13.MIKADO
這是一份寫的非常完整、清晰的產品規范，不僅針對web、ios、andriod平臺均有相對應的規范，而且還提供了UI樣式表，這對于設計師復用UI元素非常實用（力薦）。
產品規范除了對每個元素進行尺寸規范外，在基本規范已有的基礎上，可以就某一些特別的產品或者功能進行說明。如下面介紹的MailChimp Email規范，在MailChimp產品規范基礎上，針對Email一些特別情況進行了說明。
14. MailChimp
四、Frontend Guidelines 前端規范
Bootstrap和Semantic UI算是很好用的前端開源工具，這也可以看作是一個豐富的前端規范案例。
15. Bootstrap
16.Semantic UI
除此，還有一些結構復雜、式樣繁多的對外產品也會梳理前端規范，就比如下面的Homify、FontShop、MailChimp、LonelyPlanet。
17.Homify
Homify Living Style Guide: Components
18. FontShop
https://www.fontshop.com/styleguide/modules
19. 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
【優設人氣超高的PS教程排行榜】
Top 1：效果超棒的極簡風格海報！
《AI+PS新手教程！手把手教你打造簡約現代的極簡海報》Top 2：給心愛的妹子畫一個Q版頭像！
《萌系PS教程！手把手教你打造Q版的個人頭像》Top 3：上帝說，要有光！
《PS高手教程！教你輕松打造效果美到爆的光照效果》
作者：@周莜視界
【優設網 原創文章 投稿郵箱：2650232288@qq.com】
================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量103萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓