旅游类App的原型制作分享

今天我用Mockplus做了一套Gogobot的原型,这是一款旅游类的App。为了达到高保真的效果,在做原型图的时候我把App的颜色也一并做好了,因为Mockplus的颜色属性设置可以直接吸取颜色,非常方便快捷,除了配色,动效上我也尽量还原了App原来的效果,其中Mockplus的滚动区组件除了纵向还有横向滚动,满足了我对滚动的需求~好了,下面请看我的成果吧!

健康类App原型制作分享-Life Cycle

Life Cycle是一款健康类App,它能自动跟踪你的时间和你的生活习惯,清晰地展示出你的日常活动。App中比较有特色的是首页,直接以一个数据饼图的方式展示你今天的活动时间比例。饼图在Mockplus的图表分类里面直接可用,双击即可编辑占比和颜色,此例子中,为了还原实际App的效果,我采用的是形状组件+线条组合的饼图,页面中还使用了柱状图组件。

效率类App原型制作分享-Swipes

这是一款效率工具类App,可以记录事情和帮助提升工作效率。原型主要制作了登录注册页面和几个主要页面。在登录注册页面中,常常会有这样的效果,当输入了密码,登录按钮会改变颜色并且可点击。在Mockplus中,你可以使用改变颜色交互,当然触发方式依然是点击时(可设置为点击输入框),点击后登录按钮颜色就会改变。一起来看效果。

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

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

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

Beanhunter是一款咖啡App,它帮助喜欢喝咖啡的用户找到世界上最好喝的咖啡馆。它的配色是温暖浓烈的,就像咖啡带给人的感受一样,香醇,浓厚。和美食类应用一样,这款App也是需要大量的图片来布局,从引导页面到主页面,都是采用图片+文字的方式,引导页之间的跳转采用的是滑动动画,虽然Mockplus还不支持手势操作,但在原型阶段,滑动的页面切换方式,可以达到同样的效果。

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

Workflow是一款个人自动化工具,这款App最大的亮点在于配色和引导动画,在原型阶段为了突出这款App,制作时把颜色和动画都高度还原了。Mockplus在动画这方面的支持还是不错的,使用“载入时”的触发方式即可实现页面切换后,动画自动播放的效果。下面来看看效果有多赞。

服务类App原型制作分享-South Devon Accounting

这是一款服务类App,主要提供会计和商业咨询类服务。这款App首页局部很简单清晰,直接把主要分类菜单以图标+文字的形式排列出来,这让我直接使用了Mockplus的图标按钮组件,该组件既可添加图标,又可编辑文字,并且外形可以自由选择,十分好用,同时丰富的图标库,让我在选择图标时,轻松快速。

体育类App原型制作分享-AusOpen

AusOpen是一款澳大利亚网球信息App,精彩的赛事,实时更新。体育新闻类的App,具有时效性,同时赛制信息也要展示得清晰明了。这款原型涉及到了一些重复布局的页面,比如列表,制作时,先做好其中一个列表项,使用快速格子(Repeater)功能,右键转化为格子以后,只需一拖,多个相同的列表项就轻松呈现,快速高效,一试便知。

企业类Web原型制作分享-Valet

Valet是一个企业公司通用网站,在做网页类型的原型时,常常会用到鼠标悬停的一些交互,在Mockplus中,状态交互很好的解决了这个问题,只需在颜色、边框、文字等有状态交互的属性旁边点击一个“闪电”图标,就能轻松设置鼠标经过时或鼠标点下时的属性。除了状态交互,目前Mockplus还不支持鼠标悬停触发事件,但在后期会实现这一功能,非常值得期待。

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

Recipes是一款精致生活应用,可以快速找到你需要的菜谱。首页采用质量高的美食图片吸引眼球,并且你能快速找到对应的制作步骤。这款原型中的菜单采用的是侧滑菜单,在Mockplus中,只需一个抽屉组件,就能轻松搞定,同时在最新版本中,支持图片一键自动填充,其中就包含了上百张美食类的图片,原型设计,既要美也要快。

独家专访Mockplus CEO老布,原型设计领域的弄潮儿

谈到中国本土的原型设计工具,相信没有人不知道Mockplus。Mockplus作为一款全平台快速原型设计工具,以其“更快更简单”的理念深受一大波用户的喜爱。Mockplus最近发布了3.0版本,其中包括团队协作等重大更新。很多人都不知道,这款被Adobe XD列为主要竞品之一的知名工具是来自于成都的一个团队。小编有幸采访到了Mockplus的CEO老布,那么就让我们一同探访这款中国原型工具背后的故事吧!

小摩做原型之3 – 组件的使用

Hello, 大家好,我是小摩。这是小摩第三次给大家分享使用Mockplus做原型的一些方法和技巧了。希望小摩的讲解能给大家带来一些启发和帮助。在本次视频中,主要给大家分享了一些组件的使用方法和一些目前没有的组件的替代的方法,在我们Mockplus中,很多看似不能实现的功能组件都是可以通过其他的方式完成的哦。希望本次的视频能激发大家的灵感。

小摩做原型之2 – 设计规范

Hello, 大家好,我是小摩。这是小摩第二次给大家分享使用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的朋友可以下载后直接使用哦,之后,我也会尝试小程序的原型,让大家对小程序更加了解。

Guides-旅游类App原型分享

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

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

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

FitStar Yoga-健身类App原型分享

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