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

編輯導(dǎo)語：設(shè)計系統(tǒng)的搭建可以幫助提升設(shè)計效率，推動產(chǎn)品開發(fā)，并一定程度上降低設(shè)計成本，推動設(shè)計開發(fā)上的一致性，也能協(xié)調(diào)設(shè)計團(tuán)隊的多項業(yè)務(wù)。本篇文章里，作者就設(shè)計系統(tǒng)的構(gòu)成、優(yōu)點等方面進(jìn)行了總結(jié)，一起來看一下。

構(gòu)建設(shè)計系統(tǒng)有助于將設(shè)計組件統(tǒng)一為一個有意義的實體，簡化設(shè)計和開發(fā)過程，從而節(jié)省開發(fā)人員的時間。

但是，如果你瀏覽有關(guān)設(shè)計系統(tǒng)的文章，你可能會注意到其中大多數(shù)都只是告訴你如何創(chuàng)建一個系統(tǒng)。

本文以一種略有不同的方式介紹這一熱門主題，不僅涵蓋一般的設(shè)計系統(tǒng)，還涵蓋我們作為 Shakuro 的開發(fā)和設(shè)計外包公司使用設(shè)計系統(tǒng)的相關(guān)原則所得到的經(jīng)驗。系統(tǒng)化的 UI / UX 設(shè)計方法可以在很多方面幫助我們創(chuàng)建更好的網(wǎng)站和應(yīng)用程序，標(biāo)題種提到的“更快”只是一個開始。

一、設(shè)計系統(tǒng)及其組成部分?What design systems are and what they are made of

一個設(shè)計系統(tǒng)是一套設(shè)計組件和規(guī)則，用來規(guī)范他們的使用并定義產(chǎn)品的理念。它聽起來像是樣式指南，但區(qū)別在于樣式指南是靜態(tài)文檔，其目標(biāo)非常明確——準(zhǔn)確定義設(shè)計元素在各種場景，事件和媒介中的用法。樣式庫還有一個概念，從技術(shù)上來講，它是 UI 組件的簡單集合。

不同的設(shè)計師理解和定義設(shè)計系統(tǒng)的方式可能會有所不同。在本文中，設(shè)計系統(tǒng)將項目的樣式庫及其樣式指南整合到一個實體中，將所有內(nèi)容組合在一起并使其易于擴(kuò)展。

產(chǎn)品的設(shè)計系統(tǒng)包括幾個大的部分，具體數(shù)量和內(nèi)容取決于具體公司或產(chǎn)品。

設(shè)計系統(tǒng)可能包含的組件有：

• 一組可調(diào)用的界面組件（換句話說，UI 工具包）例如圖標(biāo)、按鈕、插圖等。
• 使用這些組件的必要規(guī)則。
• 排版指南。
• 不同類型設(shè)備上的狀態(tài)和行為規(guī)定。
• 動畫和聲音設(shè)計指南。
• 用戶體驗寫作和品牌展示的規(guī)則，例如公司的價值觀和品牌形象識別設(shè)計。

重要的是要注意，設(shè)計系統(tǒng)的目的是形成一個產(chǎn)品的全面圖景，因此即使將實際的白色 #FFFFFF 顏色用于空白，而實際的黑色＃000000 顏色用于文本，也需要在文檔中注明。

下面看一下我們的項目種設(shè)計系統(tǒng)的顏色部分：

設(shè)計系統(tǒng)概念誕生于 20 世紀(jì)中葉，但是如果更廣泛地看待這個概念，可以追溯到中世紀(jì)。關(guān)于數(shù)字設(shè)計，第一次有意義的大規(guī)模網(wǎng)絡(luò)統(tǒng)一的嘗試是由谷歌發(fā)起的 Material Design。他們從 2011 年開始研究這個想法，并在 2014 年提出了一個真實的設(shè)計系統(tǒng)。從那時起，設(shè)計系統(tǒng)的主題開始特別受設(shè)計領(lǐng)域歡迎和討論。

