來源：[Bilibili] Figma UI繪制

練習(xí)時(shí)長：新手約2個(gè)半小時(shí)

PS：B站專欄不支持SVG圖片，本來可以把SVG上傳顯示的。

涉及內(nèi)容：

• 基本內(nèi)容：

• 手機(jī)UI框架、形狀（圓角、組合、合并、減去頂層、對齊）、圖層、文字（大小、字體、行間距、下劃線）

• 顏色、漸變

• 視覺內(nèi)容：厚度、層疊、陰影（層次）、圓柱體、配色方案、高光

01 繪制結(jié)構(gòu)

1. 右邊詳情欄，找Prototype->Device可以打開手機(jī)界面預(yù)設(shè)

2. 頂部操作欄，找形狀和文字，拖拽進(jìn)行繪制

3. 左邊Layout，可以查看界面元素。界面內(nèi)使用CTRL+G可以群組，方便操作?？梢酝ㄟ^左邊的元素詳情選中某群組內(nèi)元素，或者雙擊點(diǎn)入群組元素。

4. 選中不同元素，右邊Design詳情欄會(huì)不同。通過選中Rectangle 矩形，在右邊的Group內(nèi)調(diào)整圓角參數(shù)。矩形夠大時(shí)也可以鼠標(biāo)拖動(dòng)矩形內(nèi)的圓角錨點(diǎn)。

5. 選中形狀元素，頂層操作欄會(huì)出現(xiàn)形狀按鈕，里面可以對多個(gè)形狀進(jìn)行邏輯處理（合并、減去頂層等）

6. 在右邊Design欄給元素上不同的顏色。

7. 添加文字。在右邊Design欄的Text中可以調(diào)節(jié)字號、字形（粗、細(xì)），Text欄右下腳有個(gè)...的按鈕，點(diǎn)擊后可以給字體加首字母大寫、下劃線等功能

02 調(diào)整色彩

1. 色彩調(diào)整也在Design詳情欄中

2. 調(diào)整Group色彩和形狀色彩是不同的?？梢宰孕畜w會(huì)下。

3. 在Design->Fill中的右上角+可以添加圖層，一般用這個(gè)添加高光層和陰影層。

4. 單擊色彩彈出的RGB顏色選框界面，在左上角可以選擇上色類型，漸變也在這里。

03 視覺總結(jié)

1. 高光和陰影用來立體化元素。

2. 深色顏色用來表示陰影，也稱之為后退色。相反，淺色系用來表示高光，也稱之為前進(jìn)色。

3. 顏色前進(jìn)后退是相對的。比如圖中的兩個(gè)橙色部分，圓部分是用陰影高光打出球形；而另一部分是通過色相向冷移動(dòng)實(shí)現(xiàn)的。

4. 配色整體中等偏下，屬于練習(xí)色彩的水平。沒有心得。

04 問題提出

• 如何在繪制時(shí)考慮網(wǎng)格系統(tǒng)？

• 如何在繪制時(shí)添加安全區(qū)？