写给Adobe XD用户:你离交互设计师仅差一步(附XD学习教程)

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

百度抢答:‘交互设计(英文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和交互通吃的全链路设计师

最后这部分写给和我一样时刻充满危机感的设计师。 只关注界面美观的设计师叫美工,只关注动态效果的叫动效设计师,而这个时代要求的(挣钱 多的)是用户体验设计师。


如果你有心追求高能力;高职位;励志成为大牛,那交互体验是你避不开的一关。庆幸的是, 现在市场上有很多优秀交互工具,如果你不知道从何提高自己的交互水平,不如从工具入手, 踏下心来学点技能,一身技艺在身不怕吃不饱饭。

推荐阅读更多精彩内容