性能监控页面：从指标卡片到一次采样反馈的完整交互解析

性能类页面最容易给人一种“数字很多，所以功能很复杂”的印象。实际上，一个好的性能观察界面，首先要让人快速看懂当前处于什么状态，其次要让不同指标之间的关系清楚，最后还要让每一次操作都能得到明确反馈。眼前这个页面采用深色背景，把 CPU 使用率、内存占用和 FPS 放在同一组指标卡片中，并用三条横向进度条展示趋势。顶部有监控状态和开始/停止按钮，底部有“采集一次样本”按钮，用户可以通过少量操作观察数字、进度条、文案和颜色如何一起变化。

页面打开时，顶部副标题显示“监控已暂停”，开始按钮使用青绿色；三个核心指标分别是 CPU 38%、内存 164 MB、FPS 60，采样次数为 0。点击顶部按钮，副标题会变成“实时采样中”，按钮文字变为“停止”，按钮颜色也变成红色；再次点击则返回暂停状态。点击底部采样按钮，采样次数加一，CPU、内存和 FPS 会按照页面预设的变化规则刷新，三张指标卡片和三条进度条随之更新。

需要特别说明的是，页面展示的是一个可以操作的性能指标演示界面。它能把状态变化完整地呈现出来，但当前页面没有接入真实设备性能采集服务，也没有根据系统负载自动产生数据。顶部的“开始”只切换监控文案和按钮样式，底部的采样按钮才会改变数值。把这两个动作分开理解，才能准确读懂页面的行为，也不会把演示反馈误认为后台正在持续读取设备性能。

先看懂页面的整体结构

页面从上到下可以分成三个区域：顶部状态栏、中间指标与趋势区域、底部采样操作区域。三个区域都使用深色配色，但背景深浅不同，因而不需要额外的分割线也能形成层次。

顶部区域使用较深的蓝色作为横向标题栏。左侧是两行文字，第一行是较大的“性能监控”，第二行是较小的状态说明。右侧是一个操作按钮。标题负责说明页面用途，副标题负责告诉用户当前是否处于监控状态，按钮则提供唯一的监控开关入口。这里没有把监控开关单独做成一个小型开关控件，而是使用带文字的按钮，因此“开始”和“停止”两个动作更直接。

中间区域位于可以滚动的内容容器中。页面先放置三张并排卡片，分别显示 CPU、内存和 FPS。三张卡片宽度相同，使用不同的强调色区分指标：CPU 使用青绿色，内存使用淡紫色，FPS 使用绿色。卡片的上方是大字号数值，下方是小字号标签，用户可以先看大数字，再确认它属于哪一个指标。

三张卡片下面是一个圆角趋势面板。面板标题为“实时趋势”，下面依次显示 CPU 使用率、内存占用和帧率稳定度。每一行都有左侧标签、右侧百分比文字和一条线性进度条。趋势面板没有绘制折线图，而是用三条横向进度条表达当前值。这个选择让页面结构保持简单：指标卡片负责精确数值，趋势条负责快速比较。

趋势面板底部显示“采样次数：0”这样的文字。它不是一个独立卡片，而是被放在趋势区域内部，说明这三条趋势和采样动作属于同一个观察上下文。用户点击一次采样按钮后，这个数字会从 0 变成 1，同时上方的数值和进度条会一起改变。

最下方是占满内容宽度的“采集一次样本”按钮。它的作用非常明确：每点击一次，就生成一次演示样本并刷新页面。按钮没有与顶部“开始”按钮混在一起，避免用户误以为打开监控就会自动采集。对于教学演示来说，这种手动触发方式还带来了一个优点：每一步变化都可以停下来观察。

初始状态为什么值得认真观察

页面初次打开时，监控状态为暂停，采样次数为 0。这个状态不是空白状态，而是一个完整的基准状态。CPU 为 38%，内存为 164 MB，FPS 为 60。三项数据同时出现在卡片、趋势条和趋势标签中，用户可以从多个位置确认同一组数据。

