作者:zhangchenxu,華為資深UX設(shè)計(jì)師
元服務(wù)的概念相信大家已經(jīng)在HDC 2023上有了很詳細(xì)的了解,更輕便的開發(fā)方式,讓開發(fā)者躍躍欲試。目前也已經(jīng)有很多開發(fā)者開發(fā)出了一些爆款元服務(wù),那么如何讓你的元服務(wù)擁有更高的傳播范圍、更高的用戶使用率和更多的用戶觸點(diǎn)呢?設(shè)計(jì)一張好的卡片是你的不二之選。
那么如何設(shè)計(jì)一張好的卡片呢?
在搞清楚這個(gè)問題之前,我們先來了解一下卡片的定義。在用戶的桌面上,除了應(yīng)用圖標(biāo)外,另一個(gè)存在感極強(qiáng)的元素就是卡片。相較于應(yīng)用,卡片的展示面積更大,展示的元素也更豐富,可以在一個(gè)方形區(qū)域同時(shí)展示圖片、文字、按鈕等元素。基于這些屬性,我們?yōu)榭ㄆ谠O(shè)計(jì)制定了“精致美觀、一目了然、一步直達(dá)”三個(gè)原則:
1.精致美觀:卡片作為桌面上的“顯眼包”,必然要具備給人帶來愉悅享受的價(jià)值,許多用戶甚至?xí)渭優(yōu)榱搜b飾桌面而將卡片添加到桌面上。因此請(qǐng)各位開發(fā)者在設(shè)計(jì)時(shí),不僅要關(guān)注卡片的功能,也要打磨卡片的視覺和動(dòng)效設(shè)計(jì)。
2.一目了然:卡片擁有更大的展示面積,理應(yīng)也要提供更多的有效信息給用戶,這是讓卡片更具價(jià)值的手段之一。一些用戶需要復(fù)雜操作才能獲得的信息、一些用戶常常關(guān)注的信息,都適合呈現(xiàn)在卡片內(nèi)。但同時(shí)請(qǐng)謹(jǐn)慎展示廣告、優(yōu)惠券等非用戶主動(dòng)想要獲取的內(nèi)容,過度推送此類信息容易引起用戶反感,反而會(huì)降低卡片的添加率。
3.一步直達(dá):卡片內(nèi)也支持添加按鈕,如果此類按鈕能夠一鍵幫助用戶完成一些復(fù)雜操作,也將使卡片價(jià)值得到極大提升。以打電話為例,原本用戶需要“進(jìn)入電話應(yīng)用>選擇聯(lián)系人>找到要撥打電話的聯(lián)系人>點(diǎn)擊撥號(hào)鍵”4步才能完成的操作,通過添加一張?jiān)撀?lián)系人的電話卡片在桌面,即可一步完成操作。開發(fā)者在設(shè)計(jì)時(shí)請(qǐng)審視自己卡片內(nèi)的所有按鈕,是否真的減少了用戶的操作,為用戶帶來了價(jià)值。
了解了以上三個(gè)原則后,相信你對(duì)卡片已經(jīng)有了較為整體的概念,接下來我將通過一些具體的圖示和案例,來指導(dǎo)大家做出一張好用的、被用戶認(rèn)可的卡片。
一
卡片的基本尺寸
如下圖所示,目前可以放置于桌面上的卡片主要有四個(gè)尺寸——微、小、中、大,因在不同設(shè)備上卡片的寬高不同,所以圖中使用卡片所占桌面應(yīng)用圖標(biāo)的比例和數(shù)量來示意,具體大小和效果在開發(fā)過程中可以使用IDE工具來預(yù)覽。由于每張卡片的顯示面積不同,卡片設(shè)計(jì)中可以承載的元素數(shù)量也有所不同。
微卡片建議最多展示2種元素,小卡片、中卡片最多展示3種元素,大卡片最多展示4種元素。下圖是一些實(shí)際卡片設(shè)計(jì)效果,標(biāo)黃的為示例中使用到的元素,并非必備的元素,你可以根據(jù)實(shí)際的卡片功能定位選擇要展示的元素進(jìn)行組合。
二
卡片的設(shè)計(jì)手段
1、讓卡片更加精致美觀
精致美觀其實(shí)是一個(gè)較為寬泛的術(shù)語,并沒有一些固定的規(guī)則,一方面可以遵守業(yè)界通用的設(shè)計(jì)規(guī)范,例如畫面的平衡、色彩的搭配、元素的統(tǒng)一等,另一方面也受到設(shè)計(jì)師個(gè)人審美的影響。這里通過一個(gè)改造案例展示我是如何思考的,希望能帶給你一些啟發(fā)。
下圖的左側(cè)是一張鴻蒙相機(jī)的桌面卡片,卡片的功本身能是好的,但在設(shè)計(jì)上還缺了一份精致感。首先從結(jié)構(gòu)上來看,整張卡片較為分散,被分割成不同區(qū)域且相互之間聯(lián)系較少;同時(shí)按鈕的色彩搭配并不協(xié)調(diào),左側(cè)的配圖也可以更精美。在右側(cè)的改造中,首先我使用了更一致的結(jié)構(gòu),利用一個(gè)模糊的底板作為按鈕的背板,讓卡片融為一體的同時(shí)保證了按鈕的辨識(shí)度。如果你仔細(xì)觀察,還能看到按鈕色彩也使用了卡片背板中的高亮色,讓功能區(qū)域和圖片區(qū)域相互呼應(yīng)。
這樣一張卡片,不僅具備了用戶常用的功能,還給用戶帶來了美的享受,在不使用卡片的時(shí)候,也可以將這張卡片作為桌面裝飾,讓人賞心悅目。
這里我還簡單列舉了一些我在設(shè)計(jì)中會(huì)經(jīng)常使用的設(shè)計(jì)手法,希望能幫助到你設(shè)計(jì)出優(yōu)秀的卡片 ,對(duì)細(xì)節(jié)的打磨將成為你的卡片脫穎而出的關(guān)鍵。
2、讓卡片的信息一目了然
一目了然是卡片的重要功能屬性,讓用戶可以不進(jìn)入應(yīng)用就能夠在桌面了解到關(guān)鍵信息,是卡片價(jià)值的重要體現(xiàn)。以下圖為例,如果能夠在卡片中展示更直觀的信息,請(qǐng)直接將數(shù)據(jù)展示在卡片內(nèi),減少“跳轉(zhuǎn)查看”類的按鈕。
(1)根據(jù)卡片大小控制信息數(shù)量
不同卡片的尺寸可以容納的信息量是不同的,嘗試將你的信息按照重要等級(jí)進(jìn)行排序,從大卡片到微卡片,依次將較為不重要的信息去除。
如下圖所示,你可以看到在展示天氣信息的卡片中,微卡片只保留了最重要的城市、溫度、天氣類型的信息;而在更大一些的小卡片中,增加了空氣質(zhì)量、最高最低氣溫等信息。
(2)使用合適的方式呈現(xiàn)數(shù)據(jù)
在展示數(shù)據(jù)時(shí),因卡片面積有限,請(qǐng)注意使用合適的呈現(xiàn)方式,避免使用復(fù)雜的數(shù)據(jù)表格,更建議使用大數(shù)字、圖形、進(jìn)度條、柱狀圖等更直觀的方式。
3、關(guān)注不同設(shè)備的一致性
鴻蒙生態(tài)覆蓋了海量設(shè)備,不同設(shè)備的顯示面積和宮格布局各不相同,如果你的卡片需要在多種設(shè)備上呈現(xiàn),請(qǐng)務(wù)必在設(shè)計(jì)時(shí)關(guān)注卡片在不同設(shè)備上的呈現(xiàn)效果并進(jìn)行一一調(diào)試。
三
總結(jié)
卡片是信息的濃縮和品牌的放大,好的卡片可以為用戶帶來價(jià)值、為開發(fā)者帶來流量,一張好的卡片,美感和實(shí)用性缺一不可。本文簡單介紹了一些設(shè)計(jì)方法,更多設(shè)計(jì)規(guī)范可以前往開發(fā)者網(wǎng)站進(jìn)行瀏覽,希望大家都可以設(shè)計(jì)出屬于自己元服務(wù)的優(yōu)質(zhì)卡片。
更多推薦
點(diǎn)擊下方圖片鏈接,查看更多欄目內(nèi)容
-
HarmonyOS
+關(guān)注
關(guān)注
79文章
1954瀏覽量
29897
原文標(biāo)題:【技術(shù)視界】爆款元服務(wù)!教你如何設(shè)計(jì)高使用率卡片
文章出處:【微信號(hào):HarmonyOS_Dev,微信公眾號(hào):HarmonyOS開發(fā)者】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論