作者：zhangchenxu，華為資深UX設(shè)計(jì)師

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

那么如何設(shè)計(jì)一張好的卡片呢？

在搞清楚這個(gè)問(wèn)題之前，我們先來(lái)了解一下卡片的定義。在用戶(hù)的桌面上，除了應(yīng)用圖標(biāo)外，另一個(gè)存在感極強(qiáng)的元素就是卡片。相較于應(yīng)用，卡片的展示面積更大，展示的元素也更豐富，可以在一個(gè)方形區(qū)域同時(shí)展示圖片、文字、按鈕等元素。基于這些屬性，我們?yōu)榭ㄆ谠O(shè)計(jì)制定了“精致美觀、一目了然、一步直達(dá)”三個(gè)原則：

1.精致美觀：卡片作為桌面上的“顯眼包”，必然要具備給人帶來(lái)愉悅享受的價(jià)值，許多用戶(hù)甚至?xí)渭優(yōu)榱搜b飾桌面而將卡片添加到桌面上。因此請(qǐng)各位開(kāi)發(fā)者在設(shè)計(jì)時(shí)，不僅要關(guān)注卡片的功能，也要打磨卡片的視覺(jué)和動(dòng)效設(shè)計(jì)。

2.一目了然：卡片擁有更大的展示面積，理應(yīng)也要提供更多的有效信息給用戶(hù)，這是讓卡片更具價(jià)值的手段之一。一些用戶(hù)需要復(fù)雜操作才能獲得的信息、一些用戶(hù)常常關(guān)注的信息，都適合呈現(xiàn)在卡片內(nèi)。但同時(shí)請(qǐng)謹(jǐn)慎展示廣告、優(yōu)惠券等非用戶(hù)主動(dòng)想要獲取的內(nèi)容，過(guò)度推送此類(lèi)信息容易引起用戶(hù)反感，反而會(huì)降低卡片的添加率。

3.一步直達(dá)：卡片內(nèi)也支持添加按鈕，如果此類(lèi)按鈕能夠一鍵幫助用戶(hù)完成一些復(fù)雜操作，也將使卡片價(jià)值得到極大提升。以打電話(huà)為例，原本用戶(hù)需要“進(jìn)入電話(huà)應(yīng)用>選擇聯(lián)系人>找到要撥打電話(huà)的聯(lián)系人>點(diǎn)擊撥號(hào)鍵”4步才能完成的操作，通過(guò)添加一張?jiān)撀?lián)系人的電話(huà)卡片在桌面，即可一步完成操作。開(kāi)發(fā)者在設(shè)計(jì)時(shí)請(qǐng)審視自己卡片內(nèi)的所有按鈕，是否真的減少了用戶(hù)的操作，為用戶(hù)帶來(lái)了價(jià)值。

一

卡片的基本尺寸

如下圖所示，目前可以放置于桌面上的卡片主要有四個(gè)尺寸——微、小、中、大，因在不同設(shè)備上卡片的寬高不同，所以圖中使用卡片所占桌面應(yīng)用圖標(biāo)的比例和數(shù)量來(lái)示意，具體大小和效果在開(kāi)發(fā)過(guò)程中可以使用IDE工具來(lái)預(yù)覽。由于每張卡片的顯示面積不同，卡片設(shè)計(jì)中可以承載的元素數(shù)量也有所不同。

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

二

卡片的設(shè)計(jì)手段

1、讓卡片更加精致美觀

精致美觀其實(shí)是一個(gè)較為寬泛的術(shù)語(yǔ)，并沒(méi)有一些固定的規(guī)則，一方面可以遵守業(yè)界通用的設(shè)計(jì)規(guī)范，例如畫(huà)面的平衡、色彩的搭配、元素的統(tǒng)一等，另一方面也受到設(shè)計(jì)師個(gè)人審美的影響。這里通過(guò)一個(gè)改造案例展示我是如何思考的，希望能帶給你一些啟發(fā)。

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

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

這里我還簡(jiǎn)單列舉了一些我在設(shè)計(jì)中會(huì)經(jīng)常使用的設(shè)計(jì)手法，希望能幫助到你設(shè)計(jì)出優(yōu)秀的卡片 ，對(duì)細(xì)節(jié)的打磨將成為你的卡片脫穎而出的關(guān)鍵。

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

一目了然是卡片的重要功能屬性，讓用戶(hù)可以不進(jìn)入應(yīng)用就能夠在桌面了解到關(guān)鍵信息，是卡片價(jià)值的重要體現(xiàn)。以下圖為例，如果能夠在卡片中展示更直觀的信息，請(qǐng)直接將數(shù)據(jù)展示在卡片內(nèi)，減少“跳轉(zhuǎn)查看”類(lèi)的按鈕。

（1）根據(jù)卡片大小控制信息數(shù)量

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

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

（2）使用合適的方式呈現(xiàn)數(shù)據(jù)

在展示數(shù)據(jù)時(shí)，因卡片面積有限，請(qǐng)注意使用合適的呈現(xiàn)方式，避免使用復(fù)雜的數(shù)據(jù)表格，更建議使用大數(shù)字、圖形、進(jìn)度條、柱狀圖等更直觀的方式。

3、關(guān)注不同設(shè)備的一致性

三

總結(jié)

卡片是信息的濃縮和品牌的放大，好的卡片可以為用戶(hù)帶來(lái)價(jià)值、為開(kāi)發(fā)者帶來(lái)流量，一張好的卡片，美感和實(shí)用性缺一不可。本文簡(jiǎn)單介紹了一些設(shè)計(jì)方法，更多設(shè)計(jì)規(guī)范可以前往開(kāi)發(fā)者網(wǎng)站進(jìn)行瀏覽，希望大家都可以設(shè)計(jì)出屬于自己元服務(wù)的優(yōu)質(zhì)卡片。

更多推薦

點(diǎn)擊下方圖片鏈接，查看更多欄目?jī)?nèi)容