Having spent the past 8 months of my academic career working co-ops and internships in marketing & communication roles, my roots actually stem from arts & design. Although I would best describe myself as an early 2000s child as I was born in the mid 90s, the first-ever piece of technology I recall using was a bulky family computer running Windows 95.

在我的學術生涯的過去8個月中，我一直在市場營銷和傳播領域擔任合作社和實習生，我的根基實際上源于藝術與設計。 盡管我最好將自己描述為90年代中期出生的2000年代初期的孩子，但我記得使用的第一項技術是運行Windows 95的大型家庭計算機。

The World Wide Web made its surge by 1992–1995. Social media back then was only limited to instant messaging systems — the “Uh oh!” sound from ICQ rings a familiar bell. Instant nostalgia to me though, happens to be Kid Pix, where I’d stamp these bitmap polka dots on a pixelated screen and call myself the next Picasso. I feel like these programs contributed to the proliferation of computer graphics, advantageous of its usability and flexibility, as compared to traditional design mediums.

萬維網在1992年至1995年間激增。 當時的社交媒體只限于即時通訊系統-“哦，哦！” ICQ發出的聲音敲響了熟悉的鐘聲。 不過，對我的即時懷念恰好是Kid Pix，我將在像素化屏幕上標記這些位圖波爾卡圓點，并稱自己為下一個畢加索。 與傳統的設計媒體相比，我覺得這些程序促進了計算機圖形學的發展，具有其可用性和靈活性。

Fast forward some twenty-something years later, where my brain is now filled with research methods and academia from my undergrad days. Taking a break from the books and joining Rangle in January 2020 as a Marketing Co-Op, was when I first heard about Design Systems. Familiarizing myself on this topic reignited my lifelong passion for design. I thought, with the skills and approaches taught during my post-secondary studies, can be leveraged and used to illustrate the role of theoretical research into creating an effective Design System, which can mitigate various design issues later on.

大約二十年后的今天，我本科時代的大腦和研究方法充斥著我的大腦。 從書本上休息一下，并于2020年1月加入Rangle作為營銷合作伙伴，那是我第一次聽說Design Systems的時候。 對這個主題的熟悉重新點燃了我對設計的終生熱情。 我認為，憑借我在專上課程中教授的技能和方法，可以利用并用來說明理論研究在創建有效的設計系統中的作用，該系統可以減輕以后的各種設計問題。

進行設計研究 (Conducting design research)

There are so many design systems you can stumble upon with just a simple Google search — based on my findings from galleries and repositories, examples of industry-standard design systems include:

只需簡單的Google搜索，您就可以發現無數的設計系統-根據我從畫廊和存儲庫中獲得的發現，行業標準設計系統的示例包括：

• Polaris by Shopify
  北極星by Shopify
• Material Design by Google
  Google的Material Design
• Atlassian Design
  Atlassian設計
• IBM Design Language / Carbon for IBM Cloud products
  IBM設計語言/ Carbon for IBM Cloud產品
• Airbnb Design
  Airbnb設計
• Lightning by Salesforce
  Salesforce的閃電

It is very important to note that “one size does not fit all” does indeed, apply to design systems. Just because one design system you might come across looks aesthetically pleasing, doesn’t mean that it will be a good fit for your project needs. Same thing goes with the design system’s creator — if a multinational company whose industry actually lies in e-commerce or hospitality made their own version of a design system (eg. Polaris by Shopify, Airbnb Design).

非常重要的一點是要注意，“一種尺寸不能完全適用”確實適用于設計系統。 您可能遇到的一個設計系統看起來在美學上并不令人滿意，但這并不意味著它會很好地滿足您的項目需求。 設計系統的創建者也會遇到同樣的事情-如果一家跨國公司實際上以電子商務或酒店業為生，則他們自己設計了一個版本的設計系統(例如Shopify的Polaris，Airbnb Design)。

Design systems are products. To no surprise, creating a successful and effective design system comes with following the traditional methods of design research that has been used from all its disciplines (eg. UX/UI, IA, IxD). You may be familiar with the standard and typical user interviews and surveys, to the more qualitative analogous experiences (web surfing) and contextual design (drawing flow models). These methods derive from long-time subjects from the social sciences, such as psychology, sociology, anthropology, and linguistics. Consider expanding your research scope to include topics from these subjects, as their focus is on the study of human societies and their interactions and behaviour in sociological aspects.

