Adobe XD26詳解【Adobe XD教程】

更新時(shí)間:2021年07月28日11時(shí)59分來源:傳智教育瀏覽次數(shù):

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

A 代表畫板

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

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

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

B 代表邊界

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

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

C 代表組件

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

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

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

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

D 代表桌面預(yù)覽

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

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

E 代表橢圓工具

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

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

F是填充

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

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

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

G 代表網(wǎng)格

每當(dāng)您選擇一個(gè)畫板時(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 線框的完美開始。

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

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

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

J 代表連接

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

K 代表 Command + K

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

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

L 代表圖層

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

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

M 是掩蔽

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

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

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

N 代表 Command + N

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

O 代表不透明度

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

P代表原型

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

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

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

Q 是 Command + Q

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

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)格”按鈕。使用畫板上的綠色手柄，您可以輕松調(diào)整網(wǎng)格的大小，當(dāng)您將鼠標(biāo)懸停在元素之間的區(qū)域上時(shí)，您可以調(diào)整水平或垂直間距。

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è)置。