一張服務(wù)卡片，三個設(shè)計原則，讓HarmonyOS元服務(wù)卡片獲得更多用戶觸點

元服務(wù)是一種基于HarmonyOS API的全新服務(wù)提供方式，對于開發(fā)者來說僅需要開發(fā)一次，即可支持多終端設(shè)備運(yùn)行，以鴻蒙萬能卡片等多種呈現(xiàn)形態(tài)，向用戶提供更輕量化的服務(wù)。更輕便的開發(fā)方式，讓廣大開發(fā)者都躍躍欲試，截至目前也已經(jīng)有很多開發(fā)者開發(fā)出了一些爆款元服務(wù)，而想要原服務(wù)擁有更高的傳播范圍、更高的用戶使用率和更多用戶觸點，卡片視覺設(shè)計就顯得十分重要。

眾所周知在用戶的桌面上，除了應(yīng)用圖標(biāo)外，另一個存在感極強(qiáng)的元素就是卡片。相較于應(yīng)用，卡片的展示面積越大，展示的元素也相對更加豐富。想要把圖片、文字和按鈕更好融合進(jìn)一張小小的卡片，就要遵循“精致美觀、一目了然、一步直達(dá)”三個原則。

卡片精致美觀，意味著各位開發(fā)者在設(shè)計時不僅要關(guān)注卡片的功能，也要打磨卡片的視覺和動效設(shè)計，帶給用戶預(yù)約享受的價值，甚至?xí)渭優(yōu)榱搜b飾桌面而將卡片添加到桌面上。

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

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

HarmonyOS基于“精致美觀、一目了然、一步直達(dá)”三個設(shè)計原則，為用戶提供更多有效信息，幫助用戶完成一些復(fù)雜操作的同時，以最佳視覺效果呈現(xiàn)于桌面。目前用戶桌面上的卡片主要分為四個尺寸——微、小、中、大，因在不同設(shè)備上卡片的寬高不同，具體大小和效果在開發(fā)過程中可以使用IDE工具來預(yù)覽。當(dāng)然由于每張卡片的顯示面積不同，卡片設(shè)計中可以承載的元素數(shù)量也有所不同。

微卡片建議最多展示2種元素，小卡片、中卡片最多展示3種元素，大卡片最多展示4種元素。開發(fā)者可以根據(jù)實際的卡片功能定位選擇要展示的元素進(jìn)行組合。

打磨細(xì)節(jié)，讓卡片更精致美觀

精致美觀其實是一個較為寬泛的屬性，設(shè)計過程中并沒有一些固定的規(guī)則，設(shè)計師可以遵守業(yè)界通用的設(shè)計規(guī)范，如畫面的平衡、色彩的搭配、元素的統(tǒng)一等；當(dāng)然其個人審美也會產(chǎn)生一定的影響。但整體來看一張精致美觀的卡片，不僅要具備用戶常用的功能，還要給用戶帶來美的享受?？ㄆw結(jié)構(gòu)一致性、按鈕色彩搭配協(xié)調(diào)性、配圖區(qū)與功能區(qū)的關(guān)聯(lián)性，都是卡片設(shè)計需要考量的一部分。

環(huán)境吸色、模糊背板、純凈配圖、大字體排版、漸變遮罩等方式都是卡片設(shè)計中常用的設(shè)計手法。想要設(shè)計出優(yōu)秀的卡片，對細(xì)節(jié)的打磨將成為脫穎而出的關(guān)鍵所在。

控制元素，讓卡片信息一目了然

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

想讓卡片信息一目了然，首先開發(fā)者可以根據(jù)卡片大小來控制信息數(shù)量。不同卡片的尺寸能夠容納的信息量是不同的，開發(fā)者在設(shè)計過程中可以先將信息按照重要等級進(jìn)行排序，從大卡片到微卡片，依次將較為不重要的信息去除。比如在展示天氣信息的卡片中，微卡片僅保留城市、溫度、天氣類型信息；而在更大一些的小卡片中，增加了空氣質(zhì)量、最高最低氣溫等信息。

其次，設(shè)計師還可通過不同呈現(xiàn)方式來進(jìn)行數(shù)據(jù)展示。因卡片面積有限，所以要避免使用復(fù)雜的數(shù)據(jù)表格，類似大數(shù)字、圖形、進(jìn)度條、柱狀圖等更形式相比之下則更加直觀。

設(shè)備不同，卡片設(shè)計保持協(xié)同

目前鴻蒙生態(tài)覆蓋了海量設(shè)別，不同設(shè)備的顯示面積和宮格布局各不相同，因此當(dāng)卡片需要在多種設(shè)備上呈現(xiàn)時，則需要設(shè)計師通過不同設(shè)備上的呈現(xiàn)效果一一調(diào)試。

卡片是信息的濃縮和品牌的放大，為用戶帶來價值的同時也能夠為開發(fā)者帶來流量，因而一張好的卡片其美感和實用性缺一不可。想要了解更多HarmonyOS卡片設(shè)計規(guī)范，可前往華為開發(fā)者官方網(wǎng)站進(jìn)行瀏覽。

審核編輯 黃宇