用一个“今日专注”页面理解 HarmonyOS 桌面卡片预览的状态设计

写在前面

很多人第一次接触桌面卡片时，容易把“页面上的卡片预览”和“系统桌面中的真实卡片”混为一谈。两者在视觉上可以很接近，但职责并不一样：前者负责把尺寸、信息层次和交互反馈先呈现出来，后者还需要系统卡片框架、提供方、数据刷新机制以及桌面侧的生命周期配合。眼前这个小页面选择了一个很适合观察的主题：今日专注。

打开页面后，最上方是“桌面卡片设计器”标题，下面是一块深蓝色的圆角卡片。卡片中央写着“今日专注”，中间是醒目的“65%”，底部是“完成本周目标”。卡片下方有两个并排按钮，一个负责切换卡片的大小形态，另一个负责刷新卡片数据。底部浅蓝色提示区域则显示已经刷新了多少次，并用一句话说明它面向桌面即时展示。

这个页面真正有价值的地方，不在于它堆叠了多少组件，而在于它把一个桌面卡片最容易被忽略的细节集中放在了一起：同一份内容如何适应不同尺寸，数值变化后哪些文字需要同步，用户点击刷新以后能否看到明确反馈，以及页面如何用颜色和比例让用户一眼理解“当前卡片是什么状态”。它是一张可操作的预览卡，而不是一个已经接入系统桌面的完整卡片产品。理解这一点，后面的每个现象才不会被误读。

一、先看清楚页面到底展示了什么

1. 初始状态是一张偏紧凑的卡片

进入页面时，卡片还没有被放大。它占据页面中间区域的一部分宽度，视觉上像一张较紧凑的桌面信息卡。卡片高度保持在一个适合快速浏览的范围内，深蓝背景、白色主标题、浅蓝数值和淡色说明形成了很清楚的三层信息：第一层告诉用户主题，第二层给出最重要的数字，第三层解释数字的含义。

“今日专注”是卡片的标题，不承担复杂描述；“65%”是视觉焦点，字号明显大于其他文字；“完成本周目标”是辅助说明，让数字不至于变成没有上下文的孤立百分比。这样的排布很像桌面卡片常见的阅读路径：先认出卡片，再扫到指标，最后读到指标对应的目标。

卡片外部留有足够的浅灰蓝背景，圆角边界很明显。它没有额外放置图标、列表或者装饰性图表，因此用户的注意力会集中在数值和尺寸变化上。这种克制的内容量反而方便观察：卡片变大以后，哪些元素改变了，哪些元素保持不变，都可以直接看出来。

2. 两个按钮共同构成体验入口

卡片下面是一行按钮。左边的按钮文字会根据当前尺寸改变：紧凑状态下显示“切换 4×4”，放大状态下显示“切换 2×2”。这里的文字并不是静态标题，而是在告诉用户下一次点击会把卡片切换到什么形态。右边按钮固定写着“刷新卡片”，它负责推进数值和刷新次数。

两个按钮等宽排列，中间留出较小间距。这样的排列让两个动作拥有相同的视觉权重，同时又能通过不同颜色区分职责。尺寸切换使用偏鲜明的蓝色，刷新使用偏青绿色。蓝色更像视图控制，青绿色更像数据更新。颜色并不意味着系统级别的特殊权限，它只是页面给动作做的视觉分类。

3. 底部提示不是系统通知

按钮下方的浅蓝色信息块会显示“卡片已刷新 0 次 · 支持桌面即时展示”。点击刷新后，数字中的次数会递增。这里的“支持桌面即时展示”是页面用于表达设计目标的说明，不代表已经把数据推送到真实桌面，也不代表系统中真的存在一张可以添加的卡片。页面没有展示桌面添加入口、卡片提供方配置、周期刷新任务或者跨进程通信，因此不能从这句话推导出完整的桌面卡片发布能力。

把提示区看成页面状态栏更准确。它负责把用户刚才的动作留下来，让用户在视觉上得到一个“这次操作确实发生了”的结果。即使卡片上的百分比已经变化，底部次数仍然提供了另一条确认线索：刷新动作被记录了几次。

二、这张卡片如何适应两种尺寸

1. 尺寸变化不等于内容变化

切换尺寸时，主题仍然是“今日专注”，目标仍然是“完成本周目标”，百分比也不会因为放大而重新计算。变化主要集中在容器的宽高、标题字号和百分比字号上。这是一个很重要的设计取舍：卡片变大是为了让相同信息更容易阅读，而不是借机改变信息含义。

紧凑状态下，卡片宽度相对页面较窄，高度较小，标题和数字使用较收敛的字号；放大状态下，卡片铺开到更宽的区域，高度也明显增加，标题和数字同步变大。用户可以因此直观看到响应式布局最基础的一种实现：同一个状态驱动多个视觉属性。

如果只改变宽度而不改变文字大小，大卡片中间会显得空，信息密度会下降；如果只放大文字而不增加高度，标题、数字和说明之间可能会拥挤。页面把宽度、高度和两个字号放在同一个尺寸状态下调整，说明它关注的不只是“变大”，而是变大之后的比例关系。

2. 按钮文字也跟随尺寸状态变化

左侧按钮在紧凑状态下提示“切换 4×4”，点击以后进入放大状态，按钮文字会变成“切换 2×2”。这是一种面向下一步操作的文案。它和“当前是 2×2”不同，用户看到的不是当前结果，而是下次点击将要执行的动作。

这种写法有一个明显好处：用户不需要先理解卡片当前尺寸的内部状态，只要阅读按钮，就知道点击之后会发生什么。它也让按钮成为尺寸状态的一个外显证据。卡片本身通过大小展示状态，按钮通过文字再次确认状态，两个区域相互印证。

3. 放大时内容依然居中

卡片内部使用居中的纵向内容，标题、百分比和说明保持一条中轴线。放大以后，卡片的空间增多，但文字没有被推到左上角，也没有增加第二列信息，仍然以中心为视觉基准。这种处理适合“单指标卡”：信息量少，中心聚焦比复杂的网格排列更直接。

卡片采用圆角和深蓝背景，外围内容采用浅灰蓝背景。尺寸放大时，蓝色区域变宽变高，圆角仍然保留，所以它看起来更像同一张卡片的放大版本，而不是切换到了另一张页面。对于用户来说，这种连续性很重要：切换尺寸是同一内容的另一种展示方式，不是重新加载了一个新功能。

三、刷新一次到底改变了什么

1. 初始数值与增长规则

页面首次显示百分之六十五。点击“刷新卡片”后，百分比增加五个百分点，同时刷新次数增加一次。这个变化是确定性的，第一次刷新会看到七十，下一次是七十五，依次递增。它没有输入框，也没有随机数，因此每次操作都容易复现。

百分比不会无限增长。当数值接近一百时，页面会把结果限制在一百以内。换句话说，刷新按钮可以继续增加刷新次数，但百分比到达一百后不再超过这个上限。这个边界和“完成本周目标”的文案是匹配的：完成度最高只能是百分之百，不能出现百分之一百零五这种不符合语义的结果。

这也使页面同时展示了普通状态和边界状态。前几次点击可以观察正常递增，连续点击到后面则可以观察数值停止增长而次数继续变化。两种数据之间并非绑定成同一个上限：刷新动作仍然发生，只是完成度已经达到了表达范围的顶点。

2. 刷新次数与完成度是两种信息

百分比表达“目标完成了多少”，刷新次数表达“用户让卡片更新了多少次”。它们都在刷新动作中变化，但含义不同。把二者分开，是这个小页面最值得学习的状态设计之一。

如果只更新百分比而不记录次数，用户只能看到结果变化，无法知道自己刚才操作是否被识别；如果只更新次数而不更新百分比，刷新按钮又会缺少内容上的变化。当前页面让两个指标同时变化，一个在卡片主体中突出展示，一个在底部状态栏中轻量展示，正好形成主次关系。

当百分比到达一百以后，刷新次数仍继续增加，这种现象也能提醒开发者：动作状态和业务数据状态不一定共享同一条边界。现实应用中，数据刷新可能成功但内容没有变化，或者内容已经达到上限但刷新动作仍然需要被记录。页面用最简单的数字把这种区别呈现了出来。

