设置交互要多久?最快只需三秒!

原型设计分为两种,一种是静态的线框图,我们一般叫wireframing;另一种是动态的原型,一般叫作prototyping。目前在prototyping设计中涉及到的交互主要分为三种:页链接、交互状态和组件之间的交互。而动态原型的设计工具中比较常见的能够包括这三种交互设置功能的也有很多,比如:Axure、Justinmind、Mockplus和Proto.io等等,种类之多,数不胜数。但是,这些工具无一例外,都在宣传自己的过程中说自己是快捷迅速的。我们平时说的Axure,全名叫做Axure RP,而RP代表的意思恰恰就是Rapid Prototyping(快速设计原型);Mockplus也说自己是更快更简单的原型设计工具。既然都说自己是快速简单,我们今天就来比较实际操作一下,你们到底有多快。

页链接设置:速度平分秋色,可视化体现差异

在Axure所有的交互设置中,页面链接是最简单的一种了,只需要点击右侧属性面板中的创建链接,并在下拉菜单中选中需要跳转的页面就可以了。但是Axure在这一过程中有一个明显的不足,就是对于可视化的缺失。如果在这个项目中各个页面的名称比较相近,那么这样使很发生链接错的情况的。

而Justinmind应该是也体会到了Axure的这一问题,它采用的是一种拖拽的方式来实现页链接的设置。但是这似乎并没有真正的解决可视化的问题。因为,这个表示拖拽的图标实在太小了。

justinmind (1)

如果说Axure和Justinmind比较相似,那么Proto.io和Mockplus也应该是一见如故了。两者都采用了拖拽链接点的方式来进行页链接设置的操作,而且这个拖拽的过程是有明显的链接线显示的。这就大大提高了可视化,从而降低了操作的难度。更加可贵的是,Mockplus中组件的链接点在停留在页面上的时候还会显示该页面的缩略图,这使得错误链接的可能性降到了最低。

Mockplus

组件交互设置:速度差异开始变得明显

这里的设置中,四款工具的在交互设置上的速度差别就体现出来一些了。Axure在这里采用的方法是点击添加用例,然后弹出一个设置的面板,在面板中选择对应的命令,交互动作,和动效。Justinmind还是察觉到了Axure这里设置的不方便,但是,就像页链接的设置一样,Justinmind也还是没有拿出更好的解决办法。设置中Justinmind沿用了Axure的模式,只是在选择的过程中采用了下拉菜单。虽然在选择目标时使用了可视化的窗口,但并没有从根本上解决操作繁琐的问题。

Axure

反观两个年轻人,Mockplus和Proto.io在组件交互设置的模式上使用了更加简单快捷的拖拽,也就是在各种工具中流行的Drag-and-Drop。只是简单的对链接点的拖动就可以实现组件之间的交互。Mockplus的命令选择相对更加直接,Proto.io的交互命令可能还需要在进一步的进行调整。这种在交互设置上的拖拽模式和高度的可视化,使得操作中目标更加明确,动作更加清晰,Proto.io的组件大纲的功能也使得组件之间的关系更加有条理。Mockplus也在计划推出相应的功能,这里我们一起期待一下吧。

protoio

组件交互状态设置:Mockplus只需三秒。

作为一款新兴的原型设计工具,Mockplus不断强调自己快速和敏捷。在大部分原型设计工具软件没有为组件的交互状态单独设置功能选项的时候,Mockplus已经有了相对完善的组件交互状态设置的体系。主要的操作体现在属性面板中,这个闪电一样的标志就是交互状态设置的按钮,在弹出的面板中,可以设置鼠标经过和鼠标落下两种状态。而并不是像Axure、Justinmind或者Proto.io那样把交互状态作为一种组件之间的交互来设置。这个功能看似简单,但是它从这一个方向推动着原型设计向着更简单、更快速靠拢。像这样改变颜色的交互状态设置,三秒足够了!

Mockplus2

