轉 | 關於設計規範的資源、鏈接、參考和文章

前兩天我的medium digest推了一篇關於Design Systems資源的文章,介紹了除了我們耳熟能詳的Material Design和Apple Human Interface Guidelines之外的大量不同公司的設計規範/設計系統。

好久沒有新內容更新,把這篇牆外的資源翻譯過來,轉發給我的推友……哦不,乎友們。

原文用詞為"Design System",出於習慣以下統一翻譯為「設計規範」。


設計規範:用於公司大規模管理設計活動的可重複利用於不同組合的一系列組件。

任何公司,或大或小,都在建立或者計劃建立自己的設計規範。的確,擁有一套合適的設計規範是發展組織規模的重要一步。

建立設計規範的益處包括:

  • 提高團隊效率。設計規範能夠節約時間和資金,相比於倉促拼湊的組件,設計師和開發者利用現有組件可以更加高效快速地創建新的頁面。
  • 面向用戶的一致性。遵循設計規範能夠讓團隊為用戶帶來相近、一致的體驗,確保任何時間用戶與產品的交互都能獲得一致的觀感。
  • 擴大公司規模。高效帶來了擴張的能力,設計規範使得設計流程「自動化」,這也意味著公司用能力用更少的資源獲得更多的產出。

然而建立一套設計規範並非易事。本文提供了一些鏈接、文章、示例、教程、訪談來幫助你的公司建立設計規範。

Design Systems?—?References

Grid System | MailChimpux.mailchimp.com

IBM Design Languagewww.ibm.com圖標Human Interface Guidelinesdeveloper.apple.com

Microsoft Designwww.microsoft.com

Atlassian』s End-to-End Design Languageatlassian.design

The Way We Buildairbnb.design圖標BBCs Global Experience Languagewww.bbc.co.uk

Intuits Harmony Design Systemharmony.intuit.com

Salesforces Lightning Design Systemwww.lightningdesignsystem.com

WTF is Solid? - Solidsolid.buzzfeed.com

Shopify Polarispolaris.shopify.com圖標Googles Material Designmaterial.io

Components Guidedev.fitbit.com

Zendesk Gardengarden.zendesk.com

USA Web Design Standardsstandards.usa.gov

WeWorks Plasma Design Systemmedium.com

Design Systems?—?Articles

Selling a Design System at your companyuxdesign.cc

Atomic design: how to design systems of componentsuxdesign.cc

Selling a Design System before asking for buy-inuxdesign.cc

How to get a head start on Design Systemsuxdesign.cc

Designing Design Systems for complex productsuxdesign.cc

Creating a product Design System in Sketchuxdesign.cc

Setting up a design systemblog.prototypr.io

Why Design Systems Fail24ways.org

The Most Exciting Design Systems Are Boring | Big Mediumbigmedium.com圖標On Design Systems: Sell The Output, Not The Workflowwww.smashingmagazine.com圖標Your Sketch library is not a design systembradfrost.com圖標

Design Systems?—?Videos

Atomic Design: Create Design Systems, Not Pagesyoutu.be

Designing a Design System for Modular Modules, and Building a Team to Build ityoutu.be

Design Systems Role in the Evolution of Enterprise User Experienceyoutu.be

Systems, when and how much? — Diana Mounteryoutu.be

Design Systems?—?Specialists to follow

Shahrzad Samadzadehmedium.com

Allison Shawmedium.com

Magera Moontwitter.com

Caitlin Osbahrmedium.com

Diana Mountermedium.com

Audrey Hacqmedium.com

Nick Stamasmedium.com

Wen Wangmedium.com

James Mulhollandmedium.com

Additional Resources

Design Systems, the bookdesignsystemsbook.com

Design Systems Coalitiondesignsystems.nyc圖標Designing Systems | Atomic Design by Brad Frostwww.atomicdesign.bradfrost.com圖標Figma + Design Systemswww.designsystems.com圖標


知乎添加鏈接的方式比公眾號友好多了。

原文鏈接:Resources, links, references and articles on Design Systems

推薦閱讀:

讓移動交互更好的 7 個提示
GUI 常用元素中英對照表 / 3. Toolbar
GUI 常用元素中英對照表 / 10. Text Field
Design in Singapore 篇一

TAG:設計規範 | 用戶界面設計 |