97久久夜色精品国产,亚洲第一成年网,亚洲国产成人精品女人

設計系統搭建全流程：認識設計系統

2023/03/25 推薦： 菘藍C閱讀 2.7w 評論有獎閱讀本文需 11 分鐘

收藏 110

點贊 41

設計系統搭建全流程：認識設計系統

設計系統這個詞，是近些年的一個熱門話題，在初期的討論關注點主要聚焦在是否有必要搭建？能否創造商業價值？畢竟這里面存在巨大的工作量，到現在被大多數公司和團隊所接受，并且把一套完整的設計系統作為品牌宣傳的重點，或是直接把設計系統作為商業變現的一種手段。看起來好像大家都已經接受了設計系統是必要的這一事實，但在實際工作中，筆者接觸到的很多設計系統還是存在著這樣或者那樣的問題：

有的是為了規范而規范，一味的追求大而全，一眼看起來，哇，好多好細啊！但是在使用的時候就犯了難，兩個控件都可以，比如：Switch 和 tab button 都可以表示開關，那么用哪個呢？或者兩個顏色樣式比較相近，用哪個都合適，這時就會發現，使用者因為無法確定使用哪個組件，陷入到無限糾結中，盡管用了設計系統，但是不僅沒有提高效率，反而隱隱有種越來越慢的趨勢。或者因為不同的組件用起來大差不差，那就隨便用，反而造成了不統一的情況出現。

有的是設計系統不具有很好的拓展性，或者說當初在搭建設計系統的時候沒有考慮全面，造成組件具有太多的限制而不能滿足一些業務的需求，組件不適用的情況出現，或是設計師設計被設計系統所束縛的情況出現。那么設計師就會拋棄設計系統，讓設計系統形同虛設，無法發揮作用。

不管是上述哪種問題的出現，都指向了一個事實：設計系統不好用。所以怎么搭建設計系統，并且可以讓設計系統好用又易用，真正達到提高效率的目的。是需要把握一個“度”的。筆者想要通過這個設計系統搭建全流程的專題，和各位探討怎么搭建一個“好”的設計系統。

接下來我們開始進入本專題第一篇的內容：認識設計系統。

方法+實戰！一篇文章幫你搞定設計系統度量

本文將以百度商業團隊 Light 設計系統 PATS 度量體系的建設為例，分享我們如何探索設計系統度量的建構與具體實踐。

閱讀文章 >

一、設計系統提出的背景

當今社會，社會發展越來越快，我們每天不停的在汲取著各種信息，這就要求提供給用戶的產品可以跟上用戶的腳步，能夠對需求快速響應，直達用戶。

對于公司來講，當公司發展到一定的階段：

公司有不同的產品，且都需要長期的開發和迭代；
業務需求變動頻繁，需要設計和研發快速響應；
越來越多的設計師加入公司。

當設計團隊越來越大，大家分工越來越細，想法越來越多，就會發現，為了保證設計統一性，通過簡單的復制粘貼 guide 的方式，已經無法滿足團隊的發展了，經常出現組件不能滿足使用的情況，或者是組件相似但不知道怎么選擇等問題。

并且因為沒有統一的流程，會發現不同的業務對于同一功能交互邏輯的不統一現象，比如：搜索是很多業務都會使用的功能，因為沒有統一定義，有的業務會采用即時搜索模式，有的業務必須點擊搜索以后才可以進行搜索，并且這些問題，前期很難發現，只有到了中后期走查的時候才會發現。只能在后期針對每一個差異點進行統一，全流程重新梳理一遍，費時費力。

那么怎么做才可以避免這種情況的發生呢？答案就是構建設計系統。

二、設計系統是什么

簡單來講，設計系統就是一套行為規范，它包含了：設計理念、邏輯、設計指南、組件、圖標、動效、音效、代碼等多種內容，對于一個團隊來講，這更像是一個團隊共享資源庫，包羅萬象，幫助公司各種產品的構建提供基準。

通過建立設計系統，讓設計模塊化、規模化，繼而進一步強化系統的統一性，同時為設計師在做設計時提供一個很好的指導方向，讓團隊內不同成員的設計在風格上保持一致，提升設計團隊的專業度。同時保證公司產品的統一性。通過產品讓用戶形成對公司的品牌印象，達到宣傳公司的目的。

三、設計系統理論依據

設計系統搭建全流程：認識設計系統

1. 原子設計理論

由于設計系統是一套規則統一，架構嚴謹的規范，所以需要一個理論基礎作為搭建的依據，而這就是我們今天要說的原子設計理論了，在網上有很多的關于原子設計理論的描述，在這里我就不再進行贅述了：

上萬字干貨！設計師必讀的原子設計完整指南

「我們不設計頁面，我們設計構成元素的系統。

閱讀文章 >

這里我簡單概括一下原子設計理論就像化學元素組合一樣：原子構成分子、分子構成組織，組織構成模版、模版構成頁面。換句話說，該理論的重點就是通過最小的元素不停的進行組合，構成一些我們常用的組件、布局，滿足設計師或是開發快速搭建界面的需求。而不需要每次都從最小的元素進行設計，最終的目的是為了提高設計的效率。