3. 刷新不会改变卡片尺寸

无论卡片当前是紧凑状态还是放大状态，点击刷新都只改变百分比和刷新次数，不会把卡片自动切换到另一种大小。反过来，点击尺寸按钮也不会重置百分比和次数。三个状态相互独立：尺寸负责展示形态，百分比负责内容进度，刷新次数负责操作记录。

这种独立性避免了常见的意外联动。例如，用户先把卡片放大，再刷新，预期是大卡片中的数字更新；页面确实如此。用户连续刷新几次后再缩小，预期是同一份进度以紧凑形式显示；页面也不会因为缩小而回到百分之六十五。状态没有被错误地绑定在视图切换上。

四、从页面结构看信息层次

1. 页面背景负责退后

页面使用浅灰蓝色作为整体背景，作用不是吸引注意，而是让深蓝卡片和按钮自然浮出来。背景没有复杂纹理，也没有装饰图片，所以卡片边界主要通过颜色、圆角和留白来形成。对于一个设计器预览页面来说，这种背景足够提供对比，同时不会抢走指标数字的焦点。

页面四周保留统一的内边距，标题、卡片、按钮和提示块都在同一条左右边界内。这样做让各个区域看起来属于同一个页面，而不是四个宽度不一致的独立组件。即使卡片在放大状态下铺满可用宽度，它仍然会受到页面边距约束，不会贴到屏幕边缘。

2. 标题负责建立主题

“桌面卡片设计器”位于最上方，字号较大且使用粗体，颜色偏深。标题没有再配一行技术说明，也没有出现项目编号、路径或内部名称，用户打开页面后可以直接知道自己正在观察的是一张卡片预览。

标题和卡片之间保持清晰间距。标题不参与尺寸切换，也不参与刷新计数，它是页面级信息；卡片内部的信息则是被预览的内容。把页面标题和卡片数据隔开，可以避免用户误以为标题也是桌面卡片的一部分。

3. 卡片内部采用三行纵向结构

卡片内部的三行文字分别承担标题、指标和说明。它们之间的间距是固定的，文字全部水平居中。第一行使用白色，第二行使用更亮的浅蓝色，第三行使用较淡的蓝白色。颜色差异配合字号差异，形成了明确的阅读顺序。

百分比使用最大的字号，是因为它是用户最希望快速获取的信息。标题让用户知道指标属于什么主题，说明让用户理解这个指标面向什么目标。三行文字没有引入多余副标题、时间标签或装饰标识，降低了桌面卡片中常见的信息拥挤问题。

4. 按钮区域负责可操作性

两个按钮采用横向排列，各自占据相近宽度。按钮高度保持一致，文字居中，颜色饱和度较高，和浅色背景形成对比。左侧操作改变展示形态，右侧操作改变卡片内容；把它们放在同一行，用户可以快速比较“调整尺寸”和“刷新数据”这两个动作。

按钮区域没有额外添加禁用态、加载态或确认弹窗，因为当前页面的操作都是即时、轻量且可重复的本地演示。点击后页面直接更新，用户不需要等待，也不需要额外确认。这个设计适合体验状态关系，但不能据此推断真实系统卡片刷新一定不需要异步处理。

5. 提示块负责留下操作痕迹

底部提示块使用浅蓝背景、圆角和内边距，与深蓝卡片形成色彩呼应。它不是另一张指标卡，而是一个轻量状态条。文字左对齐，内容包括刷新次数和桌面展示说明。用户刷新后，只有其中的次数发生变化，其他说明保持不变。

把操作痕迹放在页面底部有两个好处：第一，不会干扰卡片主体的阅读；第二，用户完成操作后可以向下扫一眼确认次数。状态条的内容短而明确，适合作为当前操作的反馈，而不适合作为复杂日志区。页面没有展示刷新时间、错误详情或网络状态，这些都不属于当前演示范围。

五、为什么这个页面适合用响应式状态驱动

1. 尺寸状态只有两个分支

