xd免費組件（寫給AdobeXD用戶你離互動設計師僅差一步）

2023-04-14 20:34:59

孔子曰：『所謂互動設計...』

百度搶答：『互動設計（英文Interaction Design, 縮寫IXD)，是定義、設計人造系統的行為的設 計領域，它定義了兩個或多個互動的個體之間交流的內容和結構，使之互相配合，共同達成某 種目的...』

UI妹兒駁：『請說人話！手指點擊手機，然後手機給個反饋就是交互』

是的，交互、交互，你得有互動，有溝通。 往大了說你要考慮用戶和產品的情感交流，往小 了說你得關注每一個點擊反饋。

那Adobe XD的用戶，你們和互動設計差的哪一步是在哪裡呢？

思考：整體用戶體驗和產品邏輯的把握 UI妹兒覺得，大家不缺大局意識。因為在XD上通過頁面間的跳轉可以規劃產品邏輯，常用這 個功能的朋友一定經常思考整體的用戶體驗（都是U妹心目中的牛人）

這麼複雜的邏輯都可以縷清，一定是經常加班熬夜的高級設計師

大局思考完了，手上功夫呢？是的，這就是我說的『你離互動設計差的是最後製作交互原型並 測試的一步』。Adobe XD沒有任何交互功能，每個頁面要怎麼讓他動起來，不讓他動起來你怎 麼去做用戶測試呢？（不做用戶測試的你，可能離互動設計差了兩步）

落地：交互原型製作與用戶測試

怎麼讓自己的設計在設備上動起來？Adobe XD自己可能也意識到了這個短板，所以叫來了小兄弟ProtoPie。(我怎麼知道的？這裡有官博，有才的人請翻譯一下吧)

子曰：「工欲善其事必先利其器」 ProtoPie到底是一個什麼樣的工具。之前我已經專門寫過一篇 測評文(http://www.uisdc.com/protopie-prototype-tools)， 這篇多來點教程，幫大家把這最後 一小步邁出去。

工具：交互原型工具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和交互通吃的全鏈路設計師

最後這部分寫給和我一樣時刻充滿危機感的設計師。 只關注界面美觀的設計師叫美工，只關注動態效果的叫動效設計師，而這個時代要求的(掙錢 多的)是用戶體驗設計師。

如果你有心追求高能力；高職位；勵志成為大牛，那交互體驗是你避不開的一關。慶幸的是， 現在市場上有很多優秀交互工具，如果你不知道從何提高自己的交互水平，不如從工具入手， 踏下心來學點技能，一身技藝在身不怕吃不飽飯。

請私信我回復「666」，為U妹打Call~，還有更多驚喜哦~

.............................................................

UI妹兒—越努力，越幸運