CPU 卡片显示 38%，趋势行的右侧也显示 38%，进度条的填充值同样来自 38。它们在视觉上是一致的。内存卡片显示 164 MB，但趋势条并没有直接把 164 当作百分比使用，而是把内存数值缩小后再参与趋势显示。页面把内存值除以 4，初始趋势约为 41%，因此内存卡片和内存趋势条表达的是同一个状态的两种观察方式：卡片强调实际数值与单位，趋势条强调相对占用程度。

FPS 卡片显示 60，趋势行显示的是帧率稳定度，进度条的值也使用 60。这里的文字没有再添加百分号，因为卡片表达的是帧数，趋势行则把它作为接近百分比的稳定度来展示。阅读页面时，应当把“FPS 60”和“帧率稳定度 60%”看成同一状态下的两个显示口径，而不是把它们理解成两个独立测量结果。

初始状态的颜色也承担了信息传递作用。青绿色的 CPU 数值与 CPU 进度条相互呼应，淡紫色的内存数值和内存条相互呼应，绿色的 FPS 数值与帧率条相互呼应。即使用户没有逐字阅读标签，也可以通过颜色快速把卡片与趋势行对应起来。深色背景上的浅色文字保证了可读性，浅蓝灰色的副标题和采样次数则退到次要层级，不会抢走核心指标的注意力。

顶部“开始”和“停止”到底改变了什么

顶部按钮绑定的是监控状态。初始状态下，按钮文字是“开始”，顶部副标题是“监控已暂停”，按钮背景是青绿色。点击以后，状态变成开启，按钮文字改为“停止”，副标题改成“实时采样中”，背景改成偏红色。再次点击以后，所有文字和颜色回到暂停状态。

这个交互有三个可见变化。第一是按钮文字变化，用户能够直接知道下一次点击会执行什么动作。第二是副标题变化，标题区域会明确告诉用户当前状态，而不是只依靠按钮颜色猜测。第三是颜色变化，青绿色代表可以开始，红色代表当前正在进行或可以停止。三种反馈同步出现，使开关状态不会只藏在一个地方。

但是，点击顶部按钮不会改变 CPU、内存、FPS，也不会增加采样次数。比如页面刚打开时点击“开始”，三个指标仍然是 38%、164 MB、60，采样次数仍然是 0；再点击“停止”，这些数字依旧不变。只有底部“采集一次样本”按钮会修改数值。这个区分非常重要，它说明顶部按钮是状态演示，底部按钮是数据变化演示。

从使用路径来看，可以先点击“开始”观察监控状态，再点击“采集一次样本”观察指标变化。也可以在暂停状态下直接点击采样按钮，页面同样会刷新数值。两者没有强制依赖关系，页面允许用户单独观察每个入口的效果。这种宽松的交互关系适合演示状态驱动界面：一个状态只负责标题和按钮，另一组状态负责指标与趋势。

顶部按钮的红色并不表示发现了错误，也不代表 CPU 过高。它只是用来提醒用户当前按钮的动作是停止。性能页面中常见的红色容易让人联想到告警，因此阅读时要以按钮文字和副标题为准。页面没有实现阈值告警，也没有在 CPU、内存或 FPS 超过某个值时自动改变卡片颜色。

一次采样会产生哪些可见变化

点击底部按钮一次，采样次数从 0 变成 1。CPU 从 38% 变成 37%，内存从 164 MB 变成 153 MB，FPS 仍然是 60。趋势区域的 CPU 进度条随 37 更新，内存趋势按照 153 除以 4 的结果更新，帧率稳定度保持 60。采样次数文字从“采样次数：0”改成“采样次数：1”。