卡片只需要在紧凑和放大之间切换，因此用一个布尔状态就能表达。状态为关闭时，卡片使用较窄宽度、较小高度和较小字号；状态为开启时，卡片使用全宽、较大高度和较大字号。虽然最终界面属性有多个，但它们都属于同一个设计决策：当前卡片采用哪种尺寸。

这种写法比为宽度、高度、标题字号、数字字号分别设置多个互相独立的开关更可靠。多个独立开关容易产生非法组合，比如宽度已经放大但高度仍是紧凑值。一个尺寸状态统一驱动相关属性，能够让界面始终落在设计好的两种组合中。

2. 数值状态直接映射到文本

卡片中的百分号不是预先写死的完整句子，而是由当前完成度拼接出来。这样刷新以后，卡片只需要重新读取当前数值，文字自然会变化。用户看到的是“70%”“75%”这样的连续结果，而不是某个按钮专门去修改文本组件。

这正是声明式 UI 的直观体现：页面描述“当前完成度是多少时应该显示什么”，而不是描述“点击以后找到哪一个文本并把它改成什么”。对于只有一个数字的卡片，这种方式看起来简单，但它建立了一个可延伸的思路。未来如果卡片有更多由状态派生的文字，也可以保持同样的关系。

3. 计数状态负责反馈闭环

刷新次数从零开始，每次刷新加一，并被底部文本读取。它不影响卡片的尺寸，也不直接改变百分比的上限，只负责记录动作数量。状态职责清楚以后，阅读页面时很容易回答三个问题：卡片为什么变大，数字为什么变了，底部为什么出现新的次数。

在小型演示里，状态变量只有三个，已经足以展示“一个操作改变多个区域”的关系。刷新按钮一次点击，同时让主体数字和底部提示产生变化；尺寸按钮一次点击，同时让卡片容器、两处字号和按钮文案产生变化。每种状态都服务于一个明确的视觉结果，没有引入与页面无关的复杂状态。

六、从交互顺序观察页面是否稳定

1. 先切换尺寸再刷新

用户可以先点击尺寸按钮，把卡片放大，再点击刷新。此时卡片会保持大尺寸，百分比从六十五变成七十，底部次数从零变成一。标题和说明仍然在卡片内部居中，只有字号、容器尺寸、百分比和计数发生了预期变化。

这个顺序可以检验两个操作是否真正独立。如果刷新导致卡片回到紧凑状态，就说明刷新逻辑意外覆盖了尺寸状态；如果放大后百分比回到初始值，就说明尺寸逻辑重置了内容状态。页面当前的设计避免了这两种耦合，操作顺序不会改变结果含义。

2. 先刷新多次再切换尺寸

另一种顺序是连续刷新几次，再切换尺寸。百分比会持续增加，刷新次数也会持续增加；切换尺寸后，这些结果继续保留，只改变展示比例。用户可以看到同一份数据在紧凑和放大两种卡片形态中被重复呈现。

这种体验很接近卡片设计时的实际观察过程：先确认数据内容，再尝试不同尺寸。如果切换尺寸会丢失数据，设计者就很难判断大尺寸布局是否适合真实状态。当前页面让尺寸操作只影响呈现，因此能够支持连续的视觉比较。

3. 到达百分之百以后继续刷新

当完成度达到百分之百，继续点击刷新，卡片主体保持“100%”，底部次数仍继续增加。这个结果可能初看不如数字一直变化醒目，但它清楚地展示了上限规则。页面没有把刷新按钮禁用，也没有弹出“已经完成”的对话框，而是允许用户继续观察刷新动作本身。

这类边界处理比单纯展示正常增长更有参考价值。它告诉使用者，完成度是被限制的业务值，刷新次数是可继续累积的操作值。若未来把这个演示扩展到真实业务，仍然需要根据业务要求决定完成后是否允许刷新、是否显示完成提示、是否记录更新时间；当前页面只负责呈现其中一种简单、稳定的选择。

七、页面中的“桌面卡片”应该怎样理解

1. 当前实现是卡片样式和行为预览

