在創(chuàng)建設(shè)計系統(tǒng)前需要知道的事情
發(fā)布時間:2021-12-16 08:52 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2045

如果你也是設(shè)計團隊中唯一或者主要的設(shè)計負責(zé)人,需要考慮到設(shè)計系統(tǒng)的問題,那么這篇文章的6個總結(jié),應(yīng)該能夠給你不少幫助:

創(chuàng)建設(shè)計系統(tǒng)前,6 件必須知道的事情

成為公司當(dāng)中唯一負責(zé)產(chǎn)品設(shè)計的設(shè)計師,其實并不是一件容易的事情。你可能會非常忙碌,因為你需要處理很多事情。你需要考慮產(chǎn)品的設(shè)計,交付物料,和研發(fā)人員協(xié)作,在溝通會上做QA,做用戶訪談等等。

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

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


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


創(chuàng)建設(shè)計系統(tǒng)前,6 件必須知道的事情

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


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


創(chuàng)建設(shè)計系統(tǒng)前,6 件必須知道的事情

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

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

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


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


創(chuàng)建設(shè)計系統(tǒng)前,6 件必須知道的事情

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

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

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


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


創(chuàng)建設(shè)計系統(tǒng)前,6 件必須知道的事情

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

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

創(chuàng)建設(shè)計系統(tǒng)前,6 件必須知道的事情


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


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

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

創(chuàng)建設(shè)計系統(tǒng)前,6 件必須知道的事情


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


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

零基礎(chǔ)教你做UI
我要自學(xué)網(wǎng)商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC