As their audiences grow and change, so does the demand for progress, evolution, and possibilities.

隨著閱聽人的增長和變化，他們對進步、演變和可能性的需求也在增長和變化。

Many of them are turning to design systems as a potential solution.

其中許多人正在將設計系統作為一種潛在的解決方案。

In this lesson, we'll learn what a design system is and what's included in one, explore the problems a design system can help solve, help you identify when you need one, and highlight a few things to consider as you start your design system's journey.

在這一課中，我們將瞭解什麼是設計系統，設計系統包括哪些內容，探討設計系統可以幫助解決哪些問題，幫助你確定何時需要設計系統，並強調在開始設計系統之旅的過程中需要考慮的一些事項。

So what exactly is a design system?

那麼，究竟什麼是設計系統呢？

If your first thought is a style guide and a component or pattern library, you're not alone.

如果你首先想到的是風格指南和組件或模式庫，那你並不孤單。

Yes, you'll see aspects of these in a design system, but you'll also see a focus on the bigger picture, the entire product ecosystem.

是的，你會在設計系統中看到這些方面的內容，但你也會看到對整個產品生態系統的關注。

After all, products aren't just a collection of UI elements splattered on a screen.

畢竟，產品不僅僅是螢幕上用戶界面元素的集合。

They're organized in strategic ways to communicate messages, encourage certain behaviors, and guide you through processes.

它們以戰略性的方式組織起來，以傳達資訊、鼓勵特定行為並指導您完成流程。

They are a reflection of the vision, concepts, and values of an organization.

它們反映了一個組織的願景、理念和價值觀。

It's important that a design system communicates not just the what, but the how and the why.

重要的是，設計系統不僅要傳達 "是什麼"，還要傳達 "如何做 "和 "為什麼做"。

Let's explore some of the resources a design system might include.

讓我們來探討一下設計系統可能包含的一些資源。

Style guides are a set of standards that define the appearance of elements and the overall voice and tone.

風格指南是一套定義元素外觀以及整體語音和語調的標準。

They focus on the visual language of the product, how things should look and feel.

他們注重產品的視覺語言，注重產品的外觀和感覺。

You'll see aspects of these in most design systems.

你會在大多數設計系統中看到這些方面。

Examples include color and typography.

例如色彩和排版。

Component libraries contain the building blocks of a product.

元件庫包含產品的構件。

This might include individual components, layouts and templates, and interaction patterns.

這可能包括單個組件、佈局和模板以及交互模式。

They focus on how assets should behave in the product.

他們關注的是資產在產品中應如何表現。

They also often include on-canvas red lines or annotations, or are embedded alongside code components with detailed documentation.

它們通常還包括畫布上的紅線或註釋，或者與帶有詳細文檔的代碼組件一起嵌入。

As you go through your design system's journey, keep in mind that there is no one design system that fits all.

在設計系統的過程中，請記住沒有一種設計系統適合所有人。

Different companies have different needs, which require different solutions.

不同的公司有不同的需求，需要不同的解決方案。

Now that we have an idea of what a design system is, do we actually need one?

既然我們已經瞭解了什麼是設計系統，那麼我們是否真的需要設計系統呢？

You might be wondering how this could play out in real life.

你可能會想，這在現實生活中怎麼可能發生呢？

Let's look at this scenario.

讓我們來看看這種情況。

Kai is a product designer in Habits, a habit-forming app available on multiple device types, and is supported by smart reminders and integrations.

凱是 Habits 的產品設計師，這是一款習慣養成應用程序，可用於多種設備類型，並有智能提醒和集成支持。

This app has been in development for a while, and the design team just received additional headcount.

這個應用程序已經開發了一段時間，設計團隊剛剛增加了人手。

Recently, they were working on new screens and couldn't remember what a few elements look like.

最近，他們正在製作新的螢幕，卻不記得一些元素的樣子。

They referenced older screens, but noticed that some details look different across different device themes.

他們參考了舊版螢幕，但注意到一些細節在不同的設備主題上看起來有所不同。

Which of these are reliable?

哪些是可靠的？

What if it's none of them?

如果都不是呢？

In weekly critiques, Kai also noticed components looking different between different designers.

在每週的點評中，Kai 還注意到不同設計師的組件看起來都不一樣。

They're beginning to wonder if it's time to consider a design system.

他們開始懷疑是否是時候考慮設計系統了。

There is no straightforward answer on when to implement a design system.

關於何時實施設計系統，並沒有直接的答案。

However, we can make informed decisions by understanding the benefits a design system can bring, the challenges that can come along with it, and what problems we need to solve within our organization.