页面通过一块圆角区域模拟桌面卡片的视觉形态，通过尺寸切换模拟不同卡片规格，通过刷新按钮模拟卡片内容更新。它可以帮助开发者或产品设计者观察信息层级和布局变化，但它并没有把这块区域注册到系统桌面，也没有展示真实的添加、删除、授权或提供方管理流程。

因此，页面中的“刷新卡片”应理解为刷新预览数据。点击之后，当前界面的百分比和刷新次数改变，页面不会把数据发送到另一个进程，也不会更新桌面上其他位置的卡片。提示文字提到桌面即时展示，是对设计方向的描述，不是对系统能力已经落地的承诺。

2. 没有真实桌面卡片发布流程

从可见页面可以确认的只有标题、预览卡、两个按钮和状态提示。页面没有提供卡片添加入口、桌面预览入口、卡片实例选择、刷新周期配置，也没有显示卡片删除和恢复操作。因此，不能把它写成已经完成真实桌面卡片发布的应用。

同样，页面没有展示外部数据源。百分比从一个固定初始值按固定步长变化，说明它更接近交互演示数据，而不是从专注记录、日历或网络服务中读取的真实完成度。它没有错误提示、加载动画和网络失败状态，也不能证明背后存在数据同步服务。

3. 预览页面仍然有实际工程价值

没有真实系统卡片能力，并不意味着页面没有价值。桌面卡片开发中，尺寸和信息层级往往需要在接入系统能力之前反复调整。用这种可操作预览可以先验证：主题是否醒目，数字是否足够突出，放大以后是否留白过多，紧凑状态下说明文字是否拥挤，刷新后反馈是否容易被发现。

当这些视觉问题得到确认后，再接入真实卡片框架会更高效。否则一开始就连接系统能力，遇到的可能是视觉问题和系统问题混在一起，调试成本更高。当前页面把范围控制在可见交互上，恰好适合做第一轮方案验证。

八、从页面结构学习 ArkUI 的状态思维

观察这个页面时，可以先不急着记住所有 API，而是问每个按钮到底在改变什么。尺寸按钮改变卡片形态，刷新按钮改变内容数字和操作次数。只要把动作和结果对应起来，就能理解声明式页面的基本思路。

接着观察哪些区域跟着一起改变。尺寸按钮不仅影响蓝色卡片的大小，也影响卡片内部两个字号和按钮自身文案；刷新按钮影响蓝色卡片中央的百分比和底部提示中的次数。一个动作对应多个可见变化，正是响应式状态的实际表现。

稳定的页面不仅要知道什么会变，还要知道什么不能变。刷新时，卡片尺寸不应该改变，标题和说明不应该改变；切换尺寸时，百分比和刷新次数不应该被重置。把“不变的部分”列出来，能够帮助开发者发现状态之间是否发生了错误耦合。

这个页面的静态文字很多，例如页面标题、“今日专注”和“完成本周目标”。它们在交互过程中保持不变，承担的是上下文和语义解释。动态文字则只有百分比、尺寸按钮文案和刷新次数。把静态内容和动态内容分开看，页面结构就会清晰许多。

连续点击刷新直到百分之百，是观察数值边界的最直接方式。反复点击尺寸按钮，是观察两个状态是否能够来回切换的方式。把两种操作交错进行，则可以检查状态是否互相干扰。这个页面不需要复杂测试数据，单靠按钮操作就可以覆盖主要状态组合。

对于实际开发，边界并不只包括数字上限，还包括布局边界。紧凑卡片要看文字是否拥挤，大卡片要看留白是否失衡；按钮文案变长时要看按钮宽度是否足够；刷新次数变成两位数甚至更多时，要看提示文字是否仍能完整展示。这些都是从当前页面可以自然延伸出的观察点。

九、视觉细节为什么会影响卡片可信度

1. 数字需要足够的对比度

百分比使用浅蓝色文字叠加在深蓝背景上，颜色对比明显。它既没有使用刺眼的纯白，也没有选择过暗的蓝灰色，因此在卡片缩小时仍然能保持辨识度。放大后字号增加，颜色关系保持不变，用户不会因为切换尺寸而重新适应配色。