第二次点击时，采样次数变成 2，CPU 变成 44%，内存变成 166 MB，FPS 仍然是 60。第三次点击后，CPU 变成 51%，内存变成 179 MB，FPS 仍然是 60。第四次点击后，CPU 变成 58%，内存变成 192 MB，同时 FPS 变成 48。可以看出，页面并不是随机生成数据，而是按照采样次数计算出一组可重复的演示值。

CPU 的变化规律可以理解为“基础值加上一个随采样次数变化的偏移”。每次点击后，它会在 30 到 64 的范围内循环变化。这个范围让进度条始终保持在比较容易观察的位置，不会经常贴近 0，也不会越过 100。对于观察组件刷新来说，变化幅度足够明显；对于页面布局来说，数字位数也比较稳定。

内存的变化以 140 MB 为基础，每次采样增加一个循环偏移，偏移范围不会超过 89。这样一来，内存卡片会在 140 MB 到 229 MB 之间变化。因为趋势条使用内存值除以 4，内存条大致会处于 35% 到 57% 的区间。卡片数字变化与条形变化不会完全相同，但两者始终来自同一个内存状态。

FPS 的规则更简单：大多数采样显示 60，采样次数是 4 的倍数时显示 48。因此，第四次、第八次、第十二次采样会出现较低的帧率数值。这个变化用来模拟一个偶尔出现的帧率下降，让用户能看到卡片、趋势文字和进度条如何同时响应。页面并没有计算真实渲染帧，也没有因为 FPS 为 48 而触发额外的告警样式。

三张指标卡片如何形成第一层信息

指标卡片是用户进入页面后最先读取的内容。它们采用横向排列，每张卡片都包含一个大字号数值和一个小字号标签。数值在上，标签在下，符合从结果到名称的阅读顺序。CPU 卡片把百分号直接附在数值后面，内存卡片把 MB 单位写在数值后面，FPS 卡片只显示帧数。不同单位都直接出现在卡片上，避免用户在页面其他位置寻找说明。

卡片的宽度由相同的布局权重分配，三张卡片在同一行保持对齐。每张卡片有独立的圆角和深色背景，与页面底色形成轻微对比。卡片内部上下留出空间，保证数值不会紧贴边缘。颜色只用于数值，标签使用统一的浅蓝灰色，这样既能区分指标，又不会让页面看起来像三个互不相关的主题。

CPU 的青绿色偏冷，适合表达即时变化；内存的淡紫色与 CPU 拉开差异；FPS 的绿色更容易让人联想到稳定和流畅。颜色并不参与计算，也不随数值高低动态变化。例如 CPU 从 37 变成 58 时，数值仍然使用青绿色；FPS 从 60 变成 48 时，仍然使用绿色。页面的设计重点是保持指标身份稳定，而不是用颜色表达告警等级。

当采样按钮被点击时，卡片并不是被替换成另一组控件，而是同一组卡片中的文字重新计算。这样做的视觉结果很稳定：用户可以把注意力放在数值变化上，而不用重新适应布局。对于桌面或手机屏幕来说，固定的三列结构也减少了页面在不同数值位数下发生跳动的可能。

趋势面板的三种表达方式

趋势面板同时使用标题、标签、百分比文字和线性进度条四种视觉元素。标题“实时趋势”告诉用户这组信息属于当前状态观察；标签说明每条线代表什么；右侧文字给出一个明确数字；进度条提供无需精读的长度对比。

CPU 使用率直接使用 CPU 数值。CPU 为 38 时，文字显示 38%，进度条填充约 38%。CPU 为 58 时，条形明显变长。内存占用使用内存值的缩放结果，趋势条的文字显示的是换算后的百分比，而不是卡片里的 MB。帧率稳定度直接使用 FPS 数值，60 对应一条较长的绿色进度条，48 对应相对短一些的进度条。

