既然你已经熟悉了 Figma 的整体结构和核心功能，现在就该开始通过亲手实践来学习了。理解 Figma 如何运作的最佳方式，就是直接去使用它。而我们的起点不是设计文件，而是 FigJam 白板。乍看之下，FigJam 似乎只是一个次要工具，是主设计编辑器的补充。但从这里开始，其实有充分的理由。FigJam 更简单、更容易上手，也非常适合用来探索设计流程的早期阶段。你可以把它看作一个“热身区”：它关注的不是像素，而是人、想法，以及它们之间的连接。
设计并不只是制作界面。它的起点远早于第一张画板被绘制出来。在进入线框图和布局之前，你需要先理解问题、相关的人，以及所处的背景。这正是设计前研究发挥作用的地方：与你的团队一起头脑风暴、定义用户画像、梳理流程，并对齐目标。FigJam 正是为此而生。
在这里，我们将直接在 Figma 中借助 FigJam 带你完成这些前期活动。无论你是独立工作，还是与团队协作，你都将学会如何以可视化的方式整理思路、进行实时协作，并为一个信息充分支撑的设计流程打下基础。一开始你可能会觉得信息量有些大，但掌握这一阶段，会让之后的每一步都变得更轻松，也更有意义。
本章将涵盖以下几个主要主题：
- 使用 FigJam 在协作环境中收集和分析数据
- 以可视化方式创建情绪板并设计用户画像
- 在进入设计阶段之前定义功能性用户流程
- 在 FigJam 中探索想法并开展协作
在上一章中，你已经对 FigJam 有了一个简要的认识。现在，是时候学习如何高效使用它，以及它最适合用来做什么了。本章中，我们将带你走完整个工作流程，包括数据收集、分析与整合。这一阶段对于任何设计师来说，都是进入原型设计前不可或缺的准备过程。无论你是自由职业者、团队成员，还是在代理公司工作，投入时间做研究都至关重要。
这会是一段具有挑战但也收获丰厚的学习旅程，而 FigJam 将始终是我们的主要工具。接下来，让我们先从认识它的界面开始，然后再进入实际操作。
探索 FigJam
FigJam 并不等同于 Figma 的设计文件。虽然它完全整合在 Figma 内部，但承担的是不同的用途。你可以把它理解为一个数字白板：一个大型、自由形式的空间，你可以在上面随手记下想法、添加便签、链接参考资料、插入图片或视频，并与他人实时协作。它被刻意设计得很简单，几乎像是在用纸和笔书写，但又额外具备实时协作的能力。在我们一起深入探索之前，先花一点时间自己试试。把它当成一个个人记事本来使用，因为在这里，起步并没有所谓“对”或“错”的方式。
FigJam 是 Figma 内部的一项专门工具。它提供免费入门方案，也有独立的定价层级，但大多数核心功能在不升级的情况下也可以使用。最新详情请访问 figma.com/figjam。
FigJam 的界面直观且易于导航。所有可用工具都集中在屏幕底部的一条工具栏中。每个工具都带有一些基础的自定义选项，但你很快就会注意到，FigJam 在字体、颜色和样式上的选择相当有限。这种极简并非缺陷，而是有意为之：其目标是让你把注意力放在想法本身，而不是视觉细节上。
FigJam 并不是用来做设计的。相反，它是一个用于协作、探索和前期思考的空间。团队中的每个人，不论具体角色是什么，都可以在研究阶段参与进来，从而帮助团队生成更丰富的洞察与视角。
图 2.1 – FigJam 的工具栏
下面简要介绍 FigJam 中的核心工具。每一种工具都服务于设计前期流程中的某一类特定任务：
A – 选择工具与抓手工具
B – 记号笔
C – 便签
D – 形状与连接线
E – 文本
F – 分区
G – 表格
H – 印章与表情反应
I – 评论
J – 操作
K – 小组件、贴纸、模板等
接下来，我们逐一看看这些工具分别能做什么。
A – 选择工具与抓手工具
选择工具是你在 FigJam 中与元素交互时最常用的工具。点击激活后，你可以通过点击并拖拽来选中画布上的一个或多个对象。你可以自由移动它们，在白板上根据需要重新摆放内容。
如果你想浏览画布，但不想改动任何元素，可以点击工具栏中的抓手工具图标进行切换。这样你就能平滑地在白板上拖动画面，将注意力转移到工作区的不同区域。
为了更快地导航，你还可以通过按住空格键临时激活抓手工具。点击并拖动即可移动视图，松开空格键后，会立刻返回到你之前使用的工具，使切换过程快速而顺畅。
以下是一些键盘快捷键：
- 按 V 激活选择工具
- 按 H 切换到抓手工具
- 按住 空格键 进行临时平移
B – 记号笔
记号笔工具允许你使用少量颜色和两种笔画粗细在画布上自由手绘。它非常适合快速勾勒想法、给关键内容加下划线，或在协作过程中对画板中的某些部分进行视觉强调。
点击并按住记号笔图标，会展开更多附加工具，比如荧光笔、和纸胶带等——它们都旨在帮助你在共享工作区中更高效地标注、整理和传达信息。
以下是快捷键：
- 按 M 激活记号笔工具
- 按 ⇧ + M 激活荧光笔工具
C – 便签
便签可以被放置在画布上的任何位置，就像白板上的实体便利贴一样，适合快速记录想法、留下反馈，或针对特定内容进行评论。
图 2.2 – 形状与便签的对比
人们经常会疑惑便签和形状之间到底有什么区别，尤其是因为两者都可以包含文字。下面通过并列比较来说明它们的不同之处：
- 尺寸行为：便签宽度固定，高度会根据文本内容自动适应；形状则可以在宽高两个维度上自由调整大小
- 文本对齐：便签提供水平对齐选项；形状中的文本默认是垂直居中的
- 作者信息：便签会显示作者姓名（也可以隐藏）；形状则不会
通常来说，便签最适合用于快速记录和评论；而形状更适合用于制作图表和搭建可视化结构。
D – 形状与连接线
你可以通过从菜单中选择某种形状，快速将其添加到画布中。使用默认形状旁边的箭头，可以在圆形、矩形、三角形及其他可用形状之间切换。所有形状都可以通过拖拽四角或边缘来自由缩放，从而调整其尺寸。
在同一个菜单中，你还会看到连接线工具。它允许你在白板上的任意元素之间建立连接。无论你连接的是文本框、形状、便签还是组件，连接线都会自动吸附到对象边缘，并在对象移动时自动跟随。这使得你只需几次点击，就能轻松构建流程图、思维导图或结构化图示。
E – 文本
使用文本工具，你可以在画布上的任意位置添加文本。它非常适合编写标题、段落、标签，或添加可点击链接。文本框可以自由摆放和缩放，因此既适用于注释，也适用于结构化内容。
快捷键如下：
- 按 T 激活文本工具
F – 分区
分区工具允许你通过点击并拖拽，在画布上定义带颜色的区域。分区有助于将相关内容归组，帮助你以更直观的方式组织工作区，并让想法保持结构化。
快捷键如下：
- 按 ⇧ + S 激活分区工具
G – 表格
表格工具允许你直接在画布上创建结构化网格。点击并拖拽即可定义所需的行数和列数。表格非常适合用于整理信息、比较数据，或以清晰一致的布局来对齐元素。
H – 印章与表情反应
点击印章工具或按下 E 后，会弹出一个放射状菜单，中间包含两个选项：
图 2.3 – 表情反应轮盘（左）与印章轮盘（右）
- 印章（Stamps） ：一组持久显示的图标，例如点赞、点踩、星标和勾选，用于在协作中提供可视化反馈。
- 表情反应（Emotes） ：用于表达即时反应的临时图标。选择其中一个后，在画布任意位置点击，它会短暂播放动画后消失。长按则会触发表情连发效果。
你可以通过连续按 E 在印章和表情反应之间切换。
在这些表情反应中，有一个特殊图标：聊天气泡。它会触发光标聊天（cursor chat），这是 FigJam（以及 Figma）中的实时消息功能。点击该图标，或按下 / 键（注意：在非美式键盘上，该快捷键可能不同）即可启用。随后，你会看到一个空的聊天气泡附着在光标上。开始输入后，你的消息会实时显示给文件中的所有人。你无需按 Enter，也无需点击任何按钮。输入完成后，消息会像表情反应一样，在几秒后自动消失。
图 2.4 – 光标聊天
如果你想留下持续可见更久的信息，或者希望异步通知某个人，那么使用评论工具会更合适（本章后文会介绍）。
I – 评论
有时并不适合进行实时协作，尤其是在远程办公场景下。这时，评论工具就显得尤为重要。
要留下评论，点击评论工具（图 2.1 – I）或按 C。你的光标会变成一个气泡图标，从而可以在白板上的任意位置放置评论。
图 2.5 – 添加评论
评论非常适合用于提出反馈、问题和讨论，而不会直接修改白板内容。通知会同时通过应用内和电子邮件发送。默认情况下，系统会这样处理：
- 协作者只会收到他们被提及的评论线程提醒
- 文件所有者会自动收到所有评论通知
这样可以确保团队讨论既聚焦又具有关联性。
J – 操作
FigJam 中的“操作（Actions）”功能，可以让你通过一个基于搜索的集中式面板访问关键命令和界面设置。与其说它是向画布中添加内容的工具，不如说它是一个帮助你更高效控制工作区的工具，特别适合在主持协作会议或全屏工作时使用。
通过这个面板，你可以执行诸如“全选”“撤销”或“查找与替换”等命令。你也可以切换界面元素的显示状态，例如隐藏或最小化 UI、启用多人光标，或访问快捷键和账户设置。此外，操作面板还会为你快速提供最近使用过的功能，包括插件以及你曾交互过的其他工具，让你能够不中断地继续之前的工作流。
这个功能有助于减少操作阻力，让你的注意力始终集中在白板上，尤其是在你需要快速调整设置或恢复上一个任务时。
- 按 ⌘ + K（macOS）或 Ctrl + K（Windows）打开操作菜单。
K – 小组件、贴纸、模板等
点击“小组件、贴纸、模板等”图标，会打开一个包含附加功能和资源的面板。其中包括小组件、贴纸包、轻量模板，甚至是专门为 FigJam 设计的插件。只需几次点击，你就可以扩展白板能力，并优化自己的工作流程。
我们将在第 12 章《借助资源、插件、小组件与 AI 工具扩展你的工作流》中更深入地介绍如何使用这些资源。
FigJam 提供了丰富的协作方式，无论你是在进行头脑风暴、收集反馈，还是实时互动。到目前为止我们看到的所有工具都很容易上手，而你也很快会学会如何将它们有效组合起来，为项目启动打下坚实基础。
与他人头脑风暴
和 Figma 一样，FigJam 从一开始就是以协作为核心设计的工具。它的简洁性让团队协作既轻松又高效。虽然你当然也可以独自使用它，但它真正的力量是在与他人一起使用时才会显现出来。共享一个 FigJam 文件非常直接。整个顶部栏本身就是围绕协作构建的。
图 2.6 – FigJam 的共享面板
邀请他人之前，首先请确保你的 FigJam 文件有一个清晰且易于识别的名称（图 2.7 – A），同时拥有组织良好的页面结构（图 2.7 – B）。这能帮助协作者立即理解文件内容，尤其是在共享工作区中存在大量文件时。
文件重命名后，点击“分享（Share）”按钮（图 2.7 – F），输入一个或多个电子邮件地址。务必根据协作者需要执行的操作，为他们分配合适的权限——可查看（can view）或可编辑（can edit）。
图 2.7 – FigJam 的顶部栏
你也可以使用“复制链接（Copy link）”并手动分享。点击分享选项后，你会看到一组设置，用于决定谁可以访问该文件，比如仅限受邀者、你的团队或组织成员，或者任何持有链接的人。你还可以决定他们只能查看还是可以编辑文件，并且可以选择设置密码，以增强安全性。
实时协作
当你与他人实时协作时，你会看到协作者的光标在画布上移动。同时，所有当前在线的参与者也会显示在界面右上角（图 2.7 – C），让你可以轻松确认当前有哪些人正在访问这个文件。这就为头脑风暴、设计冲刺、工作坊和团队活动等互动场景打开了大门。
想快速开始吗？你可以使用模板（图 2.7 – D），或者尝试 FigJam 内置的 AI 功能来生成想法。关于这些功能的细节，我们将在第 12 章《借助资源、插件、小组件与 AI 工具扩展你的工作流》中进一步展开。
在界面右上角，“计时器（Timer）”菜单（图 2.7 – E）提供了一组互动工具，用于增强协作体验。
图 2.8 – 计时器、音乐与投票
FigJam 当前每个文件最多支持 500 位参与者，包括查看者和编辑者。
进入下一步
现在你已经熟悉了 FigJam 的所有核心功能，接下来就该把它们真正用起来了。假设你刚刚和团队完成了一次头脑风暴会议。在大多数情况下，会议的输出会是一个定义清晰的想法，但它仍需要客户或项目负责人审核并批准。一旦获批，下一步就是为即将到来的需求简报做准备。
现在先花一点时间，思考并记录下你希望向利益相关方进一步确认的疑问或待解问题。
图 2.9 – 头脑风暴
请记住，每个项目都不一样，设计流程也不存在唯一正确的方法。学习一种标准化的工作流程，可以帮助你避免跳过关键步骤；但只有经验，才能教会你如何根据真实世界的约束做出调整。UX 设计需要时间，而时间意味着预算。你并不总能拥有按照理想流程完整推进每一步的自由。因此，学会如何在保证质量的同时平衡优先级，是作为设计师工作中极其重要的一部分。
现在先把事情简化。你的第一个挑战，是围绕一个旅行规划应用的需求展开工作。这个应用旨在帮助用户发现独特目的地，并规划难忘的旅行体验。你的职责是设计一个现代、直观的界面，并让它在移动端、平板端和桌面端都能顺畅运行。
在 FigJam 中创建情绪板与用户画像
获得灵感并不总是容易，尤其是在时间紧迫的情况下。不过，遵循结构化的设计流程，并应用经过验证的方法，能够帮助你在更短时间内做出更有质量的成果。本节将聚焦于一些最佳实践，它们能够为你的前期思考提供指导。
研究阶段
无论你设计的是一个落地页、一个完整网站，还是一个复杂的产品生态系统，研究阶段都在塑造功能完善且有意义的解决方案中扮演关键角色。在审阅需求简报并与利益相关方对齐目标后，下一步就是定义一个使命陈述（mission statement）。
使命陈述是一段简短、肯定式的表述，用来清晰表达项目的核心目的。它能帮助你始终聚焦于产品要解决的问题。在流程早期定义使命陈述，可以在整个设计过程中建立清晰性与一致性，降低偏离方向的风险。下面我们先来看几个知名公司的使命陈述，以更好理解它们如何定义自身的目标与价值。
Apple
“Apple 致力于通过其创新的硬件、软件和互联网服务，为全球学生、教育工作者、创意专业人士和消费者带来最佳的个人计算体验。”
“我们的使命是整合全球信息，并使其人人可访问、人人可受益。”
IKEA
“以尽可能低的价格，提供种类丰富、设计精良且功能完善的家居产品，让尽可能多的人都能负担得起。”
Airbnb
“Airbnb 的使命是创造一个任何人都可以在任何地方找到归属感的世界，提供本地化、真实、多元、包容且可持续的健康旅行体验。”
Spotify
“释放人类创造力的潜力——让数百万创作者能够靠艺术谋生，也让数十亿粉丝能够从中获得享受与启发。”
Notion
“我们的使命是让造工具这件事变得无处不在。我们希望每个人都能塑造那些塑造自己生活的工具。”
这些使命陈述都简短、清晰且聚焦。它们反映了公司的愿景，同时也让设计与商业决策围绕一个中心思想展开。
现在，来看看我们自己项目的使命陈述。这个项目是一款帮助人们规划并享受有意义旅行体验的应用。
使命陈述
一款智能、易用的旅行规划应用，帮助人们发现富有启发性的目的地，并轻松组织自己的行程。通过精选地点卡片、活动建议和可定制行程，它将旅行灵感转化为结构清晰、个性化的体验，并可在任何时间、任何设备上访问。
当项目目标明确之后，就该进入下一步：竞品研究。
开展竞品分析
竞品分析是设计流程中的关键组成部分。通过研究市场以及同类产品的定位方式，你可以收集到关于功能、设计模式和用户预期的宝贵洞察。研究竞争对手，不仅能帮助你识别哪些优点值得借鉴，更重要的是，它也能帮助你发现它们的弱点、可用性问题，或缺失的功能。这些空白，正是你提升整体体验、为用户提供真正价值的机会所在。
一份优秀的分析，通常需要你去研究真实产品、截取界面截图、收集有意思的方案，并写下自己的观察与思考。FigJam 是收集和比较这些材料的理想空间。在分析时，尝试理解每个产品是如何回应用户需求的，以及它们的设计选择如何与你自己的项目目标相关联。凡是引起你注意的内容都记下来，哪怕只是一个很小的细节。因为它们在之后构建用户流程或评估设计决策时，都可能派上用场。
图 2.10 – 竞品分析
要开始这一阶段，可以创建一个 FigJam 白板，并收集主流旅行规划应用在移动端、平板端和桌面端的界面示例。观察它们如何展示目的地、组织行程、推荐内容，或者如何引导用户完成规划过程。
如果你不确定从哪里入手，可以关注以下几个方面。这些只是示例，你完全可以根据自己观察到的亮点添加更多内容：
- 导航：是否直观？结构是怎样的？
- 信息层级：哪些元素最突出？
- 行动号召（CTA） ：是否容易被发现和理解？
- 视觉语言：设计传达出什么样的语气和氛围？
- 个性化：用户能否保存或自定义内容？
- 新手引导：如何向新用户介绍这个应用？
- 响应式表现：布局如何在不同设备间适配？
- 痛点：是否存在令人困惑、产生摩擦或错失机会的地方？
开始制作情绪板
情绪板（moodboard）是一组视觉参考素材的集合，例如图片、颜色、纹理、字体、UI 元素，甚至关键词。它帮助你在真正开始设计之前，先定义项目的基调、氛围与风格。情绪板在产品早期阶段尤为有用。你可以在头脑风暴阶段独自制作，也可以与团队一起搭建，用来探索不同方向。它在构建用户流程和界面之前尤其有帮助，因为这时你需要先为设计工作确立一个清晰的视觉和情感基础。
随着研究推进，你的灵感会来自许多地方：网站、设计平台、摄影作品，甚至日常生活本身。不要一开始就追求完美，只需先收集一切与你项目愿景相关的内容。随着时间推移，你的情绪板会逐步发展成一个丰富的参考中心，不仅服务于设计本身，也服务于沟通。
以下是一些你可能会纳入其中的典型元素：
- 与应用气质相符的旅行摄影作品和目的地图片
- 类似产品的界面截图
- 配色方案、字体组合或图标风格
图 2.11 – 情绪板示例
现在就用 FigJam 开始建立你自己的情绪板吧。把一切能给你灵感的内容都放进去，随着项目推进，你自然会逐步打磨和筛选。
创建用户画像
现在，你已经定义了项目使命、研究了竞争环境，并建立了情绪板，接下来就该把注意力转向目标用户了。理解问题本身还不够，你还必须理解：你到底是在为谁解决这个问题。
收集这类洞察最有效的方法之一，就是采访或调研具有不同年龄、背景和习惯的人群。这样，你才能识别出真实的需求、预期与痛点。社交媒体数据和网站分析当然也能提供帮助，但这类数据更多适用于已有产品的改版，而不是一个新产品的早期阶段。
一旦你收集了足够多的原始数据，就可以开始塑造用户画像（user persona）：也就是一个代表你典型用户的虚构人物档案。从这一刻起，用户画像将成为每一个重大设计决策的重要参考。用户画像不仅对设计师有帮助，对整个团队同样有价值，包括利益相关方、市场人员和开发人员。设计中最常见的陷阱之一，就是依赖个人喜好，而不是用户真实需求。用户画像能帮助你把关注点放回它真正该在的地方：用户本身。那么，究竟该如何有效地创建用户画像呢？
虽然没有绝对固定的公式，但有一些关键元素应该始终包含进去，并且有一条明确规则必须遵守：不要靠猜。 你的用户画像必须建立在真实收集到的数据之上，而不是建立在假设之上。
图 2.12 – 用户画像
一个基础版用户画像通常包括以下内容：
- 姓名
- 照片
- 人口统计信息（年龄、性别、婚姻状态、职业和所在地）
- 一段简短个人简介
- 习惯
- 需求与挫折点
不要使用真实人物或个人隐私数据。应基于你的研究结果，提炼出泛化后的洞察。如果你的数据反映出多个不同的用户群体，可以考虑创建多个用户画像。这样能拓宽你的视角，帮助你设计出更具包容性且更有效的产品。每一个用户画像都应该代表目标用户中的一个不同细分群体。根据项目需要，你还可以加入诸如性格特征、常用 App，甚至收入区间等字段——前提是这些信息确实与你的项目相关。
对于你的旅行规划应用来说，可以尝试借助 Google Forms 等工具制作一份简单问卷，并分享给朋友或熟人。重点在于收集到足够结构化的数据，以便你分析其中的模式。第一次做可能会有些挑战，所以有需要时，可以回看我们前面给出的示例用户（图 2.12）。完成后，务必把你的用户画像分享给团队其他成员。这份共享参考能够帮助所有人始终围绕目标用户的需求保持一致。
你可以在 Figma 和 FigJam 社区中找到大量用户画像模板。我们将在第 12 章《借助资源、插件、小组件与 AI 工具扩展你的工作流》中更详细地介绍这些资源。
到这里，你已经完成了研究阶段的大部分工作，并且对自己的用户有了更清晰的认知。在下一节中，你将学习如何定义用户在产品中可以执行的动作，以及如何通过直观、以目标为导向的界面来支持这些行为。
在 FigJam 中构建用户流程
你刚刚完成的研究阶段，属于所谓的 UX 研究（UX research）的一部分。在专业环境中，UX 和 UI 往往由不同角色分别负责。但无论你是在团队中工作，还是独立完成项目，扎实理解 UX 原则都至关重要。即便你的主要职责是界面设计，你也可能需要自己定义流程、识别用户目标，或组织内容结构，尤其是在项目中没有明确 UX 指导的情况下。
UX 设计并不只是“创意”。它深深借鉴了心理学和市场营销学，帮助你理解用户的动机与行为，并引导你找到既直观又有效的解决方案。
既然你已经探索了用户需求并定义了受众，那么现在就该去梳理：用户在你的产品中究竟能做什么。这正是用户流程（user flow）登场的地方。
黄金路径
你已经了解了目标用户的偏好和目标，那么下一步就是确定：一个用户在与你的产品交互时，通常会走过怎样的一条路径。FigJam 再一次成为完成这项工作的理想工具。你可以新建一个白板，也可以复用现有白板，并在其中划出独立区域用于绘制用户流程。你可以选择将所有研究阶段放在同一块白板中，也可以拆分到不同页面或不同文件中，这取决于你自己。只要记住，独立文件便于你在必要时将特定阶段分享给不同协作者。
要开始设计导航流程，可以采用一种基础流程图方法，并遵循以下步骤：
- 从“形状”工具中选择一个矩形，并放到画布上。
- 若要复制形状，可以重复上述步骤，或使用键盘快捷方式：在拖拽已有形状时按住 ⌥（macOS）或 Alt（Windows）。或者，你也可以使用出现在任意形状旁边的 + 按钮快速添加一个相连的新模块（图 2.13 – A）。这会自动在两个形状之间创建一条连接线（图 2.13 – B）。
图 2.13 – 形状与连接线
通过这种方式，你可以搭建一个简单的横向图示，用来表示“黄金路径（golden path）”——也就是用户从进入应用，到达成某个目标（例如完成一次旅行规划或保存一个目的地）的理想旅程。
图 2.14 – 一个基础的“黄金”流程
扩展流程
当你定义好了黄金路径之后，下一步就是探索其他路线：包括变体、边界情况，以及用户可能做出的其他选择。这一步对于设计一个完整体验至关重要，因为它能让你的产品支持的不只是理想情况，而是多种实际场景。
你可以使用 FigJam 的图示工具来构建这些替代流程。画布上的任何形状都可以通过调整颜色、边框或几何形式来自定义。这使你能够在视觉上区分不同类型的动作、页面或决策点。
要连接各个形状，可以使用 FigJam 内置的连接线。这些线条是动态的：当你移动所连接的形状时，它们会自动跟随。如果有需要，你也可以通过蓝色控制点手动调整连接线的路径。每条连接线还有两个端点，可拖动以连接到其他对象上。
图 2.15 – 连接线编辑模式
为了让流程更易于阅读，你还可以直接给连接线添加标签。只需双击线条中央，就可以输入说明文字；这在展示用户选择或条件分支时尤其有用。下面来看一个简单的分支示例。在下面这个流程中，你可以看到一个通用移动应用的登录逻辑。图中使用了多种形状和颜色，以清晰区分不同步骤和页面类型，而连接线则展示了各步骤之间如何流转。
图 2.16 – 带变量的流程图
在这个例子中，流程考虑了两种常见场景：一种是已登录的回访用户，会直接进入首页；另一种是新用户，必须先创建账户。你的流程图应始终反映出这种变化。构建一个完整的用户流程，需要非常细致的思考。你必须预判用户可能采取的所有路径，并避免遗漏关键功能，例如密码找回或错误处理。一个好的准备方法，是去研究其他应用如何处理类似交互。拆解它们的逻辑，识别其中的模式，并确保你自己的流程没有遗漏关键节点。
随着流程逐步演化，你会发现它已经不再只是最初那种线性结构。这是很自然的过程。你现在正在迈向一个更完整的交互系统，而这套系统将直接塑造后续的界面设计。
下面这个示例展示了同一用户流程的更高级版本。现在你可以区分两类节点：用户动作用圆形节点表示，而应用界面页面则用矩形表示。虽然一些次级区域，例如分类、个人资料设置或筛选器等，可能仍然还没被纳入，但这个流程已经为后续的 UI 设计打下了相当扎实的基础。
图 2.17 – 一个复杂流程示例
正是这种对“动作”和“页面”的区分，使得用户流程不同于站点地图（site map）。站点地图只是列出产品中的所有页面，而用户流程则描述用户如何一步一步穿过这些页面。
FigJam 提供了大量基础形状、颜色和连接线样式。如果你需要更大的灵活性，或者想增强视觉表现，也可以很方便地从任意 Figma 设计文件中复制并粘贴元素进来。
成为用户
现在，你已经了解了 UX 研究的基础，而这是每一位设计师都应该掌握的流程部分。当然，这个领域还有很多值得深入学习的内容，也有大量优秀资源可供进一步研究。但现在，是时候继续前进，去探索 UI 以及支撑 UI 的那些工具了。
不过，需要说明的是，UX 研究其实从来都不会真正结束。设计绝不能被误解为“装饰”。优秀的设计师会在每一个阶段、每一个决策中，都始终把用户和产品目的放在中心位置。在进入线框图之前，先退一步，问自己一个关键问题：
我真的知道这个产品里到底会有什么内容吗？
界面并不只是视觉布局，它本质上是围绕具体内容搭建出来的容器。UI 设计中最常见的错误之一，就是在还没有大致明确产品需要呈现什么数据之前，就先开始画布局。这样一来，设计师往往只能用 Lorem ipsum 之类的占位内容填充页面，并凭空杜撰页面结构和信息层次，而这些并不能真实反映产品本身。这种做法表面上可能产出整洁优雅的效果图，但一旦真实数据进入，设计就会迅速崩塌。
让我们回到那个旅行规划应用。假设你现在开始设计“目的地详情页”。你已经做完研究、建立了流程，也定义了用户画像，但你仍然不知道这个页面上究竟需要出现哪些内容。你是否应该展示国家信息、气候、兴趣点、最佳旅行时间，还是用户评价？如果没有一份真实、结构化的内容样本，这一切都只能靠猜。只要条件允许，就尽量向利益相关方获取至少一份样本数据，或者一份贴近真实的演示内容。对于我们的项目来说，只要有一张写完整的目的地卡片示例，就足以帮助你定义该展示什么、如何展示，以及信息优先级如何排序。像这样在早期获得清晰内容认知，会让你的界面既实用，又更具未来适应性。
总结
Figma 是一个极其完整的设计工具，几乎支持产品设计流程的每一个阶段。FigJam 正是这一点的有力证明：它提供了一个灵活的空间，让你无需离开 Figma 环境，就能完成研究收集、想法分析和用户流程梳理。你可以自由组织自己的 FigJam 白板：有些用于团队协作，有些则可以保留为个人模板，在后续项目中反复复用。你越深入探索它，就越能体会到它的实用价值。
在本章中，我们覆盖了 UX 流程的核心要素：定义项目使命、分析竞争对手、构建用户画像、收集视觉灵感，以及创建你的第一批用户流程。在这个过程中，你也学会了如何有目的、有条理地使用 FigJam 的主要工具。到现在为止，你应该已经拥有一套扎实的 UX 产物，它们将构成你后续旅程的基础：把策略真正转化为界面。
在下一章中，你将探索 Figma 的核心设计功能，并搭建你的第一个界面布局。
如果你愿意，我也可以继续帮你把这段内容整理成“更适合出版物风格”的中文版，统一术语、优化标题层级和图注表达。
