×

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

作者:anny2017.10.24来源:Web前端之家浏览:8444评论:0
关键词:app
微信公众号

微信公众号

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!


温馨提示:本文作者系anny ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/APP123123123AAA.html

网友评论文明上网理性发言已有0人参与

发表评论:

最新留言

  • Web前端之家

    可以的,有什么问题吗?...

  • 访客

    我就试试的...

  • a235

    不能比啊,老外赚钱就是多!...

  • Web前端之家

    备份是必须的,避免麻烦!...

  • a235

    总结得不错,正好用到,提前备份还是最靠谱啊!...

  • Web前端之家

    谢谢支持,请持续关注Web前端之家!...

  • 访客

    文章很棒,做即时通讯也可以试试【GoEasy】这个框架,官网文档详细还提供了各种demo,大大降低了...

  • Web前端之家

    是的,等其他人验证没问题再装吧,总会有第一个吃螃蟹的人,哈哈!!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1