每条进度条的最大值是 100，实际填充值还会经过一个不超过 100 的限制。这个限制保证条形不会超出容器，即使未来把输入值改得更大，视觉上也仍然保持在完整长度以内。当前页面的预设数据本身不会超过 100，所以用户不会看到溢出的情况。进度条背景使用更深的蓝灰色，未填充部分和填充部分形成明确对比。

进度条下方没有额外的时间轴，也没有历史曲线。它表达的是“此刻”的相对状态，不代表过去几秒、几分钟的连续记录。因此，标题中的“趋势”更接近当前指标的视觉概览，不能据此推断页面保存了完整历史数据。每次采样后，条形只是根据新数值重绘，之前的数值不会在页面上留下折线或列表记录。

采样次数与数据变化的关系

采样次数是页面中最容易验证的状态。初始值为 0，每次点击采集按钮只增加 1，不会因为点击顶部开始按钮而增加。它显示在趋势面板底部，以较小字号呈现，属于辅助信息。尽管字号较小，它承担了非常重要的作用：用户可以用它确认自己已经触发了多少次采样，也可以据此推断当前 CPU、内存和 FPS 为什么会显示这一组数值。

采样次数不会被清零。页面没有“重置”按钮，也没有退出监控后自动清空的逻辑。即使先采样多次，再点击停止，采样次数仍保留；再次点击开始也不会恢复到 0。只要页面没有被重新创建，当前状态就会继续显示在界面中。这个行为适合观察状态保存，但不应理解为持久化保存，因为页面没有展示跨页面或跨启动的数据存储。

采样次数还决定了三项数据的计算结果。CPU、内存和 FPS 都读取同一个计数作为变化依据，因此一次采样会让三项数据在同一时刻更新。页面没有把三个指标拆成三个按钮，也没有允许用户只采集 CPU 或只采集内存。统一采样的设计让一轮操作具有清晰的整体意义：按一次按钮，就是获取一组新的演示指标。

如果连续点击采样按钮，页面会连续刷新。第一次、第二次、第三次的 CPU 变化比较平缓，第四次 FPS 出现 48。继续点击以后，CPU 和内存继续循环，FPS 在 60 与 48 之间按固定节奏切换。用户可以利用这种节奏检查数字卡片、进度条和采样次数是否保持同步。

深色视觉为什么适合这个页面

页面根背景使用深蓝黑色，标题栏使用略亮的蓝色，卡片和趋势面板使用中等深度的蓝灰色。这样的颜色层级让页面看起来像一个监控工作台，同时让青绿色、淡紫色和绿色数字更醒目。深色背景还可以减少大量白色区域造成的视觉空洞，使指标和进度条成为视线中心。

标题栏的蓝色与内容区的深色形成分区。标题文字使用白色，副标题使用浅蓝灰色，主次关系十分明确。顶部按钮的文字使用深色，背景使用青绿色或红色，在标题栏中形成明显的操作焦点。中间面板的标题使用白色，趋势标签使用浅灰蓝色，右侧数值使用对应指标的强调色，阅读路径从左到右自然展开。

卡片和趋势面板都使用圆角，但圆角程度与区域作用不同。指标卡片的圆角更像独立的小模块，趋势面板的圆角则把三条进度条和采样次数包裹在一个整体中。底部采样按钮使用独立的横向矩形区域，宽度大、触摸目标清晰，适合手机屏幕上的单手操作。

这种视觉设计没有加入复杂的图标、渐变、阴影或动态粒子效果。对于性能监控演示而言，信息优先于装饰。数值、标签、状态文本和进度条构成了完整的信息闭环，用户不需要通过图标含义猜测页面正在做什么。

从用户角度完整走一遍操作流程

第一步，打开页面并确认初始内容。顶部显示“监控已暂停”，按钮显示“开始”；三个卡片显示 CPU 38%、内存 164 MB、FPS 60；趋势条显示对应的相对长度；采样次数是 0。此时页面已经可以阅读，不需要先执行任何初始化动作。

