Justinmind 综合教程：从入门到精通

Justinmind 是一款专业的交互式原型设计工具，它不仅能让你创建高保真度的线框图，更能通过丰富的交互逻辑，模拟真实应用的用户体验，是产品经理、UI/UX 设计师和开发人员的得力助手。

第一部分：入门基础

什么是 Justinmind？为什么选择它？

• 定义：Justinmind 是一个用于创建交互式、可点击的原型设计软件。
• 核心优势：
  • 高保真度：可以设计出与最终产品非常相似的界面。
  • 强大的交互：支持页面跳转、条件逻辑、数据列表、表单验证等复杂交互，不再是简单的“页面链接”。
  • 组件化：拥有丰富的组件库，支持创建可复用的母版，提高设计效率。
  • 团队协作：支持多人实时协作、评论和版本管理。
  • 开发友好：可以生成清晰的交互说明文档，方便开发人员理解需求。

界面概览

启动 Justinmind 后，你会看到以下主要区域：

• 顶部工具栏：包含文件操作、预览、分享、发布等主要功能。
• 左侧面板：
  • 页面：管理你的所有设计页面。
  • 组件库：包含大量预设的 UI 组件（按钮、表单、图标等）。
  • 母版：创建和管理可复用的页面模板。
• 中间画布：你的主要设计区域，在这里拖拽和编辑元素。
• 右侧面板：
  • 大纲：显示当前页面中所有元素的层级结构。
  • 交互：这是 Justinmind 的核心！在这里为元素添加交互行为，如点击、悬停等。
  • 样式：调整选中元素的视觉属性（颜色、字体、边框、阴影等）。
  • 响应式：为不同设备尺寸（手机、平板、桌面）设计布局。

第二部分：核心功能详解

页面与导航

• 创建页面：在左侧“页面”面板点击 号。
• 重命名页面：右键点击页面名称，选择“重命名”。
• 设置首页：右键点击页面，选择“设为首页”，这是原型启动时显示的第一个页面。
• 页面跳转（基础交互）：
  1. 选择一个元素（如一个按钮）。
  2. 在右侧“交互”面板，点击 添加新交互。
  3. 触发事件：选择 Click (点击)。
  4. 动作：选择 Go to screen (跳转到页面)。
  5. 目标：从下拉菜单中选择你想要跳转到的目标页面。
  6. 点击 Done，现在点击画布上的按钮，就可以在预览模式中跳转了。

组件与母版

• 组件：是单个的、可复用的 UI 元素，如按钮、输入框，直接从左侧组件库拖拽到画布即可。
• 母版：是整个页面或页面片段的模板，修改一个母版，所有应用了该母版的页面都会自动更新。
  • 创建母版：在左侧“母版”面板点击 号，然后像设计普通页面一样设计你的模板。
  • 应用母版：从“母版”面板将母版拖拽到画布的页面上。
  • 编辑母版：在“母版”面板中选中母版进行编辑，你还可以在应用了母版的页面上，对单个实例进行“脱离母版”编辑，或者“仅更新此实例”。

样式与响应式设计

• 样式面板：
  • 选中任何元素,在右侧“样式”面板中都可以调整其外观。
  • 包括：尺寸、位置、填充色、边框、圆角、阴影、文字字体、大小、颜色等。
  • 提示：善用 复制样式 和 粘贴样式 功能，可以快速统一多个元素的样式。
• 响应式设计：
  1. 在顶部工具栏选择设备预览（如 iPhone X, iPad, Desktop）。
  2. Justinmind 会自动为不同设备创建不同的视图。
  3. 你可以为每个视图单独调整布局和元素位置,在手机视图中，按钮垂直排列；在桌面视图中，按钮水平排列。
  4. 自适应视图：你也可以创建一个“自适应”视图，让元素根据屏幕大小自动调整。

交互逻辑（进阶）

这是 Justinmind 的精髓所在，交互由 “触发事件” -> “动作” -> “目标” 三部分组成。

• 触发事件：用户在元素上执行的操作，如 Click, Mouse over (悬停), Key press (按键), Drag (拖拽) 等。
• 动作：执行的操作，如 Go to screen, Show/Hide (显示/隐藏), Set value (设置值), Open URL 等。
• 目标：动作作用的对象，如某个页面、某个元素、某个变量等。

常用交互示例：

1. 显示/隐藏元素

   
   （图片来源网络，侵删）
   • 场景：点击“登录”按钮，显示“用户名”和“密码”输入框。
   • 步骤：
     1. 选中“登录”按钮。
     2. 添加交互 Click -> Show -> 选择要显示的输入框。
     3. （可选）再添加一个 Click -> Show -> 另一个输入框。

