設計系統:它們是什麼,你需要一個嗎?

已發表: 2019-11-02

最後更新於 2019 年 11 月 21 日

網絡上的統一具有負面含義。 它通常是無聊、非原創甚至抄襲的代名詞。 但是,當涉及到您的網站一致性時,情況就完全不同了。 可靠性,遠見,關懷和組織之一。 設計每年都扮演著越來越重要的角色。 因此,保持產品的各種元素的設計相互協調可能成為一項艱鉅的任務。 為此,出現了設計系統的概念。 但什麼是設計系統? 我的公司甚至需要一個嗎? 這與風格指南有何不同? 所有這些問題(以及更多)都將在本文中得到解答。 blue pencil pointing up, yellow pencil pointing down

什麼是設計系統?

設計系統只是一種可擴展的方式,可以通過您的產品在各種元素上實施設計。 它應該有明確的文檔、原則和規則來定義要在整個產品中使用的元素的目的、外觀、感覺和使用。

設計系統的目的是幫助您創建最終產品。 考慮到這一點,使用可重用和模塊化的預定義元素應該使您或您的團隊更容易做到這一點。這樣您就可以以不同的方式組合元素來創建具有一致感覺的產品,即使它們可能有不同的用途.


那! 公司為世界各地的代理機構提供迷人而有效的網頁設計服務。 詳細了解我們的白標網頁設計服務以及我們如何幫助您和您的客戶創建或改善他們的網絡形象。 今天就開始吧!


這不是你想急於求成的事情。 您的設計系統應該是為您的企業構建當前和未來項目的指南,因此您需要花時間製作它。

這並不意味著你的設計系統一旦完成就一成不變。 它應該被視為一個你正在進行的項目,看看哪些有效,哪些無效並改進它。 這意味著它不會在幾天內完成。 它需要深入分析您作為一家公司的目標以及您將採取的向客戶交付產品的步驟。

設計系統 VS 風格指南

到目前為止,設計系統似乎只是樣式指南的新名稱。 樣式指南涵蓋了許多相同的元素,例如顏色、樣式和排版。 那麼區別是什麼呢? 與其將它們相互對立,不如將它們視為設計系統的一部分。 雖然它概述了設計中的許多元素,但它缺少製作它們的過程、創建它們的工具以及所有這些元素如何協同工作。

設計系統以風格指南沒有的方式為您的設計提供上下文。 使用您的設計系統,您可以通過遵循概述的規則、流程和工具來創建產品的構建塊。 這與元素遵循的基本屬性集不同。 您可以將您的風格指南視為您的設計系統的副產品,只涵蓋大圖的一小部分。 讓我們考慮這個例子:

girl in colorful ball pit

今天製造的樂高積木仍然與 1958 年製造的樂高積木兼容。它們是可互換部件的最佳示例之一,可用於構建各種令人驚嘆的事物。 樂高公司在過去一年中製作了各種套裝,讓您幾乎可以拼搭出您心中想要的任何東西。 樣式指南可以比作每個包中的積木清單。 它會告訴您包含多少塊磚、它們的顏色、尺寸和零件編號。 設計系統就像構建你的集合應該是什麼的指導指南。 它概述了哪些部件去哪里以及如何將它們拼湊在一起以構建您的創作,除了告訴您如何構建一個東西之外,它向您展示瞭如何使用完全相同的一組磚塊構建幾個不同的結構。 了解它們如何組合在一起以及它們為什麼組合在一起,甚至可以幫助您從相同的部分製作出全新的東西。


That! Company White Label Services


雖然相關,但風格指南和設計系統是兩個不同的東西,在設計方面扮演著非常不同的角色。

為什麼需要設計系統?

既然我們知道了設計系統是什麼以及它們與樣式指南之間的區別,您可能想知道您是否真的需要一個。 畢竟,您可能只建立一個或兩個網站,或者可能只有一個核心產品。 建立一個設計系統絕對是一個很大的時間投入; 你能真正證明所花費的時間是合理的嗎? 如果您想改進以下任何一項,它可能只適合您。

一致性

如果您希望在您的產品或網站上擁有一致的外觀和感覺,您可以從設計系統中受益。 想像一個使用多個框架來構建的站點。 它們可能具有不同的按鈕樣式、標題字體和其他幾個不一致的元素。 感覺非常拼湊,這會使客戶感覺網站質量非常低。 使用設計系統,您的團隊將獲得更多關於元素外觀、感覺和行為的確切方式的指導。

效率

無論您是擁有由設計師和開發人員組成的大型團隊,還是只有您自己,設計系統都可以讓您更有效率。 擁有可以拼湊的預製元素將節省您的時間並幫助您更快地工作。 當您計劃構建一個新項目時,更是如此。 無需再浪費時間查看框架、顏色、排版,這些都在您的設計系統中。

團隊中的團結

football team in huddle

如果您與團隊合作,則設計系統可以作為設計指南,而不是每個人都自己製作。 使用它可以減少關於如何實現設計的問題。 每個人都有一個中心資源可以參考,這將指導他們對產品做出的決定。 這對於需要快速跟上節奏的人尤其有用,例如新員工、遠程工作者和自由職業者。

如果您想增加這些領域中的任何一個,為您的公司創建一個設計系統可以被認為是物有所值。

誰在使用設計系統?

有了這些關於設計系統及其重要性的討論,還有誰在使用它們? 許多大型知名公司使用設計系統,甚至將其提供給公眾查看。 這裡僅僅是少數:

  • 微軟的流利
  • 谷歌的材料設計
  • Shopify 的北極星
  • 火狐的光子

甚至美國政府也有自己的設計體系。 請注意,它不僅僅是一個組件庫,還包括塑造設計系統本身的原則和目標。

您不必成為一家大公司就可以創辦一家。 即使在你很小的時候也有一個,將幫助你在成長過程中實施和維護它。 它是您的組織保持一致、有條理和高效的日常工具。 因此,不要再浪費時間為每個項目重新發明輪子,並認真考慮構建設計系統。

作者:Taj R.