第二步，点击顶部“开始”。标题副标题改为“实时采样中”，按钮文字改为“停止”，按钮变成红色。三个指标和采样次数不变。这个步骤说明监控状态和指标数据是两条独立的信息线。

第三步，点击“采集一次样本”。采样次数变成 1，CPU、内存和 FPS 更新，三张卡片与三条趋势条同步变化。此时顶部仍然保持“实时采样中”，因为底部采样不会关闭监控状态。

第四步，再点击两次采样按钮。采样次数继续递增，CPU 和内存分别按照固定规则变化，FPS 继续显示 60。用户可以观察卡片数字和进度条长度是否同步改变。

第五步，点击顶部“停止”。副标题恢复为“监控已暂停”，按钮回到“开始”和青绿色，但当前采样次数和指标数字不会回退。这个结果说明停止只改变监控开关状态，不是清空或撤销操作。

第六步，在暂停状态下再次点击采样按钮。页面仍然会生成下一组演示数值。这个细节可以帮助用户区分“允许采样”和“显示监控状态”两个概念：当前页面没有对底部按钮设置禁用条件，暂停状态不阻止手动采样。

页面真正实现了什么，尚未实现什么

从可见行为来看，页面实现了一个完整的本地状态演示。它有监控状态、CPU 数值、内存数值、FPS 数值和采样次数五个状态维度；有顶部状态切换和底部样本采集两个操作入口；有指标卡片、趋势进度条和状态文案三类反馈。用户可以在运行过程中反复点击并观察界面变化。

页面没有真实读取系统 CPU 使用率，也没有取得设备内存统计，更没有调用图形渲染管线计算 FPS。数字来自页面内部的固定变化规则，采样按钮只是触发计算和重新显示。顶部“实时采样中”也只是状态文案，页面没有定时器持续更新数据，点击“开始”不会在一段时间后自动产生新样本。

页面没有保存历史采样记录。趋势面板只保留当前一组值，采样次数只记录当前页面已经点击了多少次。没有历史列表、折线图、导出功能、阈值告警、通知推送、后台任务或跨设备同步。也没有提供重置按钮，因此想从头观察数据，需要重新进入页面或重新创建页面状态。

这些边界并不削弱页面的教学价值。相反，它让读者能够准确理解状态驱动 UI 的核心：先有明确状态，再让组件读取状态，最后在事件发生时更新状态。真实性能平台需要接入系统能力、定时采集、数据存储和权限管理，那是另一个完整问题；当前页面把界面和交互层单独展示出来，适合先学习如何组织信息和反馈。

为什么顶部开关和底部采样要分开

如果只有一个按钮同时负责开始监控和采集数据，用户很难判断一次点击到底做了什么。当前页面将“开始/停止”和“采集一次样本”拆成两个入口，是一种清楚的职责划分。顶部按钮改变状态标签，底部按钮改变指标值，两个动作的反馈范围不同。

顶部按钮的影响范围集中在标题区域：副标题和按钮本身发生变化。底部按钮的影响范围覆盖整个内容区：三个指标卡片、三条趋势进度条和采样次数都会变化。通过观察影响范围，可以理解页面中不同状态与组件的依赖关系。

这种设计还方便测试。只点击顶部按钮，可以确认监控开关不会误改数字；只点击底部按钮，可以确认采样不会误改顶部状态；先开再采样、先采样再开，则可以确认两个状态之间没有隐藏的强依赖。对于一个交互演示，能够分别验证每个入口，比把所有行为塞进一个按钮更容易看懂。

指标单位与趋势比例不能混为一谈

CPU 卡片的单位是百分比，趋势条也直接按照百分比显示。内存卡片的单位是 MB，趋势条采用缩放后的相对值。FPS 卡片是帧数，趋势行用“帧率稳定度”表达它在页面中的视觉比例。三者都使用进度条，但数据含义并不完全相同。

