摹客教程

摹客教程

摹客,让设计更快更简单

例子

旅游类App的原型制作分享

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

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

Taste是国外知名的美食类网站,为人们提供丰富的美食菜单,帮助人们更好的享受美食带来的快乐。网站采用图文结合的排版方式,有固定顶部导航栏的交互功能等。

企业官网Web原型制作分享-Tesla

Tesla是汽车行业知名的奢华品牌,产品为纯电动汽车,知名度极高。此模板正是取自Tesla的官网,高端大图配上文字排版,彰显了汽车的奢华感觉。

旅游类APP原型模板分享——爱彼迎

这是一款专为游客提供全球范围内短租服务的APP,可以让你不论出门在外或在家附近都能开展探索之旅,并且还可以获取世界各地独特房源、当地体验及好去处等相关信息。

社交类APP原型模板分享——Tinder

Tinder是国外的一款手机交友APP,作用是基于用户的地理位置,每天“推荐”一定距离内的四个对象,根据用户在 Facebook 上面的共同好友数量、共同兴趣和关系网给出评分,得分最高的推荐对象优先展示。

电商类web原型制作分享——美丽说

美丽说是国内白领女性时尚消费品牌,精选上千家优质卖家供应商,为用户提供女装、女鞋、女包、配饰、美妆等品类的优质时尚商品。

社交分享类Web原型制作分享——花瓣网

这是一家基于兴趣的社交分享网站,网站为用户提供了一个简单地采集工具,帮助用户将自己喜欢图片重新组织和收藏。网站布局美观合理,内容丰富。此原型模板所用到的组件有按钮栏、菜单栏、搜索框、水平分割线。交互动作有鼠标悬停文字按钮颜色改变效果,鼠标按下文字按钮颜色改变效果,按钮跳转页面,利用按钮栏实现table切换效果。

电商类Web原型制作分享——聚美优品

这是一家化妆品限时特卖商城。作为美妆电商类网站的佼佼者,网站以用户体验为核心,画面主色调符合女性消费者审美。排版整齐,布局合理。网站用弹出面板实现点击弹出内容,鼠标悬停文字按钮颜色改变等交互效果。

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

这是一个设计师团队,将数码产品的创意发挥到极致。整个网站采用深黑色背景和图文搭配,网站有很多动画特效,均突出数码产品的质感。网站结合滚动区实现导航栏悬浮效果,用弹出面板实现点击弹出内容等交互效果。

电商类Web原型制作分享-IKEA

​IKEA是一个家居整合大型零售商,属于电商类官网。电商以展示商品、售后服务、购物流程为主。根据网站的图文方式排版,主导航栏使用的标签组,区域导航栏使用的是垂直选项卡,实现下拉弹出面板交互的功能。

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

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

饮品类App原型制作分享-WineRatingsPlus

WineRatingsPlus是一款关于红酒的App应用。它帮助你在用餐、聚会或任何场合选择葡萄酒时,都能方便的得到专家意见。同时,它也能帮助鉴赏家和感兴趣的人对葡萄酒更多的了解和选择。

新闻类Web原型制作分享-BBC

BBC是英国最大的新闻广播机构,属于新闻类的网站,所以网站没有过多花哨的内容,主要为信息的排版。主要用到的组件有搜索框、弹出面板、视频播放组件。实现的交互效果为鼠标Click事件隐藏弹出内容面板。

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

WizNote是当前较好用的一款云笔记软件,蓝色界面给人舒适、和谐的感觉,随时随地帮你记住所有的日程安排。这款原型中,底部是一个异形标签栏,在Mockplus中,可以采用圆形组件和矩形组件拼合而成,然后再将整体编组即可。同时对于这类DIY组件,可以收藏到自己的组件库中,在之后的项目中可以直接使用。将组件库同步到云,使用时更不受办公地点的约束。

设计工具类Web原型制作分享-Mockplus

Mockplus,一款简洁快速的原型图设计工具。这款模板主要用到的交互动作有弹出面板,用弹出面板来实现导航栏的下拉效果。并且各个按钮均有normal和hover两个不同的状态,并且用到的组件有下拉菜单,折叠面板,菜单栏,分页器。

工具类App原型制作分享-Explain Everything

Explain Everything是一个交互式白板平台,能有效沟通把想法变成理解。在这个平台上,人们可以进行协作,分享和学习。在这款App原型的首页中,用到了一个半边圆角的矩形来放置主要功能列表,在Mockplus中,怎么实现半边圆角的矩形呢?其实很简单,拖出一个矩形组件,设置圆角,然后在边框属性中,去掉底部边框,这样就形成了一个只有顶部圆角的矩形。

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

