孔子曰：‘所謂交互設(shè)計(jì)...’?
百度搶答：‘交互設(shè)計(jì)（英文Interaction Design, 縮寫IXD)，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè) 計(jì)領(lǐng)域准验，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)扔水，使之互相配合，共同達(dá)成某 種目的...’?
UI妹兒駁：‘請說人話曹步！手指點(diǎn)擊手機(jī)宪彩，然后手機(jī)給個(gè)反饋就是交互’ ?
是的，交互讲婚、交互尿孔，你得有互動(dòng)，有溝通筹麸。 往大了說你要考慮用戶和產(chǎn)品的情感交流纳猫，往小 了說你得關(guān)注每一個(gè)點(diǎn)擊反饋。 ?
那Adobe XD的用戶竹捉，你們和交互設(shè)計(jì)差的哪一步是在哪里呢芜辕？ ?
思考：整體用戶體驗(yàn)和產(chǎn)品邏輯的把握 UI妹兒覺得，大家不缺大局意識(shí)块差。因?yàn)樵赬D上通過頁面間的跳轉(zhuǎn)可以規(guī)劃產(chǎn)品邏輯侵续，常用這 個(gè)功能的朋友一定經(jīng)常思考整體的用戶體驗(yàn)（都是U妹心目中的牛人） ??
這么復(fù)雜的邏輯都可以縷清，一定是經(jīng)常加班熬夜的高級(jí)設(shè)計(jì)師 ?
大局思考完了憨闰，手上功夫呢状蜗？是的，這就是我說的‘你離交互設(shè)計(jì)差的是最后制作交互原型并 測試的一步’鹉动。Adobe XD沒有任何交互功能轧坎，每個(gè)頁面要怎么讓他動(dòng)起來，不讓他動(dòng)起來你怎 么去做用戶測試呢泽示？（不做用戶測試的你缸血，可能離交互設(shè)計(jì)差了兩步）?
落地：交互原型制作與用戶測試 ?
怎么讓自己的設(shè)計(jì)在設(shè)備上動(dòng)起來蜜氨？Adobe XD自己可能也意識(shí)到了這個(gè)短板，所以叫來了小兄弟ProtoPie捎泻。(我怎么知道的飒炎？這里有官博，有才的人請翻譯一下吧)? ??
子曰：“工欲善其事必先利其器” ?ProtoPie到底是一個(gè)什么樣的工具笆豁。之前我已經(jīng)專門寫過一篇 測評(píng)文(http://www.uisdc.com/protopie-prototype-tools)郎汪， 這篇多來點(diǎn)教程，幫大家把這最后 一小步邁出去闯狱。 ?
工具：交互原型工具ProtoPie快速入門?
第一步：安裝Adobe XD和ProtoPie
兩個(gè)軟件最大的好處就是都支持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個(gè)省時(shí)快捷方式?
https://webdesign.tutsplus.com/articles/new-course-15-time-saving-shortcuts-for-adobe-xd--cms-30752
Adobe XD?|?設(shè)計(jì)移動(dòng)應(yīng)用原型
http://www.creativebloq.com/how-to/prototype-a-mobile-app-with-adobe-xd
Adobe XD?|?創(chuàng)建應(yīng)用程序原型
https://webdesign.tutsplus.com/articles/new-course-prototyping-an-app-with-adobe-xd--cms-28663
Adobe XD?|?登錄頁設(shè)計(jì)
https://webdesign.tutsplus.com/articles/new-course-landing-page-design-with-adobe-xd--cms-29765
Adobe XD?|?圖標(biāo)設(shè)計(jì)
https://webdesign.tutsplus.com/articles/new-course-icon-design-with-adobe-xd--cms-29890
Adobe XD?| 設(shè)計(jì)云圖標(biāo)
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?|?如何提升游戲體驗(yàn)
https://theblog.adobe.com/video-game-designer-henry-faber-uses-adobe-xd-level-gameplay-experiences/
Adobe XD?|?創(chuàng)建圖標(biāo)
https://www.smashingmagazine.com/2016/07/how-to-create-icons-adobe-xd/
Adobe XD?|?如何設(shè)計(jì)旅游應(yīng)用程序
https://www.xdguru.com/adobe-xd-tutorial-travel-app/
Adobe XD?|?構(gòu)建社交APP
https://theblog.adobe.com/everything-need-build-social-networking-app-adobe-xd/
Adobe XD?| 設(shè)計(jì)電子商務(wù)應(yīng)用程序
https://theblog.adobe.com/everything-need-build-app-e-commerce-appointment-booking-adobe-xd/
Adobe XD?|?構(gòu)建金融服務(wù)和加密貨幣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個(gè)實(shí)例教程
http://www.foreverdansky.com/categories/adobe-xd-tutorials
Adobe XD?|?設(shè)計(jì)網(wǎng)站
https://coursetro.com/posts/design/28/Website-Design-in-Adobe-XD-Tutorial
Adobe XD?|?60秒學(xué)會(huì)
https://webdesign.tutsplus.com/tutorials/adobe-xd-in-60-seconds--cms-27440
Adobe XD?|?創(chuàng)建移動(dòng)Web原型
https://theblog.adobe.com/prototype-mobile-web-experience-adobe-xd/
Adobe XD?| 游戲場景設(shè)計(jì)
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?|?交換符號(hào)
https://youtu.be/MrLWr7_9-PI
Adobe XD?|?粘貼到多個(gè)畫板
https://youtu.be/C50XgMcr6vs
Adobe XD?|?原型密碼保護(hù)
https://youtu.be/vaGRuao21r0
Adobe XD?|?處理多個(gè)頁面的Sketch文件
https://youtu.be/j2MNYoF9wgo
Adobe XD?|?使用資產(chǎn)面板
https://theblog.adobe.com/working-assets-panel-adobe-xd/
Adobe XD?|?利用Photoshop和Illustrator的強(qiáng)大功能
https://theblog.adobe.com/harnessing-power-photoshop-illustrator-adobe-xd/
Adobe XD?|?設(shè)計(jì)網(wǎng)站
https://www.lynda.com/Adobe-Experience-Design-tutorials/Welcome/492709/530114-4.html
Adobe XD?|?導(dǎo)入資產(chǎn)的方式
https://www.sitepoint.com/adobe-xd-tutorial-a-pain-free-way-to-import-assets/
Adobe XD?|?D設(shè)計(jì)移動(dòng)注冊屏幕
https://www.xdguru.com/xd-tutorial-signup-screen/?
Adobe XD?| 設(shè)計(jì)ON / OFF開關(guān)菜單
https://www.xdguru.com/working-switch-tutorial/?
Adobe XD?|?簡單的iOS UI界面設(shè)計(jì)
https://www.youtube.com/watch?v=em5bes8mTM4?
Adobe XD?|?繪制10個(gè)圖標(biāo)
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?|?設(shè)計(jì)進(jìn)度條
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
第二步: 導(dǎo)入Adobe XD素材到ProtoPie?
導(dǎo)入的方法有兩種：從XD選擇導(dǎo)入到ProtoPie哄孤；從ProtoPie選擇Adobe XD導(dǎo)入耕驰。?
這里只說第一種，因?yàn)榈诙N的方法這里 (http://www.protopie.cn/learn/import/#Adobe_XD_CC_Import)已經(jīng)有了录豺。?
ProtoPie有中文界面朦肘，你的系統(tǒng)是中文系統(tǒng)就可以看見啦。
具體步驟是：?
1. 打開要導(dǎo)入的Adobe XD 文件
2. 選擇‘文件’菜單
3. 點(diǎn)擊‘導(dǎo)出’(Export) - ProtoPie
4. 在導(dǎo)入設(shè)置中選擇要導(dǎo)入的畫板和導(dǎo)入尺寸?
5. 素材瞬間導(dǎo)入 是的双饥，沒有插件媒抠，層級(jí)和排版直接拿過來用，就是這么簡單咏花！
第三步：在ProtoPie制作交互原型?
ProtoPie的交互功能很強(qiáng)大趴生，頁面間的連接也可以，單頁面內(nèi)的交互更可以昏翰。功能雖然多苍匆，但使用起來卻一點(diǎn)也不復(fù)雜。?
請記住這個(gè)公式：
交互 = 觸發(fā)動(dòng)作 + 反應(yīng)動(dòng)作 + 對象?
然后按照下面的順序操作就可以了： ?
1. 添加交互的觸發(fā)動(dòng)作
2. 添加反應(yīng)動(dòng)作
3. 分別指定觸發(fā)或反應(yīng)動(dòng)作的圖層對象
4. 通過調(diào)節(jié)時(shí)間軸或數(shù)值的輸入棚菊，細(xì)致優(yōu)化交互效果 ?
上面是一個(gè)交互原型的制作過程浸踩，詳解如下：?
頁 面 跳 轉(zhuǎn) 動(dòng) 作 ： 選 中 要 點(diǎn) 擊 的 圖 層 ， 然 后 給 他 加 上 單 擊 動(dòng) 作 统求， 單 擊 之 后 要 跳 轉(zhuǎn) 检碗， 所 以 選 擇 轉(zhuǎn) 場 。 歐 了 滾 頁 動(dòng) 作 ： 添 加 滾 頁 容 器 層 码邻， 把 需 要 滾 動(dòng) 的 素 材 都 放 到 這 個(gè) 容 器 層 了 折剃， 又 歐 了 ?
視頻沒有快進(jìn)，所以像屋，是的怕犁，30秒鐘一個(gè)簡單原型就完成了
第四步：預(yù)覽分享及用戶測試?
用戶測試這里我們再講一講。用原型做用戶測試時(shí)有幾個(gè)點(diǎn)提一下（嚴(yán)肅臉）?
● 告訴用戶你測試的是原型而不是他們自己
● 不要用靜態(tài)的原型測試互動(dòng)類設(shè)計(jì)
● 采訪5-6人即可
● 讓用戶把自己每一步操作用語言同時(shí)表述出來?
● 每個(gè)想測試點(diǎn)單獨(dú)做成一個(gè)原型，不要把所有內(nèi)容都放在一個(gè)原型里?
UI妹兒不會(huì)告訴你奏甫，上面這些都是谷歌設(shè)計(jì)師寫的《設(shè)計(jì)沖刺》告訴我的戈轿。?
言歸正傳，用戶測試之前扶檐，你可以把原型存到手機(jī)上凶杖。這時(shí)你需要一個(gè)叫ProtoPie Player的 App胁艰。蘋果安卓都可以款筑，然后掃碼或者數(shù)據(jù)線連接，這樣電腦上的原型就可以保存到手機(jī)里腾么， 方便隨時(shí)查看奈梳。 ?
預(yù)覽和分享的方法：
電腦預(yù)覽，錄制MP4視頻并分享?
Web端預(yù)覽解虱，一鍵生成鏈接分享?
移動(dòng)端離線預(yù)覽攘须，分享功能待開發(fā)??
轉(zhuǎn)型：UI和交互通吃的全鏈路設(shè)計(jì)師
最后這部分寫給和我一樣時(shí)刻充滿危機(jī)感的設(shè)計(jì)師。 只關(guān)注界面美觀的設(shè)計(jì)師叫美工殴泰，只關(guān)注動(dòng)態(tài)效果的叫動(dòng)效設(shè)計(jì)師于宙，而這個(gè)時(shí)代要求的(掙錢 多的)是用戶體驗(yàn)設(shè)計(jì)師。
如果你有心追求高能力悍汛；高職位捞魁；勵(lì)志成為大牛，那交互體驗(yàn)是你避不開的一關(guān)离咐。慶幸的是谱俭， 現(xiàn)在市場上有很多優(yōu)秀交互工具，如果你不知道從何提高自己的交互水平宵蛀，不如從工具入手昆著， 踏下心來學(xué)點(diǎn)技能，一身技藝在身不怕吃不飽飯术陶。