四、設計系統的價值

1. 設計規范化

由于公司的發展壯大，團隊人員也會越來越多，那么每個設計師必然無法涉及到所有的業務線，設計師都專注于自己負責的業務模塊，比如，有人負責系統設置，有人負責賬號體系，有人負責商業化業務……這很容易導致不同的業務有不同的設計語言，盡管單個業務看起來沒有什么問題，但是對于一個系統來講，不同的業務之間差異巨大，就顯得很不專業了。

所以通過設計系統的搭建，一方面使用統一的設計語言對每個設計師進行設計約束，通過使用統一的樣式和組件庫，讓每個人的設計變得統一，極大的提升了團隊的專業性。

同時由于搭建了統一的樣式組件庫，設計師和開發可以快速調用需要的組件或是代碼，而不用進行重復設計。對于設計變更來講，只需要進行樣式組件庫的更新，團隊設計師就可以及時的進行同步更新，而不需要每個人都進行設計變更，極大的提升了設計效率。

2. 保障設計統一性，提供好的用戶體驗

因為設計系統建立了樣式組件庫、圖標庫等一系列規范，一致可復用的標準規范讓設計變得更加統一，也更加的容易理解，同時因為規范的建立，不會再出現同一個搜索，兩套不同的邏輯這種情況，增強了設計的可預測性，用戶不用為了不一致的交互邏輯而增加學習成本。也可以讓相關人員更加的專注于為用戶提供更好的用戶體驗。而非視覺樣式的調整。

3. 讓設計得以傳承

設計是需要延續的，對于一個團隊來講，人員變動也是難免的，所以經常會出現業務模塊交接等情況，那么有一套完善的設計系統，可以讓新接手的同學快速的了解我們的設計理念，設計語言，幫助新同學盡快的融入到團隊中。同時也可以減少因為某一個人的離開，而導致的整個團隊工作的無法開展。

4. 提高設計開發效率，快速迭代

通過設計系統的搭建，同時有了設計資源庫和開發資源庫，因為組件的可復用性，而不需要設計人員從頭開始設計界面，開發人員也不需要從頭開始開發界面。設計系統的存在，極大的減少了相關人員的重復工作量。尤其在版本迭代或者是樣式迭代中，設計系統的好處更加的顯而易見。

五、關于設計系統的思考

盡管看起來設計系統有那么多的好處，但是很多團隊在推進時也遇到了不少的阻力。主要集中在以下這幾個方面：

1. 限制太大，讓設計師缺乏創造性

這個需要分為兩方面來講，一方面認為設計系統讓設計師無法發揮創意，因為每個設計師，每個業務都期望去探索一些新的樣式和交互邏輯，那么開發那里就充斥著各種不同的代碼。如果使用了設計系統，設計系統的組件相互關聯，那么對于視覺樣式迭代或者是需求迭代，可以很容易的進行同步，并且保證軟件穩定發版。但是如果每個業務代碼都是不同的，那么這件事將會變的異常艱難，任何小的迭代都需要相關視覺和開發進行修改，由于代碼邏輯的變更，很容易引起一些莫名的 bug，導致快速迭代變得不再可能。對于現在的商業環境來講，得不償失。請記住：設計的最終目的是為了解決問題，而不是藝術創作。所以設計系統可以快速的解決問題。

另一方面，對于某一些特定業務期望有一些特定的布局或者交互邏輯，我們可以進行評估，形成新的設計資產，通過反哺設計系統，生成新的組件模版，或者是優化當前的組件，讓我們的設計系統變的越來越好用，越來越易用。不斷的增強設計系統能力，也有助于形成一套完整的素材庫。

2.設計系統由設計師獨立完成

設計系統不止包含了樣式組件，同時還有動效、音效、代碼等很多內容，這是需要不同團隊緊密協作的，比如：產品、交互、開發、動效設計師……越多的角色參與其中，那么搭建的設計系統就越完善，越好用。比如：button，設計師定義它的樣式和類型：分幾種，各是什么顏色；交互設計師定義button的交互邏輯：是點擊響應還是按壓抬起響應；動效設計師定義button得按壓動效；聲效設計師定義是否需要聲音反饋等，然后開發根據形成的文檔進行代碼化，那么實現出來的button就包括了完整的樣式、邏輯，動效、聲效。那么使用者直接調用就可以了，不需要添加任何邏輯，那么未來迭代只需要底層代碼進行樣式的更新、動效風格的更新、聲效的更新，業務開發不再需要進行任何操作，可以極大的節省迭代時間。

3. 設計系統是一次性的

設計系統應該是動態的，變化的，隨著搭建完成，就需要根據需求或者反饋不斷的進行維護，要知道設計系統的目的是為了讓提高效率，所以設計系統要不時的進行更新，要多與各個業務、不同部門，不同角色進行溝通，或者對市面上的其他產品進行競品分析等，通過不斷的推陳出新，讓設計系統更好的服務于產品。同時也更加容易規模化和品牌化。