多尺寸服务卡片 UI 设计实战：CheckMe 如何兼顾 2x2、2x4、4x4 展示体验

摘要

服务卡片开发里，真正拉开质感差距的，往往不是“有没有卡片”，而是“多尺寸卡片有没有认真设计”。CheckMe 中的 CPU、电池等卡片都支持 2*2、2*4、4*4 等不同尺寸，且不是简单缩放，而是根据尺寸重新组织信息层级。本文会结合项目中的卡片页面实现，讲清楚多尺寸卡片该如何设计，才能更符合 HarmonyOS 的桌面使用场景。

四个主题适配说明

这篇文章的主方向是 高端精致，重点讲卡片在 2*2、2*4、4*4 下如何做信息层级和视觉质感。它也符合 创新体验，因为多尺寸卡片让用户能根据桌面空间选择不同信息密度；符合 能力增强，因为它依赖服务卡片尺寸配置、LocalStorageProp 数据绑定和多布局构建；符合 安全隐私，因为卡片展示的是本地采集后的轻量状态信息，不暴露额外敏感交互。

一、为什么多尺寸卡片不能只靠缩放

很多初学者做卡片时会有一个误区：先把一张卡片做出来，再通过整体缩放适配其他尺寸。

这种方式的问题很明显：

• 小尺寸里文字会挤
• 大尺寸里内容会空
• 图表比例失衡
• 视觉主次不清晰

说白了，2*2 和 4*4 根本不是同一个展示问题。

在我看来，多尺寸卡片设计最核心的一点是：

不同尺寸承载不同层级的信息，而不是同样信息换个大小。

这也是 CheckMe 做卡片时最重要的设计原则。

二、项目里哪些卡片支持多尺寸

在 form_config.json 中，可以看到：

• CPU 卡片支持 2*2 / 2*4 / 4*4
• CPU 频率卡片支持 2*2 / 2*4 / 4*4
• 电池卡片支持 2*2 / 2*4 / 4*4
• 其他部分卡片支持 2*2 / 4*4 或 2*4 / 4*4

这意味着在产品层面，我一开始就把“不同尺寸会承担不同展示任务”考虑进去了，而不是后期被动补适配。

三、CPU 卡片是怎么做尺寸分层的

项目里的卡片会先读取：

@LocalStorageProp('widgetType') widgetType: string = '2*2';

然后根据尺寸分发不同布局：

if (this.widgetType === '4*4') {
  this.buildLargeLayout()
} else if (this.widgetType === '2*4') {
  this.buildMediumLayout()
} else {
  this.buildSmallLayout()
}

这一段是整个多尺寸设计的核心，因为它明确告诉我们：

• 不是让一个布局自己“适配一切”
• 而是从结构上承认三种尺寸就是三种展示场景

四、2x2、2x4、4x4 各自应该承担什么角色

这是我在做 CheckMe 卡片时总结出来的一套很实用的思路。

1. 2*2：只保留最核心指标

小卡片的目标不是“信息全”，而是“扫一眼就知道状态”。

所以 CPU 小卡片里最值得保留的是：

• 当前使用率
• 核心数量
• 一张小趋势图

这样既不会太挤，又能让它保留监控属性。

2. 2*4：兼顾状态和一个辅助指标

中卡片空间更大，可以加入：

• 当前负载
• 平均频率
• 更完整一点的趋势图

它适合作为“轻量监控面板”。

3. 4*4：承载更多上下文信息

大卡片已经不只是状态贴纸，而可以变成桌面上的迷你仪表盘。比如：

• 当前值
• 历史趋势
• 多个辅助指标
• 更明确的标签解释

这也是为什么我认为大卡片应该更像“精简版详情页”，而不是放大版小卡片。

五、为什么图表在多尺寸卡片里特别重要

像 CPU、网络流量、电池这种状态型信息，如果只显示一个数字，其实很难体现多尺寸的价值。因为数字本身在大尺寸里没有足够的内容张力。

所以在 CheckMe 中，我会尽量让趋势图成为卡片的重要组成部分。以 CPU 卡片为例，项目里用 Canvas 画了一条使用率曲线。

这条曲线有几个好处：

• 小卡片里可以快速表达波动趋势
• 中卡片里可以补充主指标的上下文
• 大卡片里可以和更多辅助指标形成组合

也就是说，图表不仅提升了质感，还提高了空间利用效率。

六、多尺寸卡片为什么要做信息层级，而不是信息平均分配

很多卡片做不好，是因为设计者总想“每个尺寸都展示所有东西”，结果每个尺寸都不够好。

我在 CheckMe 里更倾向于这样分层：

小尺寸

• 只讲结论

中尺寸

• 讲当前值 + 一个关键补充维度

大尺寸

• 讲结论 + 趋势 + 辅助上下文

这种方式的好处是，用户不会因为尺寸不同而觉得体验被阉割，反而会觉得每种尺寸都像是为当前空间专门设计的。

七、卡片视觉上怎么避免“像开发者 Demo”

这一点很关键。

很多卡片虽然功能正确，但看起来像 Demo，原因一般有几个：

• 边距不统一
• 字号没有层级
• 图表比例失衡
• 颜色只是随手一配
• 大尺寸只是空白变多

CheckMe 在这块做了几个相对基础但很有效的处理：

• 标题、数值、辅助文案分层明显
• 小卡片强调大数字和状态色
• 趋势图尽量保持紧凑，不做无意义留白
• 不同卡片用不同主题色区分语义

这些处理不一定多高级，但足够让卡片看起来不像纯功能堆叠。

八、为什么多尺寸设计特别适合“高端精致”方向

同类项目里很多项目都有服务卡片，但真正能体现完成度的，往往是：

• 你有没有做多尺寸
• 多尺寸是不是认真设计过
• 大小卡片是不是各有明确定位

这一点很容易在文章里讲出差异化，因为它一方面有视觉成果，另一方面也有清晰的产品思路。

比如你完全可以这样总结：

项目中的服务卡片不是单一模板缩放，而是根据 2*2、2*4、4*4 三种场景重新组织信息密度与交互层级，从而让桌面卡片既保持轻量，又兼具监控价值。

这类表述就很适合四个主题语境。

九、做多尺寸卡片时最容易踩的坑

1. 所有尺寸使用同一个布局

解决：显式拆 buildSmallLayout / buildMediumLayout / buildLargeLayout。

2. 小卡片塞太多内容

解决：小卡片只保留结论和一个最有价值的视觉元素。

3. 大卡片只是空白更多

解决：大卡片应该承载趋势、上下文和辅助指标。

4. 图表大小不随尺寸调整

解决：图表尺寸要跟布局一起重新设计。

十、结语

服务卡片做得好不好，很多时候不是看“有没有做”，而是看你有没有认真对待尺寸这件事。CheckMe 在这部分最大的经验就是：不要把多尺寸理解成适配工作，而要把它理解成场景设计工作。

当你接受这个前提之后，卡片自然就会从“能显示”进化到“真正好用”。而这，也恰恰是 HarmonyOS 项目很容易做出辨识度的地方。