中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：設計系統(tǒng)的搭建有助于產品在設計過程中提高效率，降低設計成本，而且設計系統(tǒng)在搭建過程中并非一成不變，它往往在過程中進行迭代和優(yōu)化。本篇文章里，作者就何為設計系統(tǒng)、以及設計系統(tǒng)的搭建策略等進行了總結，一起來看一下。

“設計系統(tǒng)” 這個詞的出現已經有相當長的一段時間了。設計系統(tǒng)最初是作為標志和品牌的標準手冊來使用和構建的，后來出現在基于 CSS 框架的 Web 語言中，比如著名的 Twitter 的 Bootstrap 框架就是一組 UI 組件。如今，隨著原子設計 [1] 方法論、采用的模式和指導原則的出現，設計系統(tǒng)已經變得越來越主流。

（[1] 原子設計：設計系統(tǒng)的基礎指導理論。它可以幫助網絡設計者建立用戶與產品元素互動的關系，以及如何將它們整合到一個整體的系統(tǒng)中。）

多年來，我們看到世界上的許多頂級公司都創(chuàng)造了他們獨特的設計體系。它們通過利用一套標準來創(chuàng)造一個可擴展的、一致的創(chuàng)新性的產品，已經改變了我們設計數字產品的方式。

Airbnb、IBM 的 Carbon、蘋果、Google 的 Material design、Shopify 的 Polaris、UBER —— 這些公司都通過自己的設計系統(tǒng)構建了令人驚嘆的用戶體驗，同樣地，這些設計系統(tǒng)也反過來在用戶心中建立了一種統(tǒng)一的、可識別的公司形象。

一、什么是設計系統(tǒng)？What is a Design System?

雖然我們大多數人都知道設計系統(tǒng)意味著什么，但一些人發(fā)現它很難實現落地。對一些人來說，它是一個組件庫，而有些人把它與樣式指南和樣式庫混淆。當然它就像一個不斷更新的應用程序一樣簡單，每次我們使用它的時候感覺都相同。

那它是怎么實現的呢——當然是一個真理：由設計和開發(fā)團隊共同構建的。

通常，UI 組件庫被認為是設計系統(tǒng)的核心，但是要構建一個可擴展、靈活、穩(wěn)定且完全可維護的源文件庫則還有更多的工作要做。

SPACE 設計系統(tǒng)（By：QED42）| SPACE Design System by QED42

設計系統(tǒng)是一個不斷發(fā)展的綜合指南，它可以節(jié)省時間并為團隊構建便于操作的無縫的流程。創(chuàng)建一個設計系統(tǒng)需要規(guī)則、約束和原則，這些規(guī)則、約束和原則在基礎、組件、內容以及剩余的技術和設計堆棧下被細分為更小的部分。

設計師丹尼爾·伊登將設計系統(tǒng)稱為工具和人之間的交互。他將設計工具描述為與樂高積木一樣具有豐富的交互性，并主張設計系統(tǒng)是關于人的：他們如何相互作用，如何相互理解，以及如何協同工作以實現共同目標。它是由人創(chuàng)造的，被人使用的，被人體驗的。它受到人們的挑戰(zhàn)、創(chuàng)造和破壞。

這是迄今為止對設計系統(tǒng)最人性化的定義之一，它把設計過程說成是共同創(chuàng)造，而不是僅僅是設計結果的來源。

開發(fā)人員對設計系統(tǒng)的理解各不相同，設計師的貢獻也各不相同，設計作家們可能會給出不同的定義。所有的大公司、小公司或代理機構們都有不同的價值觀和規(guī)則，以及創(chuàng)建設計系統(tǒng)的管理過程，但目標都是一致不變的：即減少技術和設計的工作負擔。

設計系統(tǒng)不是一成不變的——它是一個不斷進行的工作，通過開放迭代，基于規(guī)則、約束和原則這三個基石下改善、適應和構建代碼碼庫并開展設計。

二、規(guī)則、約束和原則?Rules, Constraints, and Principles

設計系統(tǒng)由規(guī)則、約束和原則組成。創(chuàng)建這三個構件時要考慮到它們將如何在整個產品中擴展，并創(chuàng)建一致的用戶體驗。下面讓我們更深入地來研究這些模塊。

1. 規(guī)則

如何為組建設計工具創(chuàng)造氛圍？創(chuàng)作者和貢獻者如何確保每個人都在使用最新版本的設計系統(tǒng)？

規(guī)則的制定是為了讓每個人都能理解和解釋設計系統(tǒng)中的內容。它們被細分為價值和目的，作為一種基礎資源，幫助團隊中的每個人和新用戶基于現有的元素進行設計。規(guī)則是一個管理體系，為設計系統(tǒng)的工作流程奠定了基礎。

