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

百度抢答：‘交互设计（英文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的文件。

来源猿来如此呀，更多资讯可点击下面链接进行了解