設計系統是產品。 毫不奇怪，要遵循其所有學科(例如UX / UI，IA，IxD)使用的傳統設計研究方法，來創建成功且有效的設計系統。 您可能熟悉標準和典型的用戶訪談和調查，以及更定性的類似體驗(網絡沖浪)和上下文設計(繪圖流程模型)。 這些方法源于社會科學的長期學科，例如心理學，社會學，人類學和語言學。 考慮擴大研究范圍以包括這些主題的主題，因為它們的重點是人類社會及其社會學方面的相互作用和行為的研究。

投機設計 (Speculative design)

How to use design as a tool to create not only products, but ideas to speculate about possible futures. Designers are also problem solvers — they are given a problem, and are asked to solve it with function and beauty. With speculative design, it is to imagine how these futures can end up entirely disparate, encapsulating moral, ethical, political, and aesthetic problems.

如何使用設計作為創建產品的工具，以及如何推測未來的想法。 設計師還是問題解決者-給他們一個問題，并被要求以功能和美觀來解決它。 借助投機性設計，可以想象這些期貨如何最終完全不同，從而封裝了道德，倫理，政治和美學問題。

Consider these common questions of design fiction when creating your next design system:

在創建下一個設計系統時，請考慮以下有關設計虛構性的常見問題：

• How should your design impact the entire world?
  您的設計應如何影響整個世界？
• How should we design to benefit our greater good?
  我們應該如何設計以造福我們更大的利益？
• What can our design do to influence future audiences?
  我們的設計可以做什么來影響未來的受眾？

• How can future technologies be impacted by our products, services, and designs? What don’t we want to see from the future?

  我們的產品，服務和設計將如何影響未來的技術？ 什么我們不希望從今后看？

無障礙視覺設計 (Accessible visual design)

In design systems, there are tokens, assets, components, and libraries of variance. Such parts of design systems are synonymous from visual design (eg. colour, typography, images, grids). Oftentimes, people get “design systems” and a “style guide” or “pattern library” mixed up, thinking they are all the same thing. Think of style guides as a type of documentation that describes the look and feel of a brand, pattern libraries as a set that is to be used across a company, and finally, design systems acting as an umbrella for these subclasses — “the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.”

在設計系統中，有令牌，資產，組件和方差庫。 設計系統的此類部分是視覺設計(例如顏色，版式，圖像，網格)的同義詞。 通常，人們以為他們都是同一件事，而把“設計系統”和“樣式指南”或“樣式庫”混在一起。 將樣式指南視為描述品牌外觀的文檔類型，將樣式庫視為將在整個公司中使用的集合，最后將設計系統用作這些子類的保護傘-“完整的集合設計標準，文檔和原則以及實現這些標準的工具包(UI模式和代碼組件)。”

In my early days of graphic design, when it came to producing the visual identity of a brand, the typical brainstorming sessions regarding colour and typography would be based on the client’s needs & wants, and likes & dislikes. This is still applicable today, but with accessibility & inclusion guidelines now in the mix, you want your design to be suitable to the needs of all users too.

在我從事平面設計的初期，當涉及到制造品牌的視覺識別時，有關顏色和版式的典型頭腦風暴會議將基于客戶的需求和喜好。 這在今天仍然適用，但是現在有了可訪問性和包含準則，您還希望您的設計也適合所有用戶的需求。

What does this look like? Take a read at the AA of the Web Content Accessibility Guidelines, published by none other than the W3C. Start with colour contrast, with the ratio being:

看起來像什么？ 閱讀W3C出版的《 Web內容可訪問性指南》的AA 。 從顏色對比度開始，比率為：

(L1 + 0.05) / (L2 + 0.05)

(L1 + 0.05)/(L2 + 0.05)

• L1 is the relative luminance of the lighter of the colours, and
  L1是顏色較淺的相對亮度，并且
• L2 is the relative luminance of the darker of the colours.
  L2是較深顏色的相對亮度。

An example for text / background would be the contrast ratio acting to at least 4.5 to 1. Still confusing? There are many tools to help with this, one of which being the Contrast app.