Busuu是一款语言学习App,它包含了十几个国家的语言,只需随身携带 Busuu 即可利用任何闲暇时间坚持学习。在这款原型中,采用了滚动区来制作横向卡片切换效果,首先将滚动区的背景色透明度设置为0,然后滚动方向设置为“横向滚动”即可实现;其次还有首页的折叠菜单效果,采用的是面板组件来放置需要滑动的组件,然后通过设置移动交互,实现菜单折叠展开效果。

照片类App原型制作分享-MoShow

MoShow 能把你的照片变成一个有趣、引人注意的幻灯片视频,适合用于Instagram和其他社交媒体。它包含了几十种不同风格的动效,还可以自定义文字和音乐,让你的照片集脱颖而出。在这款原型中,因为幻灯片是动态的,所以采用的是轮播图来表示,当你双击轮播图组件添加图片后,演示时图片就能自动轮播。

阅读类App原型制作分享-Book Amigo

Book Amigo是一款阅读App,它的界面清爽简约,操作快速简单,在这款App中,你拥有一个私人图书馆,可以轻松管理书架。在这款原型中,图书的搜索是用抽屉组件侧滑展开来设置搜索筛选条件,然后再进行图书搜索。抽屉组件在Mockplus中是已经封装好的交互组件,链接好触发组件后,直接双击往里添加内容即可。

社交新闻类App原型制作分享-Weibo

新浪微博为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯等。在这类社交新闻类应用中,最常用到的是图片,这里采用了大量图片组件作为占位符,微博的社交性质较强,其中的社交逻辑也较复杂,这里做了几个主要的页面供大家学习参考。

生活服务类App原型制作分享-Tide

Tide是一款美好的番茄闹钟与白噪音应用,即可使用简单好用的番茄闹钟,也可以很优雅的收听白噪音音乐,有了Tide,那些创造美好的人们可以更高效、更专注地进行创造、工作和生活。它的界面极简优雅,功能简单好用,一点也不多余。在这款原型中,除了背景图片,其他都是高度还原,计时器使用的是环形进度条组件,不足是无法实现动态展示进度,希望后期这个功能能有所改进。

运动健康类App原型制作分享-Steps

Steps是一款运动健康类App,它可以获取你每天的行走步数进行统计分析,并且可以设定目标和提供专业的健身指导课程。在“Activity”这个页面中,有一个小的交互,当点击柱状图中的数据时,上方显示区域的颜色和数据会相应变化,在Mockplus中,使用设置颜色和设置文本交互就可以轻松实现。

运动健康类App原型制作分享-Movesum

Movesum 是一种全新的计步概念,它可帮助您找到锻炼的动力。这款设计精美的应用程序可为您提供一种简单有效的方法,以设定运动目标、保持专注,并将您的活动与饮食方式结合在一起。首页展示的是各种食物对应的卡路里,你可以通过左滑或者右滑的方式切换食物,很遗憾Mockplus中暂时还不支持手势滑动的功能,但似乎这也并不影响原型的设计。

美图类App原型制作分享-Meitu

Meitu是一款自拍修图神器,相信很多爱美女性手机中都有这款App,它拥有美颜、特效、拼图等功能,操作简单,功能强大。在原型中,除了图片部分,配色和功能也是高度还原了App的真实效果。这款App首页的菜单采用的是卡片形式,通过横向滑动的方式来切换,在Mockplus中可以使用横向滚动区来实现。

购物类App原型制作分享-Polyvore

Polyvore是一款个性时尚的购物App,你可以在这里寻找穿衣搭配灵感,同时也会收获各种潮流新品。这款App对新用户特别友好,第一次进入时,大部分页面都会有蓝色的指引箭头来引导操作,在原型设计中,可以使用箭头组件,调整箭头线条幅度和线型来实现引导。其中还有一些小的交互在这款原型中都有体现哦。

饮品类App原型制作分享-Starbucks

Starbucks是星巴克的一种便捷购买App,可以在店内付款或提前订购。其中还内置了奖励,你可以收集星星,赚取免费的饮料和食物。这款App中,采用了一些小插画,交互动效也很特别,有的页面切换之后,会出现一些小动画,这在Mockplus中可以使用“载入时”触发方式实现。有的页面切换方式是向上下展开切换,目前我们在原型阶段还暂时做不到,但是这种交互方式是可以借鉴的,它能让我们的App变得生动有趣。

求职类App原型制作分享-Part-time Clouds

Part-time Clouds 是一款兼职信息平台,你可以在此寻找合适的兼职工作。这款App使用起来十分简单,不用登录注册即可直接可以进入主页,主页展示了大量兼职信息,你可以根据需求收藏职位、查看详情,或一键拨打联系电话,其中还有详细的职业分类页面。

