邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

文章分类

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

效率类App原型制作分享-One List

Anny 2017-10-27 16:57:53 阅读:48857

One List是一款效率类工具,这款App最大的亮点是前面用了6页动画,来引导用户如何操作这款软件,引导页采用动画的形式,比较有趣,且演示清晰易懂。今天我也会给大家分享如何利用原型工具Mockplus来实现引导动画。


先简单看看动图:


Mockplus原型分享-One List


点击这里,可以立即在线预览:http://run.mockplus.cn/W2qfYImZXg5zEaH4/index.html


引导页动画制作步骤如下:


1. 首先将要做动画的组件链接“自己”。


1


2. 因为动画是当页面切换时,自动执行的,因此触发方式选择“载入时”,然后选择动画类型(显示/隐藏、移动、缩放等)。


2


3. 最后在右边交互面板上,设置动画执行时间与延迟时间。


3


这样,一个简单的动画就做好啦,如果需要多个动画组合起来的话,注意延迟时间一定要设置准确,保证动画连贯流畅。


再送上UI Flow大图:


Mockplus原型例子-One List流程图


这个原型的主要页面有:启动动画、主页、新建页面、菜单页面、设置页面等。


以上设计的所有页面可以在这里下载分享


所有页面的图片集(13张), 在这里下载


Enjoy it!

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:748169314 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