关于使用Principle的一些小建议

在日常的设计工作中,难免会遇到一些制作可交互原型的工作。可交互的原型对比于静态原型来说,直观是最大的优点。其次,在研究一些动效的时候,直接调好参数给工程师,会比口述来得更加简单粗暴,效率更好。现在的原型软件有很多,我最早接触的是Proto,后面也玩过Pixate、墨刀,总的来说不是功能比较粗陋就是功能太强大,以至于入门不易,做个Demo也同样不易。Principle是近年来很热门的一款原型软件,最近工作需要,也就是看了一下官网的几个教程,然后就可以折腾出可以使用的原型。总的来说,Principle具备了上手简单,制作高效等特点,完胜其他原型软件。

Principle的实现原理和其他有些不同,比如说Proto(很久没用了,可能记忆会有些出入)。Principle是把动效分解成几个状态,然后把几个状态串联起来,至于中间是怎么变,我可以不关心,也可以调整一下。而Proto是把动效分解为一个初始状态和变化过程,给一个初始状态,然后我再定义怎么变化,然后把过程演示一遍。

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

1477617958-8298-804591-dcd70c1168ccc2c9

动效原理演示

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

Proto是这么做的:

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

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

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

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

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

讲完Principle的原理之后,然后结合官网给出的几个demo,基本上就可以做出一些可以用的原型了。下面是在使用过程中的几个小建议。

1、配合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区处理关键流程,而忽略一些不必要的小流程。

零零总总大概就是这四条,虽然短小浅显,但是都是我认为非常有用的建议,可以参考一下~

文/妖叶秋
原文链接:http://www.jianshu.com/p/8fd82c1a059f
著作权归作者所有,转载请联系作者获得授权

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/18457/

(0)
TinadminTinadmin
上一篇 2016-10-28 09:23
下一篇 2016-10-28 10:04

相关推荐

  • [官方]mockplus视频教程:10分钟玩转mockplus

    官方出品教程,10分钟快速了解一下mockplus软件操作基础。 视频免费播放地址

    2015-06-30
  • [Mockplus教程]创建

    新建页面可以使用三种方式来实现: 1 点击右边页面树顶部的“+”按钮; 2 在右边页面面板空白处右击,在弹出菜单中选择“新建页面”; 3 直接使用快捷键Ctrl+Enter(MAC系统为Command+Enter)。 下面为三种方式新建页面…

    Mockplus 2015-09-18
  • Axure元素库 - icons_64x64 for Axure.rplib and PSD

      Hi,下载地址在这里!记得关注哦

    2015-07-21
  • Axure rp 6.5的软件安装、汉化与注册

    第一步:从网络上下载axure安装程序到本地电脑、汉化语言包、注册码,双击安装程序,如图:

    2015-01-01
  • JUSTINMIND权威指南:开篇-准备工作

    ​ 获取Justinmind安装包 Justinmind 分为免费版本、收费版本(30天试用)Pro版本。 官网提供免费版本可以下载,Pro收费版本不激活可以试用30天,30天过后会限制使用一些高级的功能组件,例如:动态面板(Dynamic Pan…

    2015-08-04
  • Axure RP 9 最新版汉化包下载-小楼

    【汉化包下载】Axure RP 9测试版汉化包V1.8版 For 3623下载 【使用方法】 1、将汉化压缩包解压缩。 2、将解压缩后的lang文件夹和dll文件全部复制粘贴到软件安装根目录下。 【Windows系统汉化路径】 以Win7-64位系统…

    Axure 2018-09-18
  • Axure 7.0清空输入框效果

    本文中介绍这种带清空键的搜索框的设计思路和制作方法,供大家参考。 我们先来分析一下这种搜索框的交互逻辑。搜索框在获得和失去焦点时,清空键都将被隐藏;在搜索框中输入文字时,清空键将被显示,点击清空键,搜…

    2015-06-29
  • 干货:关于响应式布局

    【导读】响应式布局是在如今屏幕尺寸越来越多样化趋势下的解决之道,但是该如何去做响应式布局呢? 在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型: 布局类型

    2015-03-19
  • Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿

    弹出面板,是我们经常使用的组件。今天,就来说说关闭弹出面板的事儿。 内容相对不那么好玩,但是挺重要,所以你需要了解。耐心阅读下,你发现并不复杂,同样是简单的。 一、自动关闭 默认情况下,弹出面板弹出后,…

    2016-07-07
  • 苹果用户怎么部署Axure环境-imac&axure

    iMac安装各种必备软件,当然少不了Axure这个吃饭的软件 下载地址在页面底部 ★ 汉化方法: 首先退出正在运行中的 Axure (如果您正在使用). 将 lang.rar 文件解压, 得到 default 文件. ★ Windows版 ① 复制 default 文…

    2014-12-10