了解設計系統和模式

雖然它看起來像是一種處理數字工作流程的新方法，但設計系統的概念對創意產業來說並不是“新”的。 任何設計系統的核心都是一種設計模式語言，可以解決設計師可能面臨的常見問題。

模式語言的想法起源於 40 多年前的建築和城市設計，幾乎可以應用於任何設計學科。

像 Material Design 這樣的設計系統是一個流行的話題，但幾十年來，系統化的設計方法一直是雜誌出版商不可或缺的一部分。 在翻閱任何主要雜誌的頁面時，很容易看到每個部分都被獨特地定義為具有通用佈局、字體、顏色等的模板。

用於頁面部分的設計模式允許文本和圖像以一種補充出版物的創造性願景的方式一致且有效地排列。

在查看競爭對手的雜誌時，很容易看出其中一本的設計語言與另一本相比如何。

如果他們還沒有，來自眾多行業的設計師將很快將設計語言和模板整合到他們的工作流程中。 對於數字產品設計師來說，這個話題正在發展，許多人第一次從復雜系統中的模式庫中學習設計（甚至幫助定義它們）。

將軟件設計模式與前端代碼庫對齊時會增加複雜性，這會使學習設計語言感到不知所措。

設計語言是整體的

與任何語言一樣，設計語言是錯綜複雜的，並且包含最初可能看起來令人困惑的細微差別。 這就是為什麼將設計語言視為“由許多可能相互交互的組件組成”的複雜系統會有所幫助。

要理解一個複雜的系統，從整體上考慮設計語言很重要：

• 從鳥瞰設計如何影響品牌或業務開始。
• 然後，與跨職能團隊和其他設計師一起考慮設計的作用。
• 最後，考慮設計在特定時刻如何影響產品和用戶。

這種整體視角強調了對設計工作流程的系統化思考方式，它允許在解決特定問題時輕鬆應用設計語言。

在實踐中，設計語言是一種資源，用於幫助減少冗餘並提高設計師處理常見設計問題的方式的連續性。 例如，產品設計師面臨的一個常見問題是， “我需要發出號召性用語，讓用戶點擊。”

這是以前已經解決的問題，因此設計語言不會重新發明輪子（或按鈕），而是定義一個可重複使用的按鈕“設計模式”，其中包含預設屬性，例如顏色和形狀，以及最佳實踐指南。

數字產品設計語言通常是一種跨職能資源，旨在提高團隊的工作流程效率和協作。

在某些情況下，該語言會擴展到一個實時模式庫，該庫直接連接到前端代碼庫和模式的度量分析。 這種具有各種依賴關係的複雜系統使得解決問題的整體方法非常必要。

學習設計語言最棒的地方在於，團隊成員通常對用於定義產品的界面和交互充滿熱情。 學習一門新語言通常是一項挑戰，但它也可以是一種凝聚團隊的身臨其境的體驗！

“設計”系統思維的常見問題

流利的設計語言將通過佈道來確保系統的質量——這可能包括：

• 培訓新設計師；
• 指導初級員工和管理承包商； 要么
• 直接與工程師合作，在發布前完善產品前端。

通過這些協作努力，設計人員將能夠確保系統的指導方針能夠根據需要得到維護或改進。

無論職責是什麼，關於設計系統的一些常見問題都認為設計師可能要對此負責：

在設計系統中進行設計時應該考慮什麼？

根據設計系統的複雜性，重要的是從對要解決的問題採取綜合方法開始。 考慮之前的按鈕示例。

如果顏色預設為# 1f9efc並且設計者在沒有先諮詢使用相同圖案庫的其他設計者的情況下將其設置為 #1b3e9b，這可能會導致系統錯誤。

在設計系統中工作時，請考慮所解決的問題將如何影響整個產品開發週期。 在許多情況下，不會也不應該有太大影響，因為模式庫已經過驗證。

如果要解決的問題對設計系統來說是新問題，則可能有機會發展模式庫並幫助定義新的設計模式。

當系統不斷發展時，它對團隊的工作流程來說是新的。 這裡需要靈活性，因為設計模式會隨著時間的推移而迭代。 然而，雖然更改按鈕的顏色很容易，但必須始終考慮更大的系統複雜性。

為此，定義用於組織設計系統和模式庫的分類是很有幫助的。 所使用的術語應該易於跨職能理解。

單擊以查看全尺寸圖像。

通過將設計工件分組到普遍理解的主題中，模式庫允許系統跨團隊工作流進行操作，並以設計模式被談論的方式進行交流。

我如何知道何時需要在設計系統中打破模式或創建新模式？

