交付Sketch/XD/PS/Figma/Axure设计稿
原型设计工具,高效易用
UI设计工具,更懂中国设计师
轻松定制规范,高效管理资源
桌面端原型设计软件
内网专用版,高安全性
打开摹客RP,可以看到摹客RP提供了手机、平板电脑、网页以及自定义尺寸四种项目类型以及多种画板尺寸,可以供大家自由选择。填写好项目名称,选择好适配的项目尺寸,项目就创建完成啦。
当然,快速布局的前提是,你已经在脑海里有了这个原型的大致框架。有了大致框架以后,我们就可以利用摹客RP预置的丰富组件和图标,来快速完成页面搭建啦。摹客RP的操作方式很简单,把需要的组件拖到画板中就可以。
首先我们来制作底部导航。如果你的APP原型只需要简洁的底部导航,那么直接使用摹客RP的“分段控件”组件就可以,将分段控件拖到画板底部,双击修改选项名称,再将组件两端拉至与画板同宽,圆角设置为0,底部导航就完成啦。摹客RP的分段控件自带交互属性,当我们完成其它页面搭建后,可以将三个选项链接到不同页面。
接下来我们在左侧项目树中,创建两个新页面,再在三个页面中分别进行内容填充。创建页面的步骤过于简单,在此不加赘述,我们直接来看在这三个页面中,我用到了哪些组件吧。
“主页”用到的组件:分段控件、图片、文本、输入框、按钮、图标。
“收藏”用到的组件:分段控件、图片、文本、输入框、按钮、图标。
“我的”用到的组件:分段控件、选项卡、图片、文本、输入框、按钮、图标。
可以看到,我们只用到了摹客预置的少部分组件,就完成了三个页面的搭建。对于产品经理来说,不需要制作高保真原型,只需要向设计师交付线框即可。但为了将需求传达得更加明确,我们也可以为原型增加一些简单的页面跳转交互。
在之前的步骤中,我们为每个页面都添加了底部导航,接下来我们分别在每个页面双击底部导航,进入分段控件的编辑模式,并拖动选项后面的链接点,链接到左侧项目树中的对应页面。
在弹出的面板中,设置好“点击-页面跳转”的交互,如果想要更好的交互效果,也可以在下方设置好对应的参数。这样我们的交互效果就制作完成啦。
对比Axure之类的老牌原型设计工具,摹客RP的原型设计流程不能更简单了,几乎不需要特意学习就能轻松上手。当然,简单并不代表着功能简陋,如果熟练掌握了摹客RP的各种高阶功能,比如矢量绘图、专业布局等功能,高保真原型设计也不在话下。
此外,摹客RP还自带流程图模式,绘制完原型,还可以在页面中增加流程图,让逻辑表达更加清晰。