一個系統(tǒng)就是一個框架，是一份規(guī)則手冊。它會告訴你這些模式是如何協同工作的 (布拉德·弗羅斯特）。

來源：Atlassian設計系統(tǒng) | Source: Atlassian Design System

規(guī)則手冊的價值部分管理著設計系統(tǒng)的流程，它能將團隊統(tǒng)一在約束和原則周圍。它是真理的源泉，是設計和代碼的記錄系統(tǒng)。目的部分定義了個人要如何利用新的元素為設計系統(tǒng)做出貢獻。

它在整個團隊中建立了共同的語言和溝通交流，這反過來又創(chuàng)造了更好的溝通、理論以及自信和樂觀的精神。

2. 約束

創(chuàng)建和維護一個有效的設計系統(tǒng)是一個挑戰(zhàn)。因為要做出許多小的決策，比如：應該定義多少種字體？我們應該如何構建顏色的使用模式？我們在哪停止？設計系統(tǒng)中的約束有助于簡化每一個決定，提供一些限制和更多可能性。

約束定義了顏色的使用、聲音、布局、多媒體、排版、數據可視化、表單設計、移動端行為等一般準則。它們在整個設計系統(tǒng)中利用其獨特的差異化和品牌特征元素，使每個數字觸點成為統(tǒng)一的體驗。

來源：Atlassian設計系統(tǒng) | Source: Atlassian Design System

當設計師從約束、限制和可能性的共同點出發(fā)去設計和構造界面時，用戶總是能夠知道當他們與產品交互時他們將體驗到什么。

從用戶體驗的角度來看，用可擴展的、共同的、一致的約束條件來設計界面，能為用戶帶來熟悉感。從技術角度來看，約束意味著可以使得開發(fā)人員的效率更高、可擴展性更強、重復工作更少。

3. 原則

設計系統(tǒng)的原則提供了最初似乎沒有看到的問題的答案。設計和開發(fā)團隊經常以他們自己的一套基本標準來運作，用于評估設計的質量是否能夠維持一致的數字化用戶體驗。但是，當我們創(chuàng)建一個統(tǒng)一的設計系統(tǒng)時，將所有標準統(tǒng)一成為共同原則變得非常重要。

如何去定義必要的原則？如何知道什么是不可缺少的，什么是不穩(wěn)定的？你怎么知道這些是能夠指導你的愿景和目標的原則？

設計系統(tǒng)的原則對每個人來說都是可重復使用的標準。這些原則應該取代本能的標準，讓人們能夠共同理解如何去塑造用戶體驗。因此我們必須制定設計原則，以幫助解決從頭到尾設計軟件的復雜性！

IBM 的 Carbon 設計系統(tǒng)將其原則定義為結果背后的意圖。他們相信偉大的體驗會給用戶帶來有意義的結果，會直擊用戶的內心。要設計出優(yōu)秀的用戶體驗，你必須了解它們是如何組合在一起的，以及它們?yōu)槭裁茨軌蛟诟顚哟紊嫌|動人們。

來源：Carbon設計系統(tǒng) | Source: Carbon Design System

在寫下設計系統(tǒng)的原則時，團隊應該關注以下幾點：

• 個人指導并決策這一原則能使團隊更快達成一致。它們應該作為共同的支柱，在整個產品中創(chuàng)造和諧和凝聚力。
• 隨著產品的發(fā)展，設計系統(tǒng)會隨著時間的推移而修改，設計系統(tǒng)的原則應該協調整個團隊，并幫助團隊成員跟進修改的速度。
• 指導設計系統(tǒng)的原則應該為如何處理和解決用戶體驗問題提供一個具有明確清晰的過程
• 它們應該要有助于加快設計系統(tǒng)的構建并消除不必要的摩擦。
• 它們應該在每一步中明確預期，幫助解決問題，讓團隊能夠專注于手上的工作，而不必擔心下一步該做什么。
• 它們應該以一致的語氣和語調來寫，整個設計系統(tǒng)也應該如此。

設計系統(tǒng)的原則具有一系列明確定義的過程、指導方針和標準，每個都有不同的目標。作為相互依存的實現層次，在一起使用時，可以提高解決問題的幾率。

三、總結?Conclusion

治理系統(tǒng)，即支持創(chuàng)建設計系統(tǒng)的流程程，有助于幫助理解每個團隊成員的角色和責任，在正確的時間引入正確的人，使每個人的參與都有利于產出的質量。

管理體系能夠從一開始就決定投入時間來設置規(guī)則、約束和原則，這一點很重要。雖然大多數公司都有比你預期的更多的人來掌握話語權，但從產品的角度來看，所有三個模塊都應該用相似的基調和表達方式來編寫。通過擁有一個真理源泉以及構造堅固的基石，你可以為用戶提供一種極其優(yōu)秀和一致的體驗。

這就是它的工作原理：就像玩樂高一樣，一塊積木可以被添加到許多構造形態(tài)中，積木是保持不變的，但玩家每次都會使用不同的方式來構造新的設計，并釋放約束。同樣，設計系統(tǒng)的積木（即基石）可應用于設計和產品構造的各個層面，用多種方式設置、構建出不同的樣式，每次都能產生一個新的設計。

本文翻譯已獲得作者的正式授權（授權截圖如下）

作者：Priyanka J

原文：https://uxplanet.org/the-building-blocks-of-a-design-system-ee0d99c6f093

譯者：彭祎婕；審核：吳鵬飛、李澤慧、張聿彤；編輯：孫淑雅

本文由@TCC翻譯情報局 翻譯發(fā)布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議