恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
APP原型设计利器!【附】人人都是产品经理APP原型剖析
0.0°
2018-06-06 原创文章 教程 举报 2450 7 6 0

今天,小编将根据个人的实操经验,来带领大家比较几款主流的APP原型设计工具。

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


Image title


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


Image title


ALT:原型特性对比

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

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

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

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

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

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

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

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

先来看看成品:


Image title


ALT:人人都是产品经理APP原型

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

一键生成页面流程图:


Image title


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

APP原型设计解读:


Image title


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


Image title


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


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


1. 底部菜单栏设计


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


2. 菜单内的页面切换


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


3. 页面内内容布局设计


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


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


Axure 


Image title


ALT:Axure


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


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


Mockplus


Image title


ALT:Mockplus


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


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


FluidUI


Image title


ALT:FluidUI


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


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


Justinmind


Image title


ALT:Justinmind


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


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


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

更新:2018-06-06

收藏

7人已收藏

摹客设计云

设计1+2,摹客就够了!

  • 576

    作品

  • 859

    粉丝

  • 6

    关注

  • 【摹客RP会员日】狂欢来袭!终身版团购低至5折!
  • 摹客RP买一年送一年!这波钜惠只剩最后5天!
  • 摹客RP,个人空间全新上线,享沉浸式设计体验!
  • 产品经理需要了解的前后端技术知识

    猜你喜欢

      2018-06-06 原创文章 教程 举报 2450 7 6 0

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

      0.0°

      你确定要举报APP原型设计利器!【附】人人都是产品经理APP原型剖析

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年06月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录