2021-11-28 資深UI設計者
編者按：資深產(chǎn)品設計師 Taras Savytskyi 將自己在初創(chuàng)團隊中的設計經(jīng)驗濃縮成為今天的這篇文章，如果你也是設計團隊中唯一或者主要的設計負責人，需要考慮到設計系統(tǒng)的問題，那么這篇文章的6個總結，應該能夠給你不少幫助：
成為公司當中唯一負責產(chǎn)品設計的設計師，其實并不是一件容易的事情。你可能會非常忙碌，因為你需要處理很多事情。你需要考慮產(chǎn)品的設計，交付物料，和研發(fā)人員協(xié)作，在溝通會上做QA，做用戶訪談等等。
此外，你可能還需要保持你的設計技能持續(xù)精進。比如 Figma 或者 Sketch 更新了新的功能，推出了新的插件，你可能需要持續(xù)關注。我們通常會使用 Figma 來作為主要的設計和協(xié)同工具，所有的設計、探索、頭腦風暴都在其中完成。
我加入 Statflo 之后不久，作為公司唯一的設計師，我需要設計一個全新的 APP，在這個過程中我需要設計一個全新的設計系統(tǒng)，幫我足夠快速地創(chuàng)建后續(xù)的原型。
剛開始的時候，你不需要太多的素材。你可以直接調(diào)用絕大多數(shù)的原子組件，比如按鈕、下拉菜單、表單、字體、配色，等等。默認初始狀態(tài)的樣式無關緊要，因為后續(xù)點擊幾下就能夠快速調(diào)整樣式。
但是這也意味著，你需要在第三方設計系統(tǒng)當中，找到重要的、足夠靈活的、合適的組件來套用。你可以從下面幾個設計系統(tǒng)開始著手：
免費： Ant Design Open Source, Lexicon DSL
付費：Tetrisly , Venus Design System，73px
在此之后，你如果要繼續(xù)推進你的設計系統(tǒng)，你需要首先關注幾件簡單的事情：配色、排版和基礎組件。
完成這幾個部分能夠幫你更快地完成整個體系的搭建。比如你預設了不同狀態(tài)的配色，那么當你完成某個UI組件的默認狀態(tài)的設計之后，可以快速添加其他狀態(tài)的樣式。
又比如，如果你不確定在輸入字段當中使用什么圖標，那么你只需要創(chuàng)建一個 16×16 的正方形，使用灰色填充，作為占位符，等后續(xù)圖標素材確定之后，再填充進去就好了。
當你是初創(chuàng)團隊中唯一的設計師的時候，你有很大概率需要自己構建一套設計系統(tǒng)。如果你想在這件事情上節(jié)省時間，那么最好的方法，就從你當前正在做的這一個 UI 組件開始，將其中所有的元素轉(zhuǎn)化為固定的組件，逐步拓展出設計系統(tǒng)。
以這種方式來執(zhí)行，可以節(jié)省大量的時間，并且這種方式能夠幫你更快明確哪些元素在一開始可能就是重要的。
在理想情況下，你的設計流程是繪制小元素，然后逐步組件成為你所需要的組件，這樣的處理機制讓你無需花費時間來反復更新組件的設計。
不過，以這種方式來創(chuàng)建設計系統(tǒng)的時候，你可能會碰到一個問題：你可能會忙于設計，而忘記將創(chuàng)建特定的組件，相反可能會復制一堆完全相同的畫板。這個時候，手動撤銷操作可能是一件極度麻煩和無聊的事情。這個時候，你就需要一個專門解決這種問題，這個插件名為 Master，創(chuàng)建者是 Gleb Sabirzyanov，它可以幫你將這些重復的畫板轉(zhuǎn)化成為一個固定的組件。
但是這還不夠。如果你執(zhí)行的操作足夠多，這些你所復制的元素可能已經(jīng)應用多個畫板和頁面當中，這個時候，你需要借助名為 The Similayer 的插件，來幫你搞定相似組件的識別問題：它可以一鍵識別出分散在各處相同的元素，然后你可以將他們轉(zhuǎn)化成你所指定的 UI 組件了。
有時候項目和項目之間是有間隔時間的，這個時間段就特別適合你去覆盤之前設計的組件，將其逐步改進融合成為一個系統(tǒng)。相信我，你在這件事情上所花費的時間，將會在你下一次創(chuàng)建新的功能和組件或者原型的時候，得到回報。
我一直試圖在自己每周的日程表當中，騰出幾個小時的時間專門來做這件事情，幫我完成我的設計系統(tǒng)的增量更新和迭代。
在創(chuàng)建設計系統(tǒng)的過程中，尤其是當你在不同的項目過程中，各種組件總是沒法正確的命名。根據(jù)我的經(jīng)驗，在設計的時候，怎么命名方便怎么來其實是很合理的，一開始一定不要糾結，留著在后面的階段再行解決都好，之后單獨梳理命名、路徑、結構、嵌套等等關系，比起你一開始做某個小組件的時候就糾結這些事情要更加合理，也更加方便。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務