设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

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

设计资源 > 例子项目 > Mockplus设计例子 > 效率类App原型制作分享-One List

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

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!

上一篇
电商类web原型制作分享——美丽说

Tomoto   07/30

工具类App原型制作分享-Bear

Anny   10/27

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com