文本/背景的一個示例是對比度至少達到4.5：1。 有很多工具可以幫助解決此問題，其中一個就是Contrast app 。

While colour is evident and fascinating, it shouldn’t be the only critical tool used to address design problems — people with colour blindness or other deficiencies may have a hard time following through. Try the black & white test print on your printer to see if you can still understand your information. Use web elements like textboxes with labels, icons, and typographical styles (eg. font weights, underlines) for better visual communication. And speaking of information and web elements, write alternative text for your images and other perceptual content.

盡管顏色顯而易見且引人入勝，但它不應成為解決設計問題的唯一關鍵工具-色盲或其他缺陷的人可能會很難過。 嘗試在打印機上進行黑白測試打印，以查看是否仍然可以理解您的信息。 使用帶有標簽，圖標和印刷樣式的文本框之類的Web元素(例如，字體粗細，下劃線)可以更好地進行視覺傳達。 說到信息和網絡元素，請為圖像和其他感知內容編寫替代文本 。

If your design system follows some of the accessibility guidelines from the W3C, it will have a better chance showing up prominently in search results, reaching a bigger user audience, having a faster download time, encouraging good coding practices, and of course, better usability.

如果您的設計系統遵循W3C的某些可訪問性準則，則它更有可能在搜索結果中突出顯示，吸引更多的用戶，下載時間更短，鼓勵良好的編碼習慣，當然，更好的可用性。

Emphasize accessibility as part of your design research, and know there are always people willing to help.

在設計研究中強調可訪問性，并且知道總有人愿意提供幫助。

外觀審核 (Visual audits)

An “audit” might sound intimidating — adding the word “visual” to it probably won’t make it sound any better. But performing a visual audit before launching your design system will serve as a beneficial exercise to you. Just like what a regular audit means, a “thorough analysis of a project”, a “visual audit” analyzes the design elements that are in use. You will need to manage its bits and pieces, making sure consistencies are in place, that everything answers the “why’s” and “how’s” of your product, before finally, making sense of its brand messaging before you send it out for release. Think of an audit for your design system as an opportunity for reflection — to check on the quality of your work, contained assets, and user experience.

“聽覺”聽起來可能令人生畏-在其上添加“視覺”一詞可能不會使它聽起來更好。 但是在啟動設計系統之前執行視覺審核將對您有益。 就像常規審核的含義一樣，“對項目進行徹底的分析”，“可視化審核”會分析使用中的設計元素。 您將需要管理其點點滴滴，確保一致性，確保所有內容都能回答您產品的“為什么”和“方式”，最后，在發送產品進行發布之前，先了解其品牌信息。 將對設計系統的審核視為反思的機會-檢查工作的質量，包含的資產和用戶體驗。

啟發式評估 (Heuristic evaluations)

Stringing along with the pattern of accessible design, comes the heuristic evaluation, “the usability and accessibility of a website or app”. Jakob Neilsen, one of the two worldwide leaders from the NN/g Neilsen Norman Group, published the 10 Heuristics for User Interface Design back in 1994 that still reigns to this day. Although his 10 principles were written for this specific branch of design, they are called “heuristics” for its broad rules of thumb and general usability guidelines.

啟發式評估是“網站或應用程序的可用性和可訪問性”，同時伴隨可訪問性設計的模式。 NN / g Neilsen Norman集團的兩位全球領袖之一Jakob Neilsen發表了《用戶界面設計的10種啟發式方法》 追溯到1994年，至今仍在統治。 盡管他的10條原則是針對該特定設計領域編寫的，但由于其廣泛的經驗法則和一般可用性準則，它們被稱為“啟發式”。

1. Visibility of system status — Your product should always be available to its user within a reasonable timeframe.

   系統狀態的可見性 —您的產品應始終在合理的時間內提供給用戶。

2. Match between system and the real world — Users should be able to comprehend your system’s language. Avoid using overly technical explanations and focus on using easy-to-follow, real-world concepts.

   系統與現實世界之間的匹配 -用戶應該能夠理解系統的語言。 避免使用過多的技術解釋，而應專注于使用易于理解的實際概念。

