會(huì)員卡片,應(yīng)該如何設(shè)計(jì)?
在互聯(lián)網(wǎng)時(shí)代,許多產(chǎn)品或平臺(tái)都推出了各自的會(huì)員體系和會(huì)員服務(wù),而在這個(gè)過(guò)程中,會(huì)員卡片這一組件也被廣泛應(yīng)用。那么,你知道會(huì)員卡片這一組件在設(shè)計(jì)時(shí)應(yīng)當(dāng)遵循哪些策略嗎?一起來(lái)看看本文的分析和總結(jié)吧。
一、組件介紹
會(huì)員卡片是少數(shù)幾種概念和樣式都來(lái)源于現(xiàn)實(shí),并且設(shè)計(jì)上相差不大的組件。在手機(jī)出現(xiàn)之前的很多年里,各種高端的店鋪、銀行、俱樂(lè)部都會(huì)給重要的客戶發(fā)放實(shí)體的VIP卡片,一來(lái)彰顯客戶地位,二來(lái)提供針對(duì)性的服務(wù)促進(jìn)高端用戶的消費(fèi)。
進(jìn)入互聯(lián)網(wǎng)時(shí)代之后,各大內(nèi)容提供商也紛紛效仿實(shí)體店推出了會(huì)員服務(wù),會(huì)員卡片也就順理成章地被繼承了下來(lái)。
二、使用場(chǎng)景
會(huì)員卡片的使用場(chǎng)景極為單一,不用我說(shuō)大家基本上也都清楚,就是會(huì)員中心頁(yè)面,有些APP會(huì)把會(huì)員卡片外置到「我的」頁(yè)面,作為會(huì)員頁(yè)面的入口進(jìn)行突出展示。當(dāng)然,「我的」頁(yè)面中的卡片為了壓縮高度,信息會(huì)比會(huì)員中心更精簡(jiǎn)一點(diǎn)。
三、設(shè)計(jì)要點(diǎn)
1. 設(shè)計(jì)目的
在聊具體的卡片設(shè)計(jì)之前,我想先說(shuō)一下會(huì)員卡片的設(shè)計(jì)目的,會(huì)員卡片是一種典型的視覺(jué)化組件,它本身被設(shè)計(jì)出來(lái)并不需要承載任何交互目標(biāo),跟勛章一樣,它是一種視覺(jué)性的代表,代表了用戶尊貴的地位。
由此目的,我們可以確定進(jìn)行會(huì)員卡片設(shè)計(jì)的首要任務(wù)就是視覺(jué)性。
2. 會(huì)員卡片的內(nèi)容
會(huì)員卡片的核心內(nèi)容其實(shí)非常有限,由于需要突出視覺(jué)元素,所以只需要展示幾個(gè)最核心的信息即可。
- 用戶信息:核心信息,頭像+昵稱,或者單獨(dú)昵稱
- 有效期信息:核心信息,會(huì)員權(quán)益的到期日
- 升級(jí)進(jìn)度條:一些有會(huì)員等級(jí)規(guī)則的App還會(huì)在卡片上展示升級(jí)的進(jìn)度條
- 主視覺(jué)元素:視覺(jué)化元素,通常是卡片上最顯眼的插畫(huà)、3D圖形
- 會(huì)員(等級(jí))標(biāo)志:視覺(jué)化圖標(biāo),比較成熟的App會(huì)針對(duì)自己的會(huì)員體系設(shè)計(jì)專門的logo
- 背景:卡片的背景,有時(shí)會(huì)添加一些紋理
會(huì)員卡片的構(gòu)成基本上就這幾類,其中有些app甚至為了簡(jiǎn)化,主視覺(jué)元素都不會(huì)加入,或者干脆就把背景和VIP標(biāo)志當(dāng)作主視覺(jué),這可以根據(jù)App的調(diào)性進(jìn)行選擇。
3. 背景類型
1)純色
純色卡片是比較少見(jiàn)的一類會(huì)員卡片,因?yàn)榧兩⒉荒荏w現(xiàn)明顯的視覺(jué)特征,所以純色可能會(huì)令人覺(jué)得寡淡。當(dāng)如果App整體調(diào)性便是扁平、簡(jiǎn)約的,那么可以使用純色作為卡片背景。
而由于會(huì)員卡片代表尊貴的特性,其取色也會(huì)在幾個(gè)比較有限的范圍內(nèi)取,例如:金、銀、黑、主色。
2)漸變
更常見(jiàn)的背景是漸變的背景,不管是線性漸變或非線性的,漸變總能給人一種動(dòng)態(tài)、流淌的視覺(jué)感受,另一方面,漸變還可以模擬真實(shí)卡片的光影質(zhì)感,這一點(diǎn)無(wú)疑是純色給不了的。
3)紋理
在純色、漸變的基礎(chǔ)上加上線條或者色塊的紋理,或者干脆將圖形或插畫(huà)做成背景紋理的一部份,能夠強(qiáng)化卡片視覺(jué)特征,讓卡片不至于那么枯燥。
4. 主視覺(jué)元素類型
主視覺(jué)元素指的是作為視覺(jué)焦點(diǎn)存在的圖形、插畫(huà),但并不是所有卡片都需要一個(gè)主視覺(jué)元素,所以其實(shí)很多App都會(huì)選擇不做這個(gè)復(fù)雜的主視覺(jué)。如果你要做的話,可以考慮以下幾種形式:
1)視覺(jué)化的圖標(biāo)
把可以指代「會(huì)員」這個(gè)意象的圖標(biāo)進(jìn)行視覺(jué)化設(shè)計(jì),這些圖標(biāo)有:王冠、鉆石、App Logo、V標(biāo)等等,可以進(jìn)行的視覺(jué)化形式有:3D化、擬物化、金屬質(zhì)感設(shè)計(jì)、水晶質(zhì)感設(shè)計(jì)等等。
2)插畫(huà)
也有的App會(huì)采用插畫(huà)作為主視覺(jué)的方案,這可以在偏扁平化的風(fēng)格中使用。
5. 主視覺(jué)元素隨等級(jí)變化
在擁有復(fù)雜等級(jí)規(guī)則的會(huì)員制度中,卡片也依等級(jí)做出差異化設(shè)計(jì),除了等級(jí)本身的不同之外,也有會(huì)在卡片背景色彩和主視覺(jué)元素上做出差異化設(shè)計(jì)的做法。
四、樣式拓展
這里收集了一些會(huì)員卡片的線上案例,也可以作為設(shè)計(jì)時(shí)的參考:
作者:酸梅干超人;公眾號(hào):超人的電話亭(ID:Superman_Call)
本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash ,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!