三步教你做酷炫的“倒计时”原型效果

日常生活中,我们会看到各种各样的倒计时设计: 或是在一段视频的开头;或是隐蔽在屏幕右上角,用于显示广告的时长;或是在软件启动页面,用于增强用户对后面出现内容的期待。不可否认,倒计时是非常有用的。那么,如何用简单的方法做出酷炫的倒计时效果呢?我们一起来学习一下。

工具:Mockplus

所需时间:3分钟

用Mockplus来做交互,最大的特点就是简单快速。下图中这个倒计时效果,只需三步就可以实现。

ALT: Countdown made by Mockplus

步骤一:自定义倒计时样式

启动Mockplus,从左边的组件库中拖出一个圆形组件,双击组件输入数字。

在右侧的属性面板中,将圆形的边框调整为不可见。此处我们将组件内颜色设置为灰色,数字颜色设置为白色。

选中这个组件,同时按下Alt键,将组件复制4份,并输入对应的数字(最后一个设置为空白圆形)。

ALT: make countdown with Mockplus 1

ALT: make countdown with Mockplus 2

步骤二:设置交互

想实现倒计时的效果,只需让这几个圆形陆续出现即可。在Mockplus中,我们很容易实现这一点。

将原型4的连接点拖到圆形内部,选择“载入时”,“显示/隐藏”。

ALT: make countdown with Mockplus 3

在右侧的属性面板,将组件设置为不可见。

ALT: make countdown with Mockplus 4

在右侧的交互面板,设置可见性为显示,延迟为300ms, 执行时长为200ms。

同理,为圆形2设置同样的交互,延迟设置为800ms (300ms+300ms+200ms )。

ALT: make countdown with Mockplus 5

ALT: make countdown with Mockplus 6

步骤三:合并这5个圆形

将5个圆形按照出现的先后顺序从下层到上层重叠起来。点击预览,即可看到文章开头的倒计时效果。

ALT: make countdown with Mockplus 7

是不是很简单呢?其实,不仅仅是倒计时,利用Mockplus还可以实现各种各样的交互效果,比如常用的手风琴菜单鼠标悬停菜单下拉等等。除此之外,Mockplus的官方教程中还提供了许多独特的设计方法,并体现了令人惊叹的设计思维。不信你可以去看看“利用滚动区设置悬浮效果”这一章,看完一定很有收获。

关键字:原型设计, 交互设计, mockplus

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部