不過，我們可以通過了解設計系統可以帶來的好處、隨之而來的挑戰以及我們需要在組織內部解決哪些問題，來做出明智的決定。

First, let's cover how a design system can help.

首先，讓我們來了解一下設計系統如何提供幫助。

Even when starting small, design systems allow teams to do more with less.

即使是小規模起步，設計系統也能讓團隊事半功倍。

Not just when it comes to designing and prototyping features, but also when building real-world experiences.

這不僅體現在功能設計和原型開發方面，還體現在構建真實體驗方面。

Designers spend less time remaking components and sweating the small stuff.

設計人員只需花費較少的時間重新制作組件和處理細小的問題。

This increases their design output and allows them to focus more time on solving design problems.

這就提高了他們的設計產出，使他們能夠集中更多的時間來解決設計問題。

When we're ready to scale teams, a design system becomes an onboarding resource that allows new teammates to contribute sooner.

當我們準備擴大團隊規模時，設計系統就會成為一種入職資源，讓新隊友能夠更快地做出貢獻。

And design systems aren't just for designers.

設計系統不僅僅是設計師的專利。

When we align design components with code, tokens, and animation presets, developers can translate designs into functional, accessible code in a fraction of the time.

當我們將設計組件與代碼、標記和動畫預設相整合時，開發人員只需花很少的時間就能將設計轉化為功能強大、易於訪問的代碼。

As a design system matures, it becomes the single source of truth within an organization.

隨著設計系統的成熟，它將成為企業內部的唯一真理來源。

It provides teams with a shared vision and language that leads to better understanding and more consistent products.

它為團隊提供了共同的願景和語言，從而促進更好的理解和更一致的產品。

These benefits don't just impact the internal processes of building a product.

這些優勢不僅影響到產品製造的內部流程。

They also contribute to your customers' experience of the product.

它們還有助於客戶體驗產品。

Consistency, usability, and accessibility build trust in your product and can lead to a more engaged and loyal customer base in the long run.

一致性、可用性和易用性可以建立對產品的信任，從長遠來看，可以為客戶帶來更多的參與度和忠誠度。

Conversations about design systems are ever-present, and with so many impressive examples to take inspiration from, the fear of missing out feels very real.

關於設計系統的討論無處不在，有這麼多令人印象深刻的例子可以從中汲取靈感，害怕錯過的感覺非常真實。

It's tempting to jump right into the deep end.

直接跳入深水區很有誘惑力。

So when might a design system actually be the right decision?

那麼，什麼時候使用設計系統才是正確的決定呢？

The first thing to look out for is consistency.

首先要注意的是一致性。

Do you spot inconsistencies between styles, components, and behaviors in the product?

您是否發現產品中的樣式、組件和行為之間存在不一致？

Are you building for multiple brands or products and need unification across their experiences?

您是否正在為多個品牌或產品進行構建，並需要統一它們的體驗？

Does your product use more than one theme, such as dark and light modes?

您的產品是否使用多個主題，例如深色和淺色模式？

What about different devices?

不同的設備如何？

Or you might need to remove redundancy.

或者，您可能需要刪除冗餘。

Are people building the same things over and over?

人們是否在重複建造同樣的東西？

Are teammates debating over the same issues again and again?

隊友們是否在反覆辯論同樣的問題？

Does the team use a shared language to talk about the product and solve problems?

團隊是否使用共同語言討論產品和解決問題？

How efficient is it to find answers to product questions?

查找產品問題答案的效率如何？

If your team is growing, how long does it take to onboard new teammates with the product information they need?

如果您的團隊不斷壯大，需要多長時間才能讓新團隊成員瞭解他們所需的產品資訊？

Lastly, where in the product lifecycle can you benefit from improved speed and efficiency?

最後，在產品生命週期的哪個階段可以從提高速度和效率中獲益？

How much time is spent creating, iterating, or prototyping?

有多少時間用於創建、迭代或原型設計？

How about finding out whether a design is up-to-date?

瞭解設計是否最新如何？

Take time to observe or reflect on how your product teams work together, the product's overall experience, and the problem areas we just outlined.

花點時間觀察或思考產品團隊的合作方式、產品的整體體驗以及我們剛才概述的問題領域。

If you work on a team, consider discussing as a group.

如果您是團隊成員，請考慮以小組為組織、部門進行討論。

Remember, not everyone needs a design system.

請記住，並非每個人都需要設計系統。

You may already have effective solutions for these different issues.

對於這些不同的問題，您可能已經有了有效的解決方案。

