AI图表、无限白板、高效协同、让你的想法更有用
旗舰级设计工具
产品经理专属，原型设计更专业
设计师专属，UI设计更专业
交付Sketch/XD/PS/Figma/Axure设计稿
在线原型设计工具，高效易用强大
分享产品设计技巧、案例、资源、工具、新闻，与你一起精进设计。
5 min read
全能设计协作平台，产品经理用RP，UI设计师用DT
打开微信，点击底部的“发现”，使用 “扫一扫” 即可将网页分享到我的朋友圈。
Coach.me是一款健身工具类App，在科技发达的今天，许多上班族缺乏运动，身体素质逐渐变差，一款运动App帮助和监督你在工作之余，加强运动和锻炼。这类App功能和交互都比较丰富，用Mockplus还是可以满足我对交互的需求，重点是实现这些动效的过程非常简单快速，极大提高了工作效率。下面来一起看看吧。 先简单看看动图： 点击这里，可以立即在线预览：http://run.mockplus.cn/...
微信是一款社交类的APP应用——聊天软件，支持多人群聊。 交互效果主要有滚动内容界面、选择组件触发按钮状态变化、点击下拉展开列表、点击弹出面板等交互操作。 先简单看看动图： 点击这里，可以立即在线预览：微信原型模板 再送上UI Flow大图： 原型中有消息列表页面、通讯录列表界面、发现列表界面、我的个人资料列表界面、朋友圈界面以及发朋友圈的文字图片编辑界面。 以上设计的所有页面可以在这里下载分...
One List是一款效率类工具，这款App最大的亮点是前面用了6页动画，来引导用户如何操作这款软件，引导页采用动画的形式，比较有趣，且演示清晰易懂。今天我也会给大家分享如何利用原型工具Mockplus来实现引导动画。 先简单看看动图： 点击这里，可以立即在线预览：http://run.mockplus.cn/W2qfYImZXg5zEaH4/index.html 引导页动画制作步骤如下： 1....
Bear是一款记事工具，App画风简约可爱，这只萌熊也是这款App的最大亮点，为了真实还原这款工具，我也是将熊的图片放进了原型中，其次就是一些常见的交互动效，这次给大家讲解一下Mockplus中如何实现侧滑菜单效果。 先简单看看动图： 点击这里，可以立即在线预览：http://run.mockplus.cn/niWz9rg0LCnuyKZk/index.html 三个步骤轻松搞定侧滑菜单： 1....
Recipes是一款美食菜谱类App，这次用到的一些交互主要是图片的左右切换、 滚动的微交互，Mockplus在滚动的支持上比较友好，可以拉长手机外壳，或者使用滚动区组件，选择后者可以做滚动页面上面的悬浮按钮、悬浮菜单等。下面一起来看看。 先简单看看动图： 点击这里，可以立即在线预览：http://run.mockplus.cn/337s5n5TY2tvSrL7/index.html 再送上U...
Asana是一款工作任务管理工具，它有手机端和网页端，这款App在配色上很棒，采用了一些渐变色，这里由于是制作原型，采用的色彩依然是黑白灰，主要体现功能和交互，这类App，功能上，注重任务创建方便快速、任务完成进度跟踪，任务分类归档清晰，对于团队任务，分工明确，管理便捷等，下面一起来看原型，之后会和大家分享这款软件的网页版，可以对比App端和网页端的一些设计规范和区别。 先简单看看动图： 点击这...
Bon App!是一款美食类App，这次也是尝试做出高保真的原型，最大可能的还原了App的配色和交互。因为是高保真，所以特别注意的就是细节的设计，图标、按钮形状、输入框样式等，在属性上都做了相应的设置，Mockplus的组件属性还是相当丰富，但如果涉及到一些个性化的组件，就需要使用一些基本组件的拼凑（比如二维码扫描）；另外，交互方面也高度还原，弹出、内容切换、滑动这些基本交互都能轻松实现，一起来看...
Pillow,一款健康类App，主要是睡眠管理类型的，这类App比较讲究页面视觉上的舒适安心。功能上，有一个时间选择器，这个功能采用的是两个滚动区组件，分别在组件内设置小时和分钟数值，演示时，用户可以上下滑动来分别选择时和分的数值，直观的表达了交互效果。 先简单看看动图： 点击这里，可以立即在线预览：http://run.mockplus.cn/YVS4lFUqznF8OLoC/index.ht...
今天带给大家的，还是一款旅游类App，这类App在设计时的一些注意问题前面已经给大家分享过了，这次重点给大家展示的是这一款原型中的启动页面，在设计的时候，只用了一个简单的交互效果：隐藏显示，触发方式是载入时。只需要几秒钟，这个启动页面的交互效果就轻松搞定。一起来看： 先简单看看动图： 点击这里，可以立即在线预览：http://run.mockplus.cn/yRQ4R8odtbmEmcbA/in...
Zobies, Run，一款运动类App，帮助监督你实行自己的健身计划。这款App我试着做了板块的立体视觉效果，由于Mockplus中没有阴影效果（当然在原型阶段这是不必要的），但是为了尝试让这款App的特点更突出，我用矩形组件去除部分边框，只留下底部边框，再将底部边框颜色加深，从而实现一个立体效果的选项，其次，分隔条我也使用了两根不同颜色的线条组合，做出了立体分割的效果。下面，来一起看看效果吧。...
Hi~今天做了一套音乐类App Qello Concerts，这类App和美食、旅游类较类似，都是需要后期图片的填充，因此图片质量至关重要。在做原型的过程中，基本组件就能满足要求，但是这次尝试用Mocplus中的基本组件结合移动交互做了一个异性选项卡，外观和切换动画效果还不错，下面一起来看看吧！ 先简单看看动图： 点击这里，可以立即在线预览：http://run.mockplus.cn/f9Lf...
Guides是一款旅行类App，这款App本身的颜色并不多，重点是要突出各个旅游景点的图片，所以这类App讲究后期对图片质量的把控，特别是图片占比较大的页面。在原型设计上，主要还是注意交互友好、对景点的介绍全面以及搜索方便等，下面一起看看效果。 先简单看看动图： 点击这里，可以立即在线预览：http://run.mockplus.cn/HOXcctwauq6oxuWf/index.html 再...
BBC Sport是一款体育新闻类的App，随着智能手机的飞速发展和普及，移动端的使用已经成为生活的一部分，除了传统的方式看新闻，人们更多的是利用碎片时间在App中浏览资讯，也就是说在设计的时候，我们必须要确保核心信息出现在热点区域内，最重要的新闻让用户在最短的时间内看到，因此新闻类App讲究布局、交互简单快速等。下面一起来看看这款App的原型吧。 先简单看看动图： 点击这里，可以立即在线预览：...
FitStar Yoga是一款瑜伽App，这类App帮助用户轻松学习瑜伽课程，主要以视频为主，由于是原型设计，所以不必把真的视频导入其中，这里除了用相应的视频图标来表示视频外，Mockplus中也提供了常用的批注组件，当在原型中有的组件无法表现完整的功能时，我们就可以使用批注组件来标注说明我们这个组件的完整功能，既减轻了设计工作量，又便于后期沟通。下面来看看成果。 先简单看看动图： 点击这里，可...
主要页面：启动页面、登录注册页面、主页、课程详情页面、搜索页面、设置页面等。 mp文件下载：点击这里 在线预览：http://run.mockplus.cn/VHSvwStMfwGhuKZ2/index.html
工作时间：9:00-22:00
摹客协作
摹客RP
摹客DT
摹客超级版