专栏首页腾讯社交用户体验设计ProtoPie 动效原型进阶之路

ProtoPie 动效原型进阶之路

腾讯ISUX

isux.tencent.com

社交用户体验设计

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

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

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 正式发布,它从开发之初,就明确了自身的交互逻辑思想。

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

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

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

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

2.与Sketch协作

3.滚页与滑页

4.对象坐标与热区范围

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

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

5. 条件判断

6. 转场与自动加载

7. 播放器与变量

8.文本输入与表达式

9.照相机

10. 联动

11.范围

12.监听

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

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

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

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

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

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

Sketch源文件

https://share.weiyun.com/5S556ll

ProtoPie源文件

https://share.weiyun.com/5EkkbpW

本次课程视频和Sketch源文件、ProtoPie源文件都可通过后台回复“动效”直接获取。

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


PS:ISUX 开通粉丝QQ群啦!

欢迎各大设计师加入和我们一起聊设计~

添加QQ群:764345161

或长按以下二维码

以下ISUX文章,你可能也感兴趣

QQ20周年 | 玩转像素复古

社交垂直探索 | QQ截图全新设计

社交互动创新 | 从点赞到击掌

2019 - 2020 设计趋势 · IP形象篇

2019-2020 设计趋势·图形篇


感谢阅读,以上内容均由腾讯ISUX团队原创设计,以及腾讯ISUX版权所有,转载请注明出处,违者必究,谢谢您的合作。注明出处格式:

文章来自公众号:

腾讯ISUX 

 ( https://isux.tencent.com/articles/ProtoPie-teach)

↓点击前往 ISUX 官网

本文分享自微信公众号 - 腾讯ISUX(tencent_isux)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 踏一池春水,等天朗气清

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? 《看见》 二零四月  杂陈五味 孤伞难步  更添思愁 静照雨面  拣一春叶 看...

    腾讯ISUX
  • Qzone Brand Renewal

    腾讯ISUX
  • H5玩法知多少

    腾讯ISUX
  • 苹果审核必看期货App 3.2.1被拒及其他23种原因总结

    近年金融行业百花齐放,缺乏监管,正因如此随着政策新规的到来,从17年9月份开始金融类(贷款、理财)上架开始变的异常困难,其中受政策影响的还有彩票类应用; 对于A...

    jiang chen
  • 灵长类胚胎体外培养的“14天规则”是否应该修改?

    2019年10月31日,中科院动物研究所李磊、王红梅和中科院昆明动物研究所郑萍为共同通讯,以及昆明理工大学牛昱宇、季维智、谭韬和SALK研究所Juan Carl...

    生信宝典
  • Sqlite3详细解读

    "代码下载:SQLite3_2013_0402详细版.zip" http://vdisk.weibo.com/s/Gb9Qi

    py3study
  • 初学者玩好Linux的建议

    我把之前的一些学习经验和方法跟大家分享下,希望对大家有所帮助: 一、玩好Linux一定要经常折腾,说白了,就是动手能力一定要强。 我初学Linux那...

    wangxl
  • 2015年IT决策中国CIO生态调研之云计算

    2015年移动信息化研究中心再出重磅《2015年IT决策中国CIO生态调研》,项目从2014年10月份开始启动到2015年9月份,历时一年共收集调研问卷610份...

    人称T客
  • Openresty最佳案例 | 第7篇: 模块开发、OpenResty连接Redis

    Lua模块开发 在实际的开发过程中,不可能把所有的lua代码写在一个lua文件中,通常的做法将特定功能的放在一个lua文件中,即用lua模块开发。在lualib...

    方志朋
  • 案例|创新党建工作,小程序助力新时代智慧党建

    习近平总书记指出,互联网是我们面临的“最大变量”,如果党过不了互联网这一关,就过不了长期执政这一关。因此,新时代党建如何创新是每个组织都需要思考的问题。

    微盛企微管家

扫码关注云+社区

领取腾讯云代金券