xd免费组件（写给AdobeXD用户你离交互设计师仅差一步）

孔子曰：‘所谓交互设计...’

百度抢答：‘交互设计（英文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妹儿—越努力，越幸运

,