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

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