UI必看！幫你快速掌握會員卡片組件的設計方式

一、組件介紹

會員卡片是少數幾種概念和樣式都來源于現實，并且設計上相差不大的組件。在手機出現之前的很多年里，各種高端的店鋪、銀行、俱樂部都會給重要的客戶發放實體的 VIP 卡片，一來彰顯客戶地位，二來提供針對性的服務促進高端用戶的消費。

更多組件設計方法：

進入互聯網時代之后，各大內容提供商也紛紛效仿實體店推出了會員服務，會員卡片也就順理成章地被繼承了下來。

二、使用場景

會員卡片的使用場景極為單一，不用我說大家基本上也都清楚，就是會員中心頁面，有些 APP 會把會員卡片外置到「我的」頁面，作為會員頁面的入口進行突出展示。當然，「我的」頁面中的卡片為了壓縮高度，信息會比會員中心更精簡一點。

三、設計要點

1. 設計目的

在聊具體的卡片設計之前，我想先說一下會員卡片的設計目的，會員卡片是一種典型的視覺化組件，它本身被設計出來并不需要承載任何交互目標，跟勛章一樣，它是一種視覺性的代表，代表了用戶尊貴的地位。

由此目的，我們可以確定進行會員卡片設計的首要任務就是視覺性。

2. 會員卡片的內容

會員卡片的核心內容其實非常有限，由于需要突出視覺元素，所以只需要展示幾個最核心的信息即可。

1. 用戶信息：核心信息，頭像+昵稱，或者單獨昵稱
2. 有效期信息：核心信息，會員權益的到期日
3. 升級進度條：一些有會員等級規則的 App 還會在卡片上展示升級的進度條
4. 主視覺元素：視覺化元素，通常是卡片上最顯眼的插畫、3D 圖形
5. 會員(等級)標志：視覺化圖標，比較成熟的 App 會針對自己的會員體系設計專門的 logo
6. 背景：卡片的背景，有時會添加一些紋理

會員卡片的構成基本上就這幾類，其中有些 app 甚至為了簡化，主視覺元素都不會加入，或者干脆就把背景和 VIP 標志當作主視覺，這可以根據 App 的調性進行選擇。

3. 背景類型

①純色

純色卡片是比較少見的一類會員卡片，因為純色并不能體現明顯的視覺特征，所以純色可能會令人覺得寡淡。當如果 App 整體調性便是扁平、簡約的，那么可以使用純色作為卡片背景。

而由于會員卡片代表尊貴的特性，其取色也會在幾個比較有限的范圍內取，例如：金、銀、黑、主色。

②漸變

更常見的背景是漸變的背景，不管是線性漸變或非線性的，漸變總能給人一種動態、流淌的視覺感受，另一方面，漸變還可以模擬真實卡片的光影質感，這一點無疑是純色給不了的。

③紋理

在純色、漸變的基礎上加上線條或者色塊的紋理，或者干脆將圖形或插畫做成背景紋理的一部份，能夠強化卡片視覺特征，讓卡片不至于那么枯燥。

4.主視覺元素類型

主視覺元素指的是作為視覺焦點存在的圖形、插畫，但并不是所有卡片都需要一個主視覺元素，所以其實很多 App 都會選擇不做這個復雜的主視覺。如果你要做的話，可以考慮以下幾種形式：

①視覺化的圖標

把可以指代「會員」這個意象的圖標進行視覺化設計，這些圖標有：王冠、鉆石、App Logo、V 標等等，可以進行的視覺化形式有：3D 化、擬物化、金屬質感設計、水晶質感設計等等。

②插畫

也有的 App 會采用插畫作為主視覺的方案，這可以在偏扁平化的風格中使用。

5.主視覺元素隨等級變化

在擁有復雜等級規則的會員制度中，卡片也依等級做出差異化設計，除了等級本身的不同之外，也有會在卡片背景色彩和主視覺元素上做出差異化設計的做法。

四、樣式拓展

這里收集了一些會員卡片的線上案例，也可以作為設計時的參考：

結尾

會員卡片的組件，今天就介紹到這里了。

歡迎關注作者的微信公眾號：「超人的電話亭」