您現在的位置是:電腦技術吧?>? 組裝維修 ??>??讓我大開眼界,讓人大開眼界??>??正文詳情

讓我大開眼界,讓人大開眼界

蒲惜筠2019-11-13 20:01:08 人圍觀
簡介奇跡讓人大開眼界作為一個干貨站,你必須到城里來。以下是規格匯總頁,其中包括許多知名品牌規格。全文由品牌規格、設計語言規格、產品規格、前端規格四部分組成。每一部分都

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

如下為規范匯總頁,里面囊括了許多大家熟知品牌的規范,全文共有四部分,分為品牌規范、設計語言規范、產品規范、前端規范,每一部分都有對應的典型案例供學習,絕對值得收藏!  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 Dosand Donts  UI Design Dos and Donts

  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版還是php?/PDF/' target='_blank'>PDF/PPT版?  以上介紹的設計規范主要以WEB版為主,較之于PDF/PPT等靜態文本格式,WEB版的優勢在于:  更加靈活,可以實時修改并更新;  擴展性強,根據需要可以繼續添加模塊;  降低瀏覽成本,打開網址就可以查看規范詳情,省去了下載文件的麻煩。

  不得不說  規范多半在產品1.0版本之后才會誕生。

對于設計師而言,規范很重要的意義在于解決效率問題,但同時也在一定程度上扼殺了設計師的創造力。

待大家有過撰寫設計規范的經驗后,便能更好地把握規范的度,也能找到最有效地撰寫設計規范的方法了。

  參考  How To Create a Web Design Style Guide  Inspirational Examples of UI Style Guides  作者微信公眾:yoyofootprint

版權聲明:本文由 蒲惜筠 整理編輯。

原標題:讓我們大開眼界,以使以來他讓我大開眼界

轉載注明出處:http://www.dn9ww09s.icu/assemble/11929.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 臺式電腦怎么安裝顯卡,臺式機顯卡安裝圖解

    臺式電腦怎么安裝顯卡,臺式機顯卡安裝圖解 相關圖片臺式機如何安裝獨立顯卡許多DIY用戶喜歡為自己的電腦安裝獨立的顯卡。是的,與集成顯卡相比,獨立顯卡有很多優點,如性能、內存和處理能力。如果你想體驗獨立顯卡給我帶來的好...

  • word分隔符怎么用,word 分隔符

    word分隔符怎么用,word 分隔符 相關圖片word文檔取消分隔符當使用Word 2007的正式版本編寫Word文檔時,需要在文檔中插入分隔符,但許多人不知道如何插入分隔符。實際上,只要打開Word 2007,就可以看到要插入word刪除分隔符...

  • 設計師都去哪找素材,室內設計素材

    設計師都去哪找素材,室內設計素材 相關圖片廠房建筑設計我很好奇在《運球與行為》上發表名著的諸神在哪里尋找素材?是的,即使他們需要優秀材料的支持來完成他們的工作。今天我們將公布他們的材料來源。有網站,PSD材料...

  • 安卓手機安全模式怎么解除,三星手機安全模式怎么解除

    安卓手機安全模式怎么解除,三星手機安全模式怎么解除 相關圖片怎么解除手機密碼與windows的安全模式類似,用戶可以在安全模式下輕松修復手機系統的一些錯誤,可以事半功倍。安全模式是移動Android系統中的一種特殊模式。在安全模式下,系手機退...

  • 網頁設計代碼案例,網頁設計案例

    網頁設計代碼案例,網頁設計案例 相關圖片網頁設計案例下載Webgl技術可以實現一些很酷的二維/三維圖形。與flash不同,webgl可以在主流瀏覽器中運行,而無需安裝插件。因為3D效果,設計師又有了一個創作靈感。通過網頁設計哪...

  • cad臨時文件在哪,如何找到cad臨時文件

    cad臨時文件在哪,如何找到cad臨時文件 相關圖片天正臨時文件當我們使用Auto CAD軟件時,我們會遇到崩潰和致命錯誤。當退出ACAD過程時,CAD直接退出。因此,我們在CAD軟件異常關閉之前所做的一些事情沒有被保存。你cad臨時文件后綴...

  • from子句語法錯誤,SQLfrom子句語法錯誤

    from子句語法錯誤,SQLfrom子句語法錯誤 相關圖片語法錯誤在Dreamweaver CS4中,成功連接到數據庫后,立即綁定到數據庫。然而,在測試過程中有一個令人費解的問題。單擊綁定測試時,from子句中總會出現語法錯誤語法錯誤有哪些...

  • 000007e藍屏,藍屏0ed

    000007e藍屏,藍屏0ed 相關圖片藍屏000008e很多用戶反映,這臺電腦剛買下來,藍屏錯誤碼ox0000007e無緣無故出現。0x0000007e error表示系統進程遇到問題,如果遇到此類問題,應該怎么辦?0x0000007e藍屏...

  • 設計師,室內設計師的一天

    設計師,室內設計師的一天 相關圖片設計師是干什么的羅馬尼亞UI設計師Paul Flavius nechita今年6月29日開始了為期100天的UI挑戰賽。他為自己設定了一個目標,每天設計一個UI界面,每天花大約ui設計師資格證...

  • 打印機出現錯誤,打印機出現錯誤怎么辦

    打印機出現錯誤,打印機出現錯誤怎么辦 相關圖片打印機出現錯誤狀態是怎么回事隨著我們的素質、工作和生活的不斷提高,效率的提高也越來越高。打印機解決了過去需要通過復制來完成的工作。它不僅節省了時間,而且保證了數據...