2. 条件逻辑

   • 场景：只有当用户名输入框不为空时，“提交”按钮才可点击。
   • 步骤：
     1. 选中“提交”按钮。
     2. 添加交互 Click。
     3. 动作选择 If/Then/Else。
     4. 条件：Text on '用户名输入框' is not empty。
     5. Then：Go to screen '成功页面'。
     6. Else：Show '错误提示文本'。

3. 数据列表

   • 场景：创建一个商品列表，点击某个商品，跳转到商品详情页。
   • 步骤：
     1. 在母版中设计一个“商品卡片”。
     2. 为卡片添加交互 Click -> Go to screen '商品详情页'。
     3. 在“商品详情页”上，放置一个“动态面板”。
     4. 选中“动态面板”，在“交互”面板中，选择 Set dynamic panel contents。
     5. 在数据源中,你可以创建模拟数据，如商品名称、价格、图片等。
     6. 在预览时,Justinmind 会根据你的模拟数据填充列表。

4. 表单与验证

   • 场景：一个注册表单，提交时验证邮箱格式是否正确。
   • 步骤：
     1. 设计表单,包含“邮箱”输入框和“提交”按钮。
     2. 选中“提交”按钮，添加交互 Click。
     3. 动作选择 If/Then/Else。
     4. 条件：使用正则表达式验证邮箱格式，如 Text on '邮箱输入框' matches pattern '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'。
     5. Then：Go to screen '注册成功'。
     6. Else：Show '请输入正确的邮箱地址'。

第三部分：实战案例：设计一个简单的登录流程

让我们动手实践一下,创建一个包含“登录页”和“主页”的简单原型。

1. 创建页面：

   • 在左侧“页面”面板，创建两个页面，分别命名为 登录页 和 主页，并将 登录页 设为首页。

2. 设计登录页：

   • 从组件库拖拽一个 输入框 到画布，命名为“用户名”。
   • 再拖拽一个 输入框，命名为“密码”，并在其“样式”面板中，将 Password 选项勾选。
   • 拖拽一个 按钮，命名为“登录”。
   • 使用“样式”面板，美化这些元素。

3. 添加登录交互：

   • 选中“登录”按钮。
   • 在右侧“交互”面板，添加一个 Click 交互。
   • 动作选择 If/Then/Else。
   • 条件：Text on '用户名输入框' is not empty AND Text on '密码输入框' is not empty。
   • Then：Go to screen '主页'。
   • Else：Show '请输入用户名和密码' (你需要先在画布上画一个提示文本，并默认设置为隐藏)。

4. 设计主页：

   • 在 主页 上，可以放一个欢迎语，欢迎你，[用户名]！”。
   • 为了显示用户名,我们需要使用 变量。
     • 在顶部菜单栏,选择 Project -> Local Variables。
     • 创建一个新变量,命名为 username。
   • 回到 登录页，选中“登录”按钮的 Click 交互。
   • 在 Then 分支的动作下方，点击 ，添加一个新动作 Set value。
   • 目标选择变量 username，值选择 Text on '用户名输入框'。
   • 回到 主页，选中欢迎语，在“样式”面板的 Text 选项中，将内容设置为 {{username}}，这样，登录成功后，主页就会显示输入的用户名。

5. 预览与分享：

   • 点击顶部工具栏的 Preview 按钮，或按 F5，即可在浏览器中查看和测试你的原型。
   • 点击 Share，可以生成一个链接，分享给团队成员或客户进行查看和评论。

第四部分：高级技巧与资源

• 动态面板：这是一个非常强大的容器，可以用来创建选项卡、模态框、手风琴效果等，你可以通过切换动态面板的不同状态来实现复杂的界面变化。
• 变量：用于在原型中存储和传递数据，是实现动态内容的关键。
• 外部数据源：Justinmind 支持连接到外部 API，使用真实数据来驱动你的原型，使其更加真实。
• 原型注释：在原型上添加注释，向开发人员或利益相关者解释特定的设计决策或交互逻辑。
• 生成规格文档：点击 Specs 按钮，Justinmind 会自动生成一份包含所有页面、元素、交互和样式的详细文档，极大地提高了沟通效率。

学习资源

• Justinmind 官方文档：最权威、最全面的学习资料，包含所有功能的详细说明。
  • 链接：https://www.justinmind.com/user-guide/
• Justinmind 官方博客和教程：有很多视频教程和文章，讲解特定功能的用法和设计技巧。
  • 链接：https://www.justinmind.com/blog/
• YouTube 频道：搜索 "Justinmind tutorial"，可以找到大量由官方和用户上传的视频教程。
• 模板库：利用 Justinmind 自带的模板库，学习别人的优秀设计，并可以基于模板进行修改。