寫給Adobe XD用戶：你離交互設計師僅差一步（附XD學習教程）
孔子曰：『所謂交互設計...』
百度搶答：『交互設計（英文Interaction Design, 縮寫IXD)，是定義、設計人造系統的行為的設 計領域，它定義了兩個或多個互動的個體之間交流的內容和結構，使之互相配合，共同達成某 種目的...』
UI妹兒駁：『請說人話！手指點擊手機，然後手機給個反饋就是交互』
是的，交互、交互，你得有互動，有溝通。 往大了說你要考慮用戶和產品的情感交流，往小 了說你得關注每一個點擊反饋。
那Adobe XD的用戶，你們和交互設計差的哪一步是在哪裡呢？
思考：整體用戶體驗和產品邏輯的把握 UI妹兒覺得，大家不缺大局意識。因為在XD上通過頁面間的跳轉可以規劃產品邏輯，常用這 個功能的朋友一定經常思考整體的用戶體驗（都是U妹心目中的牛人）
這麼複雜的邏輯都可以縷清，一定是經常加班熬夜的高級設計師
大局思考完了，手上功夫呢？是的，這就是我說的『你離交互設計差的是最後製作交互原型並 測試的一步』。Adobe XD沒有任何交互功能，每個頁面要怎麼讓他動起來，不讓他動起來你怎 么去做用戶測試呢？（不做用戶測試的你，可能離交互設計差了兩步）
落地：交互原型製作與用戶測試
怎麼讓自己的設計在設備上動起來？Adobe XD自己可能也意識到了這個短板，所以叫來了小兄弟ProtoPie。(我怎麼知道的？這裡有官博，有才的人請翻譯一下吧)
子曰：「工欲善其事必先利其器」 ProtoPie到底是一個什麼樣的工具。之前我已經專門寫過一篇 測評文(https://www.zcool.com.cn/article/ZNzIwNDY0.html)， 這篇多來點教程，幫大家把這最後 一小步邁出去。
工具：交互原型工具ProtoPie快速入門
第一步：安裝Adobe XD和ProtoPie
兩個軟體最大的好處就是都支持Mac和Windows，直接拋下載鏈接：
Adobe XD下載 (https://www.adobe.com/ca/products/xd.html)，
ProtoPie下載 (http://www.protopie.cn/with/adobe-xd-cc/?utm_source=UImeier&utm_medium=blog&utm_camp aign=protopie-3.7)
Adobe XD教程
Adobe XD | 官方博客
https://helpx.adobe.com/xd/view-all-tutorials.html
Adobe XD | 線框圖教程
https://webdesign.tutsplus.com/tutorials/how-to-start-wireframing-with-adobe-experience-design-xd--cms-31185
Adobe XD | 15個省時快捷方式
https://webdesign.tutsplus.com/articles/new-course-15-time-saving-shortcuts-for-adobe-xd--cms-30752
Adobe XD | 設計移動應用原型
http://www.creativebloq.com/how-to/prototype-a-mobile-app-with-adobe-xd
Adobe XD | 創建應用程序原型
https://webdesign.tutsplus.com/articles/new-course-prototyping-an-app-with-adobe-xd--cms-28663
Adobe XD | 登錄頁設計
https://webdesign.tutsplus.com/articles/new-course-landing-page-design-with-adobe-xd--cms-29765
Adobe XD | 圖標設計
https://webdesign.tutsplus.com/articles/new-course-icon-design-with-adobe-xd--cms-29890
Adobe XD | 設計雲圖標
https://design.tutsplus.com/tutorials/how-to-create-a-cloud-icon-in-adobe-xd--cms-30551?_ga=2.60315694.227842116.1530628480-1723858221.1530628479
Adobe XD | 如何提升遊戲體驗
https://theblog.adobe.com/video-game-designer-henry-faber-uses-adobe-xd-level-gameplay-experiences/
Adobe XD | 創建圖標
https://www.smashingmagazine.com/2016/07/how-to-create-icons-adobe-xd/
Adobe XD | 如何設計旅遊應用程序
https://www.xdguru.com/adobe-xd-tutorial-travel-app/
Adobe XD | 構建社交APP
https://theblog.adobe.com/everything-need-build-social-networking-app-adobe-xd/
Adobe XD | 設計電子商務應用程序
https://theblog.adobe.com/everything-need-build-app-e-commerce-appointment-booking-adobe-xd/
Adobe XD | 構建金融服務和加密貨幣APP
https://theblog.adobe.com/create-digital-currency-app-adobe-xd/
Adobe XD | Photoshop用戶如何過度到XD
https://theblog.adobe.com/everything-photoshop-user-needs-get-started-adobe-xd/
Adobe XD | 32個實例教程
http://www.foreverdansky.com/categories/adobe-xd-tutorials
Adobe XD | 設計網站
https://coursetro.com/posts/design/28/Website-Design-in-Adobe-XD-Tutorial
Adobe XD | 60秒學會
https://webdesign.tutsplus.com/tutorials/adobe-xd-in-60-seconds--cms-27440
Adobe XD | 創建移動Web原型
https://theblog.adobe.com/prototype-mobile-web-experience-adobe-xd/
Adobe XD | 遊戲場景設計
https://theblog.adobe.com/behind-scenes-max-madness-adobe-xd/
Adobe XD視頻教程
Adobe XD | 固定元素
https://youtu.be/2IAb96wvA5s
Adobe XD | 疊加支持
https://youtu.be/4cpz2OIHYvw
Adobe XD | 私人分享
https://youtu.be/QZx-2wjpCu4
Adobe XD | 圖像填充
https://youtu.be/_2dlaFOViHs
Adobe XD | 交換符號
https://youtu.be/MrLWr7_9-PI
Adobe XD | 粘貼到多個畫板
https://youtu.be/C50XgMcr6vs
Adobe XD | 原型密碼保護
https://youtu.be/vaGRuao21r0
Adobe XD | 處理多個頁面的Sketch文件
https://youtu.be/j2MNYoF9wgo
Adobe XD | 使用資產面板
https://theblog.adobe.com/working-assets-panel-adobe-xd/
Adobe XD | 利用Photoshop和Illustrator的強大功能
https://theblog.adobe.com/harnessing-power-photoshop-illustrator-adobe-xd/
Adobe XD | 設計網站
https://www.lynda.com/Adobe-Experience-Design-tutorials/Welcome/492709/530114-4.html
Adobe XD | 導入資產的方式
https://www.sitepoint.com/adobe-xd-tutorial-a-pain-free-way-to-import-assets/
Adobe XD | D設計移動註冊屏幕
https://www.xdguru.com/xd-tutorial-signup-screen/
Adobe XD | 設計ON / OFF開關菜單
https://www.xdguru.com/working-switch-tutorial/
Adobe XD | 簡單的iOS UI界面設計
https://www.youtube.com/watch?v=em5bes8mTM4
Adobe XD | 繪製10個圖標
https://www.youtube.com/watch?v=EtGSAuy_Vzc
Adobe XD | 教程教程
https://www.youtube.com/results?search_query=Adobe+XD
Adobe XD | 快速入門指南
https://blog.storyblocks.com/tutorials/a-quick-start-guide-to-adobe-xd-8-essential-tutorials-for-experience-design-cc/
Adobe XD | 設計進度條
http://www.prototypr.io/guide-page/design-progress-bar-adobe-xd-tutorial/
Adobe XD | 建立原型
https://www.linkedin.com/pulse/adobe-xd-tutorials-yaro-yaroslav-glodov
第二步: 導入Adobe XD素材到ProtoPie
導入的方法有兩種：從XD選擇導入到ProtoPie；從ProtoPie選擇Adobe XD導入。
這裡只說第一種，因為第二種的方法這裡 (http://www.protopie.cn/learn/import/#Adobe_XD_CC_Import)已經有了。
ProtoPie有中文界面，你的系統是中文系統就可以看見啦。
具體步驟是：
1. 打開要導入的Adobe XD 文件
2. 選擇『文件』菜單
3. 點擊『導出』(Export) - ProtoPie
4. 在導入設置中選擇要導入的畫板和導入尺寸
5. 素材瞬間導入 是的，沒有插件，層級和排版直接拿過來用，就是這麼簡單！
第三步：在ProtoPie製作交互原型
ProtoPie的交互功能很強大，頁面間的連接也可以，單頁面內的交互更可以。功能雖然多，但使用起來卻一點也不複雜。
請記住這個公式：
交互 = 觸發動作 + 反應動作 + 對象
然後按照下面的順序操作就可以了：
1. 添加交互的觸發動作
2. 添加反應動作
3. 分別指定觸發或反應動作的圖層對象
4. 通過調節時間軸或數值的輸入，細緻優化交互效果
上面是一個交互原型的製作過程，詳解如下：
頁 面 跳 轉 動 作 ： 選 中 要 點 擊 的 圖 層 ， 然 後 給 他 加 上 單 擊 動 作 ， 單 擊 之 後 要 跳 轉 ， 所 以 選 擇 轉 場 。 歐 了 滾 頁 動 作 ： 添 加 滾 頁 容 器 層 ， 把 需 要 滾 動 的 素 材 都 放 到 這 個 容 器 層 了 ， 又 歐 了
視頻沒有快進，所以，是的，30秒鐘一個簡單原型就完成了
第四步：預覽分享及用戶測試
用戶測試這裡我們再講一講。用原型做用戶測試時有幾個點提一下（嚴肅臉）
● 告訴用戶你測試的是原型而不是他們自己
● 不要用靜態的原型測試互動類設計
● 採訪5-6人即可
● 讓用戶把自己每一步操作用語言同時表述出來
● 每個想測試點單獨做成一個原型，不要把所有內容都放在一個原型里
UI妹兒不會告訴你，上面這些都是谷歌設計師寫的《設計衝刺》告訴我的。
言歸正傳，用戶測試之前，你可以把原型存到手機上。這時你需要一個叫ProtoPie Player的 App。蘋果安卓都可以，然後掃碼或者數據線連接，這樣電腦上的原型就可以保存到手機里， 方便隨時查看。
預覽和分享的方法：
電腦預覽，錄製MP4視頻並分享
Web端預覽，一鍵生成鏈接分享
移動端離線預覽，分享功能待開發
轉型：UI和交互通吃的全鏈路設計師
最後這部分寫給和我一樣時刻充滿危機感的設計師。 只關注界面美觀的設計師叫美工，只關注動態效果的叫動效設計師，而這個時代要求的(掙錢 多的)是用戶體驗設計師。
如果你有心追求高能力；高職位；勵志成為大牛，那交互體驗是你避不開的一關。慶幸的是， 現在市場上有很多優秀交互工具，如果你不知道從何提高自己的交互水平，不如從工具入手， 踏下心來學點技能，一身技藝在身不怕吃不飽飯。
我的微信公眾：UI妹兒
2018年，史上最全UI設計學習指南【設計師必備】
歡迎關注
#UI妹兒—越努力，越幸運#
推薦閱讀：
