订阅摹客文章

免费获取优质的设计资讯!

文章分类
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

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

博客 > Mockplus设计例子 > 教育类App原型制作分享-Encode

教育类App原型制作分享-Encode

这款原型例子是教育类型的App,主要学习编程方面的知识,配色是偏系统的颜色,布局也相对简单明了。首页采用的是列表形式,采用快速格子可以快速实现列表的布局,其次是长页面的滚动效果,在Mockplus可以通过两种方法实现:一是拉长手机模型;二是使用滚动区,之后的例子中可以给大家介绍下二者的区别,现在一起来看效果。

先简单看看动图:

Encode

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

再送上UI Flow大图:

Encode

这个原型的主要页面有:主页、课程列表页面、代码编写页面、设置页面等。

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

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

Enjoy it!


上一篇
如何巧妙避开常见的UX错误,拯救你的项目?

Cherry   11/13

独家专访 | 钟承东:金蝶首席用户体验官对“用户体验”的思考

Trista   11/10

下一篇
需要帮助?

摹客产品顾问为你服务

帮助群:651432826

服务邮箱:service@jongde.com