3. User control and freedom — We all make mistakes. But if you make a mistake in an app, you will need a required “emergency exit” without having to go through a lengthy, unwanted process. Consider implementing simple actions such as “undos” and “redos”.

   用戶控制和自由 -我們都會犯錯。 但是，如果您在應用程序中犯了一個錯誤，則將需要一個必需的“緊急出口”，而不必經歷冗長的，不需要的過程。 考慮實施簡單的操作，例如“撤消”和“重做”。

4. Consistency and standards — Users should not have to wonder whether different words, situations, or actions mean the same thing.

   一致性和標準 -用戶不必懷疑不同的詞語，情況或動作是否意味著同一件事。

5. Error prevention — Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

   錯誤預防 -精心設計可以防止出現問題，它甚至比良好的錯誤消息要好。 消除容易出錯的條件，或者檢查條件，并在用戶執行操作之前向其提供確認選項。

6. Recognition rather than recall — The digital world has caused the narrowing of our attention span. Make your design contain all necessary instructions to help guide the user.

   認可而不是召回 -數字世界導致我們關注范圍的縮小。 使您的設計包含所有必要的指導以幫助指導用戶。

7. Flexibility and efficiency of use — Accelerators, unseen by the novice user, may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

   使用的靈活性和效率 -新手用戶看不見的加速器通常可以加快專家用戶的交互速度，從而使系統可以同時滿足經驗不足和經驗豐富的用戶。 允許用戶調整頻繁的操作。

8. Aesthetic and minimal design — Less is more.

   美觀而簡約的設計 -少即是多。

9. Helps users recognize, diagnose, and recover from errors — Error messages should only be expressed in plain language, address the problem, and suggest solutions.

   幫助用戶識別，診斷錯誤并從錯誤中恢復 -錯誤消息僅應以簡單的語言表示，解決問題并提出解決方案。

10. Help and documentation — Sometimes you can’t help it — certain tasks may be too complicated to follow. Such information should then be provided with adequate support.

    幫助和文檔 -有時您無能為力-某些任務可能太復雜而無法執行。 然后應為此類信息提供足夠的支持。

原子設計 (Atomic design)

If you want to get more into the specifics of visual auditing for design systems, Pittsburgh web designer Brad Frost coined the term “atomic design”, “a methodology that allows (and requires) you to describe and organize every component of your design system.”

如果您想更多地了解設計系統的視覺審計的細節，匹茲堡的網頁設計師Brad Frost創造了術語“原子設計” ，“一種允許(并要求)您描述和組織設計系統各組成部分的方法。 ”

1. Atoms — The smallest building blocks of your design system. Examples include text styles, buttons, icons, input fields, and checkboxes.

   原子 -設計系統中最小的構件。 示例包括文本樣式，按鈕，圖標，輸入字段和復選框。

2. Molecules — More complex entities, consisting of several atoms. Examples include notification toasts, data values (label: value), input fields with buttons.

   分子 —更復雜的實體，由幾個原子組成。 示例包括通知吐司，數據值(標簽：值)，帶按鈕的輸入字段。

3. Organisms — The truly functional parts of a page, composed of groups of atoms and molecules. Examples include navigations, sidebars, forms, pop-ups.

   有機體 -頁面的真正功能部分，由原子和分子組成。 示例包括導航，側邊欄，表單，彈出窗口。

4. Templates — Pages without real content. They combine organisms into a proper website layout.

   模板 -沒有真實內容的頁面。 他們將有機體結合到適當的網站布局中。

5. Pages — Once you have a template, you can create pages using templates. An example of a standard page:

   頁面 -有了模板后，就可以使用模板創建頁面。 標準頁面的示例：

If simplicity is your thing, atomic design reduces the gruelings of a meticulous audit. It breaks down elements into digestible pieces that allows for timeliness, uniformity, and less components.

如果您想讓事情變得簡單，那么原子設計可以減少一絲不茍的審核工作。 它將元素分解為易于消化的片段，以實現及時性，統一性和更少的組件。

一起編譯 (Compiling it all together)

With all of your hard work now paid off, how do you know when your design system is effective? There are some gaps that we still need to fill in — one being documentation.

現在，您所有的辛苦工作都得到了回報，您如何知道設計系統何時有效？ 我們仍然需要填補一些空白，其中之一就是文檔。

