Adobe XD的美化欄具有将設計視圖美化的功能，它能使界面設計和原型設計更漂亮、更吸引眼球。

美化欄的7個功能包括豎線布局設計、橫線布局設計、重複網格、圖形大小和位置設置、響應式調整大小、文字美化以及外觀美化。

今天，數藝君将為大家詳細講解美化欄7個功能的使用技巧，最後将重點内容整理為案例，教大家實際使用美化欄功能。學懂美化欄的功能後，大家就可以做出更加漂亮的設計圖啦~

美化欄位于XD軟件的右欄，如圖1和圖2所示。

（左：圖1 右：圖2）

豎線布局設計

豎線布局設計指的是可以将文字的内容或圖形置頂、垂直居中或置底。

使用豎線布局設計：單擊圖形，再分别單擊按鈕，即可切換排列的效果，如圖1至圖3所示。

（圖1-圖3）

橫線布局設計

橫線布局設計指的是可以将文字的内容或圖形左對齊、水平居中成右對齊。

使用橫線布局設計：單擊圖形，再分别單擊按鈕，即可切換排列的效果，如圖1至圖3所示。

（圖1-圖3）

重複網格（Repeat Grid）

重複網格指的是可以向下和向右拖出與文字内容或圖形一模一樣的網格。

01 找到重複網格：按鈕“Repeat Grid”的位置如圖所示。

02 使用重複網格：單擊“Repeat Grid”按鈕後，可以向下和向右拖出重複網格，如圖所示。

03 确認重複網格的兩種方法：第一，拖出重複網格後，查看是否自動顯示整個圖形；第二，拖出重複網格後，查看是否僅顯示已經拖出的網格圖形，如圖所示。

04 方法一的操作：單擊“Ungroup Grid”按鈕後，自動顯示完整圖形，如圖所示。

05 方法二的操作：單擊藝術闆“iPhone X/XS-1”旁邊的灰色部分，僅顯示已經拖出的網格圖形，如圖所示。

圖形大小和位置設置

圖形大小指的是寬度W和高度H。

位置設置指的是圖形與藝術闆的X和Y的距離。X指的是離藝術闆左邊的距離，Y指的是離藝術闆頂部的距離，如圖所示。

01 顯示位置：單擊圖形，選中圖片，顯示圖形的位置X為99、Y為71，如圖所示。

02 改變寬度，高度不變：小鎖為打開狀态，将寬度W由“100”改為“200”，高度H為“109”不改變，此時圖形的寬度已變寬，如圖1和圖2所示。

圖1

圖2

03 改變寬度，高度自動變化：小鎖為關閉狀态，将寬度W由“100”改為“200”時，高度H由“109”自動變為“218”，此時圖形的高度H會自動跟随寬度W調整，如圖1和圖2所示。

圖1

圖2

響應式調整大小

響應式調整大小常用于各種屏幕尺寸自動适應，讓内容可以自動适應各種屏幕。

響應式調整大小的功能界面如圖所示。

如圖所示是兩個同樣大小的圖形，在手機屏幕上看到是一樣大的。

如圖所示是把屏幕拉寬後，開啟響應式調整大小功能的圖不發生變化，未開啟響應式調整大小功能的圖随着屏幕變寬而變大。

文字美化（Text）

文字美化包括改變文字的字體、大小、格式、位置、空間等，如圖所示。

01 改變字體：要将字體由“Segoe UI”改為字體“Bradley Hand ITC”，先單擊“Segoe UI”右側的下拉按鈕，彈出包含所有字體的下拉列表框，然後找到字體“Bradley Hand ITC”并單擊，文字的字體就會改變，如圖1和圖2所示。

圖1

圖2

02 對齊：單擊文字“HELLO!Cloudylin”後，再分别單擊按鈕，此時“HELLO!Cloudylin”文字會分别在框内向左對齊、居中對齊、向右對齊，如圖1至圖3所示。

圖1

圖2

圖3

03 效果：單擊文字“HELLO!Cloudylin”後，再分别單擊按鈕，效果如圖1至圖3所示。

圖1

圖2

圖3

04 調整寬度：單擊文字“HELLO!Cloudylin”，将數值從0調整為300之後，文字的字間距變寬了，效果如圖1和圖2所示。

圖1

圖2

05 調高度：單擊文字“HELLO!Cloudylin”，将數值從67調整為200，此時文字行間距變大了，效果如圖1和圖2所示。

圖1

圖2

06 改變段落空間：單擊文字“HELLO!Cloudylin”，将數值從0調整為30，此時段落空間變大了，效果如圖1和圖2所示。

圖1

圖2

外觀美化

外觀美化基礎：

外觀美化就是美化設計的内容，使内容更加生動，如圖所示。

01 調整不透明度：單擊“Opacity”（不透明度）右側的“100%”，顯示數值“100”，輸入數值“50”并按“Enter”鍵，此時文字的不透明度從100%變為50%，如圖1和圖2所示。

圖1

圖2

02 調整字内顔色：單擊“Fill”（填充）按鈕，彈出顔色闆，将填充顔色從藍色調為黃色，文字顔色則從藍色變為了黃色，如圖1和圖2所示。

圖1

圖2

03 調整文字邊框顔色：單擊“Border”（邊框）按鈕，彈出顔色闆，将邊框顔色調為灰色，并勾選左側複選框，文字變為有邊框且邊框為灰色，如圖1圖2所示。

圖1

圖2

04 增加陰影：勾選“Shadow”前面的複選框，文字從沒有陰影變為有陰影。x表示xPosition，即x軸位置，數值越大就越往右。y表示yPosition，即y軸位置，數值越大就越往下。B表示Blur，即模糊度，數值越大就越模糊。調整前和調整後的效果如圖1至圖3所示。

圖1

圖2

圖3

05 背景模糊（Background Blur）：設置量、亮度、不透明度的參數。量（Amount）：控制模糊的程度。亮度（Brightness）：控制模糊蒙版的亮度。不透明度（Opacity）：控制模糊蒙版的不透明度。調整界面和效果如圖1至圖3所示。

（圖1-圖3）

06 目标模糊（Object Blur）：單擊“Object Blur”選項右側的按鈕，在彈出的下拉菜單中選擇“Object Blur”選項，将“Amount”的值從0變為4，從4再變為10，目标圖片會越來越模糊，效果如圖1至圖3所示。

（圖1-圖3）

漸變色技巧：

漸變色包括線性漸變（Linear Gradient）和徑向漸變（Radial Gradient），如圖所示。

01 線性漸變：單擊填充色“Fill ”按鈕，在彈出的顔色闆左上角選擇“Linear Gradient”選項，然後左邊選擇漸變顔色為“紅色”，右邊選擇漸變顔色為“黃色”。實際圖形的漸變色上面為紅色，下面為黃色，如圖所示。

徑向漸變：單擊填充色“Fill ”按鈕，在彈出顔色闆左上角選擇“Radial Gradient”選項，然後左邊選擇漸變顔色為“紅色”，右邊選擇漸變顔色為“黃色”。實際圖形的漸變色中心點為紅色，外面為黃色，如圖所示。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!