30第五章10AdobeXD高級應用介紹以及交互制作

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

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

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

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

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