Justinmind(原型制作工具)

　　Justinmind提供原型设计功能，可以通过这款软件设计网站的原型素材，设计交互页面的素材，设计手机屏幕的原型，启动软件就可以加载官方提供的图形进行设计，也可以在软件手动绘制新的图形进行设计，可以在图形添加交互内容，可以自由创建活动，可以添加滚动，可以添加变量内容，可以添加鼠标悬停效果，交互内容非常多，让设计人员可以通过Justinmind软件制作更多场景下使用的原型素材，并且官方也提供了详细的教程，新用户也可以快速学会软件，需要就下载吧。

软件功能

　　从可点击的原型到功能模拟

　　从可点击的原型创建到功能齐全的模拟，无需键入任何代码。我们提供全方位的工具，以便您可以专注于创造令人愉悦的用户体验。通过模拟进行测试将减少返工并提高用户采用率。

　　Web 交互

　　设计具有各种交互、动画和过渡的 Web 体验。创建从简单链接到高级交互的任何内容。

　　移动手势

　　从大量手势中进行选择，这些手势允许您在移动应用程序原型中旋转、点击、滑动、滚动和捏合。

　　序列和条件

　　在交互中添加操作和条件序列。设计和测试真实体验。

　　无限制的免费 UI 设计

　　免费设计您的 UI 资源，对项目数量没有任何限制。享受所有 UI 设计功能，从矢量设计工具、钢笔工具到探路者等。

　　从低保真到高保真

　　使用单个工具，您可以涵盖产品设计的整个周期。首先使用低保真线框进行概念化，使用高保真原型甚至交互式仿真迭代和验证您的设计。

　　动态表单和数据

　　设计、原型化和模拟功能齐全的表单和数据网格列表，并立即对其进行测试，而无需编写任何代码

　　创建您自己的 UI 套件

　　轻松优化和重用内置库或创建自己的库。使用您自己的风格和交互对它们进行个性化设置。

　　共享和同步 UI 组件

　　集中管理您的 UI 套件。保持 UI 元素和样式指南在所有团队之间同步。

　　通过模板和母版重用

　　模板和母版允许您在原型的所有屏幕上共享和重复使用内容（页眉、页脚等）。

　　免费设计模板

　　使用我们免费原型制作工具中预装的设计资源和 UI 组件加快您的原型制作过程。

　　用于 Web、iOS 和 Android 应用程序原型设计的免费 UI 组件

　　交互式 UI 组件

　　使用现成且经常更新的 UI 套件加快原型设计过程。您还可以使用个性化组件创建自己的 UI 工具包。

　　集成和插件

　　通过将我们的设计和原型制作实力与其他设计、项目管理和用户测试工具相结合，您将能够创建和测试高保真原型。

　　导出为 HTML 和图像

　　您可以将原型导出为功能齐全的交互式 HTML。此外，我们还提供了一组广泛的功能来将您的资产导出为 SVG 和 PNG。

　　管理需求

　　在 UI 原型中添加和管理文本要求，并将要求集成到您首选的 Agile 工具中。

　　导出到规范文档

　　只需单击一下，即可从您的原型生成规范文档。创建您自己的规范文档模板或使用我们的 API 生成您需要的资产。

软件特色

　　矢量设计

　　使用您已经了解和喜爱的视觉设计功能从头开始创建图标和资产。

　　智能模板

　　设置布局的基本结构和特定项目中元素的样式。

　　主人

　　创建将在项目中重复的 UI 组件组，进行全局更改。

　　设计移交

　　开发人员拥有视图模式，允许他们查看精确的测量数据、CSS 和系统中的所有资产。

　　UI 文档

　　只需单击一下即可导出原型上的所有文档，以实现最佳共享能力。

　　测试您的设计

　　在多个设备或浏览器上观看您的原型运行情况，避免将来出现令人讨厌的意外。

　　丰富的 Web 交互

　　从各种用户触发器中进行选择，以定义丰富的交互。您可以在没有技术专业知识的情况下重现您能想到的任何操作。

　　移动手势和过渡

　　从一整套超棒的手势和超平滑的过渡中进行选择，让您的原型感觉尽可能逼真。

　　动画和效果

　　通过构建高级动画和使用大量效果来改进交互设计中的 UX。

　　在真实设备上测试

　　使用我们的应用程序查看和浏览您的交互式原型，并直接从您的设备测试整个用户体验。

　　条件

　　可以为任何给定的事件交互设置条件或规则，以管理其操作的执行。

使用方法

　　创建您的第一个项目

　　登录到 Justinmind，您将找到主屏幕。点击“新建项目”;用于启动项目的设备：网站、移动设备、平板电脑或其他。单击 云 或 本地 以决定保存项目的位置，然后单击 设备 下拉列表以设置尺寸。

　　最后点击”确定“创建您的项目。

　　探索 Justinmind 用户界面

　　Justinmind 的用户界面分为不同的调色板，您将使用它们来创建和自定义您的线框：

　　1、工具栏 – 选择 形状、图像和文本 工具栏中的元素并将它们放在画布上以设计您的项目。点击工具栏中的“+”按钮，查看其他可供选择的元素，如 Dropdowns、Hotspots 和 Input Text Fields。其中许多元素和小组件都有键盘快捷键。

　　2、Screens – 在 Screens 调色板中查看和添加新屏幕。屏幕类似于其他应用程序中的画板或框架。每个屏幕都包含自己的 Canvas，整个项目可以包含许多不同的屏幕，您可以使用事件将这些屏幕链接在一起。单击此调色板中的“+”按钮以添加新屏幕。

