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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
手把手教你用Principle制作原型
0.0°
2016-03-02 自译外文 教程 原作者: Abhinav Chhikara 举报 40239 516 448 61

通过12GIFs带你入门Principle(附件中提供Principle的试用版)

当Principle出来,我就花了几个星期尝试使用,尽管在之前我已经听过对它的各种好评。主要是因为原型制作软件总是一个死循环,新的原型工具问世>设计师感到兴奋>只使用了一段时间,如此不断重复这个循环。但自从用上了Principle,我被它深深地折服了。

视差滚动视差滚动

为什么使用Principle?

我迄今为止使用最多的元素级别原型软件是Pixate,但Principle把我的原型设计时间减少到原来的十分之一。在Pixate上45分钟完成的工作,Principle只需要5分钟。原型设计时间越短,你就越有可能用它进行试验。你就可以开尽早始工作流程中试验动效,原型设计会变得更有意义。

下载与安装

Principle for Mac在其网站上下载可以试用14天,时间应该是充足的,可以帮助您确定它是否适合你的工作。而终身的许可证售价99$(约合648人民币)。
注:Principle目前只能在Mac上使用。它可以让你的Android,iOS和Web原型动起来,甚至是简单的GIF,但你只能在您的计算机或在iPhone上预览。
如果你是Sketch的用户,你会立即注意到Principle跟其十分相似。有画板,图层列表和图层属性窗格。 

画板

在Principle每个画板都是一个屏幕或动画的状态。你可以从下拉菜单中预设的设备尺寸来创建一个画板。

Image title创建画板

导入素材

您只需从Finder元素拖放到画板。将@2X添加到文件名,可以一半的尺寸将其导入。
或者,你也可以从Sketch复制和粘贴元素。只要选择要导入的图层按cmd+c和cmd+v。请记住,在你Sketch中的多个图层导入到Principle以后都会合并和一个图层,这样你就需要在导入图层之前好好规划一下需要动效的图层。

Image title

从Finder拖入元素

Image title从Sketch复制粘贴元素

简单的过渡

在你导入素材后,是时候来建立你的第一个原型。您可以选择任何元素并为其添加动作。目前,Principle上支持点击(Tap),长按(Long Press),开始滚动(Scroll Begin),滚动释放(Scroll Release),滚动结束(Scroll End),开始拖动(Drag Begin),结束拖动(Drag End),Touch Down事件,Touch Up事件,悬停(Hover Inside),外部悬停和自动。在Principle你都会用到这些动作。
复制当前的画板和它们之间添加一个动作。Principle会自动将两个画板中名字相同的图层的动效的跳转动作同步过来。 

Image title简单的过渡效果

Image title添加更多过渡效果

用延迟和曲线来打磨动画

该动画面板展示了画板之间的每个动作变化。在这里,你可以改变动画的持续时间,缓解曲线和延迟两个画板之间运动。

Image title添加转换延迟

Image title编辑缓和曲线

添加滚动/分页/拖拽

要创建一个滚动组,只需选择图层,然后从下拉菜单中选择滚动,分页和拖拽也是这样实现。滚动和分页之间的差异在于,滚动是创建可以通过滚动内容的窗口,分页是用于捕捉内容的窗口。拖动类似于滚动,但您可以自由移动对象。可以通过每个实验来理解差别。

Image title添加滚动效果

Image title添加分页效果

Image title添加拖动效果

动画由滚动/拖拽/分页驱动

要创建不依赖于一个单一动作(点击,长按等),但依靠滚动/拖入/分页的动画,我们需要使用到Drivers。Drivers面板的时间轴显示,您可以在画板创建对应的动作。要创建一个动画,选择图层列表图层,点击Drivers面板上的carat,并选择随时间而变化的特性。
水平的时间轴是根据在Y位移的滚动/拖拽/分页和随后的变化而运动。根据前后移动的时间表,然后再次单击carat创建另一个关键帧。Principle会在滚动/拖/页面动作发生关键帧之间自动制作动画。 

Image title

导出和查看原型

要查看你在手机上创造了什么,你需要做的就是下载Principle Mirror,将你的iPhone连接到Mac。而需要演示文稿或上传到Dribbble,还可以记录原型并保存为MOV或GIF。你需要保持预览窗口在画板的100%,不然质量可能受到影响。

Image title

Driver动画

关于GIF导出的问题

GIF的导出还是有点靠不住的,其导出的GIFs质量低且尺寸大。当然你也可以在Photoshop中打开MOV来导出高质量的GIF。虽然这有点费时,但这是目前最佳的途径。

您也可以下载我提供的原型并尝试一下! 这里还包括sketch文件哦!

点击下载Principle源文件

点击下载Sketch源文件


下面是一些我用Principle做的小东西:

Image title

Image title

Image title



原文作者:Abhinav Chhikara


译者:RYANLOLO(喜欢请尽情点赞和关注,你的支持就是我的动力)

信息:欢创科技产品设计

转载前请先经译者同意。(附件中提供Principle的试用版)

更新:2016-03-02

下载
收藏

516人已收藏

RYANLOLO

dribbble.com/Yikon

  • 17

    作品

  • 988

    粉丝

  • 20

    关注

  • 每周佳作分享#1
  • Android N UI Kit(Sketch源文件)
  • 品牌设计灵感 #1
  • 引导页(集)

    猜你喜欢

      2016-03-02 自译外文 教程 原作者: Abhinav Chhikara 举报 40239 516 448 61

      手把手教你用Principle制作原型

      0.0°

      你确定要举报手把手教你用Principle制作原型

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年03月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      448
      516
      61

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

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

      登录

      手机号

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

      登录
      第三方账号登录