收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1354|回复: 0

[界面] 效率类App原型制作分享-One List

[复制链接]
发表于 2017-10-24 11:55:14 | 显示全部楼层 |阅读模式
One List是一款效率类工具,这款App最大的亮点是前面用了6页动画,来引导用户如何操作这款软件,引导页采用动画的形式,比较有趣,且演示清晰易懂。今天我也会给大家分享如何利用原型工具Mockplus来实现引导动画。

先简单看看动图:

Mockplus原型分享-One-List.gif

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

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

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

1.png

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

2.png

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

3.png

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

再送上UI Flow大图:

Mockplus原型例子-One-List流程图.png

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

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

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

Enjoy it!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-12-6 03:39 , Processed in 0.109100 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表