摹客 Mockplus

摹客 Mockplus

让设计更快更简单

例子

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

One List是一款效率类工具,这款App最大的亮点是前面用了6页动画,来引导用户如何操作这款软件,引导页采用动画的形式,比较有趣,且演示清晰易懂。今天我也会给大家分享如何利用原型工具Mockplus来实现引导动画。

工具类App原型制作分享-Bear

Bear是一款记事工具,App画风简约可爱,这只萌熊也是这款App的最大亮点,为了真实还原这款工具,我也是将熊的图片放进了原型中,其次就是一些常见的交互动效,这次给大家讲解一下Mockplus中如何实现侧滑菜单效果。

美食类App原型制作分享-Recipes

Recipes是一款美食菜谱类App,这次用到的一些交互主要是图片的左右切换、 滚动的微交互,Mockplus在滚动的支持上比较友好,可以拉长手机外壳,或者使用滚动区组件,选择后者可以做滚动页面上面的悬浮按钮、悬浮菜单等。下面一起来看看。

工具类App原型制作分享-Asana App

Asana是一款工作任务管理工具,它有手机端和网页端,这款App在配色上很棒,采用了一些渐变色,这里由于是制作原型,采用的色彩依然是黑白灰,主要体现功能和交互,这类App,功能上,注重任务创建方便快速、任务完成进度跟踪,任务分类归档清晰,对于团队任务,分工明确,管理便捷等,下面一起来看原型,之后会和大家分享这款软件的网页版,可以对比App端和网页端的一些设计规范和区别。

美食类App原型制作分享-Bon App!

Bon App!是一款美食类App,这次也是尝试做出高保真的原型,最大可能的还原了App的配色和交互。因为是高保真,所以特别注意的就是细节的设计,图标、按钮形状、输入框样式等,在属性上都做了相应的设置,Mockplus的组件属性还是相当丰富,但如果涉及到一些个性化的组件,就需要使用一些基本组件的拼凑(比如二维码扫描);另外,交互方面也高度还原,弹出、内容切换、滑动这些基本交互都能轻松实现,一起来看成果吧!

健康类App原型制作分享-Pillow

Pillow,一款健康类App,主要是睡眠管理类型的,这类App比较讲究页面视觉上的舒适安心。功能上,有一个时间选择器,这个功能采用的是两个滚动区组件,分别在组件内设置小时和分钟数值,演示时,用户可以上下滑动来分别选择时和分的数值,直观的表达了交互效果。

旅游类App原型制作分享-Triposo

今天带给大家的,还是一款旅游类App,这类App在设计时的一些注意问题前面已经给大家分享过了,这次重点给大家展示的是这一款原型中的启动页面,在设计的时候,只用了一个简单的交互效果:隐藏显示,触发方式是载入时。只需要几秒钟,这个启动页面的交互效果就轻松搞定。一起来看:

运动类App原型制作分享-Zombies, Run

Zobies, Run,一款运动类App,帮助监督你实行自己的健身计划。这款App我试着做了板块的立体视觉效果,由于Mockplus中没有阴影效果(当然在原型阶段这是不必要的),但是为了尝试让这款App的特点更突出,我用矩形组件去除部分边框,只留下底部边框,再将底部边框颜色加深,从而实现一个立体效果的选项,其次,分隔条我也使用了两根不同颜色的线条组合,做出了立体分割的效果。下面,来一起看看效果吧。

微信原型组件分享-WeUI

随着微信的普及,小程序也开始进入了人们的生活,方便快捷的操作,无需安装的特点得到了人们的喜爱和认同,那么,开发小程序必不可少的当然是微信的组件规范,今天就给大家带来了微信常用的一些组件,使用Mockplus的朋友可以下载后直接使用哦,之后,我也会尝试小程序的原型,让大家对小程序更加了解。

音乐类App原型制作分享-Qello Concerts

Hi~今天做了一套音乐类App Qello Concerts,这类App和美食、旅游类较类似,都是需要后期图片的填充,因此图片质量至关重要。在做原型的过程中,基本组件就能满足要求,但是这次尝试用Mocplus中的基本组件结合移动交互做了一个异性选项卡,外观和切换动画效果还不错,下面一起来看看吧!

Guides-旅游类App原型分享

Guides是一款旅行类App,这款App本身的颜色并不多,重点是要突出各个旅游景点的图片,所以这类App讲究后期对图片质量的把控,特别是图片占比较大的页面。在原型设计上,主要还是注意交互友好、对景点的介绍全面以及搜索方便等,下面一起看看效果。

BBC Sport-体育新闻类原型分享

BBC Sport是一款体育新闻类的App,随着智能手机的飞速发展和普及,移动端的使用已经成为生活的一部分,除了传统的方式看新闻,人们更多的是利用碎片时间在App中浏览资讯,也就是说在设计的时候,我们必须要确保核心信息出现在热点区域内,最重要的新闻让用户在最短的时间内看到,因此新闻类App讲究布局、交互简单快速等。下面一起来看看这款App的原型吧。

FitStar Yoga-健身类App原型分享

FitStar Yoga是一款瑜伽App,这类App帮助用户轻松学习瑜伽课程,主要以视频为主,由于是原型设计,所以不必把真的视频导入其中,这里除了用相应的视频图标来表示视频外,Mockplus中也提供了常用的批注组件,当在原型中有的组件无法表现完整的功能时,我们就可以使用批注组件来标注说明我们这个组件的完整功能,既减轻了设计工作量,又便于后期沟通。下面来看看成果。

Coach.me-健身工具类App原型分享

Coach.me是一款健身工具类App,在科技发达的今天,许多上班族缺乏运动,身体素质逐渐变差,一款运动App帮助和监督你在工作之余,加强运动和锻炼。这类App功能和交互都比较丰富,用Mockplus还是可以满足我对交互的需求,重点是实现这些动效的过程非常简单快速,极大提高了工作效率。下面来一起看看吧。

Feast-美食类APP原型分享

Feast是一款介绍美食的App,在这里,用户可以分享自己的美食照片和对美食的心得体会,同时,它也是一个菜谱,丰富的美食做法资源,让你轻松学会各种花式菜系烹饪,它的原型功能也比较强大,当然,这类APP还是更加注重后期的色彩搭配和美食图片的质量哦,那么,和我一起来享受这美味的原型吧!

Balanced-工具类App原型分享

Balanced是一款记事类的工具App,这类App在设计的时候讲究简单易用,如果操作太复杂,就不能做到记录事件的及时性和快速性。在制作原型时,这次尝试了将App的启动引导动画给模拟出来了,不得不说,Mockplus在做动画方面还是比较好的,操作上也很简单快速,重点是在动画时间节奏上的把握,下面来看看效果。

Mimo-教育类App原型分享

Mimo 是一款学习类的App,在做这套原型的时候,我特地将App启动引导页面也做出来了。一款好的产品,是会在细节上引导和帮助用户轻松了解产品的特点以及使用方法,因此,引导页的作用就非常的大,它既是对产品的第一印象,又是对产品的功能的简单说明和使用帮助。之后,我还会尝试让引导页动起来,下面我们一起来看效果吧。

购物类App的原型制作分享

Villoid App是一个购物类的APP,这次是按照原型的标准,采用了黑白灰的配色,这便于UI设计师后期在颜色上的发挥和设计。细节方面,做了一些页面跳转时加载的动态效果,这也是我们在做原型设计时可以多考虑的地方。下来一起来看看效果吧。