29第五章9AdobeXD應(yīng)用基礎(chǔ)與聯(lián)動(dòng)技巧

adobeXD應(yīng)用基礎(chǔ)數(shù)字媒體交互設(shè)計(jì)天津電子信息職業(yè)技術(shù)學(xué)院聯(lián)動(dòng)技巧與知識(shí)要點(diǎn)用途與特征基礎(chǔ)工具與操作AdobeXD和AI以及PS的設(shè)計(jì)聯(lián)動(dòng)AdobeXD中的設(shè)計(jì)技巧用途與特征重點(diǎn)掌握：第一部分次要掌握：√簡(jiǎn)介adobeXDAdobeXD是一款輕便的矢量+原型繪制軟件，集框線圖設(shè)計(jì)、視覺設(shè)計(jì)、交互設(shè)計(jì)、原型設(shè)計(jì)功能為一體，它可以非常便捷地將設(shè)計(jì)概念轉(zhuǎn)化為可交互原型，并支持Windows10和MacOS平臺(tái)。作為主打交互的AdobeXD，其本身的硬實(shí)力確實(shí)不容小視，還在于以下幾點(diǎn)：?與其他Adobe產(chǎn)品無縫協(xié)作。?一鍵生成驚艷的動(dòng)效。?原型的語音控制。?MacOS和Windows的本地應(yīng)用程序。?與開發(fā)人員輕松協(xié)作。基礎(chǔ)工具與操作重點(diǎn)掌握：√第二部分次要掌握：選擇工具選擇另一種方法“選擇”工具是AdobeXD工具欄中的第1個(gè)工具，也是絕大多數(shù)情況下默認(rèn)選中的工具，可以通過單擊工具欄中的指針圖標(biāo)，或者直接按鍵盤上的V鍵激活。激活“選擇”工具，用鼠標(biāo)左鍵直接在畫布上單擊任意元素即可選中該元素，可對(duì)選中的元素進(jìn)行拖曳、縮放和旋轉(zhuǎn)等操作，如圖所示。另一種方法是按住鍵盤上的command鍵（macOS）或Ctrl鍵（Windows），然后用鼠標(biāo)左鍵單擊該圖層，即可直接選中，如圖所示。選擇工具注意事項(xiàng)選擇圖層組中的圖層時(shí)需要注意以下兩點(diǎn):第1點(diǎn)：按住鍵盤上的command鍵（macOS）或者Ctrl鍵（Windows）直接選中單個(gè)圖層是在畫布上進(jìn)行選擇，并不是在圖層面板中進(jìn)行選擇。第2點(diǎn)：無論是采用雙擊的方法還是采用按住鍵盤上command鍵（macOS）或者Ctrl鍵（Windows）的方法進(jìn)入圖層組以后，都可以直接單擊鼠標(biāo)左鍵選擇需要的圖層。補(bǔ)充如果需要選中多個(gè)圖層，可以按住鍵盤上的Shift鍵，然后選擇需要選中的多個(gè)圖層，如圖所示。選擇工具注意事項(xiàng)名稱選擇如果需要選中整個(gè)畫板，可以直接單擊畫布上面的畫板名稱，如圖所示。被選中的畫板名稱變成藍(lán)色，且畫板四周出現(xiàn)選中框。消隱選擇如果一個(gè)圖層既沒有填充又沒有描邊，該圖層在畫布上是不可見的，此時(shí)需要把鼠標(biāo)移動(dòng)到該圖層所在的位置，當(dāng)畫布上出現(xiàn)該圖層的輪廓線時(shí)單擊鼠標(biāo)左鍵，即可選中該圖層，如圖所示。選擇工具快捷鍵矩形工具工具的位置“矩形”工具是AdobeXD工具欄中的第2個(gè)工具，可以通過單擊工具欄中的矩形工具圖標(biāo)，或者直接按鍵盤上的R鍵激活。激活“矩形”工具后，在畫板上單擊鼠標(biāo)左鍵并拖曳，即可繪制一個(gè)矩形，如圖所示。因?yàn)樵贏dobeXD中默認(rèn)的填充色為純白色，所以大家在畫板上看到的是一個(gè)白色矩形，而非只是一個(gè)輪廓。補(bǔ)充激活“矩形”工具后，按住鍵盤上的Shift鍵，同時(shí)拖曳鼠標(biāo)即可繪制正方形，如圖所示。圓角矩形工具的位置繪制矩形后四個(gè)角上分別會(huì)出現(xiàn)一個(gè)圓點(diǎn)符號(hào)，可以通過拖曳任意一個(gè)角的圓點(diǎn)符號(hào)，設(shè)置矩形的圓角半徑，如圖所示補(bǔ)充如果只想改變其中一個(gè)角的圓角半徑，可以按住option鍵（macOS系統(tǒng)）或者Alt鍵（Windows系統(tǒng)）并拖曳與該角對(duì)應(yīng)的圓點(diǎn)符號(hào)。矩形圖層的屬性檢查器工具的位置該部分能設(shè)置圖層的對(duì)齊屬性，從左到右一共有8種對(duì)齊方式，分別是“頂對(duì)齊”“居中對(duì)齊（垂直）”“底對(duì)齊”“水平分布對(duì)齊”“左對(duì)齊”“居中對(duì)齊（水平）”“右對(duì)齊”和“垂直分布對(duì)齊”，如圖所示。！注意，圖中的“水平分布對(duì)齊”和“垂直分布對(duì)齊”的圖標(biāo)是未激活狀態(tài)，這是因?yàn)樾枰x中3個(gè)或3個(gè)以上的圖層才可以執(zhí)行分布對(duì)齊的操作。如果只選中一個(gè)圖層，那么該圖層對(duì)齊的參考為畫板本身。補(bǔ)充繪制好矩形后，可以通過屬性檢查器設(shè)置其屬性，如圖所示。屬性檢查器通過橫線分成4部分。橢圓工具橢圓“橢圓”工具是AdobeXD工具欄中的第3個(gè)工具，可以通過直接單擊工具欄中的橢圓工具圖標(biāo)，或者直接按鍵盤上的E鍵激活?！皺E圓”工具是AdobeXD中的第2種繪圖工具，用于繪制圓形。激活“橢圓”工具后，在畫布上單擊鼠標(biāo)左鍵并拖曳鼠標(biāo)，即可繪制橢圓，如圖所示。如果在繪制橢圓之前，按住鍵盤上的Shift鍵，則可以繪制一個(gè)圓。繪制完橢圓后，可以在右側(cè)的屬性檢查器中設(shè)置橢圓的屬性，因橢圓圖層的屬性檢查器與矩形圖層的屬性檢查器完全相同，所以在此不作重復(fù)說明。直線工具直線“直線”工具是AdobeXD工具欄中的第4個(gè)工具，可以用來繪制直線。要使用該工具，只需單擊工具欄上的直線工具圖標(biāo)，或者直接按鍵盤上的L鍵將其激活。使用“直線”工具繪制直線時(shí)，首先在畫布上單擊鼠標(biāo)確定直線的起點(diǎn)，然后按住并拖曳鼠標(biāo)，再在終點(diǎn)處釋放鼠標(biāo)，即可繪制出一條直線如果在繪制直線的同時(shí)按住Shift鍵，則可以以固定的角度繪制直線；如果鼠標(biāo)從左往右拖曳，則在水平方向繪制；如果是上下拖曳，則繪制出一條垂直線；如果是往左上、右上、左下、右下等方向拖曳，則會(huì)以45°角的方向繪制直線鋼筆工具工具位置“鋼筆”工具是AdobeXD工具欄中的第5個(gè)工具，可以用該工具繪制各種路徑。要使用該工具，只需單擊工具欄上的鋼筆工具圖標(biāo)，或者直接按鍵盤上的P鍵將其激活。用“鋼筆”工具繪制直線路徑的方法非常簡(jiǎn)單。首先激活“鋼筆”工具，在畫板上單擊鼠標(biāo)左鍵，創(chuàng)建一個(gè)錨點(diǎn)，然后將鼠標(biāo)移動(dòng)到另一個(gè)位置并單擊鼠標(biāo)左鍵，創(chuàng)建另一個(gè)錨點(diǎn)，這時(shí)兩個(gè)錨點(diǎn)之間會(huì)自動(dòng)出現(xiàn)一條直線路徑。此時(shí)可以再移動(dòng)鼠標(biāo)添加第3個(gè)錨點(diǎn)，則第3個(gè)錨點(diǎn)和第2個(gè)錨點(diǎn)之間也會(huì)出現(xiàn)一條直線路徑，如圖所示。鋼筆工具錨點(diǎn)在一個(gè)路徑上可以添加無數(shù)個(gè)錨點(diǎn)。如果要結(jié)束路徑的繪制，可以按下鍵盤上的Esc鍵，此時(shí)，鼠標(biāo)便會(huì)被釋放，并且默認(rèn)選中第一個(gè)錨點(diǎn)，工具會(huì)自動(dòng)變?yōu)椤斑x擇”工具，如圖所示。補(bǔ)充如果繼續(xù)選擇“鋼筆”工具，然后單擊上述路徑兩端的任意錨點(diǎn)，則可以繼續(xù)在該路徑上繪制線條。如果用“鋼筆”工具把兩個(gè)端點(diǎn)連接起來，形成一個(gè)閉合圖形后，會(huì)自動(dòng)退出路徑的繪制，工具也自動(dòng)變?yōu)椤斑x擇”工具鋼筆工具曲柄選擇“選擇”工具，用鼠標(biāo)左鍵雙擊路徑上的錨點(diǎn)，可以把直線路徑變?yōu)榍€路徑，如圖所示，路徑左右會(huì)出現(xiàn)曲柄，拖曳曲柄可以對(duì)曲線進(jìn)行調(diào)整。如果再次雙擊錨點(diǎn)，則會(huì)變?yōu)橹本€路徑。補(bǔ)充激活“鋼筆”工具后，在起點(diǎn)處單擊鼠標(biāo)左鍵，然后將鼠標(biāo)移動(dòng)至需要的位置，再單擊鼠標(biāo)左鍵并拖曳，即可繪制兩個(gè)錨點(diǎn)之間的曲線；如果再次單擊鼠標(biāo)左鍵時(shí)不拖曳，則會(huì)繪制出一條直線。文本工具文本選擇“文本”工具，再畫板中點(diǎn)擊即可創(chuàng)建文本，默認(rèn)情況下是單行文本，不會(huì)換行。如果想強(qiáng)制換行需要按回車健進(jìn)行強(qiáng)制換行。補(bǔ)充創(chuàng)建區(qū)域文本需要再選擇文本工具后按住鼠標(biāo)拖動(dòng)創(chuàng)建一個(gè)文本區(qū)域框，這時(shí)當(dāng)文本達(dá)到了區(qū)域框的寬度后會(huì)自動(dòng)換行。按住esc鍵退出文本編輯。畫板工具畫板工具在新建頁面中可以創(chuàng)建包含一個(gè)畫板的xd文件，進(jìn)入xd項(xiàng)目之后單擊左側(cè)面板的畫板工具，或者單機(jī)快捷鍵A切換到畫板工具，補(bǔ)充可以創(chuàng)建多個(gè)畫板，同時(shí)可以修改畫板名稱以及尺寸。在畫板邊緣拖動(dòng)即可調(diào)整畫板的尺寸。圖層面板圖層面板單機(jī)左下角的圖層按鈕，可以查看所有的圖層面板。補(bǔ)充點(diǎn)擊任意畫板中的對(duì)象，會(huì)顯示所選畫板中所有元素的圖層。圖層的顯示順序時(shí)從上到下排列的，可以通過鼠標(biāo)拖拽更改元素的圖層順序。資源面板資源面板單機(jī)左下角的庫，可以展示文件中的所有資源。包括顏色，字符樣式和組件，在資源面板的各個(gè)資源可以在文件各個(gè)位置進(jìn)行使用。大大提高設(shè)計(jì)效率。補(bǔ)充點(diǎn)擊任意畫板中的對(duì)象，然后再左側(cè)資源面板中，點(diǎn)擊資源分類中的加號(hào)按鈕，即可把畫板中對(duì)應(yīng)的資源屬性添加到資源面板中。刪除資源需要右鍵需要?jiǎng)h除的資源然后選擇刪除即可把該資源刪除。AdobeXD和AI以及PS的設(shè)計(jì)聯(lián)動(dòng)重點(diǎn)掌握：√第三部分次要掌握：

