HarmonyOS三個(gè)設(shè)計(jì)原則教你如何設(shè)計(jì)高使用率萬能卡片

時(shí)間：2023-11-17 18:12:16

關(guān)鍵字：操作系統(tǒng) HarmonyOS

手機(jī)看文章

掃描二維碼
隨時(shí)隨地手機(jī)看文章

[導(dǎo)讀]HarmonyOS基于“精致美觀、一目了然、一步直達(dá)”三個(gè)設(shè)計(jì)原則，為用戶提供更多有效信息，幫助用戶完成一些復(fù)雜操作的同時(shí)，以最佳視覺效果呈現(xiàn)于桌面。

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

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

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

大片信息一目了然，提供更多的有效信息給用戶，是讓卡片更具有價(jià)值的手段之一。類似用戶需要復(fù)雜操作才能獲得的信息以及常常關(guān)注的信息，都適合呈現(xiàn)在卡片內(nèi)，但同時(shí)也要謹(jǐn)慎展示廣告、優(yōu)惠券等非用戶主動(dòng)想要獲取的內(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í)需審視自己卡片內(nèi)的所有按鈕，是否真的減少了用戶的操作，為用戶帶來了價(jià)值。

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

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

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

精致美觀其實(shí)是一個(gè)較為寬泛的屬性，設(shè)計(jì)過程中并沒有一些固定的規(guī)則，設(shè)計(jì)師可以遵守業(yè)界通用的設(shè)計(jì)規(guī)范，如畫面的平衡、色彩的搭配、元素的統(tǒng)一等；當(dāng)然其個(gè)人審美也會(huì)產(chǎn)生一定的影響。但整體來看一張精致美觀的卡片，不僅要具備用戶常用的功能，還要給用戶帶來美的享受?？ㄆw結(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)查看”類的按鈕。

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