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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

審核編輯 黃宇