創建設計系統的好處

Styleguides 已經存在多年，並且一直對公司的視覺形像很重要，但該術語的重新命名為整個概念賦予了新的維度。

在過去，UI 設計師會對基礎知識進​​行鬆散的解釋。 顏色、字體、按鈕以及可能的圖標樣式的概述，它會保存在硬盤驅動器上，只有在發送給需要查看視覺方向的外部機構時才會打開項目，或設計團隊的新手，但對於實際使用它的內部設計師來說，它很少受到重視。

主要的知識財富通常牢牢地存放在設計師大腦的最前沿。 這將意味著圍繞試圖記住某個視覺模式是否在某個地方之前使用過的問題不斷出現。 10 次中有 9 次最終會導致混亂的不一致。

近年來，樣式指南得到了更新，並引入了設計系統或設計語言的概念。 隨之而來的是一種全新的方法，可以極大地影響產品團隊如何作為一個整體來處理設計。

有了一個堅實、一致、充分解釋和深思熟慮的系統，創建設計的視覺方面變得完全模塊化。 Craft by Invision 或 Brand.ai 等產品在一定程度上讓視覺設計階段幾乎是拖放。

在您使用的元素與團隊中的其他所有設計師一致的情況下創建安全性。 他們消除了視覺設計階段的任何敵意，幾乎到了創建低保真原型已成為過去的程度。

“風格來來去去。 好的設計是一種語言，而不是一種風格。” ——馬西莫·維涅利

我不會用這篇文章來解釋如何準確地創建一個設計系統。 我已經寫過一篇文章：創建設計系統語言。 這更像是關於設計團隊如何從投資設計系統中受益的單向討論。

我們的設計系統介紹 – QUIK

在過去的幾年裡，從初創公司到成熟的組織，我一直在大量參與創建各種公司的設計系統。 我最近的一次冒險是為 Qstream 創建我們的設計系統。

從我在 Qstream 的早期開始，我就意識到盡快向我們的設計團隊引入一個全新的、可工作的系統是多麼重要。 不一致和糟糕的設計選擇困擾著產品，隨著產品和設計團隊的擴大，穩定船舶並創造一種每個設計師都可以完全使用的語言至關重要。

有了這個，我們開始創建我們的新設計系統，恰當地命名為QUIK - Q流用戶界面K它。

第 1 步：不一致

同樣，我不會對我們如何創建系統的過程進行深入探討，但我將簡要介紹一下我們是如何擺脫困境的。

首先要做的是對產品中的視覺組件進行全面審核。 Brad Frost 整理了一篇很棒的文章，如果您有興趣，您將如何進行 UI 審核。

這可能是一項可怕、耗時、單調的任務，但它非常有益。 它a)讓您全面了解主要的不一致之處b)讓您真正了解哪些元素是重要的並在整個產品中始終如一地使用c)為您提供有關產品如何工作的速成課程d )允許您向更廣泛的企業展示現有視覺系統的弱點，以及為什麼需要新的、一致的設計系統。

我們的 UI 審核的片段顯示了跨平台 UI 的不一致。

第 2 步：創建元素

我們將系統分解為 3 個不同的實體。

1. 品牌——產品的品牌標識由創建視覺標識的關鍵元素組成。 顏色、排版和圖像是任何平台的核心。
2. 元素——元素由系統中最小的可重用部分組成。 這些元素在系統的所有區域中不斷循環使用。 （按鈕，輸入）
3. 組件– 組件是元素的集合，它們通常彼此並排使用，以識別流程中的常見模式。 （警報、表格、卡片等）

下一步是根據 UI 審核確定產品中最常用的元素的優先級。 這些將是您首先解決的第一個領域。

一旦我們確定了系統的關鍵元素，就該開始圍繞每個區域創建樣式和規則了。 我們首先處理了顏色、排版、間距和一般圖標，然後再處理更成形的元素，如按鈕、輸入等。

迄今為止我們整個系統的鳥瞰圖。

顯然，系統越深入，元素的使用頻率就越低，但這都是系統發展和使整體語言在產品的各個方面盡可能一致的一部分。

（我們還有另一個圍繞我們的插圖風格進行的項目，但我會將其保存在另一篇文章中，您可以在此處查看更多內容）

我們在整個平台上使用的說明性樣式示例。

第 3 步：實施

我們目前正處於這個階段。 老實說，我們可能永遠不會走出這個階段。 在你接受這樣的挑戰之前，你必須意識到的一件事是它永遠不會結束。 你正在開發一個產品，它不是一個最終會結束的項目。 它將不斷發展和成長。

您所要做的就是看看產品團隊如何進行重組以迎合設計系統團隊，許多人選擇只專注於直接在他們的設計系統上工作的設計師，別無其他。 該系統已成為產品核心的組成部分。 如果創建得當，設計系統會創建焦點、清晰度和信心，進而會在整個產品中創建一致性，並會加快產品開發的周轉速度。 不去愛的種種！

“設計系統不是一個項目。 這是一種為產品服務的產品。” ——內森·柯蒂斯

捆綁系統

創建一個適用於整個產品的設計系統是一回事。 我們還在製定品牌指南並概述我們的設計原則。 （同樣，關於我們的流程的更多文章要關注）。

我們認為，在我們進一步推進之前，在設計的各個方面打下堅實的基礎是關鍵，因為如果沒有適當的腳手架，它將導致問題發生。 當我們開始擴大規模時，制定一套可靠的指導方針和原則將有助於指導我們朝著正確的方向發展。

一旦我們將QUIK提高到我們認為可以消費的水平，我們的計劃是創建一個劇本，其中將包含我們產品核心個性和實體的關鍵特徵。

• 品牌指南——一套指南，將介紹我們的品牌個性，並概述關鍵特徵，如語氣、顏色、徽標限制等。
• QUIK –一個將我們平台上的設計理念和方法統一到一個中心位置的系統。
• 設計原則——這些原則的目的是確保我們始終堅持對 Qstream 和我們的客戶真正重要的事情。 他們將幫助我們做出符合他們目標的決策。

向前走

我們將努力在我們的平台上創建一致性。 我們還有很長的路要走。 從產品團隊的各個角度來看，每個人都充分意識到這是一個巨大的挑戰，但我們也同樣意識到它對產品可擴展性的重要性。