打造UI/UX 設計系統(tǒng)的8個注意事項和方法技巧

我們在很多項目中都一直致力于構建獨特的設計系統(tǒng)，在項目過程中一直在不復盤項目中學到的經(jīng)驗和沉淀的數(shù)據(jù)，本文將介紹在打造UI界面設計系統(tǒng)中的8個設計注意事項和方法技巧。

一、識別出可復用的組件
識別產(chǎn)品里不同用戶旅程中的，并可重復使用的組件，同時定義出視覺樣式，比如：顏色、字體、圖標、網(wǎng)格和排版等核心元素，這是邁向設計系統(tǒng)的第一步。
技巧提示：
a.確定整個旅程中使用的主要組件有哪些？
b.分析主要組件的構成，如果要實現(xiàn)原子設計，就開始分解成基本原子。
c.定義使用的主要原子是什么。
d.檢查某些成分是否只是更復雜、更大分子的變體。
e.排除獨特的和旅程特定的案例。
f.為每個組件定義一些基本規(guī)則和模式。

方法是打印出每一個旅程并將其放在布告欄/白板上，回到會議室，召集相關設計師和開發(fā)人員進行添加注釋，質疑不同組件的布局和功能，并定義出基本規(guī)則、核心元素、原子和模版。

二、設計系統(tǒng)中有哪些元素或組件？
這無疑是構建設計系統(tǒng)中最困難的部分，因為并非所有創(chuàng)建的東西都應該包含在設計系統(tǒng)中。
在大多數(shù)情況下，我們使用三法則：
如果一個元素或組件可以在不同的旅程中使用至少 3 次，那么它可以被納入到設計系統(tǒng)庫中。
技巧提示：
a.使用諸如“三法則”或“五法則”之類的設計方法原則，或者更好地制定出符合自己產(chǎn)品特征的設計原則。 

三、定義一種通用的設計語言——命名約定
一旦您同意將組件添加到系統(tǒng)中，你需要和上下游人員進行命名約定，指定一套大家都看得懂的名字，否則會增加很大的溝通成本和相互推諉的風險，這就是為什么團隊擁有共同的設計語言非常重要的原因。
技巧提示：
a.一個優(yōu)秀的UED設計團隊了解組件的本質，一起給它起一個有意義且非常具體的名稱，以避免誤解。

b.永遠不要假設其他人都知道你指的是什么。 

四、任命工具包“負責人”或調解員——溝通是關鍵
在團隊中指定“工具包負責人”。這是正確的！喜歡你的人，對設計系統(tǒng)充滿熱情，可以促進信息流動，鼓勵討論，并確保每個團隊的代表（設計師、開發(fā)人員、業(yè)務分析師、測試等）參加會議。

并不是每個人都對參加設計系統(tǒng)會議感興趣，但要確保不斷地交流或找到一種與人交談的方式，是的，從字面上與參與項目的每個人交談。與其他設計師交談，與在不同平臺上工作的開發(fā)人員交談，與業(yè)務分析師交談，與產(chǎn)品負責人交談，與用戶測試人員交談……并提出一個合作計劃。
技巧提示：
a.提示確保您每周與調解員和團隊的主要成員進行會議，以獲得持續(xù)的反饋。
b.保持會議簡短，清晰簡潔。為您將在會議上討論的內(nèi)容和不打算討論的內(nèi)容制定議程。
c.如果有什么事情引起了問題，不要等到情況變得更糟，盡早開始對話。
d.如果需要，請項目負責人或經(jīng)理將某些會議列為強制性會議。
e.嘗試平衡與會者，確保每次都有不同團隊的代表參與決策。

