SPEAKER_1: 好，上一讲我们聊到 Figma 最核心的突破——它把设计从一台电脑里解放出来，变成了实时协作的云端工具。那今天我想继续往下走，聊聊当 Gong 这样的新手第一次打开 Figma，看到那个界面……说实话，第一反应可能是有点懵的吧？ SPEAKER_2: 完全正常。大多数人第一眼看到 Figma 界面，会觉得四面八方都是按钮和面板，不知道从哪里下手。但其实整个界面只有四个功能区，一旦搞清楚各自的职责，那种压迫感就消失了。 SPEAKER_1: 四个区域——那我们就一个一个来拆。先从最显眼的地方开始，顶部那一条工具栏，它到底管什么？ SPEAKER_2: 工具栏是你的「动作入口」。它放着最常用的操作工具：选择、移动、画框架、画矩形、画文字、钢笔……你想创建什么，先在这里选工具。可以把它理解成画家的调色盘，你先选笔，再去画布上动手。 SPEAKER_1: 好，工具栏是起点。那中间那块大空白——画布区，这个应该最直观？ SPEAKER_2: 对，画布是你的工作台，所有视觉内容都在这里呈现。但有一点新手容易忽略：画布本身是无限延伸的。你可以在上面放十个页面的设计稿，横向排开，用滚轮缩放来切换视角。它不是一张固定大小的纸，而是一个无边界的空间。 SPEAKER_1: 无限画布，这个概念挺有意思的。那左侧那个面板——图层面板，这个对新手来说可能是最陌生的，为什么它这么重要？ SPEAKER_2: 因为 UI 设计本质上是「分层管理」。一个按钮，可能由背景矩形、文字、图标三个元素叠加而成。图层面板就是这些元素的目录树——谁在上面、谁在下面、谁属于谁，一目了然。当设计变复杂，比如一个页面有几十个元素，没有图层面板，你根本找不到想点击的那个东西。 SPEAKER_1: 所以图层面板是「导航工具」，帮你在复杂设计里定位。那如果 Gong 在画布上点了一个元素，右侧的属性面板会发生什么？ SPEAKER_2: 属性面板会立刻显示这个元素的所有参数——位置 X/Y 坐标、宽高尺寸、填充颜色、描边、圆角、透明度……你想改什么，直接在这里输入数值或者点击色块。它是「调参中心」，控制图层的外观和行为。 SPEAKER_1: 所以左手图层、右手属性——这两个面板是配合使用的？ SPEAKER_2: 完全是这样。工作流是：在图层面板里找到目标元素，选中它，然后在属性面板里调整参数。左手管结构，右手管表现。这两个动作反复循环，就是 Figma 日常操作的核心节奏。 SPEAKER_1: 这个「左手图层右手属性」的比喻很好记。不过我想追问一下——为什么要把图层和属性分成两个独立面板？合并在一起不是更方便吗？ SPEAKER_2: 这是个好问题。分开的原因是职责不同。图层面板处理的是「结构关系」——层级、嵌套、命名，这些是静态的组织信息。属性面板处理的是「当前选中对象的状态」，它是动态的，随你的选择实时变化。如果合并，信息密度会高到让人崩溃。分开，才能让每个面板保持清晰。 SPEAKER_1: 明白了，分离是为了降低认知负担。那对于刚入门的人来说，界面上还有什么容易被忽视但其实很关键的地方？ SPEAKER_2: 顶部工具栏右侧有一个区域经常被忽视——它显示当前文件的协作状态，比如有没有其他人在线、分享权限设置。这直接关联到上一讲说的实时协作能力。另外，画布左上角的页面标签，可以在同一个文件里管理多个页面，这对组织大型项目非常实用。 SPEAKER_1: 所以界面的每一个角落都有它的用意，不是随机摆放的。那从效率角度来说，真正理解这四个区域的职能，会带来什么实质性的改变？ SPEAKER_2: 改变是根本性的。很多新手的痛点是「找不到东西」——想改颜色不知道在哪改，想选中某个元素点不到。一旦建立了「工具栏创建、画布操作、图层定位、属性调参」这个心智模型，每一个操作都有了归宿，效率会直接翻倍。设计软件的学习曲线，很大程度上就是在建立这个心智模型。 SPEAKER_1: 「每个操作都有归宿」——这个说法很准确。那对于正在听这讲的人，你觉得他们最应该带走的一个认知是什么？ SPEAKER_2: 就是这个四区模型本身：工具栏是入口，画布是舞台，图层面板是目录，属性面板是控制台。掌握这四个功能区的职能，Figma 的界面就从「一堆陌生按钮」变成了「一套有逻辑的工作系统」。这是所有后续操作——包括我们接下来要讲的 Auto Layout——的基础地基。 SPEAKER_1: 好，四区模型，记住了。工具栏、画布、图层、属性，各司其职。下一讲 Auto Layout 应该会更有挑战性，我们到时候继续。 SPEAKER_2: 对，Auto Layout 是建立在这个基础上的。地基打好了，那一讲会顺很多。