移動(dòng)APP產(chǎn)品交互設(shè)計(jì)開發(fā)的制作及AdobeXD交互制作天津電子信息職業(yè)技術(shù)學(xué)院adobeXD高級(jí)應(yīng)用介紹知識(shí)要點(diǎn)03adobeXD隱含快捷操作04AdobeXD原型交互鏈接01adobeXD插件介紹02adobeXD動(dòng)效制作05AdobeXD設(shè)計(jì)效果第一部分adobeXD插件介紹

…………adobeXD插件重要的插件輔助AdobeXD是做為Sketch的競爭產(chǎn)品出現(xiàn)的，天然支持Windows平臺(tái)，對(duì)于互聯(lián)網(wǎng)設(shè)計(jì)工作者來說AdobeXD也是一個(gè)非常好的選擇，想要高效便捷的使用AdobeXD，插件是必不可少的。接下來我們介紹8款非常實(shí)用的的插件。adobeXD插件注冊/登錄賬號(hào)首先在幫助中找到賬號(hào)，沒有的可以注冊一個(gè)賬號(hào)如圖所示。adobeXD插件在線安裝插件adobeXD插件UIFaces–快速填充用戶頭像選擇需要填充頭像的一個(gè)或多個(gè)形狀，可通過過濾器控制頭像人物的年齡、性別、發(fā)色等。??見左側(cè)的視頻adobeXD插件Renameit–快速重命名圖層直接重命名所有圖層，可以是自定義的名字，也可以通過插件提供的關(guān)鍵字命名（有序數(shù)字、字母等）??見左側(cè)的視頻adobeXD插件Repetor–重復(fù)網(wǎng)格填充模擬數(shù)據(jù)針對(duì)AdobeXD重復(fù)網(wǎng)格的插件，快速給重復(fù)網(wǎng)格填充模擬數(shù)據(jù)，可填充圖片、文本、日期、名字、地址等多類型文本信息。??見左側(cè)的視頻adobeXD插件ColorBlender–自動(dòng)生成過渡色在AdobeXD內(nèi)，選中兩個(gè)帶顏色的元素，可一鍵生成兩個(gè)顏色之間的過渡色，可自由控制過渡色的數(shù)量。??見左側(cè)的視頻adobeXD插件Mimic–解析網(wǎng)站設(shè)計(jì)元素在AdobeXD內(nèi)快速解析任意一個(gè)網(wǎng)站的設(shè)計(jì)元素，解析內(nèi)容包括網(wǎng)站的字體、配色、圖片。??見左側(cè)的視頻adobeXD插件ContentGenerator–快速填充文本內(nèi)容在AdobeXD內(nèi)，可快速填充用戶名、不同格式的日期、城市名字、國家名字、Email地址、數(shù)字、電話號(hào)碼、貨幣等常見文本內(nèi)容adobeXD插件VizzyCharts–快速生成信息圖表在AdobeXD項(xiàng)目中快速生成信息圖表。選擇一個(gè)矩形作為圖表的位置區(qū)域，通過VizzyCharts可快速生詞柱狀圖，餅圖，折線圖等信息圖表。adobeXD插件UnsplashRandomImage–隨機(jī)填充圖片在AdobeXD內(nèi)，快速給矢量形狀隨機(jī)填充圖片，可簡單配置圖片內(nèi)容。第二部分adobeXD動(dòng)效制作自動(dòng)插值運(yùn)算動(dòng)效的實(shí)現(xiàn)

通過自動(dòng)制作動(dòng)畫功能，您可以使用滑動(dòng)/拖動(dòng)或漣漪效果輕松創(chuàng)建動(dòng)畫原型，直觀地展示內(nèi)容在畫板之間的移動(dòng)。這有助于在為整體用戶體驗(yàn)添加豐富圖層的同時(shí)講述更好的原型故事拖動(dòng)效果創(chuàng)建動(dòng)畫原型開始之前：要添加動(dòng)畫效果的對(duì)象在各個(gè)畫板上具有相同的圖層名稱，只能為特定對(duì)象屬性（例如大小、位置和旋轉(zhuǎn)）制作動(dòng)畫效果在原型模式下連接畫板單擊連接器以查看“屬性檢查器”中顯示的交互面板，并設(shè)置以下選項(xiàng)：觸發(fā)器：選擇一個(gè)選項(xiàng)以觸發(fā)動(dòng)畫。例如，要模擬點(diǎn)擊卡體驗(yàn)，請(qǐng)選擇“點(diǎn)擊”。操作：選擇“自動(dòng)制作動(dòng)畫”。目標(biāo)：選擇目標(biāo)畫板以創(chuàng)建動(dòng)畫過渡效果。緩動(dòng)：選擇一個(gè)選項(xiàng)來模擬緩動(dòng)效果。例如，如果您希望自己的動(dòng)畫實(shí)現(xiàn)從原型漸出的效果，請(qǐng)選擇“漸出”。在XD應(yīng)用程序中選擇，以在桌面、移動(dòng)設(shè)備或Web上的支持的瀏覽器中預(yù)覽動(dòng)畫。第三部分adobeXD隱含快捷操作01

0203組件類的操作多個(gè)元素同時(shí)選擇可以設(shè)置相同寬度組件與組件之間可以直接拖入替換重復(fù)網(wǎng)格Alt+Shift+箭頭鍵：調(diào)整圖形寬高，元素固定在左上角。Alt+箭頭鍵：以1px為增量調(diào)整圖形寬高。Shift+箭頭鍵：以10px移動(dòng)位置XY軸。組件進(jìn)行網(wǎng)格編組可以對(duì)其背景色，圖片進(jìn)行替換，圖標(biāo)不要在主組件上設(shè)計(jì)，別的組件是可以使用其功能的。僅限同等寬高大小，顏色類型重復(fù)，不然就無法使用。解決方法在上面再覆蓋一層做不同處理。01

0203隱含的快捷方式AdobeXD快捷鍵導(dǎo)入Ctrl+Shift+I；鎖定/解鎖Ctrl+L；重復(fù)網(wǎng)格Ctrl+R；粘貼外觀Ctrl+Alt+V；左對(duì)齊Ctrl+Shift+←；底對(duì)齊Ctrl+Shift+↓；水平居中Shift+C；右對(duì)齊Ctrl+Shift+→；頂對(duì)齊Ctrl+Shift+↑；垂直居中Shift+M；水平分布Ctrl+Shift+H；垂直分布Ctrl+Shift+V；加粗Ctrl+B；傾斜Ctrl+I第四部分AdobeXD原型交互鏈接AdobeXD原型交互鏈接AdobeXD原型交互鏈接在元素的右側(cè)有一個(gè)藍(lán)色的小箭頭，按住箭頭拖動(dòng)到另外一個(gè)畫板上，松開鼠標(biāo)就可以來創(chuàng)建一個(gè)鏈接AdobeXD原型交互鏈接觸發(fā)的幾種操作AdobeXD原型交互鏈接逐幀動(dòng)畫就是在時(shí)間軸上每一幀逐幀繪制不同內(nèi)容使其連續(xù)播放而成動(dòng)畫，在相同時(shí)間內(nèi)幀數(shù)越多動(dòng)畫看起來越流暢。首先了解一下逐幀動(dòng)畫AdobeXD原型交互鏈接AdobeXD原型交互鏈接AdobeXD原型交互鏈接AdobeXD原型交互鏈接AdobeXD原型交互鏈接AdobeXD原型交互鏈接第五部分AdobeXD設(shè)計(jì)效果AdobeXD設(shè)計(jì)效果Ad