首頁(yè)技術(shù)文章正文

26個(gè)Adobe XD快速提示和技巧

更新時(shí)間:2021-07-28 來(lái)源:黑馬程序員 瀏覽量:

Adobe XD使用技巧和教程01

下面讓我向您展示 Adobe XD 的一些快速提示和技巧。我們將從頭到尾了解26 個(gè)Adobe XD 功能、提示和技巧。

A 代表畫(huà)板

一個(gè)畫(huà)板表示其中一個(gè)屏幕的設(shè)計(jì)將在Adobe XD創(chuàng)建的區(qū)域。默認(rèn)情況下,您的起始畫(huà)板將為白色,并且您可以在一個(gè)文檔中包含多個(gè)畫(huà)板。

從工具欄中選擇畫(huà)板工具或按A熱鍵將在右側(cè)邊欄中打開(kāi)一個(gè)包含最常見(jiàn)的移動(dòng)設(shè)備、平板電腦、桌面設(shè)備和可穿戴設(shè)備屏幕尺寸的列表。您可以選擇預(yù)設(shè)畫(huà)板之一并將畫(huà)板添加到您的設(shè)計(jì)中,或者您可以定義自己的自定義尺寸畫(huà)板。

單擊Arboard的名稱以將其選中,使用邊界框?qū)ζ溥M(jìn)行縮放或雙擊名稱以對(duì)其進(jìn)行重命名。

Adobe XD使用技巧和教程02

B 代表邊界

甲邊界(行程)可以施加到Adobe XD文檔內(nèi)的任何類型的對(duì)象。

應(yīng)用后,您可以更改其顏色、調(diào)整樣式、設(shè)置對(duì)齊方式及其粗細(xì),或者您可以選擇封蓋和連接邊框設(shè)置之一。使用吸管工具,您可以快速?gòu)脑O(shè)計(jì)中獲取顏色并將其用于Border。

Adobe XD使用技巧和教程03

C 代表組件

組件是設(shè)計(jì)元素,可以在 Adobe XD 文檔內(nèi)的畫(huà)板上輕松重復(fù)使用。

您保存為組件的設(shè)計(jì)元素將成為主組件,并由左上角的綠色實(shí)心菱形指示。您可以添加一個(gè)組件的多個(gè)實(shí)例,當(dāng)您編輯主組件時(shí),其余的實(shí)例會(huì)同時(shí)修改。

您的所有組件都存儲(chǔ)在“庫(kù)”面板中,可以使用左下角的圖標(biāo)或按Shift + Command + Y鍵盤(pán)快捷鍵輕松打開(kāi)或關(guān)閉該面板。

除了顏色和字符樣式外,Adobe XD 組件也是任何 Adobe XD 設(shè)計(jì)系統(tǒng)的重要組成部分。

Adobe XD使用技巧和教程05

D 代表桌面預(yù)覽

單擊右上角的播放按鈕打開(kāi)桌面預(yù)覽窗口,用于預(yù)覽和與您的設(shè)計(jì)交互。

注意:您只能在設(shè)計(jì)原型后與您的設(shè)計(jì)進(jìn)行交互。當(dāng)您看到字母P 時(shí),您將了解有關(guān) Adobe XD 中原型設(shè)計(jì)的更多信息。

Adobe XD使用技巧和教程05

E 代表橢圓工具

從工具欄中獲取橢圓工具或使用E熱鍵,然后單擊并拖動(dòng)以在 Adobe XD 中創(chuàng)建新橢圓。

要?jiǎng)?chuàng)建一個(gè)完美的圓形,請(qǐng)?jiān)趩螕艉屯蟿?dòng)時(shí)按住 Shift鍵。

Adobe XD使用技巧和教程06

F是填充

一個(gè)填充設(shè)置在Adobe XD設(shè)計(jì)元素的顏色。

單擊屬性檢查器中的填充色輪將打開(kāi)顏色選擇器窗口。使用頂部的下拉菜單,您可以選擇三種填充類型之一:純色、線性漸變或徑向漸變??梢允褂脙蓚€(gè)端點(diǎn)直接在畫(huà)板上調(diào)整 Adobe XD 漸變的方向,并且可以從顏色選擇器窗口調(diào)整 Adobe XD 漸變的顏色。

使用吸管工具,您可以快速?gòu)哪脑O(shè)計(jì)中獲取一種顏色并將其用于Fill。

Adobe XD使用技巧和教程07

G 代表網(wǎng)格

每當(dāng)您選擇一個(gè)畫(huà)板時(shí),您都可以在屬性檢查器中選擇啟用網(wǎng)格。網(wǎng)格可用于定義設(shè)計(jì)的主要結(jié)構(gòu),并測(cè)量、對(duì)齊或輕松創(chuàng)建像素完美的對(duì)象。

