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

  克里斯蒂安·贝克论设计系统的现状