旅游类App的原型制作分享

今天我用Mockplus做了一套Gogobot的原型,这是一款旅游类的App。为了达到高保真的效果,在做原型图的时候我把App的颜色也一并做好了,因为Mockplus的颜色属性设置可以直接吸取颜色,非常方便快捷,除了配色,动效上我也尽量还原了App原来的效果,其中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中也提供了常用的批注组件,当在原型中有的组件无法表现完整的功能时,我们就可以使用批注组件来标注说明我们这个组件的完整功能,既减轻了设计工作量,又便于后期沟通。下面来看看成果。

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启动引导页面也做出来了。一款好的产品,是会在细节上引导和帮助用户轻松了解产品的特点以及使用方法,因此,引导页的作用就非常的大,它既是对产品的第一印象,又是对产品的功能的简单说明和使用帮助。之后,我还会尝试让引导页动起来,下面我们一起来看效果吧。