編者按：資深產(chǎn)品設(shè)計(jì)師 Taras Savytskyi 將自己在初創(chuàng)團(tuán)隊(duì)中的設(shè)計(jì)經(jīng)驗(yàn)濃縮成為今天的這篇文章，如果你也是設(shè)計(jì)團(tuán)隊(duì)中唯一或者主要的設(shè)計(jì)負(fù)責(zé)人，需要考慮到設(shè)計(jì)系統(tǒng)的問題，那么這篇文章的6個(gè)總結(jié)，應(yīng)該能夠給你不少幫助：

成為公司當(dāng)中唯一負(fù)責(zé)產(chǎn)品設(shè)計(jì)的設(shè)計(jì)師，其實(shí)并不是一件容易的事情。你可能會(huì)非常忙碌，因?yàn)槟阈枰幚砗芏嗍虑?。你需要考慮產(chǎn)品的設(shè)計(jì)，交付物料，和研發(fā)人員協(xié)作，在溝通會(huì)上做QA，做用戶訪談等等。

此外，你可能還需要保持你的設(shè)計(jì)技能持續(xù)精進(jìn)。比如 Figma 或者 Sketch 更新了新的功能，推出了新的插件，你可能需要持續(xù)關(guān)注。我們通常會(huì)使用 Figma 來作為主要的設(shè)計(jì)和協(xié)同工具，所有的設(shè)計(jì)、探索、頭腦風(fēng)暴都在其中完成。

我加入 Statflo 之后不久，作為公司唯一的設(shè)計(jì)師，我需要設(shè)計(jì)一個(gè)全新的 APP，在這個(gè)過程中我需要設(shè)計(jì)一個(gè)全新的設(shè)計(jì)系統(tǒng)，幫我足夠快速地創(chuàng)建后續(xù)的原型。

1、無需猶豫，直接基于現(xiàn)有的開源設(shè)計(jì)系統(tǒng)

剛開始的時(shí)候，你不需要太多的素材。你可以直接調(diào)用絕大多數(shù)的原子組件，比如按鈕、下拉菜單、表單、字體、配色，等等。默認(rèn)初始狀態(tài)的樣式無關(guān)緊要，因?yàn)楹罄m(xù)點(diǎn)擊幾下就能夠快速調(diào)整樣式。

但是這也意味著，你需要在第三方設(shè)計(jì)系統(tǒng)當(dāng)中，找到重要的、足夠靈活的、合適的組件來套用。你可以從下面幾個(gè)設(shè)計(jì)系統(tǒng)開始著手：

免費(fèi)： Ant Design Open Source, Lexicon DSL

付費(fèi)：Tetrisly , Venus Design System，73px

2、主要關(guān)注基礎(chǔ)組件、顏色和排版

在此之后，你如果要繼續(xù)推進(jìn)你的設(shè)計(jì)系統(tǒng)，你需要首先關(guān)注幾件簡(jiǎn)單的事情：配色、排版和基礎(chǔ)組件。

完成這幾個(gè)部分能夠幫你更快地完成整個(gè)體系的搭建。比如你預(yù)設(shè)了不同狀態(tài)的配色，那么當(dāng)你完成某個(gè)UI組件的默認(rèn)狀態(tài)的設(shè)計(jì)之后，可以快速添加其他狀態(tài)的樣式。

又比如，如果你不確定在輸入字段當(dāng)中使用什么圖標(biāo)，那么你只需要?jiǎng)?chuàng)建一個(gè) 16×16 的正方形，使用灰色填充，作為占位符，等后續(xù)圖標(biāo)素材確定之后，再填充進(jìn)去就好了。

3、總是從一個(gè)組件開始設(shè)計(jì)

當(dāng)你是初創(chuàng)團(tuán)隊(duì)中唯一的設(shè)計(jì)師的時(shí)候，你有很大概率需要自己構(gòu)建一套設(shè)計(jì)系統(tǒng)。如果你想在這件事情上節(jié)省時(shí)間，那么最好的方法，就從你當(dāng)前正在做的這一個(gè) UI 組件開始，將其中所有的元素轉(zhuǎn)化為固定的組件，逐步拓展出設(shè)計(jì)系統(tǒng)。

以這種方式來執(zhí)行，可以節(jié)省大量的時(shí)間，并且這種方式能夠幫你更快明確哪些元素在一開始可能就是重要的。

在理想情況下，你的設(shè)計(jì)流程是繪制小元素，然后逐步組件成為你所需要的組件，這樣的處理機(jī)制讓你無需花費(fèi)時(shí)間來反復(fù)更新組件的設(shè)計(jì)。

4、使用 Figma 當(dāng)中的「Master」插件

不過，以這種方式來創(chuàng)建設(shè)計(jì)系統(tǒng)的時(shí)候，你可能會(huì)碰到一個(gè)問題：你可能會(huì)忙于設(shè)計(jì)，而忘記將創(chuàng)建特定的組件，相反可能會(huì)復(fù)制一堆完全相同的畫板。這個(gè)時(shí)候，手動(dòng)撤銷操作可能是一件極度麻煩和無聊的事情。這個(gè)時(shí)候，你就需要一個(gè)專門解決這種問題，這個(gè)插件名為 Master，創(chuàng)建者是 Gleb Sabirzyanov，它可以幫你將這些重復(fù)的畫板轉(zhuǎn)化成為一個(gè)固定的組件。

但是這還不夠。如果你執(zhí)行的操作足夠多，這些你所復(fù)制的元素可能已經(jīng)應(yīng)用多個(gè)畫板和頁面當(dāng)中，這個(gè)時(shí)候，你需要借助名為 The Similayer 的插件，來幫你搞定相似組件的識(shí)別問題：它可以一鍵識(shí)別出分散在各處相同的元素，然后你可以將他們轉(zhuǎn)化成你所指定的 UI 組件了。

5、利用項(xiàng)目間歇來完善設(shè)計(jì)系統(tǒng)

有時(shí)候項(xiàng)目和項(xiàng)目之間是有間隔時(shí)間的，這個(gè)時(shí)間段就特別適合你去覆盤之前設(shè)計(jì)的組件，將其逐步改進(jìn)融合成為一個(gè)系統(tǒng)。相信我，你在這件事情上所花費(fèi)的時(shí)間，將會(huì)在你下一次創(chuàng)建新的功能和組件或者原型的時(shí)候，得到回報(bào)。

我一直試圖在自己每周的日程表當(dāng)中，騰出幾個(gè)小時(shí)的時(shí)間專門來做這件事情，幫我完成我的設(shè)計(jì)系統(tǒng)的增量更新和迭代。

6、一開始不要糾結(jié)于正確命名

在創(chuàng)建設(shè)計(jì)系統(tǒng)的過程中，尤其是當(dāng)你在不同的項(xiàng)目過程中，各種組件總是沒法正確的命名。根據(jù)我的經(jīng)驗(yàn)，在設(shè)計(jì)的時(shí)候，怎么命名方便怎么來其實(shí)是很合理的，一開始一定不要糾結(jié)，留著在后面的階段再行解決都好，之后單獨(dú)梳理命名、路徑、結(jié)構(gòu)、嵌套等等關(guān)系，比起你一開始做某個(gè)小組件的時(shí)候就糾結(jié)這些事情要更加合理，也更加方便。