# 技術視界# 【技術視界】欄目為開發者提供華為研發專家對于HarmonyOS關鍵技術的專業解讀，從不同角度、不同方面幫助開發者更好更快地掌握HarmonyOS相關開發知識。本期文章為大家帶來的是華為資深UX設計師的分享，希望能為您的開發之路帶來啟發~

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

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

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

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

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

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

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

了解了以上三個原則后，相信你對卡片已經有了較為整體的概念，接下來我將通過一些具體的圖示和案例，來指導大家做出一張好用的、被用戶認可的卡片。

一

卡片的基本尺寸

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

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

二

卡片的設計手段

1、讓卡片更加精致美觀

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

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