移动端的交互设计软件JustinMind

转自http://www.cocoachina.com/gamedev/misc/2013/0407/5941.html

移动已经是不可阻挡的趋势,未来人们的获取信息、娱乐、交流的最主要渠道就是移动终端。

交互在移动应用上发挥的作用更大,能够实现基于传感器的多种效果。这里推荐一款专注移动端的

交互设计软件:JustinMind。http://www.justinmind.com/  它是由西班牙JustinMind公司出品

的原型制作工具,可以输出Html页面。


与目前主流的交互设计工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更为专属于设计移动终端上app应用。
 
下面先对JustinMind做一个简单的认识,这是该软件的主界面,共有5个功能分区:

 

 

下面是JustinMind的一些特性:

 

1.使用JustinMind,你可以在几分钟内利用其广泛的组件和交互绘制高保真原型。

它提供了一些基本的形状,如矩形和文本,还有特定的组件,如菜单,表单或数据列表。

 

 

 

2.关于手势的交互效果:JustinMind提供了多种触屏的交互效果,例如滑动、缩放、旋转,

甚至捕捉设备方向等等。在需要产生效果的部件中选择对应的手势即可。

 

 3.可以创建自己的组件库:JustinMind为iPhone ,iPad,黑莓,Android提供了多样的组件。

你可以创建自定义组件库,方法是将排列好的单个组件放在一起,并将它们集体框选拖动到组件库。

这样下次你就可以直接使用自己定义好的组件。

 

 

 

 4.更为便捷的定义样式:相比Axure,JustinMind更好的提供了属性窗口,

  并且更好的支持捕获PS等软件的图像属性。

 

 

5.JustinMind可以导出原型的所有信息到Microsoft Word。能够一键生成及其规范的文档。

 

 

 6.共享原型进行测试。JustinMind支持将原型上传到服务器并提供给他人进行测试,为产品的

改进做出了良好的贡献。最为特别的是,基于usernote的服务允许你将原型放到移动设备上进行测试。

 

 

 7.更友好的定义交互方式。
在JustinMind中,你可以通过拖拽等方式来实现跳转、定向等交互效果,无需像Axure一样每一步都只能

通过点击来完成。并且显示更为直观,如进度条。同时可以通过一些简单的无代码逻辑语句实现更为高级的交互效果。

 

 

 8.全球范围内的复用、数据共享。
每一个模板都让这一套组件有不同的视觉风格,变量允许将数据从一个屏幕迁移到另一个,

甚至使用它们来检查是否满足条件。

 

   
 
9.发布和收集反馈意见。
发布Prototyper作品到usernote后,全球各地的人将通过Web浏览器访问您的原型。他们的反馈结果将会实时的呈现在您的原型页面。

 

 

 由于JustinMind在交互方式的实现以及原型的生成方面比较具有特点,所以我做了下面一些演示:
 
1.事件与交互
事件是JustinMind的一个关键功能,Justinmind Prototyper的事件由两个主要部分组成:一个是事件的触发(或用户事件),另一个是一组操作。每一个事件必须在屏幕上定义
一个特定的元素,这将作为事件的触发源。

 

这个就是事件窗口,在上文的主界面介绍中有过简单的介绍。

 

 

交互动作按照顺序依次排列下来,执行的顺序从上到下一目了然。       每个交互动作中有很多的操作,

这些操作是从左到右依次执行的。只有这些操作执行完成后,才会到下一个交互动作。

 

 2.关于链接的设置

  

使用链接最简单的操作就是,例如,点击Button跳转到Screen3,那么直接将Button拖拽到Screen3上面就可以了。

 

3.下面列举了一些常用的事件,可以看出来JustinMind的图标还是非常形象化的:

click On Click: 当用户单击鼠标左键并松开
mouseup On Mouse Up: 当用户释放鼠标按键
mousedown On Mouse Down: 当用户按下鼠标按键
doubleclick On Double-click : 当用户双击鼠标左键
rightclick On Right-click: 当用户单击鼠标右键并松开
toggle On Toggle: 当用户单击鼠标左键后,自定义的事件将被执行。用户再次点击后,事件将被还原
mouseover On Mouse Over: 当用户鼠标位于所定义区域之上
mouseenter On Mouse Enter: 当用户鼠标进入所定义区域
mouseenter On Mouse Leave: 当用户鼠标离开所定义区域
dragstart On Drag Start: 当用户按住鼠标左键并拖动至少5像素时
drag On Drag: 当用户按住鼠标左键并保持鼠标移动时
drop On Drag Stop: 当用户停止移动鼠标并且松开鼠标右键
keyup On Key Up: 当键盘按键被释放
keydown On Key Down: 当键盘按键被压下
swipeup On Swipe Up: 当用户一根手指向上滑动
swipedown On Swipe Down: 当用户一根手指向下滑动
swipeleftup On Swipe Left Up 当用户一根手指向左上方滑动
swipeleft On Swipe Left 当用户一根手指向左滑动
swipeleftdown On Swipe Left Down 当用户一根手指向左下方滑动
swiperightup On Swipe Right Up 当用户一根手指向右上方滑动
swiperight On Swipe Right 当用户一根手指向右滑动
swiperightdown On Swipe Right Down 当用户一根手指向右下方滑动
pinchopen On Pinch Open:当用户两根手指互相张开滑动
pinchclose On Pinch Close:当用户两根手指收缩活动
rotateleft On Rotate Left 当用户两根手指向左旋转滑动
rotateright On Rotate Right 当用户两根手指向右旋转滑动
taphold On Tap Hold: 当用户手指按住屏幕超过2秒
orientationportrait On Orientation Portrait: 当设备由横屏切换为竖屏
orientationlandscape On Orientation Landscape: 当设备由竖屏切为横屏
change On Change: 当元素的值通过用户的直接操作发生变化时
focusin On Focus In: 当输入框获得焦点时
focusout On Focus Out: 当输入框失去焦点时
pageload On Page Load: 当页面加载时
pageunload On Page Unload: 当用户离开页面时

  

举个简单但是有用的例子,当你要实现用户名密码验证的交互效果时,在大多数原型工具中,

我们需要对输入框做一些逻辑上的设定,填好其属性中的数值。而在JustinMind中则更为直观:
在交互窗口中,选择条件表达式:

 


将需要验证的输入框拖拽到相应判断窗口:

 

 

将相应的判断逻辑拖拽到判断窗口,例如等号,并在右侧输入框输入需要的值

 

 

OK,That's it !在主界面点击生成,就可以及时预览效果了

 

 

关于模板
你可以为页面上的不同组件选择使用不同的模板,从而不改变内容只改变样式,切换起来非常灵活。

 

 

总结

JustinMind相比Axure最让人喜爱的4个原因有:


1.Easy Drag and Drop:JustinMind里面对于组件的交互效果有着及其方便的操作方式,点击一个对象,

拖动到另一个对象,OK,这两个对象已经产生了交互的碰撞。
 
2.Powerful Interactions:JustinMind提供了强大的交互效果,鼠标hover的状态、点击后的效果,非常逼真。

同时在移动设备上能够高度仿真的实现各种手势效果。
 
3.Quickly Simulate:JustinMind提供了一键生成,不用再像Axure那样多步操作,点击后直接在浏览器窗口打开。
 
4.Great Extras:网上有各种各样的组件、模板,可以根据需要选择相应的进行使用。

转载于:https://www.cnblogs.com/jiangshiyong/archive/2013/04/16/3003523.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值