陌北默

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

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

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

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

 

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

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

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

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

https://imgcache.qq.com/tencentvideo_v1/player/TPout.swf?max_age=86400&v=20140714

 

是不是跟原生一样啦?!

 

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

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

 

首先:

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

high-fidelity prototype01

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

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

 

然后:

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

high-fidelity prototype02

最后:

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

high-fidelity prototype03

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

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

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

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

 

作者: 紫豆子的开发(微信公众号:紫豆子设计站)

zidouzi-erweima

转载请注明:学UI网 » 五天Principle从入门到精通05-复现淘票票高保真原型

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
4步制作酷炫loading效果[Principle]4步制作酷炫loading效果[Principle]
Principle案例教学小堂05-界面拖拽删除Principle案例教学小堂05-界面拖拽删除
Principle案例教学小堂04-功能开关变换Principle案例教学小堂04-功能开关变换
Principle案例教学小堂03-卡片滑动Principle案例教学小堂03-卡片滑动
Principle案例教学小堂02-内容滚动及加载更多的跳转Principle案例教学小堂02-内容滚动及加载更多的跳转
Principle案例教学小堂01-列表展开效果Principle案例教学小堂01-列表展开效果
Principle软件介绍及教程合集!Principle软件介绍及教程合集!
五天Principle从入门到精通04-模仿饿了么下拉加载动画五天Principle从入门到精通04-模仿饿了么下拉加载动画
五天Principle从入门到精通03-动画的基本逻辑五天Principle从入门到精通03-动画的基本逻辑
五天Principle从入门到精通02-Sketch的导入五天Principle从入门到精通02-Sketch的导入