5.9 備課筆記-AdobeXD應(yīng)用基礎(chǔ)與聯(lián)動(dòng)技巧

編號(hào)29-01【移動(dòng)APP交互設(shè)計(jì)開發(fā)的制作】編號(hào)29-01學(xué)習(xí)任務(wù)九、AdobeXD應(yīng)用基礎(chǔ)與聯(lián)動(dòng)技巧一、課程說明與要求1.課程說明本階段課程分為兩個(gè)部分，第一部分為AdobeXD用途與特征，介紹AdobeXD原型工具的優(yōu)點(diǎn)；第二部分為AdobeXD基礎(chǔ)工具與操作，介紹AdobeXD工具欄各個(gè)工具的使用操作；第三部分為AdobeXD和AI以及PS的設(shè)計(jì)聯(lián)動(dòng)，介紹AdobeXD與PS以及AI軟件之間聯(lián)動(dòng)；第四部分為AdobeXD中的設(shè)計(jì)技巧，介紹AdobeXD元素設(shè)置技巧；通過對(duì)AdobeXD工具屬性以及使用技巧上進(jìn)行講解，學(xué)生可以全面、深入地掌握AdobeXD工具欄各個(gè)工具使用制作元素的操作，以及AdobeXD高效率繪制元素的技巧。2.工具材料準(zhǔn)備說明本課的作業(yè)作品實(shí)踐需要同學(xué)們提前準(zhǔn)備一些工具和材料，教師提供軟件下載鏈接。工具材料下載鏈接備注AdobeXD/zh-cn/products/download/creative-cloud每臺(tái)電腦安裝二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程為軟件基礎(chǔ)工具介紹課程。在學(xué)習(xí)基礎(chǔ)工具與操作時(shí)，需要學(xué)生在學(xué)習(xí)過程中，結(jié)合實(shí)際效果多動(dòng)手進(jìn)行操作練習(xí)，一定做到由眼入腦，手腦并用，從而熟系設(shè)計(jì)技巧對(duì)工具的實(shí)際操作有深刻體會(huì)。同時(shí)要理解AdobeXD相對(duì)于其他原型工具使用的優(yōu)點(diǎn)。針對(duì)學(xué)生目前對(duì)AdobeXD工具的整體認(rèn)知不深，實(shí)際操作水平不高，但學(xué)生對(duì)所學(xué)AdobeXD新技能感興趣，有強(qiáng)烈獲取知識(shí)的動(dòng)力。2.課程導(dǎo)入我們之前學(xué)習(xí)了界面設(shè)計(jì)的輔助工具介紹，今天來學(xué)習(xí)一款可以和Photoshop軟件聯(lián)動(dòng)的原型交互工具AdobeXD，大家可能對(duì)AdobeXD不是很熟系，AdobeXD與PS、AI、AE等軟件均是由Adobe開發(fā)的，被標(biāo)榜為來自未來的設(shè)計(jì)軟件，AdobeXD是一款輕便的矢量+原型繪制軟件，集框線圖設(shè)計(jì)、視覺設(shè)計(jì)、交互設(shè)計(jì)、原型設(shè)計(jì)功能為一體，它可以非常便捷地將設(shè)計(jì)概念轉(zhuǎn)化為可交互原型，并支持Windows10和MacOS平臺(tái)。本節(jié)課將通過對(duì)AdobeXD工具欄基礎(chǔ)工具進(jìn)行詳細(xì)講解以及對(duì)AdobeXD軟件文檔之間的互通性和設(shè)計(jì)技巧對(duì)AdobeXD高效率制作原型案例進(jìn)行充分講解。三、理論知識(shí)講解（一）用途與特征AdobeXD優(yōu)點(diǎn)在于以下幾點(diǎn)：?與其他Adobe產(chǎn)品無縫協(xié)作。?一鍵生成驚艷的動(dòng)效。?原型的語音控制。?MacOS和Windows的本地應(yīng)用程序。?與開發(fā)人員輕松協(xié)作?！舅颊谌耄檫_(dá)到既定目標(biāo)所顯現(xiàn)出來的資源共享和協(xié)同合作的精神，它可以調(diào)動(dòng)團(tuán)隊(duì)成員的所有資源與才智，并且會(huì)自動(dòng)地驅(qū)除所有不和諧、不公正的現(xiàn)象，同時(shí)對(duì)表現(xiàn)突出者及時(shí)予以獎(jiǎng)勵(lì)，從而使團(tuán)隊(duì)協(xié)作產(chǎn)生一股強(qiáng)大而持久的力量。）】（二）基礎(chǔ)工具與操作………………【重點(diǎn)】1.選擇工具“選擇”工具是AdobeXD工具欄中的第1個(gè)工具，也是絕大多數(shù)情況下默認(rèn)選中的工具，可以通過單擊工具欄中的指針圖標(biāo)，或者直接按鍵盤上的V鍵激活。激活“選擇”工具，用鼠標(biāo)左鍵直接在畫布上單擊任意元素即可選中該元素，可對(duì)選中的元素進(jìn)行拖曳、縮放和旋轉(zhuǎn)等操作。另一種方法是按住鍵盤上的command鍵（macOS）或Ctrl鍵（Windows），然后用鼠標(biāo)左鍵單擊該圖層，即可直接選中。編號(hào)29-02編號(hào)29-02激活“選擇”工具，用鼠標(biāo)左鍵直接在畫布上單擊任意元素即可選中該元素，可對(duì)選中的元素進(jìn)行拖曳、縮放和旋轉(zhuǎn)等操作。選擇工具注意事項(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)左鍵選擇需要的圖層。如果需要選中多個(gè)圖層，可以按住鍵盤上的Shift鍵，然后選擇需要選中的多個(gè)圖層。名稱選擇如果需要選中整個(gè)畫板，可以直接單擊畫布上面的畫板名稱。被選中的畫板名稱變成藍(lán)色，且畫板四周出現(xiàn)選中框。消隱選擇如果一個(gè)圖層既沒有填充又沒有描邊，該圖層在畫布上是不可見的，此時(shí)需要把鼠標(biāo)移動(dòng)到該圖層所在的位置，當(dāng)畫布上出現(xiàn)該圖層的輪廓線時(shí)單擊鼠標(biāo)左鍵，即可選中該圖層。編號(hào)29-03編號(hào)29-032.矩形工具“矩形”工具是AdobeXD工具欄中的第2個(gè)工具，可以通過單擊工具欄中的矩形工具圖標(biāo)，或者直接按鍵盤上的R鍵激活。激活“矩形”工具后，在畫板上單擊鼠標(biāo)左鍵并拖拽，即可繪制一個(gè)矩形，按住鍵盤上的【Shift】鍵，同時(shí)拖拽鼠標(biāo)即可繪制正方形。圓角矩形繪制矩形后四個(gè)角上分別會(huì)出現(xiàn)一個(gè)圓點(diǎn)符號(hào)，可以通過拖拽任意一個(gè)角的圓點(diǎn)符號(hào)，設(shè)置矩形的圓角半徑，可以只改變其中一個(gè)角的圓角半徑，可以按住option鍵（macOS系統(tǒng)）或者Alt鍵（Windows系統(tǒng)）并拖拽與該角對(duì)應(yīng)的圓點(diǎn)符號(hào)。矩形屬性檢查器編號(hào)29-04編號(hào)29-04繪制好矩形后，可以通過屬性檢查器設(shè)置其屬性，如圖所示。屬性檢查器通過橫線分成4部分。注意：圖中的“水平分布對(duì)齊”和“垂直分布對(duì)齊”的圖標(biāo)是未激活狀態(tài)，這是因?yàn)樾枰x中3個(gè)或3個(gè)以上的圖層才可以執(zhí)行分布對(duì)齊的操作。如果只選中一個(gè)圖層，那么該圖層對(duì)齊的參考為畫板本身。3.橢圓工具“橢圓”工具是AdobeXD工具欄中的第3個(gè)工具，可以通過直接單擊工具欄中的橢圓工具圖標(biāo)，或者直接按鍵盤上的E鍵激活。激活“橢圓”工具后，在畫布上單擊鼠標(biāo)左鍵并拖拽鼠標(biāo)，即可繪制橢圓，按住鍵盤上的【Shift】鍵，則可以繪制一個(gè)圓。4.多邊形工具“多邊形”工具是AdobeXD工具欄中的第4個(gè)工具，可以通過直接單擊工具欄中的多邊形工具圖標(biāo)，或者直接按鍵盤上的Y鍵激活。激活“多邊形”工具后，在畫布上單擊鼠標(biāo)左鍵并拖拽鼠標(biāo)，即可繪制一個(gè)多邊形，按住鍵盤上的【Shift】鍵，則可繪制一個(gè)等邊多邊形。5.直線工具“直線”工具是AdobeXD工具欄中的第5個(gè)工具，可以單擊工具欄上的直線工具圖標(biāo)，或者直接按鍵盤上的L鍵將其激活。使用“直線”工具繪制直線時(shí)。首先在畫布上單擊鼠標(biāo)確定直線的起點(diǎn)，然后按住并拖曳鼠標(biāo)，再在終點(diǎn)處釋放鼠標(biāo)，即可繪制出一條直線如果在繪制直線的同時(shí)按住Shift鍵，則可以以固定的角度繪制直線；如果鼠標(biāo)從左往右拖曳，則在水平方向繪制；如果是上下拖曳，則繪制出一條垂直線；如果是往左上、右上、左下、右下等方向拖曳，則會(huì)以45°角的方向繪制直線編號(hào)29-05編號(hào)29-056.鋼筆工具“鋼筆”工具是AdobeXD工具欄中的第6個(gè)工具，可以用該工具繪制各種路徑?？梢詥螕艄ぞ邫谏系匿摴P工具圖標(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)處單擊鼠標(biāo)左鍵，然后將鼠標(biāo)移動(dòng)至需要的位置，再單擊鼠標(biāo)左鍵并拖拽，即可繪制兩個(gè)錨點(diǎ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擇”工具。如果繼續(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)橹本€路徑。激活“鋼筆”工具后，在起點(diǎn)處單擊鼠標(biāo)左鍵，然后將鼠標(biāo)移動(dòng)至需要的位置，再單擊鼠標(biāo)左鍵并拖曳，即可繪制兩個(gè)錨點(diǎn)之間的曲線；如果再次單擊鼠標(biāo)左鍵時(shí)不拖曳，則會(huì)繪制出一條直線。編號(hào)29-06編號(hào)29-067.文本工具“文本”工具是AdobeXD工具欄中的第7個(gè)工具，在畫板中點(diǎn)擊即可創(chuàng)建文本?？梢詥螕艄ぞ邫谏系奈谋竟ぞ邎D標(biāo)，或者直接按鍵盤上的T鍵將其激活。選擇“文本”工具，默認(rèn)情況下是單行文本，不會(huì)換行。如果想強(qiáng)制換行需要按回車健進(jìn)行強(qiáng)制換行。創(chuàng)建區(qū)域文本需要在選擇文本工具后按住鼠標(biāo)拖動(dòng)創(chuàng)建一個(gè)文本區(qū)域框。這時(shí)當(dāng)文本達(dá)到了區(qū)域框的寬度后會(huì)自動(dòng)換行。按住esc鍵退出文本編輯。文本“屬性”面板8.畫板工具單擊左側(cè)面板的畫板工具，或者單機(jī)快捷鍵A切換到畫板工具，可以創(chuàng)建多個(gè)畫板，同時(shí)可以修改畫板名稱以及尺寸。在畫板邊緣拖動(dòng)即可調(diào)整畫板的尺寸。編號(hào)29-07編號(hào)29-079.圖層面板圖層面板可以查看所有的圖層面板。點(diǎn)擊任意畫板中的對(duì)象，會(huì)顯示所選畫板中所有元素的圖層。圖層的顯示順序時(shí)從上到下排列的，可以可以通過鼠標(biāo)拖拽更改元素的圖層順序，以及對(duì)圖層重命名、顯示/隱藏和鎖定/解鎖等操作。圖層操作重命名圖層單擊鼠標(biāo)右鍵，從彈出的下拉列表中選擇“復(fù)制”選項(xiàng)。顯示/隱藏圖層將鼠標(biāo)懸停在圖層上，單擊鼠標(biāo)右鍵，從彈出的下拉列表中選擇“顯示”或“隱藏”選項(xiàng)。鎖定圖層將鼠標(biāo)懸停在圖層上，單擊鼠標(biāo)右鍵，從彈出的下拉列表中選擇“鎖定”選項(xiàng)。解鎖圖層繼續(xù)單擊鼠標(biāo)右鍵，從彈出的下拉列表中選擇“解鎖”選項(xiàng)即可。圖層鎖定后，在畫板中執(zhí)行的所有編輯操作均不會(huì)對(duì)鎖定的圖層有影響。導(dǎo)出圖層選擇圖層，然后單擊鼠標(biāo)右鍵，在彈出的下拉列表中選擇“導(dǎo)出所選內(nèi)容”選項(xiàng)，即可在新顯示的對(duì)話框中設(shè)置導(dǎo)出選項(xiàng)，設(shè)置完成后將會(huì)導(dǎo)出圖層。刪除圖層右鍵單擊圖層并選擇“刪除”。10.資源面板資源面板可以展示文件中的所有資源。包括顏色，字符樣式和組件，在資源面板的各個(gè)資源可以在文件各個(gè)位置進(jìn)行使用。大大提高設(shè)計(jì)效率。點(diǎn)擊任意畫板中的對(duì)象，然后再左側(cè)資源面板中，點(diǎn)擊資源分類中的加號(hào)按鈕，即可把畫板中對(duì)應(yīng)的資源屬性添加到資源面板中。刪除資源需要右鍵需要?jiǎng)h除的資源然后選擇刪除即可把該資源刪除。添加的組件可以在跨畫板中，當(dāng)調(diào)整主組件的樣式時(shí)，也就是任意位置使用的該組件樣式也會(huì)進(jìn)行相應(yīng)修改。編號(hào)29-08編號(hào)29-08（三）AdobeXD和AI以及PS的設(shè)計(jì)聯(lián)動(dòng)1.軟件文檔之間的互通性互通、兼容PS和AI兩個(gè)軟件的文檔都可以直接通過XD打開（反過來不適用，XD的圖層可以復(fù)制到兩個(gè)軟件中）。并且圖層屬性與XD完美兼容。如果你在PS和Ai中已經(jīng)配置了畫板，那么在XD中打開也是不會(huì)錯(cuò)亂的。導(dǎo)入文件后我們可以使用XD繼續(xù)編輯我們的設(shè)計(jì)稿，包括grid和stack功能等都不會(huì)受到影響。具有一定的共性在XD中的圖片編輯工作可以切換到PS進(jìn)行，在設(shè)計(jì)過程中會(huì)用到一些圖片素材，為了更好地貼合設(shè)計(jì)，可以在XD中點(diǎn)擊圖片選擇在PS中對(duì)圖片進(jìn)行編輯后保存，并會(huì)自動(dòng)同步到XD中，這類似于PS的智能對(duì)象。編號(hào)29-09編號(hào)29-09字體互通特別是運(yùn)營(yíng)類的視覺設(shè)計(jì)，會(huì)用到許多字體設(shè)計(jì)內(nèi)容，這些在AI中完成會(huì)更加地高效，所以可以在AI中設(shè)計(jì)完字體，然后直接復(fù)制粘貼入XD繼續(xù)完成設(shè)計(jì)稿。圖標(biāo)設(shè)計(jì)SVG圖標(biāo)我們一般使用AI進(jìn)行繪制，可以在AI中完成圖標(biāo)的制作，然后無縫粘貼到XD文檔中。logo設(shè)計(jì)UI設(shè)計(jì)過程中，會(huì)用到品牌的logo元素，AI對(duì)矢量圖形的強(qiáng)大靈活編輯可以高效地完成logo設(shè)計(jì)，可以在AI中設(shè)計(jì)完logo直接復(fù)制粘貼到XD文檔中使用。2.軟件的獨(dú)特功能特性：XD在UI設(shè)計(jì)中的高效率布局小技巧、背景模糊功能以及交互功能XD仍然是UI設(shè)計(jì)的主體軟件，我們要善于利用他的樣式、組件和高效布局技巧來提高我們工作效率。毛玻璃效果流行的當(dāng)下，XD的背景模糊功能快速實(shí)現(xiàn)效果。XD的交互演示功能現(xiàn)在也已經(jīng)十分完善，我們最終可以XD中制作交互稿。3.AI中對(duì)矢量圖形的靈活編輯和多點(diǎn)漸變XD中對(duì)圖形的編輯效果是有限的，并且漸變只有線性和徑向漸變兩種模式，使用AI可以補(bǔ)充在矢量圖形設(shè)計(jì)上的需要。編號(hào)29-10編號(hào)29-104.PS的筆刷和圖像編輯功能在繪制插畫過程中，如果添加一些筆刷效果這些可以使用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)】【思政融入（設(shè)計(jì)中基本方法的靈巧運(yùn)用，提高設(shè)計(jì)效率，培養(yǎng)學(xué)生的創(chuàng)新思維，提高學(xué)生的創(chuàng)新能力，弘揚(yáng)時(shí)代精神）】1.技巧一多邊形上有個(gè)控制點(diǎn)，可以直接調(diào)整星形比。當(dāng)然，多邊形上還有另外一組控制點(diǎn)用來調(diào)整圓角。組或組件開啟邊緣填充量后，當(dāng)內(nèi)容的寬或高發(fā)生變化后，背景會(huì)自動(dòng)適應(yīng)內(nèi)容，邊緣填充量的值不變。2.技巧二雙擊區(qū)域文本的文本框下方中間的控制點(diǎn)，可以調(diào)整區(qū)域文本框的高度以適應(yīng)內(nèi)容的高度。編號(hào)29-11編號(hào)29-11使用快捷鍵Command+D或者Ctrl+D可以快速?gòu)?fù)制畫板。當(dāng)然也能快速?gòu)?fù)制任何內(nèi)容，除畫板外快速?gòu)?fù)制的內(nèi)容都會(huì)在原來的位置疊放。3.技巧三選擇任意元素之后，直接按下數(shù)字鍵可以快速調(diào)整所選對(duì)象的不透明度。，比如按下8鍵可以調(diào)整所選對(duì)象的不透明度為80%，快速且連續(xù)按下3和5鍵可以直接設(shè)置所選對(duì)象的不透明度為35%。屬性檢查器中能輸入數(shù)字的地方基本都支持加減乘除數(shù)學(xué)計(jì)算。4.技巧四編號(hào)29-12編號(hào)29-12設(shè)計(jì)/原型/共享3個(gè)工作區(qū)的切換也有快捷鍵，通過Ctrl+Tab鍵就能切換。云文檔功能即使你不聯(lián)網(wǎng)也能在本地保存、修改、刪除。CreativeCloud在AdobeXD中也能直接調(diào)用CreativeCloud庫(kù)，也就是你在PS/AI/ID等Adobe系列軟件中存儲(chǔ)在CreativeCloud庫(kù)中的資源基本都能在AdobeXD中使用，而且在其它軟件中修改后，AdobeXD中也能直接同步，除了在菜單中能打開，使用快捷鍵Command/Ctrl+Shift+L也能打開。觸發(fā)設(shè)置為“點(diǎn)擊”時(shí)，可以添加2個(gè)操作，但是選擇第2個(gè)的話，必須只能是音頻播放或語音播放。編號(hào)29-13編號(hào)29-13四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：