社交类App原型制作分享-LinkedIn

LinkedIn是全球最大的职业社交平台,通过LinkedIn可以连接机会并挖掘你的专业潜力。该应用程序可以更轻松地发现、连接和培养与重要人物的关系,搜索和申请工作,并获得有关主题和公司的最新信息。这类社交App,最重要的就是前期个人信息的填写,因此在原型中,做了大量个人信息填写相关的页面,这其中的流程和逻辑是值得学习的。

阅读类App原型制作分享-Another Read

Another Read是一款阅读学习App,它主要是带给你最具创意的作家与插图画家出版的儿童读物。在这款App中,你可以根据喜好来左滑或者右滑书籍,喜欢的书籍将会被保存下来。在Mockplus中,这种滑动的动效是可以实现的,这里我采用的是移动交互和旋转交互结合使用,只需设置好旋转角度和移动距离就可以轻松实现。

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

TickTick是一个功能强大的任务管理App, 这款App的教程动画做得特别好,采用的是真实的手机界面加上与用户互动的方式来引导使用。在Mockplus中,移动端项目并没有手机机壳组件,而网页端项目中有这个组件,那么如何在移动端项目中使用手机机壳组件呢?这里交大家一个方法:再打开一个Mockplus窗口,新建一个网页项目,拖出手机机壳组件,复制,然后回到移动项目中,粘贴,就得到一个手机机壳组件啦。

美食类App原型制作分享-Kitchen Stories

Kitchen Stories 受到数百万用户的喜爱,它用美丽的图片找到美味的食谱,拥有免费的食谱视频和指导视频。在这款美食App原型中,图片如果全部使用占位符来表示,可能展现不出食物诱人的美味,因此,我采用的是数据自动填充功能,将图片大小、位置设置好之后,点击数据填充中的“美食”分类,一键自动随机填充各种美食图片,大大提高工作效率。

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

Sooshi是一款美食类的App,专门介绍各种寿司的制作,这款App最大的亮点在于每个菜单页面都使用了重力感应,使这款简单的App变得十分有趣。在寿司制作的详情介绍里,还使用了动画+文字的方式来呈现每一个制作步骤,生动明了,在这个页面的原型中,采用的是将所有步骤文字分别写好,然后全部隐藏,点击上一个步骤文字,显示下一个步骤的文字,使简单的制作步骤有互动的效果。

交通类App原型制作分享-DiDi

DiDi是一款打车App,这类App中用得最多的就是地图,在Mockplus中,有静态的地图组件,可以直接使用,然后为了还原App中的定位图标,我使用了圆形图标来拼凑了一个新的定位图标,其次,图标库中有几种不同的车辆图标,可以直接使用。下面一起来看看。

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

ColorfulClouds是一款界面精美的天气预报App,它可以准确预报降雨量、污染程度等。这款App最美的是它的首页天气插画,扁平精美,同时配上了适当的动效,把普通的天气变得漂亮有趣,十分吸引眼球。同时,这类App中会用到大量的天气图标,在Mockplus中,拥有2000+的矢量图标,可以轻松找到各类所需天气图标。

视频类App原型制作分享-VUE

VUE是一款短视频拍摄和剪辑App,是视频社交达人必备神器。它的配色简单鲜明。第一次进入App首页时,会有简单的操作引导说明,这在Mockplus中即可使用单独的一个页面来制作,又可使用弹出面板来制作。其次是录制视频时,点击开始按钮,会出现视频录制进度条,这里使用的是调整尺寸动画,将进度条(可以用形状组件表示)原始宽度设置到最小,然后调整进度条宽度即可实现。

视频类App原型制作分享-PocketVideo

PocketVideo是专为iPhone视频创作者设计的最强大的视频编辑应用程序。这款原型中,当切换到视频编辑页面时,视频下方的图像与音频会自动播放,在Mockplus中,可以采用载入时的触发方式,设置移动动画,估算好移动距离,将动画时间设置长一些(时间越长,移动速度越慢),这样就可实现图像的自动播放效果。

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

Onefootball 是一款适合于足球迷的应用,提供全球 100 多项赛事的新闻、数据、比分和直播。原型中选择“喜欢的球队”这个界面中,用到了悬浮按钮,采用的是滚动区来放置需要滚动的球队列表,然后将按钮放在滚动区上面,即可实现。此原型中还有很多重复布局,采用的是Mockplus的格子功能,让重复布局一拖拽就可快速完成。

日记类App原型制作分享-Grid Diary

