作者：zhangchenxu，華為資深UX設計師

元服務的概念相信大家已經在HDC 2023上有了很詳細的了解，更輕便的開發方式，讓開發者躍躍欲試。目前也已經有很多開發者開發出了一些爆款元服務，那么如何讓你的元服務擁有更高的傳播范圍、更高的用戶使用率和更多的用戶觸點呢？設計一張好的卡片是你的不二之選。

那么如何設計一張好的卡片呢？

在搞清楚這個問題之前，我們先來了解一下卡片的定義。在用戶的桌面上，除了應用圖標外，另一個存在感極強的元素就是卡片。相較于應用，卡片的展示面積更大，展示的元素也更豐富，可以在一個方形區域同時展示圖片、文字、按鈕等元素。基于這些屬性，我們為卡片在設計制定了“精致美觀、一目了然、一步直達”三個原則：

1.精致美觀：卡片作為桌面上的“顯眼包”，必然要具備給人帶來愉悅享受的價值，許多用戶甚至會單純為了裝飾桌面而將卡片添加到桌面上。因此請各位開發者在設計時，不僅要關注卡片的功能，也要打磨卡片的視覺和動效設計。

2.一目了然：卡片擁有更大的展示面積，理應也要提供更多的有效信息給用戶，這是讓卡片更具價值的手段之一。一些用戶需要復雜操作才能獲得的信息、一些用戶常常關注的信息，都適合呈現在卡片內。但同時請謹慎展示廣告、優惠券等非用戶主動想要獲取的內容，過度推送此類信息容易引起用戶反感，反而會降低卡片的添加率。

3.一步直達：卡片內也支持添加按鈕，如果此類按鈕能夠一鍵幫助用戶完成一些復雜操作，也將使卡片價值得到極大提升。以打電話為例，原本用戶需要“進入電話應用>選擇聯系人>找到要撥打電話的聯系人>點擊撥號鍵”4步才能完成的操作，通過添加一張該聯系人的電話卡片在桌面，即可一步完成操作。開發者在設計時請審視自己卡片內的所有按鈕，是否真的減少了用戶的操作，為用戶帶來了價值。

一

卡片的基本尺寸

如下圖所示，目前可以放置于桌面上的卡片主要有四個尺寸——微、小、中、大，因在不同設備上卡片的寬高不同，所以圖中使用卡片所占桌面應用圖標的比例和數量來示意，具體大小和效果在開發過程中可以使用IDE工具來預覽。由于每張卡片的顯示面積不同，卡片設計中可以承載的元素數量也有所不同。

微卡片建議最多展示2種元素，小卡片、中卡片最多展示3種元素，大卡片最多展示4種元素。下圖是一些實際卡片設計效果，標黃的為示例中使用到的元素，并非必備的元素，你可以根據實際的卡片功能定位選擇要展示的元素進行組合。

二

卡片的設計手段

1、讓卡片更加精致美觀

精致美觀其實是一個較為寬泛的術語，并沒有一些固定的規則，一方面可以遵守業界通用的設計規范，例如畫面的平衡、色彩的搭配、元素的統一等，另一方面也受到設計師個人審美的影響。這里通過一個改造案例展示我是如何思考的，希望能帶給你一些啟發。

下圖的左側是一張鴻蒙相機的桌面卡片，卡片的功本身能是好的，但在設計上還缺了一份精致感。首先從結構上來看，整張卡片較為分散，被分割成不同區域且相互之間聯系較少；同時按鈕的色彩搭配并不協調，左側的配圖也可以更精美。在右側的改造中，首先我使用了更一致的結構，利用一個模糊的底板作為按鈕的背板，讓卡片融為一體的同時保證了按鈕的辨識度。如果你仔細觀察，還能看到按鈕色彩也使用了卡片背板中的高亮色，讓功能區域和圖片區域相互呼應。

這樣一張卡片，不僅具備了用戶常用的功能，還給用戶帶來了美的享受，在不使用卡片的時候，也可以將這張卡片作為桌面裝飾，讓人賞心悅目。

這里我還簡單列舉了一些我在設計中會經常使用的設計手法，希望能幫助到你設計出優秀的卡片 ，對細節的打磨將成為你的卡片脫穎而出的關鍵。

2、讓卡片的信息一目了然

一目了然是卡片的重要功能屬性，讓用戶可以不進入應用就能夠在桌面了解到關鍵信息，是卡片價值的重要體現。以下圖為例，如果能夠在卡片中展示更直觀的信息，請直接將數據展示在卡片內，減少“跳轉查看”類的按鈕。

（1）根據卡片大小控制信息數量

不同卡片的尺寸可以容納的信息量是不同的，嘗試將你的信息按照重要等級進行排序，從大卡片到微卡片，依次將較為不重要的信息去除。

如下圖所示，你可以看到在展示天氣信息的卡片中，微卡片只保留了最重要的城市、溫度、天氣類型的信息；而在更大一些的小卡片中，增加了空氣質量、最高最低氣溫等信息。

（2）使用合適的方式呈現數據

在展示數據時，因卡片面積有限，請注意使用合適的呈現方式，避免使用復雜的數據表格，更建議使用大數字、圖形、進度條、柱狀圖等更直觀的方式。

3、關注不同設備的一致性

三

總結

卡片是信息的濃縮和品牌的放大，好的卡片可以為用戶帶來價值、為開發者帶來流量，一張好的卡片，美感和實用性缺一不可。本文簡單介紹了一些設計方法，更多設計規范可以前往開發者網站進行瀏覽，希望大家都可以設計出屬于自己元服務的優質卡片。

更多推薦

點擊下方圖片鏈接，查看更多欄目內容