根據(jù)不同的業(yè)務(wù)、需求，設(shè)計系統(tǒng)的構(gòu)建也不盡相同，不同的設(shè)計系統(tǒng)樣式可以滿足特定樣式的特定需求。本文從六個常見問題出發(fā)，圍繞設(shè)計系統(tǒng)進行了分析探討。

如今，越來越多的公司專注于設(shè)計系統(tǒng)，因此，“設(shè)計系統(tǒng)”一詞的流行開始呈指數(shù)級增長。

這并不是巧合，因為設(shè)計系統(tǒng)是幫助產(chǎn)品和服務(wù)的發(fā)展飛速發(fā)展的強大方法，使其成為全球企業(yè)的寶貴工具。

完整的設(shè)計系統(tǒng)初學者指南

并非所有設(shè)計系統(tǒng)都構(gòu)建相同。根據(jù)個人，業(yè)務(wù)，需求等的不同，有不同的設(shè)計系統(tǒng)樣式可以滿足特定樣式的特定需求。

如果您是一名初學者Web設(shè)計師，并且已經(jīng)大致了解設(shè)計方面的一兩件事，并且熟悉印刷術(shù)，設(shè)計，布局等，但是您偶然發(fā)現(xiàn)了術(shù)語“設(shè)計系統(tǒng)”，但是您不太確定這意味著什么真的很深入，那么您來對地方了。

這次，我們的主題是-設(shè)計系統(tǒng)，在本文中，我們將嘗試并盡我們最大的能力回答圍繞該主題的常見問題。

因此，準備好圍繞設(shè)計系統(tǒng)的六個最常見問題深入探討該主題：

01 什么是設(shè)計系統(tǒng)？

您可能期望一個統(tǒng)一的定義，但是不幸的是，像Web設(shè)計的其他大多數(shù)方面一樣的設(shè)計系統(tǒng)是任意的，并且沒有一個集合定義，但是它具有多種解釋，就像您將在此處看到的那樣。

“設(shè)計系統(tǒng)不是項目。這是為產(chǎn)品服務(wù)的產(chǎn)品?！?——Nathan Curtis

設(shè)計系統(tǒng)是其核心集合，其中包含在設(shè)計和代碼中實現(xiàn)的各種可重用組件，規(guī)則，約束和原則。

從按鈕到單頁應(yīng)用程序，這三個要素（規(guī)則，約束和原則）發(fā)揮不同的功能，并在系統(tǒng)中提供連貫，系統(tǒng)的順序。

因此，設(shè)計系統(tǒng)幾乎是構(gòu)成產(chǎn)品的一切，從版式，布局，網(wǎng)格一直到編碼約定，樣式指南和文檔。從本質(zhì)上講，您可以用來構(gòu)建和開發(fā)出色的產(chǎn)品。

為了進一步簡化它，并嘗試給設(shè)計系統(tǒng)一個統(tǒng)一的定義，我們也可以說設(shè)計系統(tǒng)是：與單個業(yè)務(wù)相關(guān)的準則，資產(chǎn)和原則的集合，其整個目的是幫助該業(yè)務(wù)學習，建立和發(fā)展。

它還包括以下元素：

1. 模式庫
2. 模塊化設(shè)計
3. 元件設(shè)計
4. 設(shè)計語言
5. 用戶界面庫

02 為什么要使用設(shè)計系統(tǒng)？

為了回答這個問題，讓我們嘗試將事情推翻，首先問一個與此相反的問題—為什么不應(yīng)該使用設(shè)計系統(tǒng)？

您可能現(xiàn)在正想盡辦法回答這個問題，說實話；這與我們一樣。關(guān)于為什么不應(yīng)該使用設(shè)計系統(tǒng)的問題沒有答案，因為這就像問為什么在國外度假時不應(yīng)該使用指南。為什么要避免最終能幫助您的事情？沒道理吧？

現(xiàn)在回答第一個問題，為什么要使用它……好吧，因為它是被使用的，它可以幫助您創(chuàng)建更好的產(chǎn)品并總體上成為更好的設(shè)計師，并顯著擴展產(chǎn)品的增長，從而賦予其一致的品牌和感覺?？梢怨?jié)省很多時間

設(shè)計系統(tǒng)是由精通各種方法并為您提供捷徑的人們制作的，因此您不會遇到麻煩和浪費時間，并且最終意識到：

“您知道，如果我只是使用另一個人為我提供的便利，那么我真的可以節(jié)省所有的麻煩和時間?！睂嶋H上，您可以從使用它中學到一些新知識。