Grid Diary是一款非常受文艺青年喜爱的记录应用,它设计简单,内容却非常丰富。它不再是单调的文字记录,界面的设计非常与众不同,由许多格子拼凑而成,每一个格子里面还带有一个问题,十分有趣。提到格子,不得不说Mockplus最近推出的全新表格组件,真正实现了所见即所得,它不再是文字输入+算法转化的方式,而是可以直接添加表格行列,在对应表格中双击即可实现文字输入。在设计这种带表格的界面时,简单且快速。由于制作这款原型时,表格组件还未推出,因此是用线条来拼凑的,稍显吃力。之后一起来试试这个全新的表格组件吧。

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

Airbnb是一家联系旅游人士和家有空房出租的房主的服务型App,它可以为用户提供多样的住宿信息。这款App的界面很干净整洁,清晰大字号的标题一目了然,干净的纯白底色突出图片内容,让我们聚焦信息本身而非界面。在这款原型中,我们用到了滚动区来设计图片的横向滚动,底部的标签栏,依然采用带文字图标,其中我们注意到"PROFILE"标签右上角有一个消息提示小红点,在Mockplus的带文字图标组件的属性中,我们可以直接勾选“Show Alarm”即可实现,同时还可在小圆点中设置数字来表示消息数量。

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

Wokabulary是一款多功能词汇学习App,可以学习多国语言词汇。原型的引导页面采用的图片+文字+分页器,需要注意的是分页器选中位置要与页面顺序一致。其次是语言的选择页面,在前面给大家介绍过滚动区和多行文本构成的时间选择器,这里同理采用一样的方式即可实现。

健身类App原型制作分享-Pacer

Pacer是一款运动健身类App,同大多数同类App一样,该App有个人身体健康管理,大量运动健身类视频,同时能实时记录运动相关数据。原型中,大家注意到底部的标签栏中间是一个异形的图标,这个采用的是圆形组件叠放在标签组上面制作而成,同时告诉大家一个Mockplus制作标签栏的小技巧,使用“带文字图标”制作标签栏中按钮,比图标+文字要快速简单很多。

记事类App原型制作分享-iBetter

iBetter是一款帮助你养成好习惯,戒掉坏习惯的App,App的首页采用日历的方式,可以对应记录每天的工作、生活事件等。比较有特色的是底部的菜单按钮图标,切换时有变大的的交互效果,在Mockplus中直接采用的是图标组件,并且将页面对应菜单图标颜色相对其他图标加深,大小加大,切换时就可以达到该效果。

生活管理类App原型制作分享-Way of Life

Way of Life,顾名思义,这是一款记录管理生活的App,对于不太会时间管理的人来说,这类应用通常会起到不小的帮助作用。在这款原型中,用到了时间选择器来设定闹钟,滚动数字来分别设置时钟与分钟,在Mockplus中,此功能可以使用滚动区+多行文本的方式来实现数字滚动,把滚动区背景设置为透明,再采用线条组件来框住选中的数字,即可实现时间选择器的效果。一起来看:

艺术类App原型制作分享-ArtStack

ArtStack是一款分享艺术的App,以自由而轻松的方式来发现,分享和记忆您喜欢的艺术品。从原型中我们可以看到,这款App以黑色为主色调,低调有品质感,其内容为艺术类的图片,图片本身质量较高,色彩丰富,与黑色搭配,更加突出、吸引眼球。原型中有一页是关注你喜欢的作品,点击“following”按钮,按钮颜色变为黑色,即关注成功,在Mockplus中,可以使用改变颜色交互来实现,同时选中“自动还原”,再次点击,可以变回原来的颜色,即取消关注。

饮品类App原型制作分享-Smoothies

Smoothies是一款饮品类的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原型制作分享-Pocket Fuel

这款App在配色上非常清新,启动页和登录注册页面都是采用的渐变色彩,目前Mockplus中还不支持渐变色彩,但在原型设计阶段似乎并无影响。之后的版本中会加入渐变色的支持,让原型设计更自由和有更多发挥的空间,甚至,UI后期的美化都将可以直接在Mockplus中去实现。

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

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

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

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

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

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

购物类App原型制作分享-Lyst

这是一款来自英国的时尚购物信息平台,传统的购物加上时尚信息推送是现在购物类应用常见的方式,购物类App讲究分类全面,搜索准确,布局通常是内容丰富但又条理清晰。所以在原型设计阶段,逻辑与布局显得尤为重要。

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

AnyList是一款可以帮你创建购物清单,并且帮助你整理食谱的生活工具App,前面引导页采用图片+文字的方式,介绍App的用法,登录注册采用选项卡切换的方式,减少了页面切换的繁琐操作,在Mockplus中,采用分段控件+内容面板结合使用的方式可以轻松达到此效果。