Initially when I thought of documentation in design systems, of course my academic mind instantly thought of “research” documentation where you look up scholarly articles and reference them in a works cited. Documentation tools in design comprise of information retrieval and feature version control, so you can go back to a previous version and see what fallacies you made that you want to improve on. Design system documentation also inspects components and variables, managing all digital assets, in addition to programs even syncing up with your design tools when you’re at work, such as Sketch, Figma, and Adobe XD. Prioritize your needs according to importance when deciding on a documentation software. There are many types available — pure documentation like Gitbook and VuePress, and design documentation like Zeroheight and Frontify.

最初，當我想到設計系統中的文檔時，當然我的學術頭腦立刻想到了“研究”文檔，您可以在其中查找學術文章并在引用的作品中進行引用。 設計中的文檔編制工具包括信息檢索和功能版本控制，因此您可以返回以前的版本，并查看要改進的謬論。 設計系統文檔還檢查組件和變量，管理所有數字資產，以及甚至在工作時與設計工具同步的程序，例如Sketch，Figma和Adobe XD。 在決定使用文檔軟件時，請根據重要性優先考慮您的需求。 有許多類型可用-純文檔(如Gitbook和VuePress)以及設計文檔(如Zeroheight和Frontify)。

You have heard of the phrase that you can come up with multiple solutions to one single design problem, and design isn’t a linear process too. Not all design systems are created equally, as there will always need to be room for improvement. What is the state of design for 2020?

您已經聽說過可以為一個設計問題提供多種解決方案的短語，而且設計也不是線性過程。 并非所有設計系統都是平等創建的，因為始終需要有改進的空間。 2020年的設計狀態如何？

“The future is interactive, accessible, and uses tokens.” — Google Material Design

“未來是交互式的，可訪問的并且使用令牌。” — Google Material Design

Building a design system is an exciting venture, but it is also a strenuous task that requires the involvement of many people — not just those in the design and product teams, but also developers, project managers, even test users and clients, and various stakeholders — the list goes on and on. Your well-crafted design system is a product, but it can be more than just a product. Your audience is of your fellow designers, but your reach can be more than just your designers. With the right dynamic, design systems can help bolster and value a proper design thinking mentality across all aspects of the organization. Some even launch their tools to the public to help establish themselves as a leader or pioneer in the industry. Design systems are here, and they are to dominate the state of design this decade.

建立設計系統是一項令人振奮的冒險，但它也是一項艱巨的任務，需要許多人的參與，不僅包括設計和產品團隊中的人員，還包括開發人員，項目經理，甚至測試用戶和客戶以及各種利益相關者—清單不斷。 您精心設計的設計系統是一種產品，但它不僅可以是產品。 您的聽眾是您的設計師同伴，但您的影響范圍不僅僅可以是您的設計師。 借助適當的動態，設計系統可以幫助支持和重視組織各個方面的正確設計思想。 有些甚至向公眾發布其工具，以幫助他們確立自己在該行業的領導者或先鋒的地位。 設計系統就在這里，它們將主導這十年的設計狀態。

進一步閱讀 (Further reading)

• A list of UI Design and Persuasive Design patterns

  UI設計和說服設計模式列表

• Approaches, methods, and tools for Speculative design

  投機設計的方法，方法和工具

• Speculative Everything: Design, Fiction, and Social Dreaming by Anthony Dunne and Fiona Raby

  投機性一切： Anthony Dunne和Fiona Raby的設計，小說和社交夢想

• AccessAbility: A Practical Handbook on Accessible Graphic Design by RGD Ontario Chapter (read pg. 11–18)

  AccessAbility： RGD安大略省分會關于無障礙圖形設計的實用手冊 (閱讀第11–18頁)

• The importance of visual audits when building a design system by Charissa Tham

  Charissa Tham 建立設計系統時，視覺審核的重要性

• Atomic Design by Brad Frost. Check out the rest of his website too, or his book of the same title.

  布拉德·弗羅斯特(Brad Frost)的原子設計 。 還要查看他的網站的其余部分，或同名書籍。

• Design systems are everybody’s business by Alex Nicholls

  設計系統是 Alex Nicholls的每個人的事

• The best tools for documenting design systems by Hike One

  Hike One 記錄設計系統的最佳工具

• On the Current State of Design Systems by Christian Beck

  克里斯蒂安·貝克論設計系統的現狀