上传QQ登陆登录注册
当前位置:首页 > 文章 > app >

原型交互设计Principle与Proto的具体操作小白教程

发布时间:2017-10-12 来源:横走网 浏览: 关键词:APP设计资源站网页设计师加油站Principle操作教

Principle是近年来很热门的一款原型软件,最近工作需要,也就是看了一下官网的几个视频教程,然后就可以折腾出可以使用的原型。

总的来说,Principle具备了上手简单,制作高效等特点,完胜其他原型软件。其他网友还说Principle可能是目前制作可交互Demo最容易上手、综合体验最棒的软件了。

当然,之前也介绍了Mac平台交互动效设计神器—Principle演示

Principle的实现原理和其他有些不同,比如说Proto。

Proto.io是一个专用的手机原型开发平台——可以构建和部署全交互式的移动程序的原型,并且可以模拟出相似的成品。它可以运行在大多数的浏览器中,并提供了3个重要的接口:dashboard、编辑器以及播放器。

Proto的界面如下:

proto原型设计

proto原型动效设计的官网:https://proto.io/

之前详细介绍了ProtoPie是一款简易高端的APP原型设计工具和APP交互原型设计工具:protopie的优缺点分析

下面就是重点阐述原型交互设计软件Principle与Proto的具体操作区别:

Principle是把动效分解成几个状态,然后把几个状态串联起来,至于中间是怎么变,我可以不关心,也可以调整一下。

而Proto是把动效分解为一个初始状态和变化过程,给一个初始状态,然后我再定义怎么变化,然后把过程演示一遍。

怎么说呢?

Proto的方式更加使用者的直觉,但是做起来确实很复杂,Principle的原理思考一下也能理解,而且制作起来更加简单。这么讲可能有些抽象,举个例子吧。

804591-dcd70c1168ccc2c9

Principle与 Proto交互动效原理演示

如图上所示,左边有三个小秋A、B、C,他们会变化到右边的状态。

Proto是这么做的:

A:初始状态如左图,向右移动100px,得到右图;

B:初始状态如左图,半径扩大两倍,得到右图;

C:初始状态如左图,左图是一个圆角直径等于边长的圆角矩形,圆角逐渐缩小到0,得到右图。

在Proto里,你就需要定义好这个过程。

而在Principle,你就直接把这两个状态丢进入,然后告诉Priciple,我这个动效就是从左图到右图,名字我都给你对应好了,右图的A、B、C各自对应左图的A、B、C,你自己去变吧。然后Principle就会自动算一下,然后把过程自动展示出来,当然,这个过程会有一些参数可以调整。

讲完Principle的原理之后,然后结合官网给出的几个demo,基本上就可以做出一些可以用的原型了。

下面是交互设计师(妖叶秋)在使用过程中的几个小建议给大家:

1、因为Principle是MAC电脑上的交互原型设计神器,必须配合sketch来使用

principle的界面和sketch界面很相似,这也似乎预示了他们之间的关系。

总而言之,principle配合sketch使用简直如鱼得水。

principle支持直接从sketch导入artboard,而且导入之后,所有的图层结构都还完整保留。这一点省去了很多的麻烦,毕竟没什么能比“一键XXX”更省力了。

2、所有的修改都在sketch完成

这一点是基于上一点来讲的,从sketch导入的artboard会自动覆盖掉旧的artboard,这一点保证了这一条建议的可行性。其次就是,sketch确实比principle的编辑功能强大很多。最后有一点,在principle做的修改无法导出回到sketch。所以如果在principle修改,那么其他地方如果需要用到的话,都还要重新再做一遍。

3、配合rename it插件

前面将原理的时候讲过,principle是根据名称去对应的。但是在平常做界面的时候,肯定会有很多的编组是重名的,甚至于图层也是重名的。如果直接使用就会发现动效变得很酷炫,各种乱飞。刚开始做的时候,我都要一个个定位到出问题的图层,然后逐一修改。直到我发现了sketch的rename it插件。通过对编组(图层)加上编号,比如最外一层加上1~100,编号为1的编组里面的一层加上1.1~1.100,以此类推,这样可以保证编组(图层)命名不会重复。可以有效解决动效乱飞的问题。

4、用Principle去处理关键流程

正如前面所说的,principle是通过状态来定义动效的,理论上每一种变化都要占据一个artboard。所以随着流程的增加,状态数会呈几何式增长。而且principle的artboard都是成一行排列的,这样其实到最后自己也会乱掉。所以就建议,只用principle区处理关键流程,而忽略一些不必要的小流程。

以上四点小建议对刚开始使用交互设计软件Principle的同学来说,是非常有用的。值得一看。

责任编辑:横走网
共有人阅读,期待你的评论!评论
app
原创
经验
资讯
教程
理论
创业
app
欣赏
作品
Copyright ©2007-2017 横走网 hengzou.com All Rights Reversed.  京ICP备13052372号