阅读内存时，应先看卡片里的 MB 数值，再看趋势条的长度。趋势条不是把 164 MB 当成 164%，而是把它缩小到合理范围内。这样既避免进度条一开始就超过最大长度，也让内存和 CPU、FPS 可以放在同一面板中比较。页面展示的是可视化比例，而不是完整的系统内存容量计算。

阅读 FPS 时，应把卡片中的 60 或 48 看成帧数，把趋势条看成稳定度示意。页面没有展示刷新率上限、平均帧率、最低帧率或丢帧次数，不能仅凭这个条形判断真实动画是否流畅。它更适合说明一个数值状态如何映射到进度组件。

适合用什么方式验证页面交互

可以从最小路径开始：打开页面，记录初始状态；点击一次顶部按钮，记录副标题和按钮颜色；点击一次采样按钮，记录三个卡片和采样次数；再点击三次，观察第四次时 FPS 是否出现 48；最后点击停止，确认数字保留。

验证时不要只看某一个位置。CPU 数值应该同时出现在卡片和趋势行，内存卡片的 MB 与趋势条的缩放比例应该对应，FPS 卡片与帧率稳定度应该在第四次采样时一起下降，采样次数应该与点击次数一致。多个位置同时变化，才说明状态传递完整。

还可以验证边界：连续点击顶部按钮，状态文案应该在两种状态之间往返；连续点击采样按钮，采样次数持续增加；在暂停状态点击采样，数值仍会变化；点击停止不会清空采样结果。页面没有错误提示或网络请求，因此验证重点是状态是否符合预期，而不是等待后台任务完成。

这个页面对 ArkUI 界面设计的启发

第一，状态命名要贴合用户能理解的概念。monitoring 对应监控开关，cpu、memory、fps 对应三个指标，samples 对应采样次数。即使不查看任何实现细节，也可以从页面行为推断每个状态的职责。

第二，同一个状态可以驱动多个视觉元素。CPU 同时驱动卡片数值、趋势行文字和进度条；monitoring 同时驱动副标题、按钮文字和按钮背景色；samples 同时驱动采样次数和三个指标的下一次结果。这样可以避免手动修改多个控件造成不一致。

第三，重复结构适合用统一的展示方式组织。三张指标卡片虽然数据不同，但都有数值、标签、颜色和卡片背景；三条趋势行虽然名称不同，但都有标签、百分比和进度条。统一结构让页面更容易阅读，也让后续调整视觉样式时保持一致。

第四，反馈应该覆盖操作本身和结果本身。点击顶部按钮后，按钮文字说明下一步动作，副标题说明当前状态，颜色提供额外提示；点击采样按钮后，数字、进度条和采样次数一起变化。用户不需要等待弹窗，也不需要猜测页面有没有响应。

页面在不同屏幕上的阅读重点

在较窄的手机屏幕上，三张指标卡片仍然需要保持足够的内边距，保证数字和单位不会挤在一起。CPU 的百分号、内存的 MB 和 FPS 的数字长度不同，但卡片的布局应当让它们各自保持中心区域清晰。趋势面板采用纵向排列，每条进度条占满内容宽度，适合手指滚动和快速比较。

在较大的屏幕上，页面不会因为增加真实图表而改变信息结构。顶部状态栏保持横向布局，中间卡片保持同一行，趋势条保持纵向排列。滚动容器为内容区预留了扩展空间，当前内容不多时可以完整显示，未来如果增加更多演示指标也有自然的承载位置。但当前页面并没有实际增加那些指标，不能把这种布局空间理解为已经存在的功能。

深色配色在不同亮度环境下也会影响阅读。白色标题和浅蓝灰色标签负责基本可读性，彩色指标用于快速定位。用户如果只想知道是否正在监控，可以看顶部副标题；如果想知道具体数据，可以看卡片；如果想比较相对变化，可以看趋势条；如果想确认操作次数，可以看面板底部的采样次数。

