創建設計系統前,6 件必須知道的事情
編者按:資深產品設計師 Taras Savytskyi 將自己在初創團隊中的設計經驗濃縮成為今天的這篇文章,如果你也是設計團隊中唯一或者主要的設計負責人,需要考慮到設計系統的問題,那麼這篇文章的6個總結,應該能夠給你不少幫助:
成為公司當中唯一負責產品設計的設計師,其實並不是一件容易的事情。你可能會非常忙碌,因為你需要處理很多事情。你需要考慮產品的設計,交付物料,和研發人員協作,在溝通會上做QA,做用户訪談等等。
此外,你可能還需要保持你的設計技能持續精進。比如 Figma 或者 Sketch 更新了新的功能,推出了新的插件,你可能需要持續關注。我們通常會使用 Figma 來作為主要的設計和協同工具,所有的設計、探索、頭腦風暴都在其中完成。
我加入 Statflo 之後不久,作為公司唯一的設計師,我需要設計一個全新的 APP,在這個過程中我需要設計一個全新的設計系統,幫我足夠快速地創建後續的原型。
1、無需猶豫,直接基於現有的開源設計系統
剛開始的時候,你不需要太多的素材。你可以直接調用絕大多數的原子組件,比如按鈕、下拉菜單、表單、字體、配色,等等。默認初始狀態的樣式無關緊要,因為後續點擊幾下就能夠快速調整樣式。
但是這也意味着,你需要在第三方設計系統當中,找到重要的、足夠靈活的、合適的組件來套用。你可以從下面幾個設計系統開始着手:
免費: Ant Design Open Source, Lexicon DSL
付費:Tetrisly ,Venus Design System, 73px
2、主要關注基礎組件、顏色和排版
在此之後,你如果要繼續推進你的設計系統,你需要首先關注幾件簡單的事情:配色、排版和基礎組件。
完成這幾個部分能夠幫你更快地完成整個體系的搭建。比如你預設了不同狀態的配色,那麼當你完成某個UI組件的默認狀態的設計之後,可以快速添加其他狀態的樣式。
又比如,如果你不確定在輸入字段當中使用什麼圖標,那麼你只需要創建一個 16×16 的正方形,使用灰色填充,作為佔位符,等後續圖標素材確定之後,再填充進去就好了。
3、總是從一個組件開始設計
當你是初創團隊中唯一的設計師的時候,你有很大概率需要自己構建一套設計系統。如果你想在這件事情上節省時間,那麼最好的方法,就從你當前正在做的這一個 UI 組件開始,將其中所有的元素轉化為固定的組件,逐步拓展出設計系統。
以這種方式來執行,可以節省大量的時間,並且這種方式能夠幫你更快明確哪些元素在一開始可能就是重要的。
在理想情況下,你的設計流程是繪製小元素,然後逐步組件成為你所需要的組件,這樣的處理機制讓你無需花費時間來反覆更新組件的設計。
4、使用 Figma 當中的「Master」插件
不過,以這種方式來創建設計系統的時候,你可能會碰到一個問題:你可能會忙於設計,而忘記將創建特定的組件,相反可能會複製一堆完全相同的畫板。這個時候,手動撤銷操作可能是一件極度麻煩和無聊的事情。這個時候,你就需要一個專門解決這種問題,這個插件名為Master,創建者是 Gleb Sabirzyanov,它可以幫你將這些重複的畫板轉化成為一個固定的組件。
但是這還不夠。如果你執行的操作足夠多,這些你所複製的元素可能已經應用多個畫板和頁面當中,這個時候,你需要藉助名為The Similayer 的插件,來幫你搞定相似組件的識別問題:它可以一鍵識別出分散在各處相同的元素,然後你可以將他們轉化成你所指定的 UI 組件了。
5、利用項目間歇來完善設計系統
有時候項目和項目之間是有間隔時間的,這個時間段就特別適合你去覆盤之前設計的組件,將其逐步改進融合成為一個系統。相信我,你在這件事情上所花費的時間,將會在你下一次創建新的功能和組件或者原型的時候,得到回報。
我一直試圖在自己每週的日程表當中,騰出幾個小時的時間專門來做這件事情,幫我完成我的設計系統的增量更新和迭代。
6、一開始不要糾結於正確命名
在創建設計系統的過程中,尤其是當你在不同的項目過程中,各種組件總是沒法正確的命名。根據我的經驗,在設計的時候,怎麼命名方便怎麼來其實是很合理的,一開始一定不要糾結,留着在後面的階段再行解決都好,之後單獨梳理命名、路徑、結構、嵌套等等關係,比起你一開始做某個小組件的時候就糾結這些事情要更加合理,也更加方便。
在 Figma 當中有不少不錯的重命名插件:Rename It, Ultra Renamer 2 ,Regulator 以及 out-of-the-box functionality 。
- B端設計指南:從 4 個方面幫你掌握「審批」的知識點
- 遊戲UI有哪些值得學習的設計方法?來看騰訊大咖的演講實錄!
- 如何提高設計轉化?先學會經典的「福格模型」
- 超全合集!騰訊、字節、阿里多套大廠資源,十幾套小程序 App 模板!
- 設計系統指南(一):帶你瞭解設計系統的發展史
- Material Design 最新改版,這4個方面變化好大!
- 2022 年,「粘土擬物化」將會引領新一輪的 UI 設計趨勢
- 這10個常用的C4D技巧,幫我提升了10倍設計效率(附教程)
- 如何通過盲盒設計提高轉化率?我總結了實戰的 7 個步驟
- 這10個效率逆天的 Figma 插件,用完回不去了!
- 如何區別B端與C端的產品設計差異?我總結了26條對比!
- 從 6 個方面,深入分析淘寶智能直播間的產品設計
- 想讓音樂和人聲分離?試試免費在線神器「SongDonkey」
- 從 4 個方面,總結了這篇寫給新人的桌面研究方法
- 想讓作品更高端?先了解「國際主義平面風格」發展史
- 想轉換文件格式?收好這個免費在線神器「cdkm」
- 想更快上手Figma?收下 9 個提高工作效率的小技巧!
- 想提高網站排名?試試這個在線分析神器「WebPageTest」
- 零基礎 UI 入門七:教你快速上手APP適配
- 如何做好遊戲的新手引導設計?試試這個「認知負荷」理論!