是否需要打破或創建新的設計模式通常取決於系統的成熟度。 當設計系統不斷發展時，模式經常發生變化。 隨著系統的建立，應該有一個變更請求流程來幫助確保連續性和質量。

系統的複雜性也是需要考慮的重要因素。 如果更改模式會影響其他設計人員和團隊，則該過程可能需要更長的時間來實施，並且通常需要更深層次的努力或資源（例如，更新設計語言指南、模式庫或前端代碼庫）。

通常，模式庫並不意味著僵化。 把它想像成一個可以解決問題和完成任務的工具箱。 如果所有在模式庫範圍內的設計嘗試都沒有實現項目目標，直覺可能會導致尋找新工具——或者可能會改變現有模式。

看看下面的圖表。 一般的經驗法則是，作為基本品牌構建塊的身份和元素很少改變，因為它們有助於定義品牌和設計工件。

大多數大型組織都有針對品牌相關元素的單獨樣式指南，尤其是徽標、顏色和字體，它們不會經常更改。 對於按鈕等元素，這可能會或可能不會根據設計語言的演變進行迭代，但由於它們與產品的各個方面都有聯繫，因此它們的更改頻率也較低。

設計模式更改或新模式通常出現在組件和交互級別，因為它們定義了用戶流程和功能集。 在產品路線圖中定義新的用戶流程是很常見的，尤其是在推出功能時。

新的設計模式將具有類似於庫中已定義的模式的屬性（例如字體和顏色），但可能需要除設計語言之外的界面更新或交互狀態。

與設計師合作的產品經理或產品負責人將為符合業務目標的新功能提供要求。 在決定打破或創建新的設計模式時，請記住複雜系統的理論，並確保解決方案是一個共同的決定。

在考慮如何打破或更改設計模式時，需要考慮以下幾個步驟：

1. 確保質量控制和連續性

   請記住，質量是一個共同的產品目標。 每個人都有責任確保設計系統正常工作。

   始終採用整體方法，並考慮打破模式或創建新模式的潛在影響。

   問你自己：

   • 打破模式是解決我的問題的唯一方法嗎？
   • 如果我打破這種模式，其他團隊會受到怎樣的影響？
   • 如果我打破這種模式，模式庫會發生什麼？

2. 與合作者溝通

   與設計師和跨職能團隊成員交談，看看其他人是否有同樣的限制。 了解有關平台要求的所有信息，以及建議的模式如何在整個產品系列中發揮作用。

   問你自己：

   • 還有誰在這個產品或平台上工作過？
   • 我正在設計的平台的最佳實踐是什麼？
   • 我可以與誰交談以幫助我做出決定和提出建議？

3. 了解前端功能

   了解前端實現的可能性。 如果更改只是對 HTML/CSS/JavaScript 屬性的更新，通常不需要打破模式或創建全新的東西。

   相反，它可能是對設計語言指南的簡單更新。 作為設計師，與前端密切合作並可能找到每週或每天協作的方法非常重要。

   問你自己：

   • 前端團隊是否參與了這次設計更新？
   • 我正在考慮的更改是前端更新嗎？
   • 最佳實踐指南中是否缺少某些內容？

4. 驗證決定

   如果確定需要新模式，則應與合作者和最終用戶一起驗證該決定並與業務目標保持一致。

   如果前端組件與指標相關聯，則快速 A/B 測試將有助於驗證。 如果沒有，進行可用性測試會很有效。

   問你自己：

   • 我們的團隊是否有驗證新設計模式的變更請求流程？
   • 我需要做什麼來驗證我的決定？
   • 這個決定是創建一個新的用戶流，還是一個附加功能？

同樣的工作，不同的心態

在系統內進行設計時，產品設計師採用決策所需的大局思維至關重要。 複雜系統和系統思維的原理將幫助設計師在他們的職業生涯中成長。 從模式庫構建的過程也是如此。

這些方法對於開始一種新的設計語言或為現有的設計語言做出貢獻很有用，因為一旦思維定勢到位，系統化的方法就會變得“系統化”。

知道其他行業和設計學科多年來一直使用類似的方法來簡化工作流程，這為產品設計師提供了最佳實踐的絕佳參考點。

歸根結底，在系統內進行設計不會完全改變工作的完成方式。 當然，將會有一些新工具用於連接和管理複雜性，但最終，這是向整體思維方式的轉變，這將真正有助於改善工作流程。

• • •

進一步閱讀 Toptal 設計博客：

• 如何創建草圖樣式指南、庫和 UI 工具包
• 設計問題陳述——它們是什麼以及如何構建它們
• 發揮你的靈感——情緒板指南
• 協同設計——成功的企業產品設計指南
• 設計未來：等待我們的工具和產品