JustinMind是由西班牙JustinMind公司出品的原型制作工具,可以输出Html页面。与目前主流的交互设计工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更为专属于设计移动终端上app应用。
[1]
justinmind的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的高保真原型。不用进行编程,就可以在原型上定义简单连接和高级交互。
主菜单和工具栏
常用的选项如打开、编辑以及保存你的设计稿。
1.主菜单
除了常用的选项以外,这里还提供了导入设计稿以及分享功能。
2.工具栏
列出了一些常用的选项以及一些可以操作的工具。
3.选项卡
在用户界面、网站地图、脚本和批注之间切换。
4.搜索
可以方便的搜索原型中的文字。
原型结构
这是原型的组成部分。
1.屏幕、模板和母版
第一个选项卡中列出了原型中的所有页面。点击名字可以看每一个屏幕的具体内容。使用工具栏可以创建新的屏幕或者文件夹。可以用拖拽或者点击绿色箭头的方式来更改排列顺序。模板和母版选项卡也列出了相关的内容,操作方式与屏幕选项卡较为类似。
2.数据
数据选项卡以及变量选项卡。用来模拟一些交互效果。
3.组件可视管理
用于管理各组件的是否可见,以及添加一些备注等。
元件与属性
组件以及可以切换页面属性的一些元件集合。
1.组件
这里有大量的原生组件提供使用,均为高保真。
2.属性
这里能够更改选中组件的一些属性
事件和评论
这个面板包含2个不同的部分:事件和评论。这两个都是对应主面板中选中的控件。
1.改变视图
可用这些tab键切换事件和评论视图。
2.用户事件
选择用户事件,之后主面板中被选中的条目会响应。
3.事件工具条
用于添加、复制、删除事件的工具。
4.交互
交互动作列表。
主面板
主面板是你设计原型的地方。屏幕实时展现你设计的内容。
1.指导和选项卡
选项卡显示选中的屏幕内容和工具,在你设计过程中提供指南。
2.生成原型
点击该按钮以生成可运行的原型。
3.工具
用于更改分辨率、缩放、显示/隐藏特殊的标记。
4.弹出主屏幕
3特性
快速制作原型
使用JustinMind,你可以在几分钟内利用其广泛的组件和交互绘制高保真原型。它提供了一些基本的形状,如矩形和文本,还有特定的组件,如菜单,表单或数据列表。
手势交互效果
JustinMind提供了多种触屏的交互效果,例如滑动、缩放、旋转,甚至捕捉设备方向等等。在需要产生效果的部件中选择对应的手势即可。
可建自己组件库
JustinMind为iPhone ,iPad,黑莓,Android提供了多样的组件。你可以创建自定义组件库,方法是将排列好的单个组件放在一起,并将它们集体框选拖动到组件库。这样下次你就可以直接使用自己定义好的组件。
便捷的定义样式
相比Axure,JustinMind更好的提供了属性窗口,并且更好的支持捕获PS等软件的图像属性。
共享原型测试
JustinMind支持将原型上传到服务器并提供给他人进行测试,为产品的改进做出了良好的贡献。最为特别的是,基于usernote的服务允许你将原型放到移动设备上进行测试。
定义交互方式
在JustinMind中,你可以通过拖拽等方式来实现跳转、定向等交互效果,无需像Axure一样每一步都只能通过点击来完成。并且显示更为直观,如进度条。同时可以通过一些简单的无代码逻辑语句实现更为高级的交互效果。
全球范围内的复用、数据共享
每一个模板都让这一套组件有不同的视觉风格,变量允许将数据从一个屏幕迁移到另一个,甚至使用它们来检查是否满足条件。
发布和收集反馈意见
发布Prototyper作品到usernote后,全球各地的人将通过Web浏览器访问您的原型。他们的反馈结果将会实时的呈现在您的原型页面。
4交互设计
事件与交互
事件面板
事件是JustinMind的一个关键功能,Justinmind Prototyper的事件由两个主要部分组成:一个是事件的触发(或用户事件),另一个是一组操作。每一个事件必须在屏幕上定义一个特定的元素,这将作为事件的触发源。
交互动作按照顺序依次排列下来,执行的顺序从上到下一目了然。每个交互动作中有很多的操作,这些操作是从左到右依次执行的。只有这些操作执行完成后,才会到下一个交互动作。
定义链接
加入一个链接的最快的方法是:为了实现点击Button跳转到Screen3,那么直接将Button拖拽到Screen3上面就可以了。
设置动作
除了简单的链接之外,justinmind还提供了许多丰富的动作,这些动作可以在任何触发事件的场景中执行。以下是justinmind所支持的动作:
On Click: 当用户单击鼠标左键并松开
On Mouse Up: 当用户释放鼠标按键
On Mouse Down: 当用户按下鼠标按键
On Double-click: 当用户双击鼠标左键
On Right-click: 当用户单击鼠标右键并松开
On Toggle: 当用户单击鼠标左键后,自定义的事件将被执行。用户再次点击后,事件将被还原
On Mouse Over: 当用户鼠标位于所定义区域之上
On Mouse Enter: 当用户鼠标进入所定义区域
On Mouse Leave: 当用户鼠标离开所定义区域
On Drag Start: 当用户按住鼠标左键并拖动至少5像素时
On Drag: 当用户按住鼠标左键并保持鼠标移动时
On Drag Stop: 当用户停止移动鼠标并且松开鼠标右键
On Key Up: 当键盘按键被释放
On Key Down: 当键盘按键被压下
On Swipe Up: 当用户一根手指向上滑动
On Swipe Down: 当用户一根手指向下滑动
On Swipe Left Up: 当用户一根手指向左上方滑动
On Swipe Left: 当用户一根手指向左滑动
On Swipe Left Down: 当用户一根手指向左下方滑动
On Swipe Right Up: 当用户一根手指向右上方滑动
On Swipe Right: 当用户一根手指向右滑动
On Swipe Right Down: 当用户一根手指向右下方滑动
On Pinch Open:当用户两根手指互相张开滑动
On Pinch Close:当用户两根手指收缩活动
On Rotate Left: 当用户两根手指向左旋转滑动
On Rotate Right: 当用户两根手指向右旋转滑动
On Tap Hold: 当用户手指按住屏幕超过2秒
On Orientation Portrait: 当设备由横屏切换为竖屏
On Orientation Landscape: 当设备由竖屏切为横屏
On Change: 当元素的值通过用户的直接操作发生变化时
On Focus In: 当输入框获得焦点时
On Focus Out: 当输入框失去焦点时
On Page Load: 当页面加载时
On Page Unload: 当用户离开页面时
5视频教程
1.Justinmind系列教学视频——justinmind可以做些什么
[2]
2.Justinmind系列教学视频——在原型中插入视频、地图、HTML等信息
[3]
3.Justinmind系列教学视频——转场效果
[4]
4.Justinmind入门培训视频之RentalCars演示
[5]
5.Justinmind入门培训视频之事件Event的简单使用介绍
[6]
6.Justinmind入门培训视频之IPhoneShow
[7]
7.Justinmind入门培训视频之DataMaster使用1
[8]
8.Justinmind入门培训视频之DataMaster使用2
[9]