常见误读与正确理解

第一种误读是认为点击“开始”后数字会自动刷新。实际行为是顶部状态发生变化，数字保持原值；需要点击“采集一次样本”才会更新数据。

第二种误读是认为“实时采样中”代表已经接入系统监控。这个词语是界面状态提示，当前页面没有持续采样机制，不能据此判断设备正在被后台监控。

第三种误读是把内存趋势条右侧的百分比当作系统内存使用率。它是内存数值经过缩放后的页面展示值，用于让三条进度条处在同一视觉范围。

第四种误读是认为 FPS 变成 48 就表示真实应用发生了卡顿。它只是预设变化规则在某些采样次数下返回的演示结果，没有连接真实渲染帧统计。

第五种误读是认为停止会撤销已经采集的样本。停止只改变顶部状态文案和按钮样式，采样次数与当前指标继续保留。

结语：把性能信息做成可读的状态界面

这个性能监控页面的重点不在于提供一套真实的设备监控平台，而在于把一组性能指标组织成容易理解、容易操作、容易验证的界面。顶部区域回答“当前是否开启监控”，指标卡片回答“当前 CPU、内存和 FPS 是多少”，趋势面板回答“这些数值如何用长度快速比较”，采样按钮回答“怎样触发下一组数据”，采样次数回答“已经操作了多少次”。

页面把监控开关与手动采样拆开，把精确数值与相对进度并列，把状态文字与颜色变化放在同一交互链路中。用户每点击一次，就能在界面上看到明确结果。更重要的是，页面边界十分清晰：它展示的是本地演示数据，不包含真实系统采集、历史存储、告警服务或后台任务。理解这一点，才能在学习 ArkUI 状态驱动和组件组合时获得准确结论。

如果把这个页面当作一个可复用的界面设计样例，可以保留它的三层结构、指标卡片、趋势条和双按钮职责划分；如果将来接入真实能力，则需要另行设计采样周期、数据来源、异常阈值、历史记录和权限边界。那些能力不属于当前页面，不能通过现有的“开始”或“采集一次样本”按钮推断出来。当前页面已经完成了它最重要的任务：让性能指标、操作状态和视觉反馈在一块屏幕上保持一致，并让每一步变化都能被用户清楚地看见。

观察页面时应该建立的四个问题

面对一个性能界面，最有效的阅读方式不是从上到下背诵每个数字，而是连续提出四个问题。第一个问题是“现在处于什么状态”。这个问题由顶部副标题回答：暂停时显示“监控已暂停”，开启后显示“实时采样中”。第二个问题是“当前指标是多少”。三张卡片给出了 CPU、内存和 FPS 的直接数值。第三个问题是“数值之间如何快速比较”。趋势面板中的三条进度条提供了长度上的比较。第四个问题是“我刚才的操作有没有产生结果”。采样次数和数字刷新共同回答这个问题。

这四个问题把页面拆成了状态、结果、比较和操作确认四层。状态层不需要展示大量数据，结果层需要突出数字，比较层需要统一视觉尺度，确认层需要给出可追踪的次数。当前页面的层级关系正好对应这四种需要，因此用户可以在很短时间内判断页面是否正在工作。

如果只看到“实时采样中”就认为数据会自动变化，容易忽略底部按钮的作用；如果只看卡片数值而不看采样次数，又无法判断它是初始值还是更新后的值。把四个问题一起使用，可以避免只读到某一个局部信息。

连续采样时如何理解数字的节奏

连续点击采样按钮时，数字并不是平滑增长，也不是每次都向同一个方向变化。CPU 会在一个有限范围内循环，内存会以另一种节奏循环，FPS 大多数时候保持 60，间隔若干次出现 48。这种不同步的变化让三项指标看起来不像一条简单的直线，也让进度条长度产生足够明显的差异。

