子曰：‘所謂交互設計...’

百度搶答：‘交互設計（英文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妹兒—越努力，越幸運

習UI設計的小伙伴們應該都知道Adobe XD，但是它具體是做什么的，又有什么作用，你又是否真的清楚呢？

使用 Adobe XD 中快速直觀、即取即用的工具，設計人員可以投入到設計工作之中，進而重塑創造體驗的方式。用語音為原型增添活力。自動調整元素大小，使之適應不同的屏幕。無需時間軸即可在畫板之間創建精美動畫。為您提供設計新穎 UX 所需的一切 - 僅在 XD。

關于Adobe XD

Adobe XD 是一款功能強大的原型創建工具

利用該工具，您可以更快地將您的設計投入開發。讓您的項目保持有序，消滅拖慢工作流程的重復性任務和單調任務。快速地與開發團隊共享詳細的設計規范。

用于 UI 和 UX 設計的快速、靈活的原型創建工具。

借助用于構建應用程序、網站等內容的一體式 UX/UI 設計工具，快速地將創意轉變為原型并進行開發。創建、構建原型、共享，并向開發團隊發送設計規范，從而快速地征集反饋并進行迭代。

適用于任何設備的直觀原型創建工具。

如今，設備種類繁多，確保您的應用程序或網站在大屏幕和小屏幕上均具備同樣出色的外觀非常重要。借助涵蓋多種常見屏幕大小的預定義畫板，以及創造自定義大小的功能，您可以確保您的設計在桌面、平板電腦和手機上都同樣地光彩奪目

以低保真或高保真形式進行設計。

使用低保真草圖開發設計，并通過添加圖像和副本，將其轉變為最終階段的高保真設計。以適合您的工作流程的精細程度進行構建和預覽。

快速地將線框轉化為實時原型。

通過在畫板和對象之間拉線，在設計中添加交互關系。利用連線將原型組合起來，隨時通過單擊“預覽”來觀看原型并做出微調。分享原型的鏈接并征集反饋，并通過 USB 連接移動設備查看實時預覽（僅限 Mac）。

在任何設備上預覽您的設計。

借助 XD，您可以在 Web、iOS 或 Android 上預覽您的設計和原型。做出更改，并立即查看實際效果。錄制并共享視頻，突出體現用戶體驗并征集反饋（僅限 Mac）。根據反饋快速地對設計進行迭代，并將包含流程、度量值和樣式的設計規范提交給開發人員，以供生產。

讓協作變得更簡單。

使用 Adobe Creative Cloud，您可以輕松地共享設計。共享庫資源，并從團隊成員那里征集反饋和評論。通過設計規范（測試版）鏈接，將流程、度量值和樣式發送給開發人員。進行迭代和修飾，然后更新您的原型并實時預覽更改。

重新定義體驗設計。

Adobe XD 專為當今的 UX/UI 設計師而構建，其中包含的直觀工具可消除速度障礙，使您能夠輕松自如地完成日常任務。學習基礎知識，并開始使用免費的 UI 套件 - 其中包含模板、組件以及創造令人驚嘆的用戶體驗所需的一切。

設計，創建原型，共享。盡在 XD。

只需單擊一下，即可將靜態線框切換為交互式原型。對設計做出更改，然后原型便會自動更新 - 無需進行同步。在 iOS 和 Android 設備上預覽帶有過渡效果的原型，然后與團隊共享，快速征集反饋。

Mac 與 Win，同樣精彩。

XD 針對 Mac 和 Windows 進行了原生設計，并且是 Creative Cloud 的一部分，所以無論使用哪種平臺，您均可獲取相同的頂尖性能與精確度，以及與 Photoshop 和 Illustrator 等應用程序的順暢集成。

從 Photoshop 到原型 - 盡在 XD。

現在，只需在 XD 中打開 Photoshop 和 Sketch 文件，即可將這些文件導入 XD。您的設計會自動轉換為 XD 文件，所以您可以快速地構建原型。

主要功能

設計與原型制作：用戶能夠使用XD制作框架圖，創建保真度可高可低的視覺設計，定義畫板之間的導航流程和轉換，預覽原型并導出資源供制作使用。

重新定義現代化工作流程：定義重復元素、遮蓋圖像、管理色彩、風格與符號，以及規范圖層的操作都比以往更加直觀和迅速。

集成現有工作流程：用戶可以導入筆畫和圖像效果，更快速的將Photoshop文件導入Adobe XD，此外，在導入Sketch文件時多次轉化的保真度也有所提升。

卓越的質量與性能：XD的兩大特性就是速度與穩定性——從瞬間啟動到光速縮放和平移（即使一個項目中包含數百個畫板），在Windows和Mac平臺都具有穩定性。

跨平臺原型設計：用戶可以在Mac或Windows 10系統中進行設計，并在瀏覽器中預覽原型。

1000萬美元基金賦能創意創新

為了給合作伙伴、開發者和創業公司這樣充滿活力的生態系統提供支持，Adobe今日還宣布在全球范圍內設立1000萬美元的設計基金，幫助設計師和開發者利用Adobe XD作為一種支持工具插件和第三方工具與服務集成的平臺，在體驗設計的世界里不斷創新。這筆基金將以獎金和股權投資的方式分配，展現出Adobe在中國設計界的持續投資與合作，使開發者和設計師能夠充分利用Adobe XD，與全球數百萬創意專業人士和頂尖品牌廣泛使用的Creative Cloud工作流程相整合。

與獲取渠道

XD CC簡體中文版起步計劃從即日起向中國用戶免費提供。Adobe CC用戶可以從Creative Cloud桌面應用上直接下載XD；新用戶可以從http://adobe.com/cn/products/xd.html下載。正在試用Adobe XD的用戶需要通過Creative Cloud桌面應用或http://adobe.com/cn/products/xd.html對平臺進行更新后激活使用。

交互原型利器 Adobe XD終于支持Windows10啦！”

大家都知道，Mac擁有諸多非常優秀的交互原型軟件，比如為界面設計師而生的sketch，還有非常優雅的交互原型工具，Principle和Flinto，然而對于Windows用戶來說，就很尷尬啦，雖然有axure和pixate，但是相對比Principle和Flinto來說，略顯的笨重些，不夠優雅，Adobe公司為了滿足用戶體驗設計師的需求，推出了Adobe Experience Design CC ，這款利器工具的推出，從未來來看，完全可以媲美Principle和Flinto，如果給他個評價的話，“簡單優雅，力量不凡”毫不為過，對于新手來說，基本上沒有什么學習成本。

win版本的Adobe XD1.0版本的功能還沒有mac那么強大，不過接下來也會完美的整合Photoshop和Illustrator設計稿，可以幫助UX設計者快速設計和建立手機App和網站的原型，包含線框稿、視覺設計、互動設計、原型制作、預覽和共享等功能。

當然啦，工具是優雅的，設計師的想象力是豐富的，可以很明確的說，Adobe XD在線框稿、視覺設計、互動設計、原型制作、預覽和共享等方面都會非常的方便，在單一產品中提供UX設計者一套基本的工具，來提升設計者的生產力，再補充下，從Photoshop、Illustrator和Sketch源文件中，用戶可以直接在XD中復制和貼上Photoshop CC和Illustrator CC的文件。

來源猿來如此呀，更多資訊可點擊下面鏈接進行了解