我们不可否认,Axure和Justinmind在功能的全面性上确实占有优势,但是我们也一样能够像Mockplus这种新兴的力量的崛起。随着行业发展,大家对原型设计工具需求和要求不断提高,希望这样的新力量会带给我们更多的惊喜。

原创文章,作者:yanz kontol,如若转载,请注明出处:https://www.iamue.com/18673/

(0)
yanz kontolyanz kontol
上一篇 2023-03-03
下一篇 2023-03-03

相关推荐

  • 微博-微访谈 产品研究

    最近由于项目改版需求,对微博微访谈产品进行了一个专门的研究分析,主要从人群定位、入口设计、交互方式、互动效果等几方面展开研究,具体项目目标不详述,只分析研究过程,可借鉴结果更多倾向于产品策略等方向。 …

    2016-09-22
  • 跳出思维圈,“类H5”助你市场推广一臂之力

    HTML5,也就是我们常说的H5,它是一种标记语言,主要用于网站的编写和Web App的开发。H5制作的网页可以说是现在网络推广、促销方面的利器。其优点主要体现在两个方面,一是丰富的动效支持,二是查看方便。H5近年来…

    2023-03-03
  • Justinmind权威指南:基础-Justinmind 6.x工作界面与机制

    ​这一篇也是仅作了解熟悉,方面大家后面快速上手,先来看一看工作界面以及各个功能的入口。然后再来了解一下工作方式。 Justinmind的主界面简介 主要分为几个区域:导航栏、工具属性栏、元件区、交互事件区、数据源…

    2015-08-05
  • 产品经理亲述修练之路(上篇)

    一、产品经理修练之信息结构--产品分析 前言: 2011年从北京回到重庆后,产品经理就是我一个奋斗的目标,但由于各种原因(主要还是自己的心态没有准备好)一致在逃避。随着孩子的到来,随着她一天天的长大,我也在…

    2015-11-11
  • 设计师你的创作工具如何让你的2016充满惊喜?Chapter 1

    IAMUE官方微博正在送书活动:点这里参加 搜@IAMUE 原标题:如何让你的2016充满惊喜?|Chapter 1                                                                                                             …

    交互设计 2016-02-20
  • 8种移动APP导航设计模式大对比

    本文转自用户体验联盟 当我们确定了移动APP的设计需求和APP产品设计流程之后,开始着手设计APP界面UI或是APP原型图啦。这个时候我们都要面临的第一个问题就是如何将信息以最优的方式组合起来? 也许我们对比和了解…

    原型设计教程 2014-10-24
  • 【Mockplus教程】收藏和重用

    1. 制作模板   选择需要制作为模板的页面,鼠标右击,弹出的菜单中选择“加入到模板收藏”,然后选择相应 的模板库,如果没有模板库会提示新建一个。 加入成功之后会在左边模板收藏栏中看到模板页面的缩略图。 &…

    Mockplus 2015-08-31
  • 【深度产品体验】掌阅VIP的我为什么毅然选择网易蜗牛读书

    摘要:伴随着互联网时代的到来,人们的生活方式发生了很大变化,在阅读领域,人们已经从传统的纸质阅读逐渐转向数字化阅读,尤其是移动阅读习惯的养成,基于不同阅读动机衍生出各类垂直细分的移动阅读应用。我国移…

    2017-04-25
  • Mockplus原型交互跟我做之7 - 拉长页面做滚动,并固定顶部和底部

    在Mockplus的App项目,你可以快速地拉长页面做滚动,并且固定顶部和底部。请看视频:

    2016-02-18
  • Mockplus原型交互跟我做之9–再说“链接点”

    上次我们已经对链接小圆点进行了图文并茂的说明,其实无论是跨页链接还是页内链接,在链接创建好了之后,选中按钮,当你把鼠标移动到小圆点的时候,它会自动指示链接目标(链接到的页面或者组件),请参考如下演示…

    2016-07-07