使用下拉菜單,您可以選擇Layout Grid或Square Grid。根據(jù)您選擇的網(wǎng)格類型,您將獲得可用于調(diào)整網(wǎng)格的設(shè)置列表。

單擊“設(shè)為默認(rèn)值”按鈕將當(dāng)前網(wǎng)格設(shè)置設(shè)為默認(rèn)值,或單擊“使用默認(rèn)值”按鈕將當(dāng)前網(wǎng)格設(shè)置替換為默認(rèn)值。

一個(gè)很好的網(wǎng)格可以是 Adobe XD 線框的完美開(kāi)始。

Adobe XD使用技巧和教程08

H 用于水平滾動(dòng)

使用水平滾動(dòng),您可以將設(shè)計(jì)中的區(qū)域設(shè)置為獨(dú)立于其余內(nèi)容滾動(dòng)。要在 Adobe XD 中創(chuàng)建此類動(dòng)畫(huà),請(qǐng)選擇要成為滾動(dòng)區(qū)域一部分的元素,轉(zhuǎn)到屬性檢查器,您將找到三個(gè)滾動(dòng)選項(xiàng):水平滾動(dòng)、垂直滾動(dòng)或水平和垂直滾動(dòng)。

選擇所需的滾動(dòng)選項(xiàng)后,您可以使用藍(lán)色手柄直接在畫(huà)板上調(diào)整該滾動(dòng)區(qū)域的大小。

Adobe XD使用技巧和教程09

J 代表連接

連接會(huì)影響邊框的角點(diǎn)。根據(jù)您從屬性檢查器中選擇的連接類型,您可以使角看起來(lái)銳利 ( Miter Join )、圓形 ( Round Join ) 或方形 ( Bevel Join )。

Adobe XD使用技巧和教程10

K 代表 Command + K

使用此 Adobe XD 快捷方式,您可以將所選元素保存為 Adobe XD 組件。

第一個(gè)實(shí)例將是您的Main Component,這意味著其余實(shí)例將根據(jù)此Main Component調(diào)整它們的外觀。

Adobe XD使用技巧和教程11

L 代表圖層

圖層是一個(gè)基本組件,因?yàn)槟?Adobe XD 中創(chuàng)建的任何對(duì)象都是一個(gè)圖層。您的圖層相互堆疊,并且畫(huà)板上的可見(jiàn)性由它們?cè)凇皥D層”面板中的位置決定。

在圖層面板可按打開(kāi)或使用從左下角圖層面板圖標(biāo)關(guān)閉命令+ Y的鍵盤(pán)快捷鍵。

Adobe XD使用技巧和教程12

M 是掩蔽

遮罩使您可以在 Adobe XD 中隱藏部分設(shè)計(jì)元素。

要在 Adobe XD 中進(jìn)行遮罩,請(qǐng)選擇您的圖層以及您希望用作遮罩的圖層,右鍵單擊您的選擇并轉(zhuǎn)到使用形狀遮罩?;蛘?,您可以使用Shift + Command + M鍵盤(pán)快捷鍵。這將遮罩您的圖層并在“圖層”面板內(nèi)創(chuàng)建一個(gè)遮罩組。

要編輯蒙版組,請(qǐng)雙擊它,這將允許您調(diào)整蒙版圖層或蒙版。要在 Adobe XD 中禁用蒙版,請(qǐng)右鍵單擊它并轉(zhuǎn)到取消組合蒙版或按Shift + Command + G。

Adobe XD使用技巧和教程13

N 代表 Command + N

使用此 Adobe XD 快捷方式打開(kāi)Adobe XD 歡迎屏幕,您可以在其中創(chuàng)建新文檔、打開(kāi)您最近的設(shè)計(jì)之一、了解有關(guān) Adobe XD 的新事物或?yàn)g覽您的共享文檔。

Adobe XD使用技巧和教程14

O 代表不透明度

不透明度讓您可以在 Adobe XD 中調(diào)整任何圖層的透明度。100% 是默認(rèn)值,它使您的圖層完全可見(jiàn),而在 0% 時(shí),您的圖層完全不可見(jiàn)。

Adobe XD使用技巧和教程15

P代表原型

Adobe XD Prototype可讓用戶可視化體驗(yàn)?zāi)膽?yīng)用程序或網(wǎng)站。

要構(gòu)建自己的原型,首先需要切換到原型模式。單擊左上角的原型按鈕,然后您將能夠連接項(xiàng)目中的畫(huà)板,選擇適合您的設(shè)計(jì)的觸發(fā)器、動(dòng)作或 Adobe XD 動(dòng)畫(huà)。

原型完成后,您可以使用桌面預(yù)覽按鈕預(yù)覽 Adobe XD 動(dòng)畫(huà)。

Adobe XD使用技巧和教程16

Q 是 Command + Q

每當(dāng)您希望快速退出 Adobe XD 時(shí),請(qǐng)使用這個(gè)經(jīng)典的 Adobe XD 快捷方式。

