Name: 歡迎來到設計系統 - 第 1 課：設計系統簡介 (Welcome to design systems - Lesson 1 : Introduction to design systems)
Uploaded: 2024-07-28T04:41:01.000Z
Duration: 15 min 43 s

情態副詞

There are millions of websites and applications that are endlessly evolving, many of which are operating on different systems and devices.

有數以百萬計的網站和應用程序在不斷髮展，其中許多都在不同的系統和設備上運行。

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.

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

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

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.

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

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.

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

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.

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

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?

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

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.

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

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.

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

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

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?

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

字幕列表影片播放

歡迎來到設計系統 - 第 1 課：設計系統簡介 (Welcome to design systems - Lesson 1 : Introduction to design systems)

entire

potential

process

dedicated