how-to-write-guideline-1

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

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

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 產品規范

相關好文:《腦洞大開!你應該知道的產品設計14招》

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

【優設人氣超高的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

點贊
收藏 13

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