Adobe XD使用技巧和教程17

R 代表重復(fù)網(wǎng)格

使用重復(fù)網(wǎng)格,您可以輕松地重復(fù) Adobe XD 設(shè)計(jì)中的元素。當(dāng)您需要?jiǎng)?chuàng)建具有相同大小的列表或一行元素時(shí),這可以節(jié)省時(shí)間。

要?jiǎng)?chuàng)建重復(fù)網(wǎng)格,請(qǐng)選擇要重復(fù)的元素,然后從屬性檢查器中單擊“重復(fù)網(wǎng)格”按鈕。使用畫(huà)板上的綠色手柄,您可以輕松調(diào)整網(wǎng)格的大小,當(dāng)您將鼠標(biāo)懸停在元素之間的區(qū)域上時(shí),您可以調(diào)整水平或垂直間距。

Adobe XD使用技巧和教程18

Adobe XD使用技巧和教程19

S 代表堆棧

堆棧使組內(nèi)的元素能夠在它們之間定義間距。為了創(chuàng)建堆棧,首先要對(duì)需要堆疊的元素進(jìn)行分組。

選擇您的組并關(guān)注屬性檢查器。確保響應(yīng)式調(diào)整大小已啟用,然后選中堆???。Adobe XD 將檢查您的設(shè)計(jì)并決定哪種類型的堆棧適合您的需要:水平或垂直。創(chuàng)建后,您可以更改堆棧的類型,也可以調(diào)整堆棧內(nèi)元素的間距或內(nèi)邊距。

調(diào)整堆棧中元素的大小或重新排序,其余元素將移動(dòng)以保留預(yù)定義的間距設(shè)置。

Adobe XD使用技巧和教程20

T 代表文本

抓住文本工具或使用快捷鍵T,只要你想在Adobe XD添加文字的熱鍵。

單擊畫(huà)板后,您可以輸入新文本。您可以選擇您的 Adobe XD 字體并在屬性檢查器中設(shè)置其余設(shè)置。

Adobe XD使用技巧和教程21

U 代表 Command + Option + U

使用此 Adobe XD 快捷方式執(zhí)行添加布爾操作,該操作將合并所選對(duì)象。

除了添加之外,您還有另外三個(gè)布爾運(yùn)算可用于在 Adobe XD 中組合選定的形狀:

減去(命令 + 選項(xiàng) + S)

相交(Command + Option + I)

排除重疊(Command + Option + X)

Adobe XD使用技巧和教程22

Adobe XD使用技巧和教程23

V 代表移動(dòng)工具

該V快捷鍵讓你的移動(dòng)工具,可主要用于選擇和畫(huà)板上移動(dòng)對(duì)象。

使用相同的工具,您可以雙擊一段文本來(lái)編輯它,或者雙擊一組形狀來(lái)選擇該組中的特定對(duì)象。

Adobe XD使用技巧和教程24

W 代表 Command + W

每當(dāng)您希望關(guān)閉當(dāng)前的 Adobe XD 文檔時(shí),都可以使用這個(gè)經(jīng)典的 Adobe XD 快捷方式。

Adobe XD使用技巧和教程25

X 代表 Command + X

每當(dāng)您希望從設(shè)計(jì)中剪切對(duì)象時(shí),都可以使用這個(gè)經(jīng)典的 Adobe XD 快捷方式。

Adobe XD使用技巧和教程26

Y 代表多邊形工具

該?熱鍵讓你的多邊形工具,可用于創(chuàng)建星形,三角形,菱形,五邊形,六邊形等等。

在單擊并拖動(dòng)以創(chuàng)建等邊形狀時(shí)按住Shift鍵。單擊并拖動(dòng)時(shí)按向上和向下箭頭鍵可增加或減少邊數(shù),或在單擊并拖動(dòng)時(shí)按左右箭頭鍵將多邊形變?yōu)樾切巍?

使用多邊形工具創(chuàng)建的形狀也可以從屬性檢查器進(jìn)行編輯。

Adobe XD使用技巧和教程27

Z 代表縮放工具

該?快捷鍵為您提供了縮放工具可用于放大或縮小。

單擊畫(huà)板上的任意位置以放大,或單擊并拖動(dòng)以定義要放大的區(qū)域。

要縮小,請(qǐng)按住Option鍵并單擊畫(huà)板上的任意位置。

Adobe XD使用技巧和教程28


猜你喜歡:

ai字體變形設(shè)計(jì)教程:手把手設(shè)計(jì)萬(wàn)圣節(jié)卡片

磨砂玻璃質(zhì)感ICON+AE動(dòng)效設(shè)計(jì)教程

VR虛擬現(xiàn)實(shí)給UI設(shè)計(jì)帶來(lái)哪些方向?

黑馬程序員UI/UE設(shè)計(jì)培訓(xùn)課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!