Or, not right now may be your answer, and you revisit this later down the line.

或者，你的答案可能不是現在，而是以後再討論這個問題。

Roam wasn't built in a day, and neither is a design system.

漫遊不是一天建成的，設計系統也不是一天建成的。

Like products, a design system requires consistent time and effort, not only to implement, but also to maintain.

與產品一樣，設計系統不僅需要持續的時間和精力來實施，還需要持續的時間和精力來維護。

And while they require investment, it might be a while before you get to see the results of your efforts.

雖然它們需要投資，但要看到努力的成果可能還需要一段時間。

This can make it challenging to get buy-in from leadership, especially if it takes away from the day-to-day work or requires hiring more people.

這可能會使獲得領導層的支持變得具有挑戰性，尤其是當它佔用了日常工作或需要僱傭更多員工時。

Socializing a design system with the rest of the organization can also feel like an uphill battle.

將設計系統與組織的其他部門進行社會化也可能是一場艱苦的戰鬥。

You'll need a group of design system champions to accomplish this successfully.

要成功實現這一目標，您需要一批設計系統的擁護者。

After discovering some design inconsistencies, a need for knowledge share with a growing team, and a need for device theming, Kai believes it's a good time to consider a design system.

在發現了一些設計上的不一致、與不斷壯大的團隊共享知識的需求以及設備主題化的需求之後，Kai 認為現在是考慮設計系統的好時機。

They're not fully convinced that they need one quite yet, and will need to gather more information before they can convince leadership that this is worth the investment.

他們還不完全相信自己需要這樣一個系統，需要收集更多資訊，才能說服領導層值得投資。

What should they do next?

他們下一步該怎麼做？

If you're still uncertain whether a design system is for you, performing an audit could provide additional insight.

如果您還不確定設計系統是否適合您，那麼進行一次審計可以提供更多的見解。

Audits give you the opportunity to take stock of the entire product, everything it consists of, and areas of improvement.

審核讓您有機會對整個產品、產品的所有內容以及需要改進的地方進行評估。

Findings from an audit can help open up conversations about various problems and even contribute to buy-in from leadership.

審計結果有助於就各種問題展開對話，甚至有助於獲得領導層的認可。

It can be initiated by any team, but will eventually bring on other disciplines, making this a company-wide effort.

它可以由任何團隊發起，但最終會帶動其他學科，使其成為全公司的努力。

Whether or not you decide to implement a design system, audits are a crucial step in understanding the current state of the product.

無論您是否決定實施設計系統，審核都是瞭解產品現狀的關鍵一步。

Before you begin auditing, think about who can help you with this task.

在開始審計之前，請考慮誰能幫助您完成這項任務。

What cross-functional partners can provide a fuller picture of what the product consists of and what it needs?

哪些跨職能合作伙伴可以更全面地瞭解產品的內容和需求？

For example, developers can help identify gaps between design and code, and the support team might know about sneaky modals and error messages that you wouldn't regularly catch.

例如，開發人員可以幫助找出設計和代碼之間的差距，而支持團隊可能會知道一些你不經常發現的鬼鬼祟祟的模式和錯誤信息。

To perform an audit, first gather everything that exists.

要進行審計，首先要收集現有的一切資料。

Identify user flows in all elements used in product like colors and text, illustrations and icons, buttons and dropdowns, patterns and interactions, and so on.

識別產品中使用的所有元素，如顏色和文字、插圖和圖標、按鈕和下拉菜單、圖案和交互等，確定用戶流程。

Collect them all in one place to refer to them later.

將它們收集在一個地方，以便日後參考。

Remember to interact with the product so we don't miss elements like loading states, hover states, or warning modals.

記住要與產品互動，這樣我們就不會錯過加載狀態、懸停狀態或警告模式等元素。

If the product spans different devices or operating systems, we'll want to audit those as well.

如果產品跨越不同的設備或作業系統，我們也要對其進行審核。

Next, sort and categorize everything.

接下來，將所有內容分類整理。

If there are large numbers of elements in a group, we can categorize them even further.

如果一組元素的數量較多，我們可以將它們進一步分類。

For example, we've collected a group of text elements being used in our product.

例如，我們收集了一組在產品中使用的文本元素。

We notice that we can further categorize these by paragraph, quote, heading 1, and so on.

我們注意到，還可以按照段落、引文、標題 1 等進一步分類。

Each of these subcategories have more than one instance per style, which will help us in our evaluation later.

這些子類別中的每種風格都有一個以上的實例，這將有助於我們稍後的評估。