作為設(shè)計師，無論您處于什么級別，都應(yīng)該知道總會有一些您不知道的東西，需要改進的東西，需要學習的東西。

設(shè)計是如此廣泛，并且具有如此眾多的元素和屬性，以至于有一部分您還沒有被介紹過，因此您應(yīng)該考慮將設(shè)計系統(tǒng)也視為發(fā)現(xiàn)它的機會。幫自己一個忙，不要那么固執(zhí)。承認您可能會從比您更有經(jīng)驗的人那里獲得一些幫助，這并不丟臉。

03 設(shè)計系統(tǒng)和樣式指南或樣式庫之間有什么區(qū)別？

我們建立了設(shè)計系統(tǒng)的定義，現(xiàn)在讓我們向您介紹兩個新術(shù)語-樣式指南和樣式庫。對你們中的某些人來說，這些術(shù)語可能不是什么新鮮事物，我們希望您不要像其他許多人那樣認為相同的意思而犯同樣的錯誤……他們不是！

的確，可以互換使用的三個概念是相互聯(lián)系的，但是它們絕對不相同。

現(xiàn)在，當我們解決了這個問題時，主要問題變成了-它與樣式指南或模式庫有什么區(qū)別？為了回答這個問題，我們必須研究這些新術(shù)語的含義。

樣式指南和模式庫可以歸為龐大的設(shè)計系統(tǒng)的子模式，這使其成為這兩種設(shè)計系統(tǒng)之間的主要區(qū)別。另一個區(qū)別是與資產(chǎn)緊密相關(guān)的標準和文檔。

1. 樣式指南

如其名稱所示，樣式指南著重于圖形樣式，包括顏色，字體，插圖等的所有內(nèi)容及其用法。

簡單地說，樣式指南是靜態(tài)文檔和對設(shè)計系統(tǒng)本身的描述。它描述了產(chǎn)品的外觀和感覺，并在某些情況下用于UI模式，更正印刷比例等。

2. 模式庫

這是另一個設(shè)計系統(tǒng)子類。它代表了公司使用的一組設(shè)計模式。它是用戶界面設(shè)計元素的集合。它定義了它們的行為，它們的外觀以及編碼方式。模式庫還解決了常見的設(shè)計問題。

可以找到的并且是模式庫的一部分的一些元素是：

1. 幻燈片放映
2. 社交媒體功能
3. 輪播
4. 新聞列表
5. 相關(guān)鏈接

有些網(wǎng)站是由不同的人長期開發(fā)的，并定期進行修訂。除非存在確保一致性的措施，否則這通常會導致用戶界面分散。只需訪問任何大型站點即可查看示例。導航會改變位置，表單元素的格式會有所不同，甚至字體也會發(fā)生變化。之所以會這樣，是因為猜測按鈕的外觀比發(fā)現(xiàn)以前的樣式要容易得多。

模式庫通過簡單地提供一種簡單的方法來復(fù)制網(wǎng)站的任何給定頁面上的現(xiàn)有設(shè)計和功能，從而改善了設(shè)計者的體驗，使其變得更加容易。

現(xiàn)在，您應(yīng)該很清楚，樣式指南和樣式庫只是設(shè)計系統(tǒng)的一部分交付成果。

04 如何開始使用設(shè)計系統(tǒng)？

從頭開始構(gòu)建設(shè)計系統(tǒng)是一個很大的挑戰(zhàn)，特別是如果您仍然是設(shè)計的初學者。了解系統(tǒng)設(shè)計背后的內(nèi)容對于創(chuàng)造卓越的用戶體驗至關(guān)重要。這就是為什么我們?yōu)槟鷾蕚淞诉@些易于遵循的步驟的原因。

步驟1：品牌識別，語言和語音

為您的設(shè)計系統(tǒng)創(chuàng)建一個根據(jù)戰(zhàn)略，目標和目標定義的品牌標識是您應(yīng)該追求的第一件事。畢竟，您必須與權(quán)威人士交談，以便人們認真對待您的設(shè)計系統(tǒng)，對嗎？

1）顏色

設(shè)計系統(tǒng)中最常用的顏色包括代表您品牌的一到三個原色。最好包含各種色調(diào)-混合白色和黑色的顏色，為您的設(shè)計師提供更多選擇。

2）版式

大多數(shù)設(shè)計系統(tǒng)僅包含兩種字體：一種用于標題和正文的字體，另一種用于代碼的等寬字體。這很好，因為可以避免用戶過載和混亂；最好保持簡單。另外，請盡量減少字體數(shù)量，因為這不僅是版式設(shè)計的最佳做法，而且還可以防止由于過度使用Web字體而導致的性能問題。

3）圖像

