Mindmate是一款健康类App，主要是帮助人们快速入眠，放松情绪，它拥有小清新的界面，配图全是由插画组成，生动有趣。在这款原型中，为了保持App的原有特色，将插画通过图片组件导入进来；音乐播放界面使用了图片+遮罩制作背景，进度条采用的是移动交互动画。

先简单看看动图：

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

再送上UI Flow大图：

这个原型的主要页面有：启动页面、登录注册页面、主页、音乐列表页面、播放页面、设置页面等。

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

所有页面的图片集(10张)，在这里下载。

Enjoy it！

健康类App原型制作分享-Mindmate的更多相关文章

  1. 天气类App原型制作分享-ColorfulClouds

    ColorfulClouds是一款界面精美的天气预报App,它可以准确预报降雨量.污染程度等.这款App最美的是它的首页天气插画,扁平精美,同时配上了适当的动效,把普通的天气变得漂亮有趣,十分吸引眼球 ...

  2. 生活类App原型制作分享-AnyList

    AnyList是一款可以帮你创建购物清单,并且帮助你整理食谱的生活工具App,前面引导页采用图片+文字的方式,介绍App的用法,登录注册采用选项卡切换的方式,减少了页面切换的繁琐操作,在Mockplu ...

  3. 【附源文件】日记类App原型制作分享-Grid Diary

    Grid Diary是一款非常受文艺青年喜爱的记录应用,它设计简单,内容却非常丰富.它不再是单调的文字记录,界面的设计非常与众不同,由许多格子拼凑而成,每一个格子里面还带有一个问题,十分有趣.提到格子 ...

  4. 体育类App原型制作分享-Onefootball

    Onefootball 是一款适合于足球迷的应用,提供全球 100 多项赛事的新闻.数据.比分和直播.原型中选择“喜欢的球队”这个界面中,用到了悬浮按钮,采用的是滚动区来放置需要滚动的球队列表,然后将 ...

  5. 效率类APP原型制作分享----Timeglass

    本原型由国产Mockplus(原型工具)和iDoc(智能标注,一键切图工具)提供. 主要页面:启动页面.主页.添加事件页面.设置页面等. mp文件下载:点击这里 在线预览:http://run.moc ...

  6. 最近在研究电台类app，分享2个源码大家一起讨论

    好像去年有一阵,电台类的app特别火爆,喜马拉雅和蜻蜓FM互相还撕逼.听老罗,听好好说话,都得在电台app里,所以我想研究研究这些app.我没那么多资源,只好从app的开发架构方面去研究. 我看api ...

  7. 美食类Web原型制作分享-Taste

    Taste是国外知名的美食类网站,为人们提供丰富的美食菜单,帮助人们更好的享受美食带来的快乐.网站采用图文结合的排版方式,有固定顶部导航栏的交互功能等. 本原型由国产原型工具Mockplus和团队协作 ...

  8. 【附源文件】软件工具类Web原型制作分享 - Sketch

    Sketch是一款轻量,易用的矢量设计工具.专门为UI设计师开发,让UI设计更简单.更高效. 本原型由国产原型工具-Mockplus制作完成. 非常适合工具类产品官网使用,本模板的交互有通过使用面板组 ...

  9. 学习类App原型制作分享-Wokabulary

    Wokabulary是一款多功能词汇学习App,可以学习多国语言词汇.原型的引导页面采用的图片+文字+分页器,需要注意的是分页器选中位置要与页面顺序一致.其次是语言的选择页面,在前面给大家介绍过滚动区 ...

随机推荐

  1. ballerina 学习二十二 弹性服务

    主要包含断路器模式,负载均衡模式,故障转移,重试 Circuit Breaker 参考代码 import ballerina/http; import ballerina/log; import ba ...

  2. 隐藏 FastAdmin 列表中的拖动排序按钮

    隐藏 FastAdmin 列表中的拖动排序按钮 就是以下这个按钮,想先删除不要. 刚开始在 CMS 插件中的栏目中发现没有,以为在哪个位置中,但找到半天的 weigh 都没有找到weigh 的字眼. ...

  3. 世界级的开源项目：TiDB 如何重新定义下一代关系型数据库

    著名的开源分布式缓存服务 Codis 的作者,PingCAP 联合创始人& CTO ,资深 infrastructure 工程师的黄东旭,擅长分布式存储系统的设计与实现,开源狂热分子的技术大神 ...

  4. bzoj 4372 烁烁的游戏——动态点分治+树状数组

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4372 和 bzoj 3070 震波 是一个套路.注意区间修改的话,树状数组不能表示 dis ...

  5. oracle／ms sql 系统表

    sql server系统表详细说明 sysaltfiles 主数据库 保存数据库的文件 syscharsets 主数据库字符集与排序顺序 sysconfigures主数据库 配置选项 syscurco ...

  6. hBuilder培训资源视频教程汇总

    DCloud对开发者的学习支持分3个层面:官方文档.三方专业培训.网友经验分享 DCloud的精力主要在做产品,配套的文档也会一直完善好.但专业的培训还不是DCloud能做好的,在HTML5中国产业联 ...

  7. java 线程池 ExeutorService

    Java线程池 ExecutorService 原文:https://blog.csdn.net/suifeng3051/article/details/49443835/ 本篇主要涉及到的是java ...

  8. vs2015 去除 git 源代码 绑定

    第一次碰到这个问题,想将源代码签入TFS管理.添加到源码管理后,默认添加到Git源码管理. 研究过后,发现: 1)删除框内文件 2)Vs2015->工具->选项->源代码管理-> ...

  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">的说明

    今天在做适配手机版时,chrome调到手机版,但是还是显示PC端的样式,无法展现出手机端的样式: 开始的时候还以为是chrome版本的问题,最新版本的chrome62.0是有很多变化的,而之前工作中使 ...

  10. 学习笔记之PHP

    学习 PHP,第 1 部分: 注册帐户.上传需要批准的文件.并查看和下载已批准的文件 https://www.ibm.com/developerworks/cn/opensource/tutorial ...