据国内三大运营商披露的最新数字,截止 2012 年 1 月份,中国的手机用户数已达 9.8758 亿,即将逼近 10 亿大关。CNNIC最新的调查显示,截至 2012年6月,大陆5.38 亿的网民中,有 15.3%的
网民不使用PC(桌上型电脑),也不使用NB(笔记型电脑)上网,只使用手机上网。砖家解释,这个现象来自互联网向某些不便使用PC或NB的人群扩散的结果。阅读全文
智能手机功能越来越强大,同时价格不断走低,让手机上网变得廉价、方便,降低了移动智慧终端机的使用门槛,把原本用普通手机的用户转化成手机上网用户。
目前此现象还在发展中,推估单用手机上网的人群规模还将继续增长。
移动已经是不可阻挡的趋势,未来人们的获取信息、娱乐、交流的最主要渠道就是移动终端。交互在移动应用上发挥的作用更大,能够实现基于传感器的多种效果。
与目前主流的交互设计工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更为专属于设计移动终端上app应用。
下面先对JustinMind做一个简单的认识,这是该软件的主界面,共有5个功能分区:
![](https://i-blog.csdnimg.cn/blog_migrate/2cca27f5326e09b8fb4a0b2cfd885616.png)
下面是JustinMind的一些特性:
1.使用JustinMind,你可以在几分钟内利用其广泛的组件和交互绘制高保真原型。它提供了一些基本的形状,如矩形和文本,还有特定的组件,如菜单,表单或数据列表。
![](https://i-blog.csdnimg.cn/blog_migrate/659e704cb3ccc16fc86194a5640ad4ae.jpeg)
2.关于手势的交互效果:
JustinMind提供了多种触屏的交互效果,例如滑动、缩放、旋转,甚至捕捉设备方向等等。在需要产生效果的部件中选择对应的手势即可。
![](https://i-blog.csdnimg.cn/blog_migrate/7debb4c6d7ce2b47b5beb517b45cc4c2.jpeg)
3.可以创建自己的组件库。
JustinMind为iPhone ,iPad,黑莓,Android提供了多样的组件。你可以创建自定义组件库,方法是将排列好的单个组件放在一起,并将它们集体框选拖动到组件库。
这样下次你就可以直接使用自己定义好的组件。
![](https://i-blog.csdnimg.cn/blog_migrate/ad8e63bdf8dc7f93cac60c3dc6854afc.jpeg)
4.更为便捷的定义样式。
相比Axure,JustinMind更好的提供了属性窗口,并且更好的支持捕获PS等软件的图像属性。
![](https://i-blog.csdnimg.cn/blog_migrate/b860c21943b6a2a4deaed3fe3ab551b2.jpeg)
5.JustinMind可以导出原型的所有信息到Microsoft Word。能够一键生成及其规范的文档。
![](https://i-blog.csdnimg.cn/blog_migrate/398ba57e61e987312d1bc3786cb8886b.jpeg)
6.共享原型进行测试。
JustinMind支持将原型上传到服务器并提供给他人进行测试,为产品的改进做出了良好的贡献。最为特别的是,基于usernote的服务允许你将原型放到移动设备上进行测试。
![](https://i-blog.csdnimg.cn/blog_migrate/cb0ef9f4e8cc5d411c77319546b19cbe.jpeg)
7.更友好的定义交互方式。
在JustinMind中,你可以通过拖拽等方式来实现跳转、定向等交互效果,无需像Axure一样每一步都只能通过点击来完成。并且显示更为直观,如进度条。
同时可以通过一些简单的无代码逻辑语句实现更为高级的交互效果。
![](https://i-blog.csdnimg.cn/blog_migrate/5056e72804a6c5df8e3b6e4a5c6b4022.jpeg)
8.全球范围内的复用、数据共享。
每一个模板都让这一套组件有不同的视觉风格,变量允许将数据从一个屏幕迁移到另一个,甚至使用它们来检查是否满足条件。
![](https://i-blog.csdnimg.cn/blog_migrate/c3323dff638a531f668223eb13aa76d5.jpeg)
9.发布和收集反馈意见。
发布Prototyper作品到usernote后,全球各地的人将通过Web浏览器访问您的原型。他们的反馈结果将会实时的呈现在您的原型页面。
![](https://i-blog.csdnimg.cn/blog_migrate/0fab9458def05ef61539df152ec90eff.png)
由于JustinMind在交互方式的实现以及原型的生成方面比较具有特点,所以我做了下面一些演示:
1.事件与交互
事件是JustinMind的一个关键功能,Justinmind Prototyper的事件由两个主要部分组成:一个是事件的触发(或用户事件),另一个是一组操作。每一个事件必须在屏幕上定义
一个特定的元素,这将作为事件的触发源。
![](https://i-blog.csdnimg.cn/blog_migrate/b9b08edf43b91bb4b303322c915baace.jpeg)
这个就是事件窗口,在上文的主界面介绍中有过简单的介绍。
![](https://i-blog.csdnimg.cn/blog_migrate/a1ae33ea9ffc6d61f01424e5f7f62382.jpeg)
交互动作按照顺序依次排列下来,执行的顺序从上到下一目了然。 每个交互动作中有很多的操作,这些操作是从左到右依次执行的。只有这些操作执行完成后,才会到下一个交互动作。
2.关于链接的设置
![](https://i-blog.csdnimg.cn/blog_migrate/808a42cc38fd179268b1b7f96a46d3c2.png)
使用链接最简单的操作就是,例如,点击Button跳转到Screen3,那么直接将Button拖拽到Screen3上面就可以了。
3.下面列举了一些常用的事件,可以看出来JustinMind的图标还是非常形象化的:
![click](https://i-blog.csdnimg.cn/blog_migrate/316cf1de2b2683ca0d940cfe76e6d96d.png)
![mouseup](https://i-blog.csdnimg.cn/blog_migrate/316cf1de2b2683ca0d940cfe76e6d96d.png)
![mousedown](https://i-blog.csdnimg.cn/blog_migrate/316cf1de2b2683ca0d940cfe76e6d96d.png)
![doubleclick](https://i-blog.csdnimg.cn/blog_migrate/8fe2d2cb5b721b56bb0456e0b3dbca23.png)
![rightclick](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/right-click.gif)
![toggle](https://i-blog.csdnimg.cn/blog_migrate/ac50ad10f21467653e9ae5401cb56433.png)
![mouseover](https://i-blog.csdnimg.cn/blog_migrate/9da29d4b33c2ba02a062edd499fbf557.png)
![mouseenter](https://i-blog.csdnimg.cn/blog_migrate/12b42dcb4bff94c81b2142b316c45a25.png)
![mouseenter](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/mouse-leave.gif)
![dragstart](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/drag-start.gif)
![drag](https://i-blog.csdnimg.cn/blog_migrate/7c2d4817b27a36d830c4c5643af9842c.png)
![drop](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/drop.gif)
![keyup](https://i-blog.csdnimg.cn/blog_migrate/5cbd9e2d3e5159e18f9c319f6f6e54b2.png)
![keydown](https://i-blog.csdnimg.cn/blog_migrate/1fab96f75f13ac418ef81a8ee9e7d4f1.png)
![swipeup](https://i-blog.csdnimg.cn/blog_migrate/b72d3c9d25811b2317f89f187eec46f4.png)
![swipedown](https://i-blog.csdnimg.cn/blog_migrate/efbaf34ee17a61834bce606f35dbb5ee.png)
![swipeleftup](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/swipe-left-up.png)
![swipeleft](https://i-blog.csdnimg.cn/blog_migrate/37f214efcfe1bdd63788e2ee69697ac1.png)
![swipeleftdown](https://i-blog.csdnimg.cn/blog_migrate/929666cc589c52edd30c003311f9ec7d.png)
![swiperightup](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/swipe-right-up.png)
![swiperight](https://i-blog.csdnimg.cn/blog_migrate/4b1469e5d1b82b7db75a615d9b0cf8fd.png)
![swiperightdown](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/swipe-right-down.png)
![pinchopen](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/pinch-open.png)
![pinchclose](https://i-blog.csdnimg.cn/blog_migrate/bf35ce9cf65753a9f4590a86d3f2a63e.png)
![rotateleft](https://i-blog.csdnimg.cn/blog_migrate/f6779e4e340cd645d450c98555bb97f3.png)
![rotateright](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/rotate-right.png)
![taphold](https://i-blog.csdnimg.cn/blog_migrate/4b3016029905ec5aa2fc63c791e57de6.png)
![orientationportrait](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/orientation-portrait.png)
![orientationlandscape](https://i-blog.csdnimg.cn/blog_migrate/2a0a7f88a7df30043922878c5e1990b9.png)
![change](https://i-blog.csdnimg.cn/blog_migrate/6471a5df2c037fc7c3db0259aa8e539d.png)
![focusin](https://i-blog.csdnimg.cn/blog_migrate/3c674ace03e36d3cb409ca80cedf9da6.png)
![focusout](https://i-blog.csdnimg.cn/blog_migrate/453ae275eb8d9f74a33203e096605c89.png)
![pageload](http://justinmind.com/help/topic/com.justinmind.prototyper.infocenter/html/images/events/page-load.gif)
![pageunload](https://i-blog.csdnimg.cn/blog_migrate/b0b59b27aefec1738c755972f816de50.png)
举个简单但是有用的例子,当你要实现用户名密码验证的交互效果时,在大多数原型工具中,我们需要对输入框做一些逻辑上的设定,填好其属性中的数值。而在JustinMind中则更为直观:
在交互窗口中,选择条件表达式:
![](https://i-blog.csdnimg.cn/blog_migrate/79ec3e357bd3cd59c36ebddc12748bfd.jpeg)
将需要验证的输入框拖拽到相应判断窗口:
![](https://i-blog.csdnimg.cn/blog_migrate/0ea6bd7cdcf83e08a08d7d25b0dda2e2.jpeg)
将相应的判断逻辑拖拽到判断窗口,例如等号,并在右侧输入框输入需要的值
![](https://i-blog.csdnimg.cn/blog_migrate/30ca9492b8651ad8da9f5e34cefd57c0.jpeg)
OK,That's it !在主界面点击生成,就可以及时预览效果了
![](https://i-blog.csdnimg.cn/blog_migrate/ab59aa1b2bea24e63b4d1e78f96c216a.jpeg)
关于模板
你可以为页面上的不同组件选择使用不同的模板,从而不改变内容只改变样式,切换起来非常灵活。
![](https://i-blog.csdnimg.cn/blog_migrate/92c70664c6b0065cd35c854c7f4fd548.jpeg)
总结
JustinMind相比Axure最让人喜爱的4个原因有:
1.Easy Drag and Drop
JustinMind里面对于组件的交互效果有着及其方便的操作方式,点击一个对象,拖动到另一个对象,OK,这两个对象已经产生了交互的碰撞。
2.Powerful Interactions
JustinMind提供了强大的交互效果,鼠标hover的状态、点击后的效果,非常逼真。同时在移动设备上能够高度仿真的实现各种手势效果。
3.Quickly Simulate
JustinMind提供了一键生成,不用再像Axure那样多步操作,点击后直接在浏览器窗口打开。
4.Great Extras
网上有各种各样的组件、模板,可以根据需要选择相应的进行使用。
欢迎加入到我们的Justinmind中文爱好者小组,一起为国内用户奉上各种教程、资源和组件库:
http://www.wejustinmind.com/
转自:http://ucdchina.com/snap/12738
转自:http://ucdchina.com/snap/12738