您可能已經(jīng)知道這一點，但是以您的視覺設(shè)計語言成功實現(xiàn)圖像的關(guān)鍵在于制定計劃并堅持下去。設(shè)置插圖和圖標的準則，并針對情況使用最佳的圖像格式將確保您在這方面取得成功。

4）同樣重要的是

所有這些都是您應(yīng)該追求的目標，一個具有清晰視覺效果的好程序包，可以在用戶的腦海中為您創(chuàng)建特定的圖像，以吸引他們的注意力，然后繼續(xù)保持注意力。

在“關(guān)于我們”頁面中包含以下內(nèi)容：“嗨，這是我們的身份；這就是我們的信念；這些是我們的目標，這就是我們實現(xiàn)這些目標的方式。”

步驟2：分類

要為您構(gòu)建第一個設(shè)計系統(tǒng)，應(yīng)該對產(chǎn)品中的所有視覺組件進行分類，并在這樣做時減少用戶從移動產(chǎn)品切換到桌面產(chǎn)品時存在的認知負擔。

這樣，您將突出顯示產(chǎn)品中最重要的不一致性所在，這將幫助團隊選擇產(chǎn)品的基本要素和組件。這也使客戶容易得多，更不用說節(jié)省時間了。

步驟3：建立設(shè)計模式，規(guī)則和UX準則庫

建立重要的細節(jié)（如設(shè)計模式，規(guī)則），并為每個模型建立一個完善的庫，不僅可以節(jié)省時間，而且可以節(jié)省以后的步驟。

一旦網(wǎng)站達到特定的大小和復(fù)雜性，諸如模式庫之類的元素（這些元素可確保一致的用戶界面）將變得非常有用和有益。

具有這些關(guān)鍵要素的一致庫使維護也更易于管理。當有人對元素進行編碼時，開發(fā)人員可以更輕松地使用預(yù)先建立的規(guī)則和準則。此外，當新的開發(fā)人員加入時，他們可以通過查看已經(jīng)創(chuàng)建的庫來更快地加快速度。

05 什么是開源設(shè)計系統(tǒng)？

開源設(shè)計系統(tǒng)被簡單地稱為“免費使用”設(shè)計系統(tǒng)，該系統(tǒng)……對于大眾來說是完全免費的。它們對任何階段的每個人都很棒，特別是對于初學者。

它們是靈感，創(chuàng)造力和生產(chǎn)力的重要來源。當您剛開始整個設(shè)計系統(tǒng)領(lǐng)域時，它們是最佳選擇，因為如果您以后決定創(chuàng)建設(shè)計系統(tǒng)，則可以看到如何放置和構(gòu)造其組件和元素。

06 設(shè)計系統(tǒng)的例子？

“設(shè)計系統(tǒng)一直在發(fā)展，您共享和鼓勵采用新迭代的方式也會隨之發(fā)展?！薄靼材取っ⑻?/p>

靈感是很大的動力；看著精心打磨的產(chǎn)品通常會給人一種想要自己創(chuàng)造一個產(chǎn)品的感覺，對嗎？

這是一些出色的設(shè)計系統(tǒng)的候選清單，它們有望激發(fā)您創(chuàng)建一個與您產(chǎn)生共鳴的設(shè)計系統(tǒng)，甚至在人氣和質(zhì)量上都超過它們。

Shopify的設(shè)計系統(tǒng)

Shopify設(shè)計系統(tǒng)—北極星

Shopify的設(shè)計系統(tǒng)Polaris。這是一個反映Shopify在全球范圍內(nèi)存在的系統(tǒng)。這與可擴展性和效率有關(guān)。Shopify精確地復(fù)制和設(shè)計，僅專注于其商人的體驗。

不難看出Shopify是如何幫助企業(yè)管理全球復(fù)雜性的，它的經(jīng)驗可以為每個人，即使是最沒有經(jīng)驗的企業(yè)家，也提供最大的成功機會。

Atlassian的設(shè)計系統(tǒng)

Atlassian設(shè)計系統(tǒng)

Atlassian的設(shè)計系統(tǒng)使用個性將工具與人聯(lián)系起來?？稍L問性對Atlassian非常重要，其設(shè)計標準的對比度可確保視力不佳的用戶查看和使用其產(chǎn)品。簡而言之，Atlassian品牌的宗旨在于樂觀，專注于個性特征。

原文作者： Akbar Shah

原文地址：https://medium.com/@abby2978/the-complete-beginners-guide-to-design-systems-bb68fdf05d0b

譯者： CANAAN；譯者公眾號：南設(shè)（ID：shemenglianmeng）

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

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