数字是这张卡片的核心信息，任何模糊、拥挤或对比不足都会直接削弱卡片的价值。当前页面把数字置于卡片正中心，并让上下文字围绕它分布，形成了稳定的视觉锚点。用户不需要从边角寻找进度，打开页面就能看到它。

2. 圆角和留白共同表达“卡片”

单独使用蓝色矩形只能说明这是一个区域，圆角和周围留白则进一步让它具备卡片感。卡片与页面背景之间有明显间隔，边界不会与按钮和提示块混在一起。放大时边界仍然清晰，说明圆角不仅是装饰，也是尺寸变化后保持视觉连续性的结构属性。

卡片内部上下留白也很重要。标题、数字和说明之间有固定空隙，不会因为数字从个位变成两位就出现难以阅读的重叠。对于百分比这种短文本来说，纵向排列比把多项数据塞进同一行更稳定，也更适合在不同卡片尺寸间缩放。

3. 操作按钮和提示块形成反馈闭环

按钮颜色和提示块颜色有一定呼应，用户点击以后，主体卡片发生数字变化，底部又出现次数变化。动作入口、内容变化、结果说明三个部分连成一条视觉链路。即使用户没有仔细阅读百分比，也可以从底部次数确认操作已经被页面接受。

这种反馈闭环并不依赖动画、弹窗或声音。当前页面的动作都很快，文字和数字变化已经足够明确。对于桌面卡片预览来说，避免过度反馈也是一种取舍：页面需要让设计者专注于布局，而不是让每次刷新都被大量提示打断。

十、按交互顺序观察稳定性

第一次打开时，先观察紧凑卡片的整体比例，不要马上点击按钮。注意标题、数字和说明的大小关系，也注意卡片与页面四周的留白。接着点击尺寸切换按钮，比较卡片变宽、变高以后，数字和标题的字号如何变化，按钮文案如何从一个动作提示变成另一个动作提示。

然后点击一次刷新，记录卡片百分比和底部刷新次数的变化。再次切换尺寸，确认刚才的百分比没有被重置。继续刷新数次，观察卡片内部的数字和底部次数是否同步递增。最后一直刷新到百分之百，再继续点击，确认完成度保持上限而刷新次数仍然能继续记录。

这个体验顺序覆盖了页面最重要的状态组合：初始紧凑、切换放大、第一次刷新、交错操作、达到上限和上限后的继续操作。每一步都有可见结果，不需要查看隐藏日志，也不需要依赖外部设备。对于学习状态驱动界面的人来说，按顺序观察比直接阅读抽象概念更容易建立理解。

如果把这套体验写成检查思路，第一项是看初始卡片是否出现并保持居中；第二项是看尺寸按钮是否能够来回切换；第三项是看刷新一次后数值是否增加五个百分点；第四项是看次数是否每次只增加一次；第五项是看数值达到一百后是否不再溢出；第六项是看尺寸切换和刷新是否互不重置。每一项都能直接在页面上观察。

十一、这个页面的边界与可扩展方向

如果要把预览进一步做成完整的设计工具，可以考虑增加更多尺寸选项、让用户自定义标题和目标文字、提供不同的颜色主题、展示多个指标，或者加入不同卡片样式的预览。但这些都属于扩展方向，当前页面并没有实现，不能把它们写成现有功能。

如果要接入真实桌面卡片，还需要单独设计卡片提供方、卡片实例、桌面添加和删除流程、数据更新策略以及异常反馈。刷新按钮也不能只靠本地数字增加，而要明确数据来源、刷新触发时机和失败时的提示。当前预览页可以帮助确定视觉方案，却不能代替这些系统能力。

即使不扩展功能，现有页面也可以继续优化细节。例如，可以观察刷新次数较大时提示文字是否需要换行；可以观察大尺寸卡片在不同屏幕宽度下是否仍然舒适；可以比较百分比从个位数、两位数到百分之百时的视觉稳定性。这样的优化仍然围绕当前页面，不需要虚构额外业务。

