设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > APP设计 > 摹客教程:分分钟搞定APP首页原型设计

摹客教程:分分钟搞定APP首页原型设计

Devin
2017-07-11
773341

作为一个“年轻”的互联网产品经理,了解到前辈们经历过的手绘原型时代,无法想象那时候的工作效率,毕竟现在有了各种各样的高效原型设计工具,APP原型设计也变成了分分钟就能搞定的事情。以原型设计工具摹客RP为例,我们一起来看看绘制一款APP原型究竟有多简单吧~

Step 1: 创建项目

打开摹客RP,可以看到摹客RP提供了手机、平板电脑、网页以及自定义尺寸四种项目类型以及多种画板尺寸,可以供大家自由选择。填写好项目名称,选择好适配的项目尺寸,项目就创建完成啦。

Step 2: 快速布局

当然,快速布局的前提是,你已经在脑海里有了这个原型的大致框架。有了大致框架以后,我们就可以利用摹客RP预置的丰富组件和图标,来快速完成页面搭建啦。摹客RP的操作方式很简单,把需要的组件拖到画板中就可以。

首先我们来制作底部导航。如果你的APP原型只需要简洁的底部导航,那么直接使用摹客RP的“分段控件”组件就可以,将分段控件拖到画板底部,双击修改选项名称,再将组件两端拉至与画板同宽,圆角设置为0,底部导航就完成啦。摹客RP的分段控件自带交互属性,当我们完成其它页面搭建后,可以将三个选项链接到不同页面。

接下来我们在左侧项目树中,创建两个新页面,再在三个页面中分别进行内容填充。创建页面的步骤过于简单,在此不加赘述,我们直接来看在这三个页面中,我用到了哪些组件吧。

“主页”用到的组件:分段控件、图片、文本、输入框、按钮、图标。

“收藏”用到的组件:分段控件、图片、文本、输入框、按钮、图标。

“我的”用到的组件:分段控件、选项卡、图片、文本、输入框、按钮、图标。

可以看到,我们只用到了摹客预置的少部分组件,就完成了三个页面的搭建。对于产品经理来说,不需要制作高保真原型,只需要向设计师交付线框即可。但为了将需求传达得更加明确,我们也可以为原型增加一些简单的页面跳转交互。

Step 3: 制作交互

在之前的步骤中,我们为每个页面都添加了底部导航,接下来我们分别在每个页面双击底部导航,进入分段控件的编辑模式,并拖动选项后面的链接点,链接到左侧项目树中的对应页面。

在弹出的面板中,设置好“点击-页面跳转”的交互,如果想要更好的交互效果,也可以在下方设置好对应的参数。这样我们的交互效果就制作完成啦。

Step 4:  分享演示

完成原型设计后,我们可以在摹客RP界面右上角点击下载离线演示包,在弹出的面板中,我们可以设置原型的设备外壳和相关参数。打包下载后就可以发给小伙伴们啦,离线状态下也可以查看演示哦。

当然,还有更加简便的方法,就是直接分享在线演示链接。点击界面右上角的演示按钮,然后点击浮动工具条最右侧的分享按钮,我们就可以获得一个分享链接,同样可以设置对应的参数。值得一提的是,对项目进行更新后,演示链接也会同步更新,不需要重新分享,是不是很方便呢~

总结

对比Axure之类的老牌原型设计工具,摹客RP的原型设计流程不能更简单了,几乎不需要特意学习就能轻松上手。当然,简单并不代表着功能简陋,如果熟练掌握了摹客RP的各种高阶功能,比如矢量绘图、专业布局等功能,高保真原型设计也不在话下。

此外,摹客RP还自带流程图模式,绘制完原型,还可以在页面中增加流程图,让逻辑表达更加清晰。

最后(或许也是最重要的),摹客RP是一款完全基于云的原型工具,非常适合团队多成员进行实时协同工作。你和你的小伙伴可以同时编辑同一个项目的同一个页面,轻轻松松效率翻倍。这样一款上手简单、功能强悍的原型工具有没有让你心动呢,赶紧点击这里免费开始使用吧。

上一篇
Mockplus推出真正无限制终身版,做原型就要一辈子!

Devin   07/14

如何成为一名优秀的UI/UX设计师?

Berry   07/10

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com