Lastly, analyze what's been gathered to identify patterns and areas of opportunity.

最後，分析收集到的資訊，找出模式和機會所在。

Where do we see redundancy in user flows that can be Which areas have poor accessibility?

我們在哪些地方看到了用戶流中的冗餘，這些冗餘可能會導致哪些區域的無障礙環境較差？

Think beyond contrast and readability.

不要只考慮對比度和可讀性。

How is alt text handled for images and icons?

如何處理影像和圖標的 alt 文本？

Are input forms built for the device they're being viewed on?

輸入表單是否針對所使用的設備而設計？

Are assets and styles consistent with the developer's library?

資產和樣式是否與開發人員的資料庫一致？

What inconsistencies are among styles, patterns, and objects?

風格、模式和對象之間有哪些不一致？

Kai explained to their manager the issues and opportunities they've been observing.

凱向他們的經理解釋了他們觀察到的問題和機遇。

The manager gave approval to recruit the entire design team to conduct an They brainstorm various solutions to prevent the issues from happening in the future.

經理準許招募整個設計團隊，讓他們集思廣益，提出各種解決方案，以防止今後再出現這些問題。

A design system is on this list of potential solutions, and it's looking more and more like a winner.

設計系統也在潛在解決方案之列，而且越來越像一個贏家。

So you've done some discovery work.

所以你做了一些探索工作。

Maybe you've concluded that a design system is the path for you.

也許你已經得出結論，設計系統才是你的出路。

What's next?

下一步是什麼？

Let's see what the future might hold.

讓我們拭目以待未來的發展。

Approval As the company grows and matures, so does its design system.

準許 隨著公司的成長和成熟，其設計系統也在不斷完善。

Design systems are ever-evolving, just like the products they support.

設計系統不斷髮展，就像它們支持的產品一樣。

To anchor us on this journey, it's important to understand that design systems have a non-linear path.

為了讓我們踏上這條旅程，瞭解設計系統的非線性軌跡非常重要。

This process may vary from one company to the next.

各個公司的流程可能有所不同。

Let's take a look at what phases we may encounter throughout our process.

讓我們看看在整個過程中可能會遇到哪些階段。

Approval This is where we work to get leadership on board with design systems, so we have access to bandwidth and resources needed for the project.

準許 這是我們爭取領導層支持設計系統的階段，這樣我們就能獲得項目所需的帶寬和資源。

Discovery Where we conduct research and audits, identify audiences and problems, and brainstorm solutions.

發現 我們在這裡進行研究和審計，確定閱聽人和問題，並集思廣益尋找解決方案。

Definition Where we make decisions on solutions, contributors, and approaches.

定義 我們就解決方案、貢獻者和方法做出決定的地方。

Building Where we assemble the actual design system.

建築 我們在這裡組裝實際的設計系統。

Documentation Where we detail how to use the design system in an approachable way.

文檔 我們以平易近人的方式詳細介紹如何使用設計系統。

Maintenance Where we make sure the system is up-to-date with supporting the product, and that design and code are aligned.

維護 我們要確保系統支持最新的產品，並確保設計和代碼保持一致。

Advocacy Where we socialize the design system into the organization, often with the help of champions.

倡導 我們通常在倡導者的幫助下，將設計系統社會化，使其融入組織中。

Throughout our design systems journey, we'll likely find ourselves revisiting phases on a regular basis.

在我們的設計系統之旅中，我們很可能會發現自己會定期重溫各個階段。

Some phases may even overlap with each other.

有些階段甚至會相互重疊。

Remember, this is not a linear process with a single endpoint.

請記住，這不是一個只有一個終點的線性過程。

Treat a design system like you would building software, an ever-evolving product that is regularly iterated on.

對待設計系統要像對待構建軟件一樣，這是一個不斷髮展的產品，需要定期迭代。

Thoughtfully planning and doing discovery work for your design system will make an impact on its quality, as well as support a more efficient journey.

對設計系統進行深思熟慮的規劃和探索工作，將對設計系統的品質產生影響，並有助於提高設計過程的效率。

Here's a few things you may want to consider.

以下是您可能需要考慮的幾件事。

Contributors Contributors are the people who help build and maintain the design system.

貢獻者 貢獻者是幫助建立和維護設計系統的人。

They can be individuals from different teams across the organization, or a team whose full-time job is dedicated to this ongoing project.

他們可以是來自組織內不同團隊的個人，也可以是專職負責這一持續項目的團隊。

Contributors can also be individuals who approve changes to a design system, or can help champion and socialize it.

貢獻者也可以是準許對設計系統進行修改的個人，或者可以幫助支持和推廣設計系統。