另一个值得注意的方向是文案。当前按钮直接告诉用户下一步要切换的尺寸，属于动作型文案；底部提示说明刷新次数，属于结果型文案；卡片内部说明目标，属于语义型文案。三类文案分工明确。如果未来新增功能，也应该先判断它是动作、结果还是语义，再选择放置位置，避免所有信息都挤在卡片主体里。

体验时容易忽略的几个细节

在紧凑状态下，卡片的蓝色区域并没有占满整行，这种比例让页面看起来更像是在展示一个可放置到桌面的组件，而不是普通的全宽内容面板。放大后蓝色区域扩大，但页面标题、按钮和提示条的位置仍然稳定，用户能够把注意力集中在卡片本身，而不会因为整个页面结构移动而迷失。这里的“4×4”和“2×2”更适合作为尺寸方案的视觉标签来理解，页面用它们帮助用户建立规格概念，并没有展示真实桌面网格的测量结果。

刷新动作也有一个值得观察的节奏。一次点击只增加一个步长，按钮不会连续触发快速跳跃，数字变化容易跟上用户的视线。即使连续点击，次数和完成度仍按照相同的动作顺序推进，用户可以清楚地把每一次点击和一个新的状态对应起来。达到百分之百以后，数字停止增加而次数继续增加，这个对比让上限规则变得可见，也比在页面里额外写一段解释更直观。

如果把页面缩放到较小的窗口，最先需要留意的是按钮文字和提示条文字是否仍然完整；如果把页面放在较宽窗口中，则要留意放大卡片是否显得过于空旷。当前内容数量很少，布局主要依赖固定间距、圆角和居中对齐来维持稳定。这样的观察仍然属于卡片预览的范围，不需要引入新的数据或额外功能。真正优秀的预览，应该先把现有信息在不同空间里的可读性验证清楚，再考虑增加内容。

十二、从这个小页面得到的设计结论

第一，卡片的核心信息应该足够少。当前页面只有一个目标、一个百分比和一句说明，因此在紧凑尺寸下仍能保持清晰。桌面卡片经常处于快速浏览场景，信息越集中，用户越容易在有限空间内完成阅读。

第二，尺寸切换应该优先保证信息层级稳定。页面没有因为放大而添加新指标，而是把原有内容调整到更适合大空间的比例。这样用户在不同尺寸下看到的是同一件事，不需要重新学习卡片含义。

第三，刷新动作必须有双重反馈。主体数字告诉用户内容发生了变化，底部次数告诉用户动作被记录。两种反馈的语义不同，组合起来比只改一个数字更完整。

第四，边界规则应当与业务含义一致。完成度限制在百分之百以内，是因为“完成目标”具有天然上限；刷新次数不受这个上限影响，是因为它记录的是动作。两个值的边界不同并不是缺陷，而是职责不同的结果。

第五，预览能力和系统能力要分开描述。这个页面可以作为桌面卡片视觉和交互的预览，但没有真实桌面卡片发布流程。准确描述范围，既能避免读者误解，也能让后续接入系统卡片框架时更清楚地知道还需要补齐什么。

结语

这张“今日专注”卡片用很少的内容展示了一个完整的状态反馈闭环：卡片有紧凑和放大两种展示形态，尺寸按钮负责切换形态，刷新按钮负责推进完成度和刷新次数，底部提示负责告诉用户当前操作记录。标题、百分比和目标说明按照清晰的优先级排列，深蓝卡片、浅色背景、蓝色按钮和青绿色刷新按钮共同建立了稳定的视觉层次。

更重要的是，它把“桌面卡片预览”和“真实桌面卡片能力”区分开来。当前页面可以用于观察卡片内容、比例和交互反馈，刷新行为也只发生在页面内部。它没有真实注册桌面卡片，没有跨设备同步，没有后台数据源，也没有系统级发布流程。对这些边界保持准确描述，才能让这类示例真正适合学习和复用。

当你在 ArkUI 中实现类似页面时，可以从三个问题开始：页面有哪些状态，状态变化会影响哪些可见区域，用户操作后如何确认结果。只要这三个问题回答清楚，再去调整颜色、字号、间距和卡片比例，界面就会从“能显示”逐步变成“看得懂、用得顺、状态不混乱”的交互页面。