# 技术视界# 【技术视界】栏目为开发者提供华为研发专家对于HarmonyOS关键技术的专业解读，从不同角度、不同方面帮助开发者更好更快地掌握HarmonyOS相关开发知识。本期文章为大家带来的是华为资深UX设计师的分享，希望能为您的开发之路带来启发~

作者：zhangchenxu，华为资深UX设计师

元服务的概念相信大家已经在HDC 2023上有了很详细的了解，更轻便的开发方式，让开发者跃跃欲试。目前也已经有很多开发者开发出了一些爆款元服务，那么如何让你的元服务拥有更高的传播范围、更高的用户使用率和更多的用户触点呢？设计一张好的卡片是你的不二之选。

那么如何设计一张好的卡片呢？

在搞清楚这个问题之前，我们先来了解一下卡片的定义。在用户的桌面上，除了应用图标外，另一个存在感极强的元素就是卡片。相较于应用，卡片的展示面积更大，展示的元素也更丰富，可以在一个方形区域同时展示图片、文字、按钮等元素。基于这些属性，我们为卡片在设计制定了“精致美观、一目了然、一步直达”三个原则：

1.精致美观：卡片作为桌面上的“显眼包”，必然要具备给人带来愉悦享受的价值，许多用户甚至会单纯为了装饰桌面而将卡片添加到桌面上。因此请各位开发者在设计时，不仅要关注卡片的功能，也要打磨卡片的视觉和动效设计。

2.一目了然：卡片拥有更大的展示面积，理应也要提供更多的有效信息给用户，这是让卡片更具价值的手段之一。一些用户需要复杂操作才能获得的信息、一些用户常常关注的信息，都适合呈现在卡片内。但同时请谨慎展示广告、优惠券等非用户主动想要获取的内容，过度推送此类信息容易引起用户反感，反而会降低卡片的添加率。

3.一步直达：卡片内也支持添加按钮，如果此类按钮能够一键帮助用户完成一些复杂操作，也将使卡片价值得到极大提升。以打电话为例，原本用户需要“进入电话应用>选择联系人>找到要拨打电话的联系人>点击拨号键”4步才能完成的操作，通过添加一张该联系人的电话卡片在桌面，即可一步完成操作。开发者在设计时请审视自己卡片内的所有按钮，是否真的减少了用户的操作，为用户带来了价值。

了解了以上三个原则后，相信你对卡片已经有了较为整体的概念，接下来我将通过一些具体的图示和案例，来指导大家做出一张好用的、被用户认可的卡片。

一

卡片的基本尺寸

如下图所示，目前可以放置于桌面上的卡片主要有四个尺寸——微、小、中、大，因在不同设备上卡片的宽高不同，所以图中使用卡片所占桌面应用图标的比例和数量来示意，具体大小和效果在开发过程中可以使用IDE工具来预览。由于每张卡片的显示面积不同，卡片设计中可以承载的元素数量也有所不同。

微卡片建议最多展示2种元素，小卡片、中卡片最多展示3种元素，大卡片最多展示4种元素。下图是一些实际卡片设计效果，标黄的为示例中使用到的元素，并非必备的元素，你可以根据实际的卡片功能定位选择要展示的元素进行组合。

二

卡片的设计手段

1、让卡片更加精致美观

精致美观其实是一个较为宽泛的术语，并没有一些固定的规则，一方面可以遵守业界通用的设计规范，例如画面的平衡、色彩的搭配、元素的统一等，另一方面也受到设计师个人审美的影响。这里通过一个改造案例展示我是如何思考的，希望能带给你一些启发。

下图的左侧是一张鸿蒙相机的桌面卡片，卡片的功本身能是好的，但在设计上还缺了一份精致感。首先从结构上来看，整张卡片较为分散，被分割成不同区域且相互之间联系较少；同时按钮的色彩搭配并不协调，左侧的配图也可以更精美。在右侧的改造中，首先我使用了更一致的结构，利用一个模糊的底板作为按钮的背板，让卡片融为一体的同时保证了按钮的辨识度。如果你仔细观察，还能看到按钮色彩也使用了卡片背板中的高亮色，让功能区域和图片区域相互呼应。