Take some time to consider.

花點時間考慮一下。

Who in your organization would be valuable contributors?

您的組織中誰會是有價值的貢獻者？

How many people will it take to support the success of this project?

需要多少人來支持這個項目取得成功？

Remember, there is more to this process than building.

請記住，這個過程不僅僅是建造。

There are other phases like getting buy-in or documentation.

還有其他一些階段，如獲得支持或文檔編制。

You may find that some tasks are better supported by different people.

您可能會發現，有些任務最好由不同的人來支持。

Discuss with your team to determine whether you need a separate, dedicated design systems team.

與團隊討論，確定是否需要一個單獨的、專門的設計系統團隊。

Keep in mind you'll need to balance it against the organization's needs and available resources.

請記住，您需要在組織的需求和可用資源之間取得平衡。

Your audience are the ones who will be using your design system.

您的閱聽人就是將使用您的設計系統的人。

Think beyond designers as the audience.

不要把設計師當成閱聽人。

What about developers, UX writers, brand, marketing, and product education teams?

開發人員、用戶體驗撰稿人、品牌、營銷和產品教育團隊怎麼辦？

Audience can inform what and how things go into a design system.

閱聽人可以為設計系統中的內容和方式提供資訊。

They can be recruited to pressure test the system and provide meaningful feedback on how to improve it.

可以招募他們對系統進行壓力測試，並就如何改進系統提供有意義的反饋意見。

Set up time with yourself or with contributors to explore these questions and understand your audience better.

安排時間與自己或撰稿人一起探討這些問題，更好地瞭解閱聽人。

Who will be using the design system and how often?

誰將使用設計系統，使用頻率如何？

Who might we not be considering?

我們可能沒有考慮到誰？

What is their experience with design systems?

他們在設計系統方面有哪些經驗？

What might the process of soliciting feedback look like, now and ongoing?

現在和將來，徵求反饋意見的過程會是怎樣的？

The last aspect is to consider how we might implement a design system.

最後一個方面是考慮如何實施設計系統。

If we build the design system from the ground up, the result will be a unique, customized solution made to solve our specific set of problems.

如果我們從頭開始構建設計系統，那麼結果將是為解決我們的特定問題而量身定製的獨特解決方案。

This method requires the most time, effort, and resources, making it challenging to get buy-in.

這種方法需要花費最多的時間、精力和資源，是以要獲得支持具有挑戰性。

If we need something more quick and budget-friendly, we could use or borrow parts of an existing one from another company, and only document things we want to do differently.

如果我們需要更快速、預算更低的解決方案，我們可以使用或借用其他公司現有解決方案的部分內容，只記錄我們想做的不同事情。

Or, we could build a wireframe library using an existing design kit.

或者，我們可以使用現有的設計工具包建立一個線框庫。

We may borrow a token structure from another system like Shopify's Polaris, and update it within our own guidelines.

我們可能會借鏡其他系統（如 Shopify 的 Polaris）的令牌結構，並根據我們自己的指導方針進行更新。

We can also pull inspiration from other design systems to better support our design system goals.

我們還可以從其他設計系統中汲取靈感，以更好地支持我們的設計系統目標。

We might see another company's accessibility guidelines and find that we want to include our own.

我們可能會看到其他公司的可訪問性指南，然後發現我們也想加入自己的指南。

We might love how a system communicates information to developers, and decide we need to improve this aspect of our own system.

我們可能喜歡某個系統向開發人員傳達資訊的方式，並決定要改進自己系統的這一方面。

While it's possible to stick with one of these approaches, it's more likely that we'll use a combination of them.

雖然我們可以堅持使用其中一種方法，但更有可能將它們結合起來使用。

Here are other questions to help you evaluate further.

以下是幫助您進一步評估的其他問題。

Where does this project fit within company goals?

該項目與公司目標的契合點是什麼？

How much time and bandwidth do contributors have?

撰稿人有多少時間和帶寬？

How many resources is leadership willing to provide?

領導層願意提供多少資源？

This is a good place to refer to your audit findings as well.

這也是參考審計結果的好地方。

Let's pay the Habits team another visit to see how their decision is coming along.

讓我們再次訪問 Habits 團隊，看看他們的決定進展如何。

They've had multiple conversations with leadership who have ambitions to expand the company and the product more rapidly.

他們與領導層進行了多次談話，後者雄心勃勃，希望更快地擴大公司和產品規模。

Leadership understands that even though the number of inconsistencies in the product is nothing to be alarmed of, it's a problem that may soon grow.