此外，系統(tǒng)化的概念對于實現(xiàn)前端和一般的 UI 時使用的組件方法來說是特別有意義的。React、Vue、Angular 和其他流行的前端框架都使用基于組件的范式。因此，即使是小型項目團(tuán)隊也要考慮創(chuàng)建設(shè)計系統(tǒng)，更不用說像 Airbnb、Uber 和 IBM 這樣的大公司了，他們自己構(gòu)建大型設(shè)計系統(tǒng)來加強和維護(hù)自己的品牌形象。

二、設(shè)計系統(tǒng)的優(yōu)點?Benefits of using the design system approach for creating different products for different businesses

如果你對設(shè)計系統(tǒng)在現(xiàn)實生活中的樣子感興趣，你可能會發(fā)現(xiàn)一個設(shè)計系統(tǒng)的案例清單：包括上面提到的產(chǎn)品公司以及 Atlassian、Shopify、Spotify 和星巴克這樣的公司。產(chǎn)品公司設(shè)計系統(tǒng)的目的是確保一種產(chǎn)品與另一種產(chǎn)品相似。

作為一家為許多不同客戶設(shè)計和開發(fā)的服務(wù)公司，我們采用不同的方法，從設(shè)計系統(tǒng)中獲得最佳效果，同時能夠令團(tuán)隊規(guī)模較小。

與大型企業(yè)可能有 10-20 人的團(tuán)隊全職管理他們的每個系統(tǒng)不同，我們?yōu)槊總€產(chǎn)品設(shè)計一個系統(tǒng)，創(chuàng)建一種小型產(chǎn)品團(tuán)隊。在這種情況下，設(shè)計系統(tǒng)更像是一組規(guī)則和系統(tǒng)性元素的重復(fù)使用，而不是像產(chǎn)品團(tuán)隊通常做的那樣，成為一個具有超級深度的完整案例。同時，我們保留了設(shè)計系統(tǒng)的主要特點，并利用其主要優(yōu)勢來節(jié)省時間和減少錯誤。

今天，任何網(wǎng)站或 APP 都是一個商業(yè)問題的解決方案，需要一個有條不紊的方法。因此，系統(tǒng)的方法能夠給我們帶來以下幾處優(yōu)點。

1. 更快的設(shè)計（和開發(fā)）過程

根據(jù) Figma 團(tuán)隊進(jìn)行的研究，當(dāng)其參與者（設(shè)計人員、開發(fā)人員等）訪問設(shè)計系統(tǒng)時，他們將目標(biāo)完成的速度提高了34％，我們根據(jù)自己實踐的經(jīng)驗發(fā)現(xiàn)確實是真的。

通過為項目構(gòu)建可重復(fù)使用的組件的系統(tǒng)并定義其使用規(guī)則，整個團(tuán)隊變得更容易（再次）使用它們。例如，以后我們 需要用一個新的功能來擴(kuò)展一個項目或擴(kuò)大他的規(guī)模時，我們可以從已經(jīng)存在的系統(tǒng)中快速構(gòu)建所需的內(nèi)容。

設(shè)計師布拉德·弗羅斯特（Brad Frost）設(shè)計了一種被廣泛使用的原子方法，該方法本質(zhì)上是將網(wǎng)站組成分解為用于設(shè)計整個網(wǎng)站的最簡單的組件。這個想法是，開始設(shè)計時不使用頁面布局，而是使用較小的對象（字體、填充、輸入字段、動畫等）進(jìn)行設(shè)計，這些對象以后可用來逐步構(gòu)建更復(fù)雜的實體，直到完成整個頁面為止。

設(shè)計系統(tǒng)除了可以形成每個人都可以理解和依賴的清晰結(jié)構(gòu)之外，它還有助于將產(chǎn)品設(shè)計視為一個實體，或者更確切地說，一個有機(jī)體。這個想法出現(xiàn)在 Material Design 系統(tǒng)誕生之前，并影響了 Material Design 系統(tǒng)以及其他公司各種樣式庫的誕生。

實際上，這意味著我們可以收集原子（即最小的設(shè)計元素）并確定它們的行為，使用 Figma 的功能（自動布局、組件和變量）將它們連接成一個系統(tǒng)。在我們做最大的網(wǎng)頁設(shè)計項目之一 CGMA 的教育平臺時，我們尤其感受到了設(shè)計系統(tǒng)帶來的便利。

