孔子曰：‘所谓交互设计...’
百度抢答：‘交互设计（英文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和交互通吃的全链路设计师
最后这部分写给和我一样时刻充满危机感的设计师。 只关注界面美观的设计师叫美工，只关注动态效果的叫动效设计师，而这个时代要求的(挣钱 多的)是用户体验设计师。
如果你有心追求高能力；高职位；励志成为大牛，那交互体验是你避不开的一关。庆幸的是， 现在市场上有很多优秀交互工具，如果你不知道从何提高自己的交互水平，不如从工具入手， 踏下心来学点技能，一身技艺在身不怕吃不饱饭。