恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
写给Adobe XD用户:你离交互设计师仅差一步(附教程
0.0°
2019-05-14 原创文章 教程 举报 54522 153 58 3

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

百度抢答:‘交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设 计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某 种目的...’ 


严哥驳:‘请说人话!手指点击手机,然后手机给个反馈就是交互’  

Image title


是的,交互、交互,你得有互动,有沟通。 往大了说你要考虑用户和产品的情感交流,往小 了说你得关注每一个点击反馈。  


那Adobe XD的用户,你们和交互设计差的哪一步是在哪里呢?  


思考:整体用户体验和产品逻辑的把握 严哥觉得,大家不缺大局意识。因为在XD上通过页面间的跳转可以规划产品逻辑,常用这 个功能的朋友一定经常思考整体的用户体验(都是严哥心目中的牛人)   


这么复杂的逻辑都可以缕清,一定是经常加班熬夜的高级设计师  

Image title


大局思考完了,手上功夫呢?是的,这就是我说的‘你离交互设计差的是最后制作交互原型并 测试的一步’。Adobe XD没有任何交互功能,每个页面要怎么让他动起来,不让他动起来你怎 么去做用户测试呢?(不做用户测试的你,可能离交互设计差了两步) 


落地:交互原型制作与用户测试  


怎么让自己的设计在设备上动起来?Adobe XD自己可能也意识到了这个短板,所以叫来了小兄弟ProtoPie。(我怎么知道的?这里有官博,有才的人请翻译一下吧)    


子曰:“工欲善其事必先利其器”  ProtoPie到底是一个什么样的工具。之前我已经专门写过一篇 测评文(https://www.ui.cn/detail/298748.html), 这篇多来点教程,帮大家把这最后 一小步迈出去。  


工具:交互原型工具ProtoPie快速入门 


第一步:安装Adobe XD和ProtoPie

Image title

Image title


两个软件最大的好处就是都支持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导入。 

Image title


这里只说第一种,因为第二种的方法这里 (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秒钟一个简单原型就完成了

   

第四步:预览分享及用户测试 


Image title


用户测试这里我们再讲一讲。用原型做用户测试时有几个点提一下(严肃脸) 


● 告诉用户你测试的是原型而不是他们自己

● 不要用静态的原型测试互动类设计

● 采访5-6人即可

● 让用户把自己每一步操作用语言同时表述出来 

● 每个想测试点单独做成一个原型,不要把所有内容都放在一个原型里 


严哥不会告诉你,上面这些都是谷歌设计师写的《设计冲刺》告诉我的。 

 

言归正传,用户测试之前,你可以把原型存到手机上。这时你需要一个叫ProtoPie Player的 App。苹果安卓都可以,然后扫码或者数据线连接,这样电脑上的原型就可以保存到手机里, 方便随时查看。  

 

预览和分享的方法:


电脑预览,录制MP4视频并分享 

Web端预览,一键生成链接分享 

移动端离线预览,分享功能待开发  


转型:UI和交互通吃的全链路设计师


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

Image title

 

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


ProtoPie 永久激活码获取

微信扫下方二维码

Image title



Image title


微信公众号:UI严选

更新:2019-05-14

收藏

153人已收藏

小小方方

微信公众号:UI严选

  • 94

    作品

  • 7241

    粉丝

  • 20

    关注

  • 动效落地,方案怎么选?
  • 告别手动!如何三分钟快速搞定AE动画,附插件安装包
  • 潮流、潮牌、手撕褶皱、抽象几何图形、潮流样机素材,请注意查收
  • AE避坑 | AE动效落地时常见问题解析和注意事项

    猜你喜欢

      2019-05-14 原创文章 教程 举报 54522 153 58 3

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

      0.0°

      你确定要举报写给Adobe XD用户:你离交互设计师仅差一步(附教程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年11月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      58
      153
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录