例如，连续前四次采样可以观察到 CPU 先降低再升高，内存逐步上升，FPS 在第四次变低。此时三张卡片的变化方向并不一致。这样的结果能够提醒使用者：性能观察不应该只盯着一个指标，CPU、内存和帧率可能在同一次观察中表现出不同状态。

第四次采样以后继续点击，FPS 会回到 60，随后在下一轮四次采样时再次出现 48。这个周期不是现实设备的测量周期，而是页面为了让状态变化可重复而设置的演示节奏。可重复意味着用户重新打开页面后，按照同样的点击次数可以得到同样的结果，便于对照卡片与进度条的变化。

采样次数越大，CPU 和内存仍然保持在页面预设范围内。它们不会无限增加，也不会出现负数。进度条因此不会因为多次点击而失去形状，页面可以长时间停留在同一屏幕上观察。由于没有历史列表，连续采样的重点是当前值和当前次数，而不是回看每一次过去的数值。

用视觉一致性判断交互是否完整

一次采样结束后，可以用“同色、同值、同节奏”三个标准观察页面。所谓同色，是指 CPU 卡片和 CPU 趋势条都使用青绿色，内存都使用淡紫色，FPS 都使用绿色；所谓同值，是指卡片数值与对应趋势文字来自同一个指标状态，只是内存趋势经过了缩放；所谓同节奏，是指三张卡片、三条进度条和采样次数在同一次点击后共同刷新。

如果卡片刷新而趋势条不变，用户会怀疑页面只更新了局部；如果采样次数变化而指标不变，用户无法确认采样是否有效；如果颜色在不同区域不一致，用户需要额外寻找对应关系。当前页面把这些反馈放在同一轮状态变化中，因此一次点击就能完成结果确认。

视觉一致性还体现在暂停与开启之间。顶部副标题、按钮文字和按钮背景颜色必须同步切换，不能出现副标题写着暂停而按钮仍显示停止的情况。暂停与开启不影响指标，因此指标卡片在切换时保持不变，这同样是一种一致性：只有负责监控状态的区域变化，其他区域不被无关操作打扰。

为什么当前页面没有加入更多指标

性能页面很容易继续增加温度、网络、存储、电量、功耗和线程数量等信息，但指标越多，用户越难在一屏内建立重点。当前页面只保留 CPU、内存和 FPS，分别代表处理器负载、内存占用和画面流畅度，三者已经足以组成一个基础的性能观察闭环。

三个指标的显示形式也保持统一：卡片给出简短结果，趋势条给出相对长度。若加入单位不同、量纲不同或变化频率不同的指标，就需要进一步设计分组、筛选或详情入口。当前页面没有这些额外操作，因此不应该把未出现的指标想象成页面隐藏能力。

少量指标还有利于观察状态更新。每次点击后，用户能够清楚看见三张卡片和三条趋势的变化，不会因为信息太多而错过某个局部。对于学习状态驱动界面而言，清晰地展示一组完整状态，比堆叠大量概念更有价值。

最终的使用建议

首次阅读时先不要连续点击。先确认标题、副标题、三个初始数值和采样次数，建立基准；然后只点击顶部按钮，确认它只改变状态区域；再只点击采样按钮，确认它改变指标和次数；最后组合两种操作，观察它们各自保留的状态。这样的顺序能够把页面的行为拆开理解。

如果想观察 FPS 的变化，可以数到第四次采样；如果想观察进度条长度，可以重点比较 CPU 从低值变到高值的过程；如果想观察状态保留，可以采样几次后停止，再重新开始，确认数字和次数没有被清空。每个观察目标都有对应的操作路径，使用者不需要进行无关点击。

这类页面最适合在小范围内反复操作。它没有复杂导航，也没有需要等待的后台流程，所有反馈都直接出现在当前屏幕。用户可以把注意力放在“哪个动作改变了哪个区域”这一核心问题上，逐步理解指标卡片、进度条、状态文案和按钮颜色之间的关系。