你已经走到了这样一个阶段：无论是 UX 流程，还是 Figma 的界面，你都已经具备了扎实的理解。现在，是时候把这些内容真正整合起来，开始设计我们这款旅行规划应用的用户界面（UI）了。将 UX 阶段产出的各种成果始终放在随手可取的位置非常重要——这包括使命陈述、用户画像、用户流程，以及通过研究和分析收集到的其他资料。本章标志着一个关键性的转折：从理论与规划，迈向实践。在这一章里，你将通过线框设计，开始为你的应用塑造出一个真实的结构。
线框设计在任何数字产品的开发过程中都扮演着基础性角色。这一步是所有 UX/UI 设计师——无论经验深浅——都不应忽略的。但不用担心：本章会带你走完整个流程。不过，在正式进入 Figma 之前，我们会先花一点时间明确：什么是线框图，它为什么重要，以及它在以用户为中心的工作流中究竟处于什么位置。
你还会认识并亲自尝试这一阶段所需的关键工具，把 Figma 的画布当作你的练习场。这里涉及的信息会比较多样，但等到本章结束时，你此前学到的一切，都会汇聚成你为移动应用做出的第一张真正可用的线框图。
本章将涵盖以下几个主要主题：
- 将想法演化为线框图
- Figma 中的形状与矢量
- 使用钢笔工具处理高级矢量
- 开发应用结构
将想法演化为线框图
既然分析和研究阶段已经完成，想法也已经获得批准，那么你现在已经准备好把它变成某种真实可见的东西了。这一次，你将学习如何为我们此前介绍过的旅行服务应用创建一个“骨架”——也就是一种线性结构，用来可视化和实验产品的可用性与功能。这一重要过程叫作 wireframing（线框设计） 。它发生在你开始制作第一个原型之前，能够帮助你选择正确的产品结构。
在进入实操之前，你有必要先掌握一些关于这一步的理论知识。因此，在本节中，你会了解一些有关界面及其相关导航元素的重要概念。
理解线框图
如果你刚开始接触这一领域，你可能会想：线框图到底是什么？为什么它在设计流程中如此重要？
从本质上说，线框图就是 UI 的一个粗略布局。它不包含颜色、精细视觉表现或经过打磨的排版。你可以把它理解为产品的“蓝图”：一个被剥离掉视觉装饰的版本，只专注于结构、内容层级和功能本身。
你也许已经迫不及待，想直接进入细致的 UI 视觉设计，但线框设计在构建一个有用且直观的产品时，起着至关重要的作用。它能帮助你在早期发现可用性问题，也能让你在投入视觉样式设计之前，先验证自己的想法。实际上，最早期的线框图，甚至可以只是画在纸上的草图，就像图 4.1 所展示的那样。不过在本章中，你将学习如何利用你的 UX 研究成果（例如用户画像和用户流程），在 Figma 中创建它的数字版本。
图 4.1 – 纸上线框图示例
线框设计并不需要花费太多时间，即便只是一个粗略草案，只要拿去给用户测试，也常常能够带来非常有价值的洞察。在这个早期阶段就捕捉到问题，将帮助你做出更明智的决策，并在视觉设计阶段开始之前提升产品的可用性。
相反，如果你跳过线框设计这一步，直接进入高保真原型的制作，风险就会很高。因为你很可能会在后续阶段花费成倍更多的时间和精力，去修复那些原本本可以更早发现的结构性问题。
如果你现在还不太确定旅行应用的线框图到底应该长什么样，也不用担心。你马上就会学到，如何把研究成果拆解成布局思路，并逐步把设计组织起来。很快，一切都会开始变得清晰。
选择移动优先的方法
在正式开始线框设计之前，你需要先为产品选择一个起始格式。这个决定应当反映应用将如何被使用。
例如，如果你设计的是一个主要用于桌面端的平台，比如高级仪表盘或管理后台，那么从桌面布局开始，再把移动端作为后续适配，显然是合理的。
不过，在大多数情况下，设计流程会从最小、约束最多的格式开始：也就是移动屏幕。这并不是一条铁律，而是一种基于多年数据和用户行为总结出来的策略性选择。长久以来，移动设备在全球使用量上早已超过桌面设备，尤其是在浏览、沟通以及日常数字产品交互方面更是如此。正是这种数字使用习惯的转变，催生了设计师和开发者中的 mobile-first（移动优先） 思维。
采用移动优先进行设计，可以确保你的核心体验更加精简且聚焦。它会迫使你优先考虑最关键的内容与功能，然后在此基础上，随着屏幕尺寸的扩大，再逐步增强到平板和桌面等更大设备上。
当然，移动设备本身也有很多不同尺寸的屏幕。那么，该从哪一种开始呢？除非你是在为某个非常特定的设备或受众进行设计，否则最佳实践通常是：选择一种中等尺寸的屏幕分辨率，它应当能代表一种常见的智能手机尺寸。在这个基础打牢之后，你再向上扩展，去支持更大的手机、平板、笔记本，甚至电视屏幕。
请记住，这一阶段的目标并不是去开发一个完全响应式的界面，也不是去照顾市面上每一种屏幕尺寸。你现在要做的，是建立一个扎实、可用的基础——它将作为后续所有设计工作的详细蓝图，并最终成为开发实现的依据。
在这个项目中，我们的旅行规划应用最终将适配移动端、平板端和桌面端。但在线框设计阶段，我们会先聚焦于移动端布局。后续在流程推进中，我们会再采用一种自适应的方法，把这个设计扩展出去，并确保它能在所有相关屏幕尺寸上都表现良好。
既然你已经理解了为什么要优先从移动格式开始，以及应该从哪种分辨率起步，那么现在，就是时候来看看那些能帮助你在 Figma 中创建第一张线框图的工具了。
Figma 中的形状与矢量
到这里，你已经熟悉了 Figma 的许多基础工具。现在，是时候真正把它们用起来了。别担心：要完成第一张线框图，你根本不需要什么高级功能。你真正需要的，只是一组简单的几何形状。
创建基础形状
Figma 的工具栏中包含 Shape（形状）工具，它允许你在画布上添加矩形、椭圆以及更复杂一些的形状。这些形状都是可完全编辑的，你可以根据界面中不同区域的需要，对它们进行调整和改造。
例如，Star（星形）工具默认会创建一个五角星，但把它放到画布上之后，你可以通过 Count 句柄（图 4.2）来调整星角的数量。只需要上下拖动这个句柄，就可以增加或减少角的数量。
图 4.2 – 编辑星形
类似地，Polygon（多边形）工具默认会从一个三角形开始，但你可以继续增加边数，把它变成五边形、六边形甚至更多边的图形。你还可以通过 Radius（圆角半径）句柄 来为它加圆角。
Ellipse（椭圆）工具看起来似乎很简单，因为它只是用来画圆和椭圆，但它其实也具备一些高级能力。当你画出一个圆，并把鼠标悬停在其上时，你会看到一个 Arc（弧形）句柄。向内拖动这个句柄，会在圆上挖出一个缺口，让它变成一个类似饼图的形状。其他附加句柄还允许你继续进行调整：
- Start：旋转弧线的起始点
- Sweep：控制弧线的大小（也就是圆上缺口的大小）
- Ratio：调整弧线的厚度，把它变成一个圆环
借助这些句柄，你可以非常轻松地直接在线框图中创建环形数据可视化元素。
图 4.3 – 圆形的编辑句柄
在调整形状大小时，按住 ⇧ 可以约束其比例；按住 Option（macOS）或 Alt（Windows）则可以从中心点开始缩放；同时按住这两个键，则可以从中心点按比例缩放。你可以在不同形状上试试这些快捷方式，看看它们是如何工作的。
默认情况下，Figma 会为新添加的形状赋予一种中性灰色填充。这对于线框设计来说已经完全够用了，但如果你稍微调整一下样式，也有助于强调更重要的元素。比如，你可以使用更深一点的填充色来突出主要按钮或核心导航路径。
要修改任意形状的样式，只需选中它，然后查看右侧边栏即可。你可以自定义填充颜色、添加描边、调整不透明度等等。不妨多试试这些设置——这是熟悉 Figma 视觉控制方式的很好方法。
而且请记住：每一个形状本质上都是一个矢量对象。 这意味着你可以逐点修改它的结构。要进入编辑模式，请选中某个形状并按 Enter，或者直接双击它。
图 4.4 – 矢量编辑模式
在编辑模式下，你可以移动已有的点，或者借助 Pen（钢笔）工具添加新的点。你还会看到工具栏中出现额外工具。其中一个最有用的，就是 Bend（弯曲）工具。它允许你点击并拖动某个点，把原本的直线段转换成曲线。编辑完成后，点击 Done，或者按 Enter 或 Esc，即可退出该模式。
编辑模式的能力非常强大，它让你能够通过移动点、创建曲线以及构造自定义结构，来完全掌控任意形状。而 Figma 还提供了一个更灵活的选项，专门用于更高级的矢量工作：Figma Draw。这个模式真正释放了创意型矢量编辑的全部潜力，尤其适合绘制图标或为你的应用制作独特的视觉组件。
组合简单形状
一旦你在画布上添加好了基础形状，就可以开始把它们组合起来，构造出更复杂的结构。要做到这一点，请选中两个或更多元素——你可以通过点击并拖拽框选它们，或者在逐个点击时按住 ⇧ 键来实现多选。
当你选中了多个形状之后，顶部工具栏中央会出现一组新的图标，其中就包括 Boolean operations（布尔运算）菜单（图 4.5）。这个菜单允许你执行一些非破坏性的运算，比如 Union、Subtract、Intersect、Exclude 或 Flatten，从而让你可以完全掌控这些形状是如何相互合并或裁切的。
图 4.5 – 布尔运算菜单
下面我们通过一个简单例子来理解布尔运算是怎么工作的。你可以按如下步骤，用两个重叠的圆创建一个简单的月牙形：
- 使用 Ellipse 工具（快捷键：O）画一个圆，并在拖动时按住 ⇧，以确保它保持完美圆形。
- 选中该圆，在右侧边栏 Fill 区域点击颜色方块，修改填充颜色。为了更容易看清，可以选择任意一种黄色（图 4.6）。
图 4.6 – 选择颜色
- 按住 ⌥（macOS）或 Alt（Windows）并稍微向一侧拖动，以复制这个圆。
- 选中这两个圆。
- 打开布尔分组下拉菜单，并选择 Subtract。
图 4.7 – 选择 Subtract
最终你会得到一个月牙形状——它是通过从下方圆形中减去上方圆形而形成的。
布尔菜单中包含几种非常实用的操作：
- Union：将所有选中的形状合并为一个
- Subtract：用上方形状减去下方形状
- Intersect：只保留相交区域
- Exclude：去掉相交区域
图 4.8 – 布尔运算
你可以尝试不同的形状组合，去观察各种布尔运算分别会产生什么结果。Figma 中的所有布尔操作都是非破坏性的，这意味着原始形状仍会以组内元素的形式保留下来，并且可以继续编辑。只要双击任意图层，你就可以随时访问并修改其几何结构。
另一个重要功能是 Flatten（扁平化） 。它会把多个形状转换成一条永久性的矢量路径。这与布尔组不同，因为 Flatten 会把所有选中的元素真正熔合为一个轮廓，使它们不再能够被单独编辑。你可以把它理解为：把多个形状“烤熟”为一个单独对象。
在实践中，Flatten 特别适合用于导出资源，或者在复杂矢量构造中简化结构、提升性能。
为了更清楚地理解布尔形状和扁平化形状的区别，你可以尝试把同一个布尔结果与它的 Flatten 版本进行比较。你会发现：布尔版本在 Layers（图层）面板中依然保留着像 Union 或 Subtract 这样的运算符，而扁平化版本则只会显示为单一路径。
如果你希望更精确地观察形状的轮廓结构，Figma 还提供了 Outline（轮廓）视图（macOS 快捷键：⌘ + Y，Windows 快捷键：Ctrl + Y），它有点类似于 Illustrator 中的经典轮廓模式。这个视图只显示设计中的矢量边线，有助于你检查路径结构及其相交方式。
既然你已经看到了如何通过组合简单形状来构造更复杂的图形，那么接下来，就该进一步探索 Figma 处理矢量图形的方式，以及它在 UI 设计中为何如此强大。
使用钢笔工具处理高级矢量
在继续推进你的线框图之前，有必要先深入了解 Figma 中最强大的部分之一：矢量编辑。随着你开始构建更精细、也更具定制化的组件，你就需要超越基础几何形状，开始直接处理路径、曲线以及自定义结构。
在本章这一部分中，你将探索如何在 Draw 模式中工作。它是一个专门为高精度矢量编辑设计的环境。它不只是一个工具，而是一个完整的界面模式：它会让你的工作区更聚焦、界面更简洁，并解锁那些为高级图形创建与精修而准备的功能。
你并不需要一次性掌握所有东西。只要跟着流程走，多尝试，多熟悉矢量背后的逻辑就好。练得越多，这种设计方式就会变得越自然。不过在此之前，我们先花一点时间，理解矢量图形到底是什么，以及为什么它在界面设计中如此重要。
理解矢量图形
到目前为止，你通过各种形状工具创建出来的所有内容——例如矩形、圆形、多边形——都不仅仅是某种“视觉元素”，它们本质上都是矢量：由线条和曲线组成的图形，其构造依赖的是数学定义，而不是像素。这意味着它们具备可缩放、可编辑以及与分辨率无关的特性。
矢量图形最大的优势之一，就是你可以任意调整它们的大小，而不会损失任何画质。无论你把一个简单图标放大，还是放大一张复杂插画，最终结果依然会保持锐利，因为 Figma 会重新计算构成该形状的路径。
与之相对，raster（位图） 图像——比如 JPEG 或 PNG——是由固定网格中的彩色像素组成的。当你放大一张位图时，它就会变得模糊或像素化，因为图像中并没有额外的数据去填补被拉大的空隙。
图 4.9 – 矢量与位图的区别
矢量不仅更清晰，也更容易编辑，文件体积通常也更轻。但它并不是所有设计需求的答案。有些元素，比如照片，包含了太多纹理、色彩变化和光线细节，这些东西根本无法通过路径和锚点来表达，这时候就仍然必须使用位图格式。
不过在界面设计中，大多数结构性和装饰性的元素——如图标、按钮、Logo 和插画——最适合以矢量形式来创建。好消息是：你在 Figma 中创建的所有内容，默认都是矢量。 只有当你从外部导入图片时，你才是在处理位图内容。
在 Figma 中，你通常可以通过查看 Layers 面板中的图层图标，来判断某个内容是矢量还是位图。位图图层会显示为经典的照片缩略图，而矢量则会以抽象的形状图标表示。你也可以通过缩放来判断：矢量对象始终会保持边缘清晰锐利。
谈到文件格式时，最灵活、支持也最广泛的矢量格式是 SVG（Scalable Vector Graphics，可缩放矢量图形） 。它轻量、对浏览器友好，而且非常适合 UI 开发和动画场景。其他支持矢量数据的格式，如 .ai、.eps、.pdf，虽然也可能包含矢量信息，但往往需要先做转换，才能在 Figma 中顺畅使用。
你还可以直接把矢量图形从 Adobe Illustrator 复制到 Figma 中（反过来也可以）。在 Figma 里，右键并选择 Copy as SVG，然后粘贴到 Illustrator 中，就可以在保留矢量结构的前提下完成拷贝。
现在，既然你已经更清楚地理解了矢量的工作原理，以及它为什么在界面设计中如此关键，那么接下来，就让我们真正利用起 Figma 提供的专门矢量环境。
切换到 Figma Draw
在了解了矢量图形的基础之后，现在就该进入 Figma Draw 了——这是一个更高级的编辑环境，它让你能够以更大的灵活性和更强的专注度，创建并操作矢量形状。和标准设计视图不同，Figma Draw 会调整整个界面，以更好地支持复杂图形构建，让你获得专门为插画和高级路径编辑而设计的工具与视图。
要启用它，只需点击工具栏中的 Draw 图标。一旦进入该模式，你会立刻注意到工作区发生了变化。左侧面板会聚焦于你当前正在绘制的内容，只显示简化后的图层列表；工具栏会突出显示钢笔、画笔和铅笔等矢量相关工具；而右侧边栏则会扩展出描边、填充和路径行为等上下文控制项。
虽然 Pen 工具可以让你精确绘制，但其他工具，比如 Brush（画笔） 和 Pencil（铅笔） ，则提供了更具表现力或更自由的方式。不管你选择哪种方法，你在 Figma Draw 中创建的所有内容，最终都会变成可完全编辑的矢量路径，便于你继续精修。你可以添加、删除或调整点位；让曲线更平滑；使用更高级的操作去组合形状——而这一切都可以在不离开 Draw 界面的前提下完成。
使用 Figma Draw 的一个关键好处，就是它会尽可能把主画布中的干扰降到最低，为你提供一个针对精细矢量工作优化过的空间。它特别适合用来设计图标、装饰元素，或者那些超出标准界面布局需求之外的插画内容。由于它与 Figma 文件的其他部分完全集成，所以你在这里创建出来的任何东西，都可以像普通图层一样被复用、缩放或修改。
无论你处理的是精确几何形，还是更自由流动的形式，Figma Draw 都能为你提供一种更强大的方式，去构造你真正想要的东西。在下一节中，你将进一步学习如何直接通过点、曲线和贝塞尔控制柄，去控制图形结构。
处理曲线与点
如果你之前接触过设计软件，那么你大概率已经听说过 Pen（钢笔）工具。它能够让你创建矢量点、线条和曲线，用来构建复杂形状。事实上，这并不是 Figma 独有的功能，而是几乎所有设计应用中都不可或缺的一项能力。
一开始，它看上去可能有点难学，但一旦你理解了它的基本机制，并习惯了它的工作方式，它很可能会迅速变成你最喜欢的工具之一。
你可以在 Figma 中的任何时候使用 Pen 工具，但如果你是在 Figma Draw 内部工作，那么体验会更聚焦：界面更干净，矢量编辑工具也都摆在最顺手的位置。这让你在处理路径和复杂形状时，更容易保持专注。
现在，先让我们画一些简单的直线和曲线：
- 选择 Pen 工具（P） 。此时光标会变成钢笔图标。
- 在画布任意位置点击一次，放下第一个锚点。
- 把光标移到画布上的另一个位置，再点击一次，放下第二个点。随着你移动鼠标，Figma 会实时显示连接这两个点的线段预览。
- 重复这个过程，继续添加更多点位，就能创建出一条由直线段组成的简单开放路径。
图 4.10 – 使用钢笔工具绘制的直线段
现在，你可以继续放置任意多个点，以创建你想要的形状。每点击一次，就会新增一段线，而每个点则定义了路径上的一个拐角。
这是一种使用钢笔工具的方式。接下来，我们试着画出一个曲线段：
- 确保 **Pen 工具（P）**仍处于激活状态。
- 在画布任意位置点击一次，放下第一个点。注意，要从一个新的段或新形状开始，而不是接在前一个路径上。
- 把光标移到画布上的另一个位置，然后点击并拖动。随着你拖动，两个点之间的线段就会弯曲起来，就像在两点之间拉伸了一根橡皮筋。你拖得越远，施加的“张力”就越大，曲线也就越夸张。
图 4.11 – 使用钢笔工具绘制贝塞尔曲线示例
很好。你刚刚已经创建出了自己的第一条 贝塞尔曲线。此时，除了两个锚点之外，你还会看到从曲线点上延伸出来的控制柄。其中，第一个控制柄用于调整你刚刚画出的这段曲线的轨迹，而第二个控制柄则定义下一段路径的方向、角度和长度。
如果你想进一步锻炼自己的手感，可以试试 Bézier Game（bezier.method.ac） 。它是一个交互式练习工具，会通过一些小挑战带你掌握曲线背后的逻辑，并帮助你用尽量少的点画出理想形状。
当你对钢笔工具更熟悉之后，可以尝试把最后一个点连回第一个点，从而闭合这个形状。这样你就得到了一条闭合路径，之后就可以在 Design 面板中对它进行自定义，比如添加填充颜色。
建议你先从三角形、矩形这类基础形状开始练习，再逐渐挑战星形、爱心，甚至纸飞机之类更复杂的图形，就像后面示例里展示的那样。
这些练习不仅会提升你的技巧，也会为你打开更多创作可能性，让你能够构建更有表现力、也更容易复用的矢量形状。
所有通过 Pen 工具绘制出来的路径，在工作流中的行为方式都与 Figma 默认形状一致。这意味着，你可以把一个自定义矢量与矩形、椭圆或任何其他元素组合起来，并在设计过程中一视同仁地使用它们。
在任意时刻，你都可以通过选中某个形状并按 Enter，或者直接双击它，进入编辑模式。在该模式下，你可以移动点位、添加新点，或者调整已有曲线。
如果你觉得某一段线条太生硬，可以使用 Bend 工具。它会在你处于编辑模式时，显示在主工具栏上方的上下文工具栏中。它能帮助你让棱角变圆，让曲线过渡得更自然。或者，你也可以在 Pen 工具激活状态下，按住 ⌘（macOS）或 Ctrl（Windows）临时切换到 Bend 工具——这对于不打断当前操作、快速进行微调非常方便。
使用 Shape Builder 工具构建复杂形状
当你已经逐渐熟悉了路径绘制以及矢量点的处理方式之后，就可以开始通过组合多个元素，来构造更复杂的形状了。在 Figma Draw 中，完成这一点最有效率的方法之一，就是使用 Shape Builder 工具。
Shape Builder 可以让你以一种快速且直观的方式，对重叠的矢量形状进行合并、减去和重组。当你想从简单组件出发，构建一个新的对象时，它尤其有用。比如，把圆形、矩形或者自定义路径组合起来，拼出一个独特图标。
要开始使用它，请先在画布上绘制或摆放两个或以上彼此重叠的矢量形状。它们既可以是标准基础形状，也可以是通过 Pen 工具创建的自定义路径。然后选中它们全部，并按 Enter 或直接双击选择对象，进入编辑模式。
需要注意的是：只有在你处于编辑模式，并且同时选中了多个矢量对象时，Shape Builder 工具才会出现在上下文工具栏中。
一旦激活后，你把鼠标悬停在这些重叠区域上时，Figma 就会高亮显示组成整个图形结构的各个独立区域。接下来你可以这样操作：
- 单击：隔离某一块单独区域，并将其从整体中切出来
- Option-单击（或 Alt-单击）：减去单个区域
- 拖拽跨过多个区域：将这些区域合并为一个形状
- 按住 Option⌥ / Alt 拖拽跨过多个区域：一次性减去多个区域
图 4.12 – 使用 Shape Builder 工具减去重叠矢量
与传统布尔运算相比，Shape Builder 在构造复杂图形时提供了一种更直观、更可视化的方式，尤其适合你希望对结果拥有完全掌控的时候。
但它和布尔运算有一个很大的不同：它是破坏性的操作。也就是说，一旦你执行了 Shape Builder 的编辑，原本那些单独的形状就会被永久合并或删除，之后不能再分别单独编辑了。
在把多个形状合并完成之后，你就可以退出编辑模式，并把这个新得到的图形，当作普通的矢量对象继续用于你的设计。
矢量网络
大多数基于矢量的设计工具，都是围绕一种线性结构构建的：图形由开放路径或闭合路径定义，锚点按照从第一个到最后一个的顺序依次连接。如果最后一个点重新连回第一个点，那么这个形状就闭合了，也就可以被填充颜色。
而 Figma 则引入了一种更灵活的方式：vector networks（矢量网络） 。这些路径不再局限于单一方向，而是可以分叉、回环，并以多种方式相互连接。这意味着你可以在一个单独的矢量对象中，构建出复杂结构，而无需复制路径或额外创建更多图层。
在矢量网络中，任意一个点都可以同时连接到多个其他点，从而形成类似网格一样的图形结构。对于设计复杂元素——比如图标、Logo，或者抽象视觉构图——它是一套非常强大的系统，而且能让所有内容始终在同一处保持可编辑。
图 4.13 – 矢量网络示例
如果你刚接触 Figma，这种行为方式可能会让你觉得意外地自然，尤其是在使用 Pen 工具时会更明显。但如果你来自传统矢量编辑器，那么你可能需要一点时间，去习惯这种额外的灵活性。
你可能会遇到的一个限制，是如何给复杂网络中的某些区域上色。由于所有路径都存在于同一个形状之内，Figma 并不会自动把其中的不同区域识别成可以独立填充的封闭区域。为了解决这个问题，你可以使用 Paint Bucket（油漆桶）工具（它位于 Shape Builder 工具旁边）。
当它被激活后，Paint Bucket 会让你在矢量网络内部逐个悬停不同区域。Figma 会高亮它识别出来的这些区域，而你点击它们时，就可以为其添加或移除填充颜色。你可以借此为同一个形状的不同分区填上不同颜色，或者故意让某些区域保持空白，以形成风格上的对比。
真正掌握这些矢量工具，以及矢量网络带来的灵活性之后，你就能在塑造自己的设计语言时，拥有几乎完全的掌控力。既然现在你已经具备了创建、精修和组合任意图形的能力，接下来，就是时候把这些技能用于更具体的任务了：真正开始构建你的应用结构。
开发应用结构
现在，我们终于准备好开始设计应用的结构了。如果你在正式进入实操之前，仍然觉得需要再多练一会儿，也完全没问题。你可以继续花点时间去反复试用这些工具，直到它们用起来更自然为止。等你准备好了，随时可以回到这里继续往下走。
接下来的步骤中，我们会开始把研究阶段产出的成果——从用户流程到用户画像——转化成一个具体的视觉布局。我们会先从旅行规划 App 的低保真骨架开始，再一步一步把它发展成真正可用的线框图。
不过，在继续之前，我们先再花一点时间，明确一下：线框图到底是什么。
线框图代表的是界面的结构性基础——它是一种简化后的视觉指南，用来定义元素的摆放位置、信息层级，以及不同页面之间的导航逻辑。它所关注的是可用性，而不是美观本身；它帮助你在决定产品“长什么样”之前，先探索清楚它“该怎么工作”。
线框图可以根据细节程度和精致程度的不同，呈现出不同的保真度级别：
- 低保真（low-fidelity / lo-fi）线框图：通常是快速、概略性的草图，使用简单形状和占位内容。它们非常适合用于测试早期想法，以及在不考虑视觉细节的前提下验证用户流程。
- 高保真（high-fidelity / hi-fi）线框图：会更加详细，也更接近最终布局。它们包含真实的间距、结构，有时甚至会出现早期的 UI 组件，因此特别适合用于可用性测试和团队评审。
理解这些不同保真度的层级，会帮助你在不同设计阶段选择合适的方法。在当前这个阶段，我们会先聚焦于创建旅行应用的低保真版本，它之后再逐渐演化成一个经过打磨的高保真原型。
将流程转化为骨架
你还记得自己在第 2 章《在 FigJam 中组织情绪板、用户画像与用户流程》里创建的那个用户流程吗？它帮助你定义了应用可能的结构。但流程图虽然有助于理解体验本身，真正能让你把它“看见”的，则是线框图。
现在，让我们把那个流程，真正转化成一个具体的东西：
- 在 Figma 中创建一个新的空白 Design 文件。
- 从工具栏中选择 Frame 工具（或按 A 或 F）。
- 在 Phone 类别的预设中选择一种屏幕尺寸——以 iPhone 16（393 × 852） 作为参考 frame。
根据我们的流程，用户打开应用后看到的第一个页面是登录页，所以我们将第一个 frame 命名为 Login。要重命名 frame，你可以直接双击画布上的名称，或者在 Layers 面板中选中它后按 Enter 进行编辑。
重命名完成后，你就可以继续把剩余页面也添加进来了。快速复制 frame 有好几种方法：
- 按住 ⌥（macOS）或 Alt（Windows）并拖动一个已有 frame
- 按 ⌘ + D（macOS）或 Ctrl + D（Windows）复制当前选中的 frame。如果你刚刚移动或拖拽过上一个副本，Figma 会重复那一次的位移变换，把新副本放在相同偏移位置；否则，新副本会直接叠在原 frame 上。
- 或者在 Frame 工具激活状态下，点击出现在 frame 旁边的 + 按钮，快速添加一个同样大小的新 frame。
用你喜欢的方式再添加几个 frame，然后根据用户流程对它们进行重命名，例如：Sign Up、Home、Detail Page。这样一来，你就有了开始线框设计所需的基础结构。
在这个阶段，重命名图层可能看起来有点多此一举，但它其实总是值得做的。保持图层命名清晰，可以帮助你维持条理，也能让协作更顺畅，并且在项目逐渐复杂起来之后节省大量时间。
图 4.14 – 一个空白流程骨架
当你添加并重命名完所有 frame 之后，应用的流程现在就已经被完整映射成了一套“骨架”。接下来，你就该开始思考：每一个页面里到底应该放什么，也就是判断哪些元素应当属于哪个视图。
塑造界面
现在你已经创建好了线框骨架，接下来就该逐个处理每一个页面，并定义它们的具体内容了。在这个阶段，你完全不需要用到 constraints（约束） 或 Auto Layout（自动布局） 这样的高级功能；这些内容你后面会学到。现在，光靠你已经掌握的那些基础工具，就足够完成工作了。
让我们从流程中的第一个页面——Login 视图——开始。先思考这个页面应当包含哪些关键元素。考虑它的目的：让用户登录。然后想想，为了完成登录，通常需要什么。你大概率会需要：
- 用户名输入框
- 密码输入框
- 一个确认登录的按钮
- 忘记密码的找回方式
- 一个跳转到 Sign Up 页面的链接，以便没有账号的用户去注册
现在开始操作：
- 选择 Rectangle 工具（R） ，在 Login frame 中画一个尺寸为 350（宽）× 50（高） 的矩形。你在绘制的过程中，Figma 会实时显示尺寸。
- 把这个矩形放在 Login frame 的上半中间区域，保持它水平居中，并与顶部留出舒适的间距。在这个阶段你不必拘泥于精确坐标，只要整体看起来平衡即可。因为这个形状是在 frame 内部创建的，所以它会自动被嵌套到该 frame 之下，并显示在 Layers 面板中。
图 4.15 – 放置一个形状
- 在 Design 面板的 Fill 区域中，点击颜色方块并输入
lightgray（中间不留空格），或者直接输入十六进制色值 #D3D3D3。关于颜色的内容我们会在下一章详细讲，但现在这样做，可以让这个输入框在视觉上更容易被识别出来。 - 选择 Text 工具（T） ，在该矩形上方稍微偏左的位置点击，并输入 Username。借助智能参考线，把文字和输入框左对齐。
- 选中这个矩形和它的标签文字，按住 ⌥（macOS）或 Alt（Windows）向下拖动，复制它们。你也可以用复制粘贴。把副本向下移动一段足够的垂直距离，大约 100 px 左右，然后双击标签，将其改为 Password。
图 4.16 – Username 与 Password 文本输入框
- 再次选择 Rectangle 工具（R） ，画一个大约 315 × 75 px 的矩形。把它放在两个输入框下方，留出合适的垂直空间，不要让它显得过于贴近即可，无需精确到像素。
这个矩形将作为 Login 按钮，也就是页面上的主要行动按钮（primary CTA）。为了让它更突出一些，把它的 Fill 颜色改成 lightgreen，或者从颜色选择器中选一个类似的柔和绿色。
一个按钮如果没有文案，就还不算完整。接着，选择 Text 工具（T） ，在你刚刚创建的矩形内部点击，并输入 Login，以明确表达这个动作。
图 4.17 – 修改背景颜色
利用对齐辅助线，把这个标签在按钮中水平和垂直都尽量居中。你也可以手动微调，直到视觉上看起来平衡自然为止。
现在，把剩余元素也补充进去。首先，在 Login 按钮正下方再创建一个 Sign Up 按钮。由于这是次要操作，所以在样式上可以与主按钮区分开来，例如给它填充灰色，而不是绿色。
然后，使用 Text 工具 在 Password 输入框下方加上一条 Forgot your Password? 链接。让它的位置清晰可见，并与页面中其他布局元素保持一致的节奏感。
在继续之前，先打开 Layers 面板 看一眼——现在它大概率已经开始变得有点乱了。这正是一个很适合暂停下来、整理图层命名的时机。你只需双击图层名称，就可以重命名它们。现在养成整理习惯，之后在项目变复杂时，你的工作流会顺畅得多。
图 4.18 – Login 视图打磨后的线框图
为了让文件保持有序，接下来请开始把相关元素进行分组。选中 Username 标签和它对应的矩形，然后按 ⌘ + G（macOS）或 Ctrl + G（Windows）进行分组。对 Password 那一组也做同样操作，再把每个按钮和它的文案标签分别分成组。然后，为每个组重新命名，让你能一眼看懂里面是什么。
再次提醒，这个阶段毕竟还只是线框图，所以你不需要在设计和命名上过于严苛。只要保证整体是可读的、可管理的就可以。你很可能会在之后继续优化图层结构，但在一开始就建立好的习惯，会让设计越往后越轻松。
现在，你已经完成了自己的第一个页面。接下来，就用同样的方法去处理剩余的 frame，根据用户流程为每一个页面添加合适的元素。
图 4.19 – 完成后的线框结构
当整套线框图完成之后，应用的结构就会清晰得多。这套方法同样可以直接套用到你未来的项目中——无论是 App 还是网站。下一步，就是把你的线框图分享给目标用户群体中的人，并测试整个流程。一个经过测试和验证的框架，会让后续每一个设计决策都显得更加有意识、更聚焦，也更让人享受。
接下来是什么？
这一章引入了很多新概念，但如果你已经走到了这里，那么做得很好——你现在已经理解了什么是线框图，以及它为什么是设计流程中如此有价值的一步。
不过，制作线框图并不仅仅是往 frame 里面填充几个矩形和占位文字。它真正的意义在于：验证你在 UX 阶段定义的那个流程，是否真的能对用户成立。而想要知道这一点，唯一的方法，就是去测试。
为了做到这一点，你需要通过制作原型，让你的线框图具备交互能力，使用户能够像在真实 App 中一样，从一个页面跳转到另一个页面。只有这样，你才能开展更真实的用户测试，并收集到有效反馈。
测试是任何设计流程中都至关重要的一部分。它能帮助你在投入时间和精力去做高保真视觉设计，甚至进入开发阶段之前，就提前发现问题。这也是为什么你应当始终做好准备，愿意根据用户反馈去修订自己的流程和线框图。虽然这样在前期看起来会更花时间，但从整体上看，它能帮你在后面节省更多成本。
由于你目前还没有正式学习过 Figma 中的 原型设计（第 9 章《使用 Transitions、Smart Animate 和 Interactive Components 进行原型设计》）以及 用户测试（第 10 章《在浏览器和真实设备中测试与分享你的原型》），所以我们现在先让这套线框图保持静态即可。
不过，等你对这个工具更熟悉之后，你完全可以回到这个项目中，把它做成一个可点击原型，再跑一轮测试。这会是一个非常好的练习方式，也能帮助你为真实项目做好准备。
如果你想查看完整示例，那么包含使命陈述、情绪板、用户画像、流程图和线框图的完整工作文件，已经发布在 Figma Community。链接如下：
https://packt.link/8ao3Q
你可以自由复制这个文件，并看看其中每一部分是如何彼此衔接起来的。
总结
如果你之前对 UX 在工作流中的重要性还有疑问，那么这一章应该已经帮助你更清楚地理解：为什么它是如此关键的一步。一旦你定义好了清晰的用户流程，构建线框图这件事就会变得直观得多。尽管如此，在设计旅程的早期阶段，花时间去想清楚应该使用哪些元素、又该如何布局它们，本身也是再正常不过的事情。
像按钮、标签页、导航栏这样的 UI 模式，需要靠实践才能真正熟悉。但你设计得越多，观察你喜欢的那些 App 是如何解决类似问题越多，这些东西就会越快“连起来”。
这一章标志着你迈向在 Figma 中设计真实界面的第一个重要步骤。你探索了关键工具，理解了线框设计背后的逻辑，并把这些知识真正应用起来，为你的应用建立出了第一版结构性界面。如果你一路跟着做、边学边练，那么你已经为下一步打下了非常扎实的基础。
在接下来的章节中，我们会更深入地进入 Figma 的视觉设计功能：包括排版、颜色、图片、网格以及可复用样式。准备好吧——你的界面，马上就要开始真正长得像一个完整产品了。
