第4章 屏幕与显示区域设计：固定面板、滚动内容区、状态切换

概念解释

硬件原型的面板往往包含多个信息层级——导航栏、操作栏固定在顶部或底部，中间为主滚动区域，而不同操作模式（如“待机”“运行”“告警”）需要切换状态。在Figma中设计这些区域时，核心是理解以下三个概念：

• 固定面板（Fixed Panel）：指在滚动时始终固定在视口某位置的组件（如顶栏、底栏）。在Figma中通过“固定位置”属性（Fix position when scrolling）实现。
• 滚动内容区（Scrollable Content Area）：可上下滚动的长列表或详情区域。通过将内容放入一个设定高度的容器，并开启“溢出滚动”（Overflow: Scroll）来模拟真实硬件屏的滚动行为。
• 状态切换（State Switching）：原型在不同交互（如点击、定时）下切换显示模式。Figma中可利用“交互状态（Interactive Component）”或“变体（Variants）”来管理多个状态。

流程拆解

在Figma中实现固定面板、滚动区与状态切换的原型交互，建议按以下步骤操作：

1. 设计布局框架：创建 Frame（模拟硬件屏尺寸，如 480×800）。划分顶部固定区（高度 60px）、中部滚动区（剩余空间）、底部固定区（高度 60px）。
2. 制作固定面板组件：将顶部/底部区域设计为一个组件（Component）。在原型面板中选中该组件，勾选属性 Fix position when scrolling。
3. 构建滚动内容区：在中部区域放置一个 Frame 并设置 Overflow: Scroll。内部填充足够多的内容项（列表、卡片），确保高度超出容器。
4. 创建状态变体：将整个面板（或主要区域）转换为组件，利用“变体（Variants）”创建不同状态（如 idle / active / alert）。每个变体可拥有独立的固定/滚动布局，但保持基础结构一致。
5. 添加交互连接：为状态切换触发器（如按钮、点击区域）设置“交互 → 状态变更”动作。选择目标变体状态，动画建议使用“Smart Animate”以平滑过渡。
6. 预览测试：进入原型预览模式，测试固定面板是否跟随滚动、滚动区是否流畅、状态切换是否触发正确。

案例分析：智能家居面板原型测试

场景：某智能中控面板硬件原型，需要测试用户在不同房间模式下切换与列表滚动时的操作效率。

• 设计阶段：在Figma中创建 480×800 Frame，固定顶部显示“时间+状态图标”，固定底部放置“模式切换按钮”（待机/离家/回家）。中部滚动区显示房间设备列表（灯光、空调、窗帘等）。
• 交互配置：为底部三个按钮分别设置“变更组件状态”动作，切换顶部面板的颜色与图标（设备状态随模式变化）。滚动区内部每个设备行具有“点击→打开详情”的交互。
• 测试记录：邀请5位被试者操作原型，记录每次模式切换是否触发了正确的顶部状态变化、滚动区是否能完整展示所有设备（共12项）、有无因固定面板遮挡导致列表最后一项不可见。

测试记录示例（部分）：
| 被试 | 模式切换次数 | 状态匹配率 | 滚动最末项可见 | 操作时间(秒) |
|------|-------------|-----------|---------------|-------------|
| A    | 6           | 100%      | 是            | 23          |
| B    | 5           | 80%       | 否（底部遮挡）| 45          |
| C    | 4           | 100%      | 是            | 30          |

优化调整：根据测试发现底部固定面板高度过高导致列表最后一项被遮挡，将底部面板高度由 70px 缩减至 50px，并在滚动区底部增加 20px 的 padding 使内容完全可见。再次测试后所有被试均能滚到底部。

表格总结

交互类型对照表

测试记录模板

实践清单

每次使用Figma进行硬件原型屏幕区域交互测试前，请检查以下要点：

• ☐ 固定面板属性已正确勾选 Fix position when scrolling，且未误选到子元素。
• ☐ 滚动内容区的 Overflow 设置为 Scroll（或 Auto 视情况），内容高度已超过容器。
• ☐ 所有状态切换的变体（Variants）命名直观（如 Normal、Alert），且每个变体面板结构一致。
• ☐ 交互动作目标正确指向对应的变体状态，避免循环指向同一状态。
• ☐ 原型预览模式下测试了滚动、固定、状态切换三种行为，无冲突或异常跳转。
• ☐ 在目标硬件尺寸下（如手机竖屏 480×800）测试了触控热区的可用性。
• ☐ 测试记录表已准备，至少包含预期结果与实际结果两列。