UI界面設計 設計教程 ·

UI設計師進階教程——組件化設計思維

作為一名合格的UI設計師,必須具備組件化設計思維。Sketch 47 后增加了 Llibraries 的功能,使用Sketch Libraries的好處有兩大點:

01 Libraries可供多人及多項目調用,設計師通過Libraries可快速了解規范及制作界面,協同辦公提高工作效率

02 規范設計流程,樹立組件化設計思維。

 

一,“2+1”了解Sketch Libraries必備基礎知識

「 2步實現Libraries 調用 」

Step 01:新建UI Libraries-01 > 創建symbol > 存儲

Step 02:將UI Libraries-01添加到新文件的資源庫中即可調用

是不是非常easy呢???

 

「1張圖熟悉“原子設計理論”」

Brad Frost的《原子設計論》將原子設計拆分為5個不同的階段:原子 > 分子 > 有機體 > 模板 > 界面。

簡單理解就是我們在構建組件庫的時候應從顆粒度最小的元素出發,層層遞進制作我們的界面。

在設計時,我們可以發現顏色、文字、icon這三大元素在界面中使用頻率最高,因此一般我們將其作為組件庫的原子元素。當然因為項目的特殊性,某些情況我們也會將背景的不同圓角樣式等其他控件樣式納入原子元素,設計師可根據實際情況自行調整。

然后由基礎元素構建其他UI組件,比如toast、tooltip、input、btn、form等,最后通過組件樣式組合構建我們的界面UI。

制作過UI設計規范小伙伴應該不難理解這點,沒有接觸的小伙伴可以多看一些相關的設計系統奧。可以參考一些優秀的設計系統來構建自己組件庫。

[Design Systems大匯總]??http://www.2i6p.com/works/guidelines

 

二,原子元素構建

原子元素的構建是Sketch Libraries最基本的點,下面筆者以顏色、文字、icon這三大元素進行實例講解。

 

「 創建顏色 / 文字樣式 」

(顏色樣式創建)

 

根據制作的規范來確定顏色及文字的樣式,將其統一命名并創建外觀樣式即可。

(文字樣式創建)

 

這里的命名我們遵循功能 -文件夾名稱-圖層名稱的規則。通過“/”來進行分類,sketch會將其作為組的分隔符號。

例:color/grey/name

 

在設計過程中,先確認界面主要用色,然后調整顏色的變量形成色板組成顏色體系。最后將顏色統一創建樣式便可實現快速調用。

(GitHub Primer /Color system)

 

「 創建icon 」

(創建icon的symbol)

 

將畫好的icon添加顏色,這里的顏色一定是需要調用我們前面創建的顏色樣式,后期調用icon時才可以實現顏色替換。

(調用并替換icon樣式)

 

當我們在繪制icon時只需要創建一個基礎樣式的symbol,不需要把不同顏色的icon都添加為symbol。我們后期在繪制界面時可根據需求替換icon的顏色,這樣做可以減少文件內存同時方便我們查找symbols。

 

三,組合樣式的構建

相信每個小伙伴都不離開微信,聊天占據了作為宅女的我50%的休閑時間 。

那么了解完基礎樣式的構建,下面我們將以聊天界面為例,使用Sketch插件Paddy插件及Sketch中的Resizing功能設計組合樣式。

「 對話彈出樣式組件設計 」

(對話彈出樣式組件設計)

 

對話彈出樣式由背景+文字構成,我們確定好制作的樣式,選中兩個圖層利用Paddy插件設置參數即可。

該方式同時適用于tooltips、tag、tab等組件的樣式設計,這會使你操作更加便捷奧。

(Ant Design / Tag)

 

「 音頻彈出樣式設計」

 

(走心的微信聊天界面截圖)

 

聊天時發送音頻的長度會根據錄音長短而變化。如果當我們做聊天時不想每次都手動調整間距,該如何操作呢?

(對話界面音頻彈出樣式組件設計)

 

這里的非常簡單,只需要使用Sketch中的Resizing功能即可:

因為Resizing主要針對組內圖層操作,所以建議在制作symbol時,選中畫板并勾選縮放時調整內容大小,這樣可以減少畫板的打組操作。

在制作時候,因為某些情況不能夠完全滿足效果,可以在實際操作中,根據情況調節。比如在設計音頻彈出框樣式時,我在左側時間下添加了透明的圖層以達到橫向拉動不變形的效果。

 

「 調用組件制作界面 」

(界面調用組件示例)

 

制作好一些組合的symbols,我們就可以通過組件的調用快速的繪制了聊天的界面。通過上述方式,我們還可以根據項目需求制作更復雜的組件樣式,比如一些重復出現的列表等。

 

(界面調用組件示例)

 

四,敲黑板,制作時請記住以下2大點

 

「 有源可溯 」

大家可以看到示范demo中,每一個元素都是源自我們的UI Libraries,同時利用Resizing進行了樣式自適應調整。所以我們要做到設計中的有源可溯,這里的源就是我們的Libraries中的組件及樣式。這樣做的好處是能夠有效的規范我們的設計,同時在有需要調整的時候能夠快速調整,提高工作效率。

 

「 靈活性 」

靈活性是什么呢?

大家可能會想,當我們確定了UI Libraries,就不能調整了嗎?

我們設計的過程中,應該先出完所有的組件樣式才開始設計嗎?

NO,這里我們應該學會彈性設計。

雖然在構建libraries的時候,我們需要遵循邏輯和理性層層遞進構建我們的組件庫內容。但是在設計的過程中,我們更加需要彈性的設計,根據實際項目情況調整Llibraries。一般來說可以先出一些主界面的樣式,確定我們的風格及相關規范,然后再在邊制作的時候慢慢完善我們的UI Libraries。要不然脫離項目脫離實際的創建Llibraries并沒有意義。

 

原創: 罐頭九九 (Panda Plus)