邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

APP原型设计利器!【附】人人都是产品经理APP原型剖析

Thomas 2018-05-15 09:04:52 阅读:26523

对APP进行原型设计是产品开发早期阶段不可或缺的一部分,为此,如何选择一款高效、快速、简捷的原型工具就成为了令设计师头疼的问题。市场上的APP原型设计工具琳琅满目,从早期的visio到现在主流Axure、Mockplus、Justinmind、FluidUI等。的确会让很多新手小白无从下手。


APP原型设计


仁者见仁智者见智,不同的原型工具都有其平台独特的特性。今天,小编将根据个人的实操经验,来带领大家比较几款主流的APP原型设计工具。看到此篇文章的小伙伴有福啦,相信通过对比之后,你一定会有了自己的选择。


原型设计工具特性对比


看完之后,是不是感觉功能上差不多,还是无从选择呢?不用担心,我们先看看一款优秀的 APP原型设计工具应具备哪些特点:


①支持移动端及时演示效果(可随时随地给老板、客户演示)

②可复用的组件库(团队成员随时用,提高效率)

③可快速生成流程图(一张图,逻辑关系清晰明了)

④团队在线协作(多个PM狗协作设计)

⑤上手快、学习成本低(把更多时间花在设计上而非工具学习)

⑥手势操作、转场动画(这些都不需要)


据个人经验及综上所述,小编强烈推荐大家使用国产Mockplus做APP原型设计。说到这里,有人肯定不服了。当然,小编专治各种不服,下面,结合用Mockplus制作的“人人都是产品经理”APP原型来看看这款利器。


先来看看成品:


人人都是产品经理APP原型


在线演示地址:https://run.mockplus.cn/lsgu2a12JJmHzQDV/index.html


一键生成页面流程图:


人人都是产品经理APP原型页面流程图


APP原型设计解读:


人人都是产品经理APP阅读及问答页


人人都是产品经理APP学院及招聘页


从APP界面中,我们可以看出,此APP中有5个底部菜单(阅读、问答、学院、招聘、我的)。在阅读、问答、学院、招聘这四个页面的布局均是通过点击标签组切换至不同页面。此外,在单独页面中,内容的布局均一致。这些在Mockplus中均有封装好的组件和图标,可快速设计出原型。


1. 底部菜单栏设计


使用“带文字图标”组件,直接在图标库中填充对应图标。布局好之后,直接将其添加至自己的组件库,其余页面直接复用。


2. 菜单内的页面切换


直接使用标签组配合内容面板,轻松拖拽鼠标即可实现页面切换。(详情见:http://doc.mockplus.cn/?p=387


3. 页面内内容布局设计


内容页的布局均是一样的,我们只需做好一个,然后直接将其转换为快速格子,快速实现重复布局。而里面的内容及图片,可直接填充。(详情见:http://doc.mockplus.cn/?p=2811


表中的原型工具各有什么优劣势呢,下面,我将详细一一说明。


Axure

Axure原型设计工具


老牌原型工具,其拥有丰富控件库,鼠标拖拽即可快速制作原型。强大动态面板,可实现复杂的页面设计;支持导出图片、HTML和文档,将生成的HTML地址共享发给同事或客户,别人可直接写批注评论,可快速、准确的与相关人员进行沟通;团队协作,同一个项目,可实现多人共同参与设计,提高效率。


不足的是:学习难度较高,复杂的交互效果会涉及到事件及参数的使用,需具备一定的编程基础。对于新手小白会非常棘手,让人感觉力不从心,无处下手;卡,使用久了会明显感觉很臃肿,页面达到二十页以上,会有卡顿现象。


Mockplus

Mockplus原型设计工具


国产原型工具,主打更快、更简单。学习成本几乎为零,无需掌握任何编程知识;内置200多个常见组件,提供3000+图标素材。开箱即可用,轻松拖拽鼠标做个链接即可实现交互;提供8种演示和分享原型的方式。可导出HTML、图片、独立演示包。项目树等,对于APP原型,还可直接安装手机客户端,扫码或输入原型码查看;每个项目允许多个团队成员共同参与设计,随时随地,轻松协作。


不足的是:工作区有一定限制,编写说明文档不是很方便。


FluidUI


FluidUI


内置超过2000款的线框图和手机UI控件,并且还会经常进行更新;提供丰富的资源库(包含iOS 、Android及WIndows);支持以PNG及PDF方式导出。


不足的是:基于网页端的原型工具,速度有点缓慢。


Justinmind


justinmind.png


提供多种触屏的交互效果,例如滑动、缩放、旋转等;提供属性窗口,支持捕获PS等软件的图像属性;提供多样的组件,可以自定义创建组件库;


不足的是:在通过拖拽的方式实现页面跳转时,需要拖动整个组件到项目树上。由于没有连接线,不够直观。


怎么样?是不是突然觉得做APP原型设计是如此简单?当然,简单的前提是选择一款像Mockplus这样简单便捷的工具。

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:748169314 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