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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
ProtoPie 动效原型进阶之路
0.0°
2019-08-09 原创文章 经验/观点 举报 2919 33 8 4

Image title


我们在日常的工作当中,经常需要向Leader,业务方、Boss或者甲方提交设计方案,而你的方案是否能够打动他们,从而获得宝贵的开发资源和排期,取决于很多情况,其中之一,很重要的就是你的DEMO是否能够给人一种身临其境的体验感受。 


而作为视觉设计师、交互设计师、产品经理,限于我们的专业能力并非开发,所以怎样在节约团队开发资源的情况下,独立完成创意的展示,成为了一项核心诉求。


Image title


By Dribbble


过去我们会使用AE(Adobe After Effects)进行动效的设计与展示,但它是不可交互的,所以查看者只能静静看着你精心设计的一系列动效,无法参与到整个行为流程中。


macOS中提供的Keynote可以实现简单的交互动效,但那相比我们目前形成习惯的诸多各式各样的动效中呢,简直不值一提。


所以近年来涌现诸多专门用来设计制作交互动效的工具,早一些的有Axure、Pixate,后来的Origami、Hype、Flinto、Principle等等。这些软件相互之间各有优劣,不相伯仲。它们都有一个共同的特性,那就是为了解决创意的设计与展示。笔者作为一名视觉设计师,尝试过Pixate、Flinto、Principle 这几款工具,但都不尽如人意。比如很多想要的效果实现不了,或者编辑起来很麻烦,抑或DEMO体验效果差强人意。


2017年初,由曾经供职过Naver、Google的Tony Kim担任CEO进行开发的交互动效软件 ProtoPie 正式发布,它从开发之初,就明确了自身的交互逻辑思想。


Image title


作为一款可交互式的原型动效设计软件,相比于其他软件,ProtoPie有着自身的几个优势:支持更多触发条件,诸如 3D、陀螺仪、声音、震动、设备间交互、变量等等。同时,自带原生中文,支持 macOS、Windows 双平台,这些都是不可多得的。


Image title


从界面中我们可以看到,ProtoPie的界面相对还比较简单明了,包括对象+触发+反应(行为)都可以在界面中一目了然。


我们推出了一门课程:《ProtoPie动效原型进阶之路》,全课共12节,总课时1小时40分。通过完整的案例由浅入深,循序渐进地学习ProtoPie,无论你是视觉设计师、交互设计师、产品经理,通过以下课程,都可以完成ProtoPie动效设计的入门学习:


1.ProtoPie 介绍、界面与基本操作


2. 与Sketch协作


3. 滚页与滑页


4.对象坐标与热区范围



通过上面4节入门课程,你已经掌握了ProtoPie的基本操作、与Sketch协作时一些注意事项、可以动手创建滚动区域或滑动等简单的交互动效、以及理解了对象坐标与热区范围这一ProtoPie中特有的功能。


Image title


在完成了上面的入门课程之后,即可进行接下来的进阶课程:


5. 条件判断


6. 转场与自动加载 


7. 播放器与变量 


8. 文本输入与表达式 


9. 照相机 


10. 联动


11. 范围 


12. 监听 


Image title


通过条件判断,制作一个可切换的Switch开关。


Image title


通过自动加载,制作元素的自动展示。


Image title


通过变量的设置,制作跟随时间变化的播放秒数。


Image title


甚至可以调用你的真实相机进行设计


在完成了入门与进阶的学习后,相信你已经可以将脑海中天马行空的创意制作成真实可体验的DEMO了,还等什么,快动手吧。


为了方便同学们练习,我们将教程中用到的Sketch源文件和ProtoPie源文件上传到了腾讯微云,地址是:


Sketch源文件 https://share.weiyun.com/5S556ll

ProtoPie源文件 https://share.weiyun.com/5EkkbpW


在学习的过程中,如果大家有什么问题或者想法,欢迎在下方留言让我们知道,最后,预祝大家工作顺利,诸事如意 :)

更新:2019-08-09

收藏

33人已收藏

腾讯ISUX

It iS Ultramodern eXperience

  • 219

    作品

  • 1.9w

    粉丝

  • 4

    关注

  • 那些欲罢不能的实用工具
  • QQ亲密关系 | 从工具到情感再到认同
  • 与同为毕业生的你,说说我的故事
  • QQ红包 | 趣味新玩法是怎么设计的
相关标签

    猜你喜欢

      2019-08-09 原创文章 经验/观点 举报 2919 33 8 4

      ProtoPie 动效原型进阶之路

      0.0°

      你确定要举报ProtoPie 动效原型进阶之路

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年08月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      33
      4

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

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

      登录

      手机号

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

      登录
      第三方账号登录