起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識6個問題，深入探討設計系統是什么
根據不同的業務、需求，設計系統的構建也不盡相同，不同的設計系統樣式可以滿足特定樣式的特定需求。本文從六個常見問題出發，圍繞設計系統進行了分析探討。
如今，越來越多的公司專注于設計系統，因此，“設計系統”一詞的流行開始呈指數級增長。
這并不是巧合，因為設計系統是幫助產品和服務的發展飛速發展的強大方法，使其成為全球企業的寶貴工具。
完整的設計系統初學者指南
并非所有設計系統都構建相同。根據個人，業務，需求等的不同，有不同的設計系統樣式可以滿足特定樣式的特定需求。
如果您是一名初學者Web設計師，并且已經大致了解設計方面的一兩件事，并且熟悉印刷術，設計，布局等，但是您偶然發現了術語“設計系統”，但是您不太確定這意味著什么真的很深入，那么您來對地方了。
這次，我們的主題是-設計系統，在本文中，我們將嘗試并盡我們最大的能力回答圍繞該主題的常見問題。
因此，準備好圍繞設計系統的六個最常見問題深入探討該主題：
01 什么是設計系統？
您可能期望一個統一的定義，但是不幸的是，像Web設計的其他大多數方面一樣的設計系統是任意的，并且沒有一個集合定義，但是它具有多種解釋，就像您將在此處看到的那樣。
“設計系統不是項目。這是為產品服務的產品?！?——Nathan Curtis
設計系統是其核心集合，其中包含在設計和代碼中實現的各種可重用組件，規則，約束和原則。
從按鈕到單頁應用程序，這三個要素（規則，約束和原則）發揮不同的功能，并在系統中提供連貫，系統的順序。
因此，設計系統幾乎是構成產品的一切，從版式，布局，網格一直到編碼約定，樣式指南和文檔。從本質上講，您可以用來構建和開發出色的產品。
為了進一步簡化它，并嘗試給設計系統一個統一的定義，我們也可以說設計系統是：與單個業務相關的準則，資產和原則的集合，其整個目的是幫助該業務學習，建立和發展。
它還包括以下元素：
- 模式庫
- 模塊化設計
- 元件設計
- 設計語言
- 用戶界面庫
02 為什么要使用設計系統？
為了回答這個問題，讓我們嘗試將事情推翻，首先問一個與此相反的問題—為什么不應該使用設計系統？
您可能現在正想盡辦法回答這個問題，說實話；這與我們一樣。關于為什么不應該使用設計系統的問題沒有答案，因為這就像問為什么在國外度假時不應該使用指南。為什么要避免最終能幫助您的事情？沒道理吧？
現在回答第一個問題，為什么要使用它……好吧，因為它是被使用的，它可以幫助您創建更好的產品并總體上成為更好的設計師，并顯著擴展產品的增長，從而賦予其一致的品牌和感覺?？梢怨澥『芏鄷r間
設計系統是由精通各種方法并為您提供捷徑的人們制作的，因此您不會遇到麻煩和浪費時間，并且最終意識到：
“您知道，如果我只是使用另一個人為我提供的便利，那么我真的可以節省所有的麻煩和時間?！睂嶋H上，您可以從使用它中學到一些新知識。
作為設計師，無論您處于什么級別，都應該知道總會有一些您不知道的東西，需要改進的東西，需要學習的東西。
設計是如此廣泛，并且具有如此眾多的元素和屬性，以至于有一部分您還沒有被介紹過，因此您應該考慮將設計系統也視為發現它的機會。幫自己一個忙，不要那么固執。承認您可能會從比您更有經驗的人那里獲得一些幫助，這并不丟臉。
03 設計系統和樣式指南或樣式庫之間有什么區別？
我們建立了設計系統的定義，現在讓我們向您介紹兩個新術語-樣式指南和樣式庫。對你們中的某些人來說，這些術語可能不是什么新鮮事物，我們希望您不要像其他許多人那樣認為相同的意思而犯同樣的錯誤……他們不是！
的確，可以互換使用的三個概念是相互聯系的，但是它們絕對不相同。
現在，當我們解決了這個問題時，主要問題變成了-它與樣式指南或模式庫有什么區別？為了回答這個問題，我們必須研究這些新術語的含義。
樣式指南和模式庫可以歸為龐大的設計系統的子模式，這使其成為這兩種設計系統之間的主要區別。另一個區別是與資產緊密相關的標準和文檔。
1. 樣式指南
如其名稱所示，樣式指南著重于圖形樣式，包括顏色，字體，插圖等的所有內容及其用法。
簡單地說，樣式指南是靜態文檔和對設計系統本身的描述。它描述了產品的外觀和感覺，并在某些情況下用于UI模式，更正印刷比例等。
2. 模式庫
這是另一個設計系統子類。它代表了公司使用的一組設計模式。它是用戶界面設計元素的集合。它定義了它們的行為，它們的外觀以及編碼方式。模式庫還解決了常見的設計問題。
可以找到的并且是模式庫的一部分的一些元素是：
- 幻燈片放映
- 社交媒體功能
- 輪播
- 新聞列表
- 相關鏈接
有些網站是由不同的人長期開發的，并定期進行修訂。除非存在確保一致性的措施，否則這通常會導致用戶界面分散。只需訪問任何大型站點即可查看示例。導航會改變位置，表單元素的格式會有所不同，甚至字體也會發生變化。之所以會這樣，是因為猜測按鈕的外觀比發現以前的樣式要容易得多。
模式庫通過簡單地提供一種簡單的方法來復制網站的任何給定頁面上的現有設計和功能，從而改善了設計者的體驗，使其變得更加容易。
現在，您應該很清楚，樣式指南和樣式庫只是設計系統的一部分交付成果。
04 如何開始使用設計系統？
從頭開始構建設計系統是一個很大的挑戰，特別是如果您仍然是設計的初學者。了解系統設計背后的內容對于創造卓越的用戶體驗至關重要。這就是為什么我們為您準備了這些易于遵循的步驟的原因。
步驟1：品牌識別，語言和語音
為您的設計系統創建一個根據戰略，目標和目標定義的品牌標識是您應該追求的第一件事。畢竟，您必須與權威人士交談，以便人們認真對待您的設計系統，對嗎？
1）顏色
設計系統中最常用的顏色包括代表您品牌的一到三個原色。最好包含各種色調-混合白色和黑色的顏色，為您的設計師提供更多選擇。
2）版式
大多數設計系統僅包含兩種字體：一種用于標題和正文的字體，另一種用于代碼的等寬字體。這很好，因為可以避免用戶過載和混亂；最好保持簡單。另外，請盡量減少字體數量，因為這不僅是版式設計的最佳做法，而且還可以防止由于過度使用Web字體而導致的性能問題。
3）圖像
您可能已經知道這一點，但是以您的視覺設計語言成功實現圖像的關鍵在于制定計劃并堅持下去。設置插圖和圖標的準則，并針對情況使用最佳的圖像格式將確保您在這方面取得成功。
4）同樣重要的是
所有這些都是您應該追求的目標，一個具有清晰視覺效果的好程序包，可以在用戶的腦海中為您創建特定的圖像，以吸引他們的注意力，然后繼續保持注意力。
在“關于我們”頁面中包含以下內容：“嗨，這是我們的身份；這就是我們的信念；這些是我們的目標，這就是我們實現這些目標的方式?！?/p>
步驟2：分類
要為您構建第一個設計系統，應該對產品中的所有視覺組件進行分類，并在這樣做時減少用戶從移動產品切換到桌面產品時存在的認知負擔。
這樣，您將突出顯示產品中最重要的不一致性所在，這將幫助團隊選擇產品的基本要素和組件。這也使客戶容易得多，更不用說節省時間了。
步驟3：建立設計模式，規則和UX準則庫
建立重要的細節（如設計模式，規則），并為每個模型建立一個完善的庫，不僅可以節省時間，而且可以節省以后的步驟。
一旦網站達到特定的大小和復雜性，諸如模式庫之類的元素（這些元素可確保一致的用戶界面）將變得非常有用和有益。
具有這些關鍵要素的一致庫使維護也更易于管理。當有人對元素進行編碼時，開發人員可以更輕松地使用預先建立的規則和準則。此外，當新的開發人員加入時，他們可以通過查看已經創建的庫來更快地加快速度。
05 什么是開源設計系統？
開源設計系統被簡單地稱為“免費使用”設計系統，該系統……對于大眾來說是完全免費的。它們對任何階段的每個人都很棒，特別是對于初學者。
它們是靈感，創造力和生產力的重要來源。當您剛開始整個設計系統領域時，它們是最佳選擇，因為如果您以后決定創建設計系統，則可以看到如何放置和構造其組件和元素。
06 設計系統的例子？
“設計系統一直在發展，您共享和鼓勵采用新迭代的方式也會隨之發展?！薄靼材取っ⑻?/p>
靈感是很大的動力；看著精心打磨的產品通常會給人一種想要自己創造一個產品的感覺，對嗎？
這是一些出色的設計系統的候選清單，它們有望激發您創建一個與您產生共鳴的設計系統，甚至在人氣和質量上都超過它們。
Shopify的設計系統
Shopify設計系統—北極星
Shopify的設計系統Polaris。這是一個反映Shopify在全球范圍內存在的系統。這與可擴展性和效率有關。Shopify精確地復制和設計，僅專注于其商人的體驗。
不難看出Shopify是如何幫助企業管理全球復雜性的，它的經驗可以為每個人，即使是最沒有經驗的企業家，也提供最大的成功機會。
Atlassian的設計系統
Atlassian設計系統
Atlassian的設計系統使用個性將工具與人聯系起來?？稍L問性對Atlassian非常重要，其設計標準的對比度可確保視力不佳的用戶查看和使用其產品。簡而言之，Atlassian品牌的宗旨在于樂觀，專注于個性特征。
原文作者： Akbar Shah
原文地址：https://medium.com/@abby2978/the-complete-beginners-guide-to-design-systems-bb68fdf05d0b
譯者： CANAAN；譯者公眾號：南設（ID：shemenglianmeng）
本文由 @CANAAN 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
加油生活
十分感謝