五、反復定義和審核自己的設計流程
使用您自己的設計系統(tǒng)項目來定義流程并審核人們?nèi)绾问褂盟?。您能做的最好的事情就是嘗試不同的流程并根據(jù)您的需要進行調整。 在讓自己頭疼試圖自己找到答案之前，先與人交談，尋求團隊的支持和反饋。 提出問題，不要害怕這樣做。您是否能夠瀏覽文檔？你能理解特定組件的用途嗎？您有什么想要添加或刪除的內(nèi)容，為什么？
技巧提示：
a.鼓勵同事討論正在進行的過程。
b.發(fā)送用戶調查或進行非正式聊天以了解設計文檔是否有意義。
c.不要害怕變更設計流程。
d.從新人那里獲得反饋，因為他們可以提供新的觀點。
e.保持簡單，不要試圖重造出一套 “Ant 設計”，并不不要。

六、讓你的文檔看起來美觀且一致，起一個名字
由于設計系統(tǒng)是一個活生生的東西，應該得到一個比通常的“工具包”更好的名字。這會給你的設計系統(tǒng)賦予更多的意義，更多的目的，讓其更正式化，甚至擁有了自己的品牌。
技巧提示：
a.提示 為您的設計系統(tǒng)找到一個有意義的名稱并定義一個品牌。
b.使用盡可能多的工具來減少工作量，例如開發(fā)人員和測試人員使用了Zeplin，為產(chǎn)品所有者和業(yè)務分析師使用了inVision ，為設計師使用了Sketch、Photoshop、Figma 和 Principle等。
c.為組件添加跟蹤系統(tǒng)
d.組件庫是您最好的朋友。為設計師創(chuàng)建組件庫。
e.為您的文檔創(chuàng)建一個庫或模板。 在您的文檔中添加鏈接，以便在需要時參考其他重要資源，例如可訪問性指南、材料設計和iOS 人機界面指南。

七、在您的設計系統(tǒng)中嵌入可訪問性指南
使用不同組件的示例在整個文檔中提供可訪問性要求或在需要時添加注釋，從而生成一個內(nèi)部庫供每個人參考。不要等到最后。這將節(jié)省大量時間，并允許設計人員在投入生產(chǎn)之前解決組件問題。
技巧提示：
a.拆分工作。例如，用戶體驗設計師查看的視線順序，用戶界面設計師查看顏色對比，開發(fā)人員查看元素名稱（適用的平臺特定可訪問性標簽）等等。
b.在需要時添加輔助功能說明。
c.為未來的我設計，年齡會給以后的生活帶來什么問題？
d.在您的設計系統(tǒng)中添加一個可訪問性部分，您可以在其中突出顯示使您的產(chǎn)品符合 AA/AAA 標準所需的要求列表。
e.如果您是或擁有業(yè)務中的無障礙總監(jiān)，請確保與團隊的其他成員一起審查旅程和組件。
f.定期進行用戶測試。

八、不斷迭代和改變
一旦您為每個人都遵循預期奠定了基本準則或核心基礎，使用它的人就可以改進現(xiàn)有組件并使用它創(chuàng)建新的靈活組件。您可以讓同步設計系統(tǒng)在相同的基礎上相互平行發(fā)展。沒有完美的方法可以做到這一點，但您不應該停止設計系統(tǒng)的發(fā)展，尤其是在技術發(fā)展迅速且用戶體驗比“萬能”更加個性化的情況下。請記住，設計系統(tǒng)的存在是為了參考、保持一致性、奠定基礎、了解注意事項、改進設計、快速有效地開發(fā)，并最終在內(nèi)部進行創(chuàng)新。
技巧提示：
a.提示確保您的設計系統(tǒng)基礎良好，以便發(fā)展。
b.添加盡可能多的你認為重要的東西作為設計系統(tǒng)的一部分，例如可訪問性原則、研究、工具等。
c.使您的設計系統(tǒng)易于共享，使其成為網(wǎng)站。

寫在最后，好的設計系統(tǒng)可以大幅提升基于業(yè)務條線下數(shù)字化產(chǎn)品的生產(chǎn)和運行工作效率，同時還可以提升產(chǎn)品的品牌價值，不同類型的產(chǎn)品都有屬于自己的也更適合自己的設計系統(tǒng)。