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

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

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

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

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

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

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

一

卡片的基本尺寸

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

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

二

卡片的設(shè)計手段

1、讓卡片更加精致美觀

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

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

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

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

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

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

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

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

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

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

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

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

三

總結(jié)

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

更多推薦

點擊下方圖片鏈接，查看更多欄目內(nèi)容