　　3、Canvas – 将元素放在 Canvas 上以构建您的设计和线框。

　　4、Alignment – 在 Canvas 上对齐和分布元素。

　　5、Properties – 在模拟过程中，在 Properties （属性） 面板中查看和编辑元素的样式、位置和可见性。不同的元素有自己独特的属性，您可以自定义。

　　6、事件 – 在 Events 调色板中创建交互并将线框转换为高保真项目。详细了解事件。

　　7、Layers – 查看和重新排序元素在 Canvas 上的层次结构位置。拖动元素可将其重新排序为其他元素的上方或下方。将鼠标悬停在元素或组上可查看在编辑时隐藏或显示它的选项。

　　8、Libraries – 在 Libraries 调色板中查找额外的预设置样式的元素。您最初会看到此处显示不同的库，具体取决于您正在进行原型设计的设备。例如，如果您正在为 Android 手机制作原型，您会发现 Android 组件默认显示在此处。单击“More libraries”文本链接以查找要在项目中使用的其他 UI 库。点击此调色板中的“+”按钮以创建您自己的自定义库

　　如何创建可滚动的内容

　　以下是构建它的方法：

　　从“动态内容”部分选择一个“动态面板”并将其放置在画布上，转到“属性”面板并选择“自动”作为垂直滚动和水平滚动属性的值。

　　按住 Command 键 （Mac） 或 Control 键 （Widnows） 并将元素拖动到面板中。当你在里面拖动一个元素时，你会看到一个蓝色的色调。

　　要启用滚动条，内容必须大于“动态面板”。您也可以在画布上选择内容，点击右键，选择“动态面板中的 Group + Group”，然后在调色板中选择滚动属性。

　　如何使用必填字段创建表单原型

　　以下是构建它的方法：

　　视图

　　从 “Interactive input fields（交互式输入字段）”中，在画布上放置 3 个 “Input text fields（输入文本字段）”。

　　选择“文本”，在每个“输入文本字段”旁边放置一个，然后写下“姓名”、“电话号码”和“电子邮件地址”。

　　在第一个 “Input text field” 旁边放置一个新的 “Text” 并写下您的错误消息;此错误将检查第一个输入字段是否为空;选中此文本后，转到“属性”选项板，然后单击“隐藏在模拟中”图标。

　　在最后一个“输入文本字段”下方放置一个新的“文本”以进行电子邮件地址验证，转到“属性”选项板，然后单击“隐藏在模拟中”图标。

　　在下方放置一个 “Button” 以完成您的表单。

　　事件

　　选择 “Button” 后，返回 Events 面板并单击 “Add event”。

　　1、在对话框中，单击“选择触发器”，将鼠标悬停在“鼠标”部分上，然后选择“单击时”。

　　2、在“Choose Action”（选择操作）中，选择“Show hidden element”（显示隐藏元素），然后选择名称验证隐藏文本。 单击 “Ok” 完成事件创建。

　　转到 Events 调色板，然后单击“Add condition”以打开表达式生成器。

　　将名称 “Input text field” 拖放到表达式中的空白处;接下来，拖动一个 “Equals” （=） logic function，并将 next 字段留空。当 “Name” 输入为空时，将显示错误消息。单击 “Ok” 完成表达式的构建。

　　返回 Events 面板并单击 “Else”;此时将打开 Events 对话框。

　　1、在对话框中，单击“选择触发器”，将鼠标悬停在“鼠标”部分上，然后选择“单击时”。

　　2、在“Choose Action”（选择操作）中，选择“Hide element”（隐藏元素）并单击错误消息。 点击 “确定” 完成事件创建（如果 “名称” 字段填写，点击 “提交” 按钮会导致错误消息消失）。

　　选择“按钮”后，转到 Events 调色板，然后单击“Add interaction”。

　　1、在对话框中，单击“选择触发器”，将鼠标悬停在“鼠标”部分上，然后选择“单击时”。

　　2、在“Choose Action”（选择操作）中，选择“Show hidden element”（显示隐藏的元素），然后选择电子邮件验证隐藏文本。 单击 “Ok” 完成事件创建。

　　转到 Events 调色板，然后单击“Add condition”以打开表达式生成器。

　　拖放一个 “Not” 函数，然后拖动 “RegExp” 逻辑函数，并在以下字段中，最后从 “Constant” 选项卡中拉出 “@” 正则表达式。单击 “Ok” 完成表达式的构建。

　　返回 Events 面板并单击 “Else”;此时将打开 Events 对话框。

　　1、在对话框中，单击“选择触发器”，将鼠标悬停在“鼠标”部分上，然后选择“单击时”。

　　2、在“Choose Action”（选择操作）中，选择“Hide element”（隐藏元素），然后单击电子邮件验证错误消息。 点击 “确定” 完成事件的创建（如果 “电子邮件” 字段已完成，点击 “提交” 按钮会导致错误消息消失）。

　　模拟您的原型。

更新日志

　　v10.6版本

　　1、新增功能

　　启用/禁用文本表格单元格中的滚动条。

　　2、错误修复

　　现在，具有 flip 的 SVG 可以在模拟模式下正常工作。

　　如果目标上已存在条件，则粘贴条件现在可以正常工作。

　　修复了线上的旋转处理程序位置。

　　修复了复制/粘贴主实例时的项目保存问题。

　　在事件对话框中添加了提示。

　　修复了一些崩溃问题。