…………軟件文檔之間的互通性互通、兼容

PS和AI兩個(gè)軟件的文檔都可以直接通過XD打開（反過來不適用，XD的圖層可以復(fù)制到兩個(gè)軟件中）。并且圖層屬性與XD完美兼容。如果你在PS和Ai中已經(jīng)配置了畫板，那么在XD中打開也是不會(huì)錯(cuò)亂的。

軟件文檔之間的互通性具有一定的共性在XD中的圖片編輯工作可以切換到PS進(jìn)行在設(shè)計(jì)過程中我們會(huì)用到一些圖片素材，為了更好地貼合設(shè)計(jì)，我們可以在XD中點(diǎn)擊圖片選擇在PS中對(duì)圖片進(jìn)行編輯后保存其結(jié)果會(huì)自動(dòng)同步到XD中，這類似于PS的智能對(duì)象

字體與圖標(biāo)字體互通圖標(biāo)設(shè)計(jì)logo設(shè)計(jì)特別是運(yùn)營(yíng)類的視覺設(shè)計(jì)，我們會(huì)用到許多字體設(shè)計(jì)內(nèi)容，這些在AI中完成會(huì)更加地高效，所以我們可以在AI中設(shè)計(jì)完字體，然后直接復(fù)制粘貼入XD繼續(xù)完成設(shè)計(jì)稿。SVG圖標(biāo)我們一般使用AI進(jìn)行繪制，我們可以在AI中完成圖標(biāo)的制作，然后無縫粘貼到XD文檔中。UI設(shè)計(jì)過程中，會(huì)用到品牌的logo元素，AI對(duì)矢量圖形的強(qiáng)大靈活編輯可以高效地完成logo設(shè)計(jì)，我們可以在AI中設(shè)計(jì)完logo直接復(fù)制粘貼到XD文檔中使用。獨(dú)特功能特性軟件的獨(dú)特功能特性XD在UI設(shè)計(jì)中的高效率布局小技巧、背景模糊功能以及交互功能XD仍然是UI設(shè)計(jì)的主體軟件，我們要善于利用他的樣式、組件和高效布局技巧來提高我們工作效率。毛玻璃效果流行的當(dāng)下，XD的背景模糊功能快速實(shí)現(xiàn)效果。XD的交互演示功能現(xiàn)在也已經(jīng)十分完善，我們最終可以XD中制作交互稿。AI中對(duì)矢量圖形的靈活編輯和多點(diǎn)漸變XD中對(duì)圖形的編輯效果是有限的，并且漸變只有線性和徑向漸變兩種模式，使用AI可以補(bǔ)充在矢量圖形設(shè)計(jì)上的需要。PS的筆刷和圖像編輯功能我們?cè)诶L制插畫過程中，如果添加一些筆刷效果這些可以使用PS進(jìn)行繪制，PS強(qiáng)大的圖像編輯功能也可以為你的設(shè)計(jì)加持。另外如果你購(gòu)買了官方的軟件產(chǎn)品，可以使用官方的CClibrary，這在幾個(gè)軟件中也是云聯(lián)動(dòng)的，可以將設(shè)計(jì)元素導(dǎo)入到library在各個(gè)軟件中調(diào)用。AdobeXD中的設(shè)計(jì)技巧重點(diǎn)掌握：√第四部分次要掌握：…………技巧一多邊形上有個(gè)控制點(diǎn)，可以直接調(diào)整星形比。當(dāng)然，多邊形上還有另外一組控制點(diǎn)用來調(diào)整圓角。組或組件開啟邊緣填充量后，當(dāng)內(nèi)容的寬或高發(fā)生變化后，背景會(huì)自動(dòng)適應(yīng)內(nèi)容，邊緣填充量的值不變。…………技巧二雙擊區(qū)域文本的文本框下方中間的控制點(diǎn)，可以調(diào)整區(qū)域文本框的高度以適應(yīng)內(nèi)容的高度。使用快捷鍵Command+D或者Ctrl+D可以快速?gòu)?fù)制畫板。當(dāng)然也能快速?gòu)?fù)制任何內(nèi)容，除畫板外快速?gòu)?fù)制的內(nèi)容都會(huì)在原來的位置疊放?！记扇x擇任意元素之后，直接按下數(shù)字鍵可以快速調(diào)整所選對(duì)象的不透明度，比如按下8鍵可以調(diào)整所選對(duì)象的不透明度為80%，快速且連續(xù)按下3和5鍵可以直接設(shè)置所選對(duì)象的不透明度為35%。屬性檢查器中能輸入數(shù)字的地方基本都支持加減乘除數(shù)學(xué)計(jì)算?！记伤脑O(shè)計(jì)/原型/共享3個(gè)工作區(qū)的切換也有快捷鍵，通過Ctrl+Tab鍵就能切換。云文檔功能即使你不聯(lián)網(wǎng)也能在本地保存、修改、刪除。本課內(nèi)容結(jié)束

祝學(xué)習(xí)順利天津電子信息職業(yè)技術(shù)學(xué)院調(diào)用庫CreativeCloud在AdobeXD中也能直接調(diào)用CreativeCloud庫，也就是你在