邮箱订阅

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

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

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

了解更多

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

Narajia 2018-08-23 07:59:32 阅读:8689

线框图工具和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极具创意的下拉刷新案例大放送

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

_____

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

免费下载
logo

咨询客服

帮助群:727533832 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