设计协作,用摹客

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

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

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

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

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

分享到微信朋友圈:

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

博客 > 设计和原型工具 > 超实用的App原型设计工具入门指南,初学者必看!!!

超实用的App原型设计工具入门指南,初学者必看!!!

Narajia
2018-08-23
361741

线框图工具和App原型设计工具不断的改变着UX设计师的工作方式。作为一名设计师,很幸运市面上有丰富的原型设计工具供我们使用。特别是像Axure,Mockplus,sketch这样的app原型工具,可以提供各种保真度,让我们能够以较低的成本来创建我们的原型。这篇文章中,博主将分享一些app原型设计工具的入门知识,也会推荐一些口碑较好的原型设计工具。

原型设计过程中需要避免的问题:

l 过于关注视觉设计

l 忽略了可用性测试

l 没有收集用户反馈

l 忽视了原型工具的重要性

首先当我们在设计一个应用程序或网站时,会选择一些app原型设计工具来画原型。直接创建高保真原型非常不明智,不仅会投入大量的人力金钱资源,也会浪费大量的时间。在产品的初级阶段,最好选择使用线框图或者快速的app原型工具来创建原型。

mockplus流程图

为什么产品初级阶段最好选择中低保原型?

原型作为一种交流工具,其主要任务是让团队成员快速了解整个产品,框架、结构、布局,逻辑等。便于之后的讨论并迅速搜集用户的反馈,从而不断来改进自己的产品。由于原型并不是产品的最终版本,所以不需要考虑太多视觉方面的细节,因为在产品迭代过程中,设计师会反复的进行修改。

使用app原型设计工具的优势:

  • 节省时间和金钱;
  • 可让每个人都可参与到设计过程中;
  • 充当设计师和开发人员之间的桥梁;


简单介绍下原型的分类及区别:


纸上原型(Paper-prototyping)

顾名思义,不借助原型设计工具,利用笔和纸绘制的原型。设计师可随时随地的将头脑中的想法画在纸上;简单快速,低成本,所以大部分设计师都很喜欢。

纸上原型

低保真线框图(wireframe)


不同于app原型设计工具如此在乎视觉效果,线框图只关注于我们想表达的功能,至于外观,不重要,所以色彩大多以黑白灰为主。线框图的目的是清晰的表达出你产品的页面布局,结构以及操作逻辑。

线框图

source:App原型工具绘制的线框图

中高保真的原型模型(prototype)


原型是指可点击,可操作的原型,更像是一个成品,其比较真实的模拟了用户与UI界面之间的交互,经过制作原型,用户测试等,设计师可在产品开发的早期及时的发现产品存在的问题并修正,帮助设计师不断迭代完善设计和验证自己的想法。

mockplus原型设计图

来源:用Mockplus绘制的app原型。Mockplus这样的app原型设计工具可以通过一键拖拽链接点与页面与组件进行交互,轻松创建交互原型。

简而言之,原型设计包括一系列保真度,从低到高,设计师根据不同的设计需求,来选择和使用不同的app原型工具。

使用app原型设计工具的三个阶段


1. 设计


选择一款适合的app原型工具,根据用户的需求创建设计原型。我们需从可用性,可访问性,信息架构(如何更好呈现信息?)等方面来考虑设计,给用户带来良好的用户体验。

2. 测试与反馈


及时收集团队成员或者用户的反馈。当团队协作时,头脑风暴最有效,所以最好准备好一些便利贴,重要的反馈一点要记录下来!通过原型图→反馈→原型图→反馈这个流程不断来改进产品。像Mockplus这样的app原型设计工具可让设计师直接在原型中来收集反馈,使参与此项目的每位设计师都能直接发表评论,省时省力。

3. 完善


根据反馈,迭代→反馈→迭代→反馈,及时改进并完善产品。

口碑最好的app原型设计工具推荐


大多数新产品的设计最好从绘制线框图开始,然后根据系统的复杂程度和保真度的要求,不断迭代,将其转化成中或高保真的原型。

Mockplus

  • 兼容:Mac,Window,Android,IOS
  • 学习曲线:低
  • 优势:快速进行设计,交互和测试

Mockplus是产品经理圈子中最受欢迎的一款app原型设计工具。与Axure等复杂的app原型工具相比,Mockplus最大的优势就是快,简单,高效。非常适合做中低保真原型,采用拖拽连接点的方式就可快速的创建页面与组件的交互,并且提供了封装好的3,000个图标和200个组件,一键拖拽,即可使用。另外Mockplus有8种预览方式可以共享和测试你的原型,也可直接通过微信小程序分享给客户或者朋友查看,十分方便,这也是我非常喜欢的原因之一。

口碑最好的app原型设计工具推荐

Sketch

  • 兼容:只支持Mac
  • 学习曲线:中
  • 优势:轻量,提供大量插件

Sketch是一款比较受欢迎的基于矢量的app原型设计工具。自2009年推出以来,Sketch就收获了一大批粉丝。 Sketch提供了上百个插件,基本上你想要的插件都可以下载到,极大的提升了设计师的工作效率。虽然Sketch确实支持一定程度上的交互和用户流(使用插件)但它真正令人眼前一亮的是它填补了Photoshop一些功能上的空白。

Axure

  • 兼容:Mac&Win
  • 学习曲线:高
  • 优势:拥有强大功能的界面

Axure是一款强大的原型设计工具,适合有复杂交互的web端产品。学习成本较高,需要设计师有足够的耐心和时间去学习它。但如果你喜欢简单和高效的app原型工具,建议还是选择Mockplus。

总结:

在产品的不同阶段选择不同的app原型设计工具。正如我之前说的,原型并不是成品,所有不需要花太多精力在设计高保真原型上面,只要能清晰的传达出产品的构架,布局,操作逻辑即可,Mockplus不失为一个很好的选择。节省时间,快速输出自己的想法,迅速收集反馈,及时对产品进行迭代和完善,才是一名合格产品经理应该做的事情。

导航栏设计:教你如何构建出色的用户体验

干货集合!!UI设计师必备的五款界面设计工具

【附教程】2018九款最佳下拉菜单设计实例

【附教程】App原型设计—Dribbble极具创意的下拉刷新案例大放送


【摹客七月震撼回馈:199元原型设计终身用!】

即日起至8月5日,摹客在线原型,终身特权;Mockplus个人终身版,感恩钜惠。还有老用户专属福利等你领!

一半价格,双倍体验!

活动地址:https://www.mockplus.cn/buy/mockplus-perpetual


上一篇
界面设计中,交互方式是选择滑动还是点击呢?

王争   08/24

【原型实战】分分钟搞定Unsplash网站原型设计

Thomas   08/22

下一篇
需要帮助?

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

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com