熱評文章

  • 索尼筆記本電腦,索尼筆記本電腦怎么進入PE

    索尼筆記本電腦,索尼筆記本電腦怎么進入PE 相關圖片索尼筆記本進u盤U盤啟動盤已經制作好了,但是我不了解索尼筆記本電腦的BIOS設置,所以無法開始安裝系統。在這種情況下我該怎么辦?事實上,索尼筆記本的BIOS很容易設置為U盤啟動索...

  • 免費商用字體網站,商用字體有哪些

    免費商用字體網站,商用字體有哪些 相關圖片字體網站由于設計難度大,人工成本高,大多數中文字體不能免費使用。木關系,如果設計需要常用詞,不妨來淘寶這個網站。免費日文字體包含大量日文字體,其中許多可以免費商業...

  • 電腦中毒如何重裝系統,電腦中毒了怎么辦怎么重裝系統

    電腦中毒如何重裝系統,電腦中毒了怎么辦怎么重裝系統 相關圖片電腦卡重裝系統有用嗎電腦中毒重裝系統的方法是什么?如今,當網民瀏覽不健康的網站時,會在電腦系統中發現病毒,這些病毒非常嚴重。如果他們想一鍵重裝系統,讓小編告訴你電...

  • dnf解除安全模式一直轉圈,dnf避過安全模式

    dnf解除安全模式一直轉圈,dnf避過安全模式 相關圖片dnf短信解除安全模式在安全模式下,對賬號交易、物品丟棄、銷毀等敏感操作進行限制,最大限度地保護玩家賬號和物品的安全。小編以為很多新的DNF玩家會問這樣一個問題:如何刪除...

  • 效率提升方案,怎樣提升生產效率

    效率提升方案,怎樣提升生產效率 相關圖片界面設計用什么軟件作為全球最著名的客戶關系管理軟件巨頭,salesforce對CRM軟件設計有著深刻的理解和優秀的設計開發經驗。在企業級軟件(如CRM)中,有許多表單接口,這也為界面設...

  • usb聲卡怎么調試,客所思k10聲卡怎么調試

    usb聲卡怎么調試,客所思k10聲卡怎么調試 相關圖片win10裝不了外置聲卡對于一臺電腦來說,如果人們對它的音質不滿意,該怎么辦?是的,你可以買一張外置聲卡。連接到電腦后,可以使電腦的音效更加出色。然后在購買外部聲卡之后,...

  • 設計的黃金比例,設計的黃金比例是多少

    設計的黃金比例,設計的黃金比例是多少 相關圖片黃金比例的什么是黃金比率黃金比率是一個數學比率,在自然界中通常用來建立一個平衡的組合黃金比率大約是1.6180,也被稱為黃金平均數,通常用希臘字母?來表示黃金矩形是一個寬...

  • 筆記本接音響怎么設置,筆記本外接音響設置

    筆記本接音響怎么設置,筆記本外接音響設置 相關圖片筆記本電腦音箱排名眾所周知,筆記本電腦有自己的揚聲器。不過,由于筆記本的空間限制,筆記本揚聲器的聲音很小,所以我們在家看電源的朋友可以連接外部音頻。許多用戶發現筆...

  • 人機界面是啥,人機界面

    人機界面是啥,人機界面 相關圖片人機界面由什么組成1.1 IOS的設計體現了以下三個設計原則:參考:UI應該幫助用戶更好地理解和與內容交互,而不是分散用戶對內容本身的注意力清晰:各種規則人機界面是組態嗎...

  • 禁用部分usb接口,電腦禁用usb接口

    禁用部分usb接口,電腦禁用usb接口 相關圖片如何禁用usb口在使用電腦時,你可能經常會遇到突然不易使用的USB接口。連接到計算機時沒有響應。通常,USB接口被禁用或USB設備損壞。這是這個問題的解決辦法。那我們怎么解決呢如...

關注微信

变脸官网查询