作為項目的一種通用語言，設(shè)計系統(tǒng)還有助于最大限度地減少新設(shè)計師和開發(fā)人員入職所需了解項目的時間。新成員可以更快地了解規(guī)則并執(zhí)行有效的任務(wù)，而不會在學(xué)習(xí)上浪費太多時間。

2. 降低成本

當(dāng)你和團(tuán)隊之外的人（尤其是不熟悉設(shè)計制作細(xì)節(jié)和現(xiàn)實的人）討論設(shè)計系統(tǒng)時，這個主題可能聽起來不太令人興奮，因為它有嚴(yán)格的規(guī)則和整齊組織好的組件。

但令人興奮地是，我們可以通過設(shè)計系統(tǒng)更快地設(shè)計，意味可以著開發(fā)更經(jīng)濟(jì)實惠的應(yīng)用程序和網(wǎng)站，而不會影響它們的質(zhì)量（實際上最終會增強它）。這是設(shè)計系統(tǒng)多年不斷迭代帶來的好處，對于需要多年制作的大型項目來說，這顯得尤其有意義。

更重要的是，不僅設(shè)計師能夠享受設(shè)計系統(tǒng)帶來的好處和更簡單的工作流程。這也意味著其他成本高昂的團(tuán)隊成員例如開發(fā)人員也有一小部分代碼現(xiàn)成可以直接調(diào)用，并且要完成的瑣碎任務(wù)更少。使用系統(tǒng)化的方法有助于簡化所有參與者的設(shè)計過程，使其更可預(yù)測，從而更高效。

Proko 是我們的另一個長期網(wǎng)站設(shè)計項目，它受益于設(shè)計系統(tǒng)的實施：

3. 更好的一致性

設(shè)計的一致性意味著項目中的所有元素都具有視覺和功能上的相似性。字體、顏色、按鈕、網(wǎng)格、大小和邊距的視覺效果在整個項目中一致，并構(gòu)成一個連貫的系統(tǒng)。在元素的外觀和行為上遵循非常明確的規(guī)則，在不同的平臺上創(chuàng)造一致的體驗并使用戶感到舒適就變得容易得多。

為了說明這一點，讓我們以按鈕之類的元素為例。它的每個屬性，如大小、半徑、顏色、排版細(xì)節(jié)等都被清晰地定義，使設(shè)計師很難犯錯誤或產(chǎn)生引發(fā)用戶混淆問題。

下面是我們 ChannelD 項目設(shè)計系統(tǒng)中按鈕部分的一部分：

4. 更好的質(zhì)量

在互聯(lián)網(wǎng)中，有數(shù)以百萬計的網(wǎng)站和移動應(yīng)用程序，所以制作新網(wǎng)站或應(yīng)用程序的過程需要盡可能高效。另外，你必須找到一個可以為產(chǎn)品制造差異化的機(jī)會點，以使項目脫穎而出。

最終用戶不會去刻意考慮設(shè)計的一致性，但他們會感覺到。當(dāng)產(chǎn)品設(shè)計中的每一個元素都與其他元素和諧地聯(lián)系在一起，交互是可預(yù)測的，并且很容易掌握新功能時，用戶體驗就會變得令人滿意。

5. 能夠?qū)⒏鄷r間花在復(fù)雜問題上

有了設(shè)計系統(tǒng)，將為我們節(jié)省時間，而且不需要每次都重新制作新的東西，留給設(shè)計師有更多的時間做其他更復(fù)雜的任務(wù)，比如創(chuàng)建更好的用戶流。

最終，設(shè)計系統(tǒng)對客戶、用戶和設(shè)計師本身都有益處。起初，花費在構(gòu)建系統(tǒng)上的時間似乎除了影響團(tuán)隊的生產(chǎn)力外，什么都沒有，但后來，進(jìn)一步開發(fā)產(chǎn)品時，設(shè)計師在簡單的視覺方面需要花費的時間越來越少，而將更多的時間花在設(shè)計更好的方面用戶體驗上。項目越大，效果越明顯。

