编辑:陌北默    发布日期:2020-10-28 00:00:00

小编:五天Principle从入门到精通,一起来学习吧~

《五天Principle从入门到精通01-简单的Toast动画制作》

《五天Principle从入门到精通02-Sketch的导入》

《五天Principle从入门到精通03-动画的基本逻辑》

《五天Principle从入门到精通04-模仿饿了么下拉加载动画》

 

为什么要有一个高保真可交互的原型?可以更加直观的跟上下游沟通,跟领导汇报。无论是产品或者开发,看到我们手机上可以直接操作的原型,至少会认可认可我们的专业能力。

本期是本教程的最后一期,主要教大家如何用软件做一份高保真的可交互的原型。模仿淘票票制作可交互的高保真原型

本次教程模仿了淘票票的几个页面间的交互。

先放出我做的录屏,放在手机上交互的效果(视频8M大小)

 

是不是跟原生一样啦?!

 

我们如何做一个可交互的高保真原型呢?

做可交互高保真原型的前提是,我们有一份高保真的静态原型,这里最好是Sketch稿。

 

首先:

把我们需要有交互的组件都切出来。

high-fidelity prototype01

如果是Sketch文件,这步就比较简单,但要注意画板与画板间的不同的元素名称不能相同;

如果是静态图片,那就回归到原始的PS切图就可以了。

 

然后:

导入我们的所有的关键页面,按顺序排好,

high-fidelity prototype02

 

最后:

讲所有我们想要的交互动作,关系加到principle中去,重点在于我们在同一个页面中同一个组件上设置不同的交互条件和相应的反应。

high-fidelity prototype03

具体的方法前面教程都有讲过,我这里就不一步一步的教学了,可以看一下截图,不明白的可以留言。

注意:在调整动作的过程中,由于Principle的绘图能力不强,可能需要调整原始的Sketch静态稿,然后重新导入Principe,这样会有之前编辑的动作发生错乱的现象。所以大家尽量在Sktech中画出可能需要的各个状态,这样避免反复的修改。

需要源文件的同学,可以关注后,发送“Principle”,得到Sketch源文件和Principle源文件的云盘链接。

至此,本次教程就结束了,谢谢大家。

 

 
Principle for Mac Principle是前Apple工程师打造的一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者Gif分享到社交平台。;您可以免费下载。 英文 · 5.00 MBM ·

热点资讯

更多
英特尔正与台积电接洽,虑将部分芯片生产外包给台积电 外媒报道称,英特尔正在与全球最大的芯片制造商台积电(TSMC)接洽,准备将自己的芯片制造业务外包出去。
苹果iPhone 12国行上季度热卖:拿下20%份额 销量达1800万 根据外媒报道,上季度中国大陆地区iPhone 12销量达到1800万,苹果拿下20%智能手机市场份额。
高通斥资约90亿收购芯片公司NUVIA 前苹果芯片架构大神加盟 据外媒报道,高通公司1月13日以14亿美元收购芯片初创公司Nuvia。
大公司晨读:B站计划3月港股上市;苹果斥资1亿美元力促种族平等 B站确定已在港提交上市申请;英特尔CEO 斯旺将于2月15日辞职。

相关教程

更多
五天Principle从入门到精通04-模仿饿了么下拉加载动画 小编:五天Principle从入门到精通,一起来学习吧~ 《五天Principle从入门到精通01-简单的Toast动画制作》 《五天Principle从入门到精通02-Sketch的导入》 《五天Principle从入门到精通03-动画的基本逻辑》   今天我们模仿一下饿了么的下拉刷新动画,相信大家对这个动画十分熟悉。 先说一下这个饿了么的动画并不是Principle做的,这个动画是有交互的。我们主要是模仿一
五天Principle从入门到精通03-动画的基本逻辑 小编:五天Principle从入门到精通,一起来学习吧~ 《五天Principle从入门到精通01-简单的Toast动画制作》 《五天Principle从入门到精通02-Sketch的导入》   本次的课程理论知识比较多,可能会略显枯燥,但是做什么都要是要有坚实的理论基础的,这样才能最大化的发挥软件性能,做出更加酷炫的动画,下面我们开始今天的课程。   1. Principle中对象的四个交互属性 物件的交
五天Principle从入门到精通02-Sketch的导入 小编:五天Principle从入门到精通,一起来学习吧~ 来到第二天课程的都是好同志~相信大家通过《五天Principle从入门到精通01-简单的Toast动画制作》已经初步了解了Priciple的基本操作。 另外文末有小福利哦~   1. Sketch文件的导入 首先,先把要把画好的Sketch文件打开; 再打开Principle,点File - Import From Sketch  ,这里会直接显示你刚打开的Sketch
五天Principle从入门到精通01-简单的Toast动画制作 小编:五天Principle从入门到精通,一起来学习吧~ 今天我们练习做一个非常基本的动画,熟悉Principle最基本的操作和界面布局。那么课程开始啦。 在这里,我们选择做一个toast动画。设计师们有了自己设计的toast体系,就可以告别系统原生的toast。同时,我们也可以拿着实际效果,在开发小哥面前演示toast动效,再也不用比划半天也说不清楚。   toast动画 软件打开后,有一个300*300的Artboard在

相关软件

更多
  • Birdfont Mac版 英文. 29.00 MBM · BirdfontMac版是Macos平台上的一款可以制作自己专有字体的软件,这款软件可以制作出自己独有风格的字体,这是一款免费的软件,你可以在这款软件上发挥出自 ...
  • Plant Mac版 英文. 22.00 MBM · PlantMac版是Mac电脑上的一款适用于Sketch的简单而强大的版本控制插件。PlantMac版可以帮助用户更简单、更智能地管理Sketch文件,它支持保 ...
  • Crash Course Mac版 英文. 3.00 MBM · CrashCourseMac版是Mac电脑上的一款AdobePhotoshop视频教学软件。CrashCourseMac版内含超过440个AdobePhotos ...
  • Screenshot Designer Mac版 英文. 17.00 MBM · ScreenshotDesignerMac版是Mac电脑上的一款设计软件。ScreenshotDesignerMac版可以为应用开发者们创建引人入胜的AppSt ...