Justinmind基础
Justinmind教程17
【教程17】变量的使用教程小楼一夜听春语什么是变量？这B名看着就难懂是吧！其实，如果知道它的作用，抛开它的名称，就会变得很容易！比如：谷氨酸钠俗称“味精”！那么变量是什么？我在讲Web端原型神器Axure的时候，对于变量我举过一个例子，说他是用来刻录AV的可擦写光盘。
注：AV是通过各种动作与场景组成的教学视频。
全称：Axure Video。
不过，随着时间的流逝，岁月的变迁，一些以往被我们所津津乐道的事物，已经被历史所尘封，不再为人所知。
（这文采……）所以，用可擦写光盘来描述变量，已经难以被时下的人们所接受。
那么，我们与时俱进，紧跟时代的步伐，用新生事物来描述这份来自现代科学的馈赠。
（我勒个去…..）现在的人们，已经不满足用可擦写光盘这种笨拙的技术去存储文化的传承，相反他们更乐于在一个虚拟的空间去完成这样的事情。
网盘，一个起源于21世纪，互联网开始快速发展的时代的科技衍生物。
它有着灵活、快速、便捷、免携带的特性，方便在任何时间、地点以及多种设备上打开。
（sj上的变量……）那么，变量与网盘有什么相同之处呢？（终于绕回来了……）众所周知，我们会有以下场景使用网盘：1.未做完的工作，存入到网盘，在家中下载继续完成。
完成后再次存入网盘，到公司取出使用。
2.从网上下载到了心仪的资源，存入到网盘中，可以在家中、酒店中、XX中观看。
（XX代表任何可能出现的位置）3.在旅途中拍摄的照片、视频占满了内存，又不能舍弃，把它存入到网盘，回到家中再取出保存。
简单的几种场景代表了网盘的特性，那么与之对应的变量呢？1.原型中，某个数据还需要作用于其它页面，并且在其它页面被读取后可能发生变化再传回当前页面。
2.原型中，某一数据被获取到之后需要在多个页面中被用到。
3.原型中，当前页面的某个数据暂时无需使用，但又会参与之后的某些运算，需要临时寄存。
以上场景，均可以通过变量进行解决。
那么我们来总结一下，变量特性是什么？1.变量可以被写入与读取，对变量值的编辑需要读取出来进行编辑后再次存入变量。
Justinmind教程06
固定位置效果
教程小楼一夜听春语
在我们实际工作中，经常会遇到屏幕中的某一部分需要固定位置（问这个问题的人也比较多），不能随着页面的滑动改变位置。
比如：导航菜单。
那么这个效果如何在Justinmind中实现呢？
其实很简单，我们只需要把滑动的部分放入动态面板中，就可以达到目的。
1.先把需要固定的元件放到屏幕固定位置，把需要滑动的内容放入动态面板中；（点击图片看大图哦）
2.进行动态面板的设置（点击图片看大图哦）
2.1在项目的元件目录中点中你要编辑的动态面板；
2.2把动态面板拖动到固定位置菜单的下方；
2.3用鼠标点住动态面板底边中心的边界点拖动，把动态面板调整成合适的高度；
2.4最重要不要忘记，在动态面板属性中把垂直滚动选为“可见”或者“自动”。
注意：滑动的内容需要超出动态面板的长度，才能进行滑动。
这时候进行预览，就会实现想要的效果了。
Justinmind教程22
【教程22】计数与过滤函数教程小楼一夜听春语书接上回。
前一篇教程，我们讲了通过select和has结合数据源完成了登录验证。
这一篇，我们换个思路，还是结合数据源，利用另外两个函数完成登录验证。
1.datacount[数据项]：返回值为数据项集合中项的总数。
2.filter[数据源,条件表达式]：返回值为符合条件表达式的数据项的集合。
实现思路：通过过滤函数，获取到数据源中与输入的用户名密码相匹配的项。
如果存在符合条件的项，则数据项的总数>0，验证成功。
否则，验证失败。
我们直接在之前的登录验证案例上，直接修改条件，达到我们想要的效果。
1.点击“当…时”后面的齿轮图标，选择“编辑条件”，打开编辑界面。
（也可以通过直接双击表达式打开）2.鼠标移入表达式，点击黄框右上角的“X”,删除掉之前写过的表达式。
3.我们要计算过滤后的数据项总数>0，所以先拖入一个“>”。
并且，在后面的编辑形状中输入“0”。
4.然后，在前面的编辑形状中拖入“datacount”，在新出现的编辑形状中拖入“filter”。
因为，要对数据源进行过滤，所以在“filter”的第一个编辑形状中，拖入数据源“userinfo”。
5.然后，就要写入过滤的条件表达式了。
像上一篇教程一样，条件是输入的用户名等于数据源中的“username”，“并且”，输入的密码等于数据源中的“password”。
因为条件中有“并且”，所以这一步，我们先拖入一个代表并且关系的“&”。
6.然后，“&”的前后编辑形状中，再分别拖入一个“=”。
7.两个“=”的右边分别拖入数据源中的数据字段“username”和“password”。
8.然后，再打开视图界面，将两个文本输入框分别拖入到“=”前面的编辑形状中。
至此，我们就完成了整个条件的编辑。
满足条件和不满足条件时执行的动作，在案例中是已经写好的，这里就不重复了（不懂得同学可以去看前一篇教程）。
介绍五款主流原型设计工具
介绍五款主流原型设计⼯具介绍五款主流原型设计⼯具，分别是Axure、Balsamiq Mockups、墨⼑、Justinmind和iClap。
AxureAxure RP是美国Axure Software Solution公司旗舰产品，是⼀个专业的快速原型设计⼯具，让负责定义需求和规格、设计功能和界⾯的专家能够快速创建应⽤软件或Web⽹站的线框图、流程图、原型和规格说明⽂档。
作为专门的原型设计⼯具，它⽐⼀般创建静态原型的⼯具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、⾼效。
功能：⽤于制作快速原型的软件。
也可以绘制中保真原型草图。
应⽤⼈群：产品经理、交互设计师、UI设计师、⽹页设计师。
原型分类：低保真（⼿绘草图）、中保真（使⽤相关软件绘制出来的）、⾼保真（包含效果图及原型交互）优点：应⽤灵活，可拓展性强，拥有超级强⼤的交互制作能⼒。
⾼保真的原型设计⼯具，名声⼤，专业性⾼。
缺点：规范性较差。
编辑能⼒着实强⼤，变相导致规范性差，管理不便。
难度稍⼤，⼊门较慢。
鉴于其⽐较复杂，学习难度较⼤，新⼿劝退。
本地型软件，可以下载html⽂档预览，⼿机预览不⽅便。
制作原型的速度⽐较慢（交互操作太多），常常耽误时间，⽽且修改较繁琐。
基本使⽤⽅法：1.元件的使⽤：在RP中使⽤软件需要选择后拖拽到⼯作区使⽤即可。
（以矩形为例）拖拽矩形左上⾓的三⾓就可以进⾏圆⾓设置。
点击右上⾓的圆可以更改它的形状。
左上⾓的三⾓形消失。
旋转，绘制好元件后选择它，按ctrl键，键直接拖拽定界框周围即可。
2.图⽚的使⽤：直接双击当前图⽚元件即可。
也可以在选择元件后的右侧的属性中导⼊即可。
可以直接复制粘贴到AX中进⾏使⽤，⽀持GIF格式。
3. 占位符的使⽤：直接在⾥⾯写⼊内容，双击即可。
4. 放⼤与缩⼩：按CTRL键前后滚动。
5. 页⾯对齐：页⾯的内容在⽣成原型时在浏览器的左侧或中间。
产品经理常用的原型图设计工具有哪些？
产品经理常用的原型图设计工具有哪些？我结合自己的工作经验，给大家整理了九款常用的工具，大家可以简单看看，然后选择一款最适合自己的。
一、摹客RP学习曲线:低。
简介:摹客原型设计采用基于Web的全新架构，无需下载，不受设备系统限制，可以通过浏览器快速设计原型。
摹客原型自带钢笔、铅笔等矢量工具，可帮助用户自由完成设计。
设计完成后，可以与团队成员无缝合作，轻量化设计可以直接交付开发，真正实现从创意到落地。
优点：全新的主辅画板模式可以灵活创建不同的交互效果。
支持多人同时在线编辑同一个项目，共同完成APP原型设计。
自带钢笔工具、铅笔工具、布尔运算、响应布局等特色功能，设计创作自由。
支持页面交互、状态交互、命令交互，设置各种触发方式和曲线，快速交互原型。
支持在设计稿中直接绘制流程图，清晰地呈现项目逻辑。
缺点:不支持离线使用。
适用人群:需要快速绘制中高保真原型的产品经理和设计师。
还可快速构建原型，WEB/端/平板原型，线框图，视觉稿。
二、Axure学习曲线:高。
简介:AxureRP是美国AxureSoftwareSolution公司的旗舰产品，是一款专业的快速产品原型工具，允许负责定义需求和规格、设计功能和界面的专家快速创建应用软件或Web的线框图、流程图、原型和规格描述文档。
作为一种专业的原型工具，它可以快速地创建原型，同时支持多人合作设计和版本控制管理。
优点:多端操作，自带组件库，支持强大的第三方组件库，强大的交互支持，完整的教程和文档支持，原型预览支持。
缺点:学习曲线高，性价比低，专业需求高。
适用人群:适合追求强交互效果和细节的产品经理和设计师，需要有一定的经验或专业性。
由于篇幅原因，接下来的七款工具会在下篇文章中继续介绍，赶紧去看看吧！前面给大家了四款常用的原型设计工具“产品经理常用的原型图设计工具有哪些？（二）”，接下来看看另外的两款，也非常不错。
五、Proto.io学习曲线:中简介:Proto.io是一种专门用于应用的产品原型工具——可以构建和部署全交互应用的原型，可以模拟类似的成品。
Justinmind教程05
为Justinmind添加元件库
教程小楼一夜听春语
刚才看到有回复批评我，吼吼，怨我没有关注新手同学的需求。
不过我在教程里也说了，我先发内容，回头再调整教程顺序。
请允许我一定的时间去做。
那么，在这里给大家说一下，怎么添加元件库。
以及常用的元件都在哪里。
首先，基本形状是默认添加的，基本上打开就能看到。
其次，如果做web端的原型，web元件库是必须的，比如我们常用的文本框，复选框什么的。
如果在你的元件库里面没有。
可以按下图中提示添加。
最后，还有系统中还有更多的元件库供我们选择，都可以通过点击“添加到元件库”的按钮把它们添加到元件管理模块中使用。
至于这些元件库里面都有什么惊喜，大家自己撸一撸吧！我撸不动了！
另外，新手同学请注意，关于Justinmind的一些基础功能，大家可以通过文章《Justinmind功能介绍》了解！。
Justinmind实战应用视频教程(持续更新中)PPT模板
2-1justinmind设计思想、课程 设计逻辑justinmind设计思想、 课程设计逻辑 2-2部件、画布部件、画布 2-3事件、产品管理事件、产品管 理 2-4发布、配置 2-2部件、画布部件、画布 2-3事件、产品管理事件、产品管 理
03 第3章软件界面及布局
justinmind实战应用视频教程（ 持续更新中）
演讲人
2 0 2 x - 11 - 11
目录
01. 第1章竞品分析、案例演示 02. 第2章产品设计思想 03. 第3章软件界面及布局
01 第1章竞品分析、案例演示
第1章竞品分析、 案例演示
1-1教程背景、axure同 justinmind区别、案例教程背景、 axure同justinmind区别、案例 演示
第3章软件界面及 布局
3-1界面介绍目的、软件版本 3-2菜单、快捷按钮、界面切换、 部件、编辑页面、事件 3-3屏幕、模板、母板、属性、导 航、大纲、数据母板、变量 3-4总结
感谢聆听
xmind大纲
xmind大纲
一、xmind概述
1. Xmind是什么？
2. Xmind的功能有哪些？
3. Xmind的优势是什么？
二、Xmind使用教程
1. Xmind的安装
2. Xmind的界面介绍
3. Xmind的操作方法
三、Xmind的应用场景
1. 商业计划书制作
2. 会议纪要记录
3. 课堂笔记制作
4. 项目管理
四、Xmind的常见问题
1. Xmind不支持的格式有哪些？
2. Xmind崩溃怎么办？
3. Xmind的图标字体无法显示怎么办？
五、Xmind和其他软件的比较
1. Xmind和Mindjet的比较
2. Xmind和Freemind的比较
3. Xmind和iThoughts的比较
六、Xmind的未来发展
1. Xmind目前的市场状况
2. Xmind未来的发展方向
3. Xmind发布的新版本的功能介绍
七、Xmind在生活中的作用
1. 心智图在提升记忆力方面的应用
2. 心智图在提升学习效率方面的应用
3. 心智图在提升工作效率方面的应用
八、总结
1. Xmind的优缺点总结
2. Xmind的应用场景总结
3. Xmind的未来前景总结。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
简介
JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以输出Html页面。
与目前主流的交互设计工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更为专属于设计移动终端上app应用。
Justinmind与AXURE的不同
Justinmind在移动产品的交互设计上，比Axure更便捷，尤其是手势非常好用。
但世界上总没有十全十美的产品，Justinmind目前能找到的控件库还比较有限；国内对这款工具搜索结果和可供讨论的地方也不多，遇到困难时会比较头疼。
另外，用Justinmind 做设计的时，操作上的一些设定会让你遇到一些小麻烦。
界面功能
justinmind的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的高保真原型。
不用进行编程，就可以在原型上定义简单连接和高级交互。
主菜单和工具栏
常用的选项如打开、编辑以及保存你的设计稿。
1.主菜单
除了常用的选项以外，这里还提供了导入设计稿以及分享功能。
2.工具栏
列出了一些常用的选项以及一些可以操作的工具。
3.选项卡
在用户界面、网站地图、脚本和批注之间切换。
4.搜索
可以方便的搜索原型中的文字。
原型结构
这是原型的组成部分。
1.屏幕、模板和母版
第一个选项卡中列出了原型中的所有页面。
点击名字可以看每一个屏幕的具体内容。
使用工具栏可以创建新的屏幕或者文件夹。
可以用拖拽或者点击绿色箭头的方式来更改排列顺序。
模板和母版选项卡也列出了相关的内容，操作方式与屏幕选项卡较为类似。
2.数据
数据选项卡以及变量选项卡。
用来模拟一些交互效果。
3.组件可视管理
用于管理各组件的是否可见，以及添加一些备注等。
元件与属性
组件以及可以切换页面属性的一些元件集合。
1.组件
这里有大量的原生组件提供使用，均为高保真。
2.属性
这里能够更改选中组件的一些属性
事件和评论
这个面板包含2个不同的部分：事件和评论。
这两个都是对应主面板中选中的控件。
1.改变视图
可用这些tab键切换事件和评论视图。
2.用户事件
选择用户事件，之后主面板中被选中的条目会响应。
3.事件工具条
用于添加、复制、删除事件的工具。
4.交互
交互动作列表。
主面板
主面板是你设计原型的地方。
屏幕实时展现你设计的内容。
1.指导和选项卡
选项卡显示选中的屏幕内容和工具，在你设计过程中提供指南。
2.生成原型
点击该按钮以生成可运行的原型。
3.工具
用于更改分辨率、缩放、显示/隐藏特殊的标记。
4.弹出主屏幕
特性
快速制作原型
使用JustinMind，你可以在几分钟内利用其广泛的组件和交互绘制高保真原型。
它提供了一些基本的形状，如矩形和文本，还有特定的组件，如菜单，表单或数据列表。
手势交互效果
JustinMind提供了多种触屏的交互效果，例如滑动、缩放、旋转，甚至捕捉设备方向等等。
在需要产生效果的部件中选择对应的手势即可。
可建自己组件库
JustinMind为iPhone ，iPad，黑莓，Android提供了多样的组件。
你可以创建自定义组件库，方法是将排列好的单个组件放在一起，并将它们集体框选拖动到组件库。
这样下次你就可以直接使用自己定义好的组件。
便捷的定义样式
相比Axure，JustinMind更好的提供了属性窗口，并且更好的支持捕获PS等软件的图像属性。
共享原型测试
JustinMind支持将原型上传到服务器并提供给他人进行测试，为产品的改进做出了良好的贡献。
最为特别的是，基于usernote的服务允许你将原型放到移动设备上进行测试。
定义交互方式
在JustinMind中，你可以通过拖拽等方式来实现跳转、定向等交互效果，无需像Axure 一样每一步都只能通过点击来完成。
并且显示更为直观，如进度条。
同时可以通过一些简单的无代码逻辑语句实现更为高级的交互效果。
全球范围内的复用、数据共享
每一个模板都让这一套组件有不同的视觉风格，变量允许将数据从一个屏幕迁移到另一个，甚至使用它们来检查是否满足条件。
发布和收集反馈意见
发布Prototyper作品到usernote后，全球各地的人将通过Web浏览器访问您的原型。
他们的反馈结果将会实时的呈现在您的原型页面。
交互设计
事件与交互
事件是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: 当用户离开页面时。