6. 一種更協(xié)調(diào)的團(tuán)隊合作的通用語言

目前的情況下，當(dāng)分布式設(shè)計和開發(fā)團(tuán)隊人數(shù)越來越多時，我們需要不同團(tuán)隊成員之間更好的溝通。當(dāng)擁有一個具有設(shè)計系統(tǒng)的項目供每個人參考時，可以節(jié)省大量時間，否則會浪費時間在反復(fù)的溝通上。當(dāng)每個細(xì)節(jié)都被定義時，可能出現(xiàn)錯誤和誤解的可能就會小得多。

看看他們在 Atlassian 是如何做到的，它有一個設(shè)計系統(tǒng)，其中每個元素都有很好的規(guī)范，包括外觀、示例、代碼片段以及對其如何結(jié)合的詳細(xì)原則描述。

7. 解決將設(shè)計交付給代碼的問題

設(shè)計師和前端開發(fā)人員協(xié)同工作，充分利用設(shè)計系統(tǒng)進(jìn)行假設(shè)檢驗和產(chǎn)品開發(fā)。

例如，設(shè)計師能夠在 Figma 中創(chuàng)建一個組件庫，并將它們應(yīng)用到所有必要的布局中。反過來，開發(fā)人員只需調(diào)用系統(tǒng)中先前實現(xiàn)的組件。

系統(tǒng)2的變體 作者：Wojciech Zieliński

8. 更易維護(hù)

設(shè)計系統(tǒng)可讓設(shè)計師在任何地方輕松進(jìn)行設(shè)計，實現(xiàn)外觀甚至是比較大的設(shè)計改動，這意味著更簡單的項目支持、快速更新的可能性等等。

開發(fā)新功能后，我們可以擴(kuò)展了它的設(shè)計系統(tǒng)，幫助其發(fā)展。只要一個項目存在，它的設(shè)計系統(tǒng)就會存在和發(fā)展。出于這個原因，一些專家將整個設(shè)計系統(tǒng)概念稱為項目的“活文檔”，因為設(shè)計系統(tǒng)需要在產(chǎn)品的整個生命周期中進(jìn)行維護(hù)，從長遠(yuǎn)來看最初花費時間構(gòu)建它是值得的。

因此，產(chǎn)品的整體質(zhì)量得到提高。

如果不使用系統(tǒng)的方法，整個業(yè)務(wù)開始看起來更像是藝術(shù)展現(xiàn)。所以，設(shè)計過程必須遵循特定的規(guī)則和約束。

三、面對的挑戰(zhàn)?Challenges of using the design system approach

需要注意的是，設(shè)計系統(tǒng)并不是解決所有問題的靈丹妙藥，也不是每個項目都需要一個。設(shè)計師作為專業(yè)人員的工作是分析項目的當(dāng)前（和未來）規(guī)模，并決定在不超出預(yù)算的情況下需要維護(hù)設(shè)計系統(tǒng)到什么程度。

如果你不需要為登陸頁面構(gòu)建任何復(fù)雜類型系統(tǒng)，一個簡單的 UI 工具包就足夠了。同時，如果沒有清晰的結(jié)構(gòu)，一個更大的項目最終會變得緩慢、不一致且難以維持下去。

更重要的是，需要一定的技能來駕馭系統(tǒng)化的方法，而不至于將新產(chǎn)品（或其部分）變成打補丁的混亂局面，這只會阻礙產(chǎn)品的開發(fā)過程。

設(shè)計系統(tǒng)是整個數(shù)字設(shè)計的邏輯化延展，極大地簡化了開發(fā)大型產(chǎn)品的工作。一方面，它使我們能夠更快地更新它們，使用戶體驗更流暢，使開發(fā)過程更簡單。另一方面，設(shè)計系統(tǒng)有助于我們創(chuàng)建統(tǒng)一的界面。

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

作者：Kate Shokurova

原文：https://uxplanet.org/using-the-design-system-approach-to-build-products-faster-80ef647683f3

譯者：劉昱茜；審核：吳鵬飛、李澤慧、張聿彤；編輯：孫淑雅

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

題圖來自 Unsplash，基于 CC0 協(xié)議