您的位置:首页 >资讯>两性健康

会员卡片,应该如何设计?

在互联网时代,许多产品或平台都推出了各自的会员体系和会员服务,而在这个过程中,会员卡片这一组件也被广泛应用。那么,你知道会员卡片这一组件在设计时应当遵循哪些策略吗?一起来看看本文的分析和总结吧。

一、组件介绍

会员卡片是少数几种概念和样式都来源于现实,并且设计上相差不大的组件。在手机出现之前的很多年里,各种高端的店铺、银行、俱乐部都会给重要的客户发放实体的VIP卡片,一来彰显客户地位,二来提供针对性的服务促进高端用户的消费。


(相关资料图)

进入互联网时代之后,各大内容提供商也纷纷效仿实体店推出了会员服务,会员卡片也就顺理成章地被继承了下来。

二、使用场景

会员卡片的使用场景极为单一,不用我说大家基本上也都清楚,就是会员中心页面,有些APP会把会员卡片外置到「我的」页面,作为会员页面的入口进行突出展示。当然,「我的」页面中的卡片为了压缩高度,信息会比会员中心更精简一点。

三、设计要点

1. 设计目的

在聊具体的卡片设计之前,我想先说一下会员卡片的设计目的,会员卡片是一种典型的视觉化组件,它本身被设计出来并不需要承载任何交互目标,跟勋章一样,它是一种视觉性的代表,代表了用户尊贵的地位。

由此目的,我们可以确定进行会员卡片设计的首要任务就是视觉性。

2. 会员卡片的内容

会员卡片的核心内容其实非常有限,由于需要突出视觉元素,所以只需要展示几个最核心的信息即可。

用户信息:核心信息,头像+昵称,或者单独昵称 有效期信息:核心信息,会员权益的到期日 升级进度条:一些有会员等级规则的App还会在卡片上展示升级的进度条 主视觉元素:视觉化元素,通常是卡片上最显眼的插画、3D图形 会员(等级)标志:视觉化图标,比较成熟的App会针对自己的会员体系设计专门的logo 背景:卡片的背景,有时会添加一些纹理

会员卡片的构成基本上就这几类,其中有些app甚至为了简化,主视觉元素都不会加入,或者干脆就把背景和VIP标志当作主视觉,这可以根据App的调性进行选择。

3. 背景类型

1)纯色

纯色卡片是比较少见的一类会员卡片,因为纯色并不能体现明显的视觉特征,所以纯色可能会令人觉得寡淡。当如果App整体调性便是扁平、简约的,那么可以使用纯色作为卡片背景。

而由于会员卡片代表尊贵的特性,其取色也会在几个比较有限的范围内取,例如:金、银、黑、主色。

2)渐变

更常见的背景是渐变的背景,不管是线性渐变或非线性的,渐变总能给人一种动态、流淌的视觉感受,另一方面,渐变还可以模拟真实卡片的光影质感,这一点无疑是纯色给不了的。

3)纹理

在纯色、渐变的基础上加上线条或者色块的纹理,或者干脆将图形或插画做成背景纹理的一部份,能够强化卡片视觉特征,让卡片不至于那么枯燥。

4. 主视觉元素类型

主视觉元素指的是作为视觉焦点存在的图形、插画,但并不是所有卡片都需要一个主视觉元素,所以其实很多App都会选择不做这个复杂的主视觉。如果你要做的话,可以考虑以下几种形式:

1)视觉化的图标

把可以指代「会员」这个意象的图标进行视觉化设计,这些图标有:王冠、钻石、App Logo、V标等等,可以进行的视觉化形式有:3D化、拟物化、金属质感设计、水晶质感设计等等。

2)插画

也有的App会采用插画作为主视觉的方案,这可以在偏扁平化的风格中使用。

5. 主视觉元素随等级变化

在拥有复杂等级规则的会员制度中,卡片也依等级做出差异化设计,除了等级本身的不同之外,也有会在卡片背景色彩和主视觉元素上做出差异化设计的做法。

四、样式拓展

这里收集了一些会员卡片的线上案例,也可以作为设计时的参考:

作者:酸梅干超人;公众号:超人的电话亭(ID:Superman_Call)

本文由 @超人的电话亭 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash ,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

关键词:

相关的文章>>

标签:
在互联网时代,许多产品或平台都推出了各自的会员体系和会员服务,而在[ 查看全文 ]
标签:
上周,公开市场逆回购、“酸辣粉”(SLF,常设借贷便利)、“麻辣粉”[ 查看全文 ]
标签:
今年以来,山东省平度市按照提升社会治理效能部署要求,研究确定了“11[ 查看全文 ]
标签:
人民网北京6月26日电(记者罗知之)据人民银行官网消息,2023年5月份金[ 查看全文 ]
标签:
近几年国内汽车市场的竞争正进入白热化的阶段,尤其是新能源蚕食燃油车[ 查看全文 ]
标签:
美债上限暂缓,意味着美国可以继续发债,突破历史达到32万亿美元,占实[ 查看全文 ]
标签:
1、武汉到武昌的火车并未开通直达,因为武汉火车站是高铁站,而武昌火[ 查看全文 ]
标签:
看守所最短几天放出来需要依据实际案情而定,对此在法律上并没有相关的[ 查看全文 ]
标签:
【国家网信办发布深度合成服务算法备案清单百度阿里腾讯字节等大厂在列[ 查看全文 ]
标签:
奔驰新GLE八月上市!订车优惠5万预计70万起售,内饰,新车,奔驰,发动机,[ 查看全文 ]
标签:
【贾跃亭的车又延期了!股价瞬间跌超1 3!那位花220万买车的老哥还好吗[ 查看全文 ]
标签:
“禁中国大陆玩家参与”,冲上热搜!,暴雪,中国,炉石传说,魔兽世界,国[ 查看全文 ]
标签:
3927万美金,拒绝交易!纳斯表明态度,哈登也该做出选择了,纳斯,火箭队[ 查看全文 ]
标签:
东北拉皮酱汁配方自制酱油50克、白醋50克、水塔陈醋50克、白糖40克 [ 查看全文 ]
标签:
hello大家好,我是城乡经济网小晟来为大家解答以上问题,魔兽世界各职[ 查看全文 ]
标签:
图为杭州市区的亚运车道。本报记者董旭明摄记者从杭州市公安局交通警察[ 查看全文 ]
标签:
1、《背影》说课稿各位评委、老师:大家晚上好!我说课的课题是朱自清[ 查看全文 ]
标签:
你们好,最近小活发现有诸多的小伙伴们对于没睁眼的小奶狗怎么喂养,小[ 查看全文 ]
标签:
6月26日,“北京市贯彻落实党的二十大精神”系列主题新闻发布会——国[ 查看全文 ]
标签:
▲2023年6月8日,广东省深圳市南山区蛇口集装箱码头,自动化龙门吊在来[ 查看全文 ]

热门标签

热门搜索:

春季养生 健康问答 资讯

资讯

更多
  • 会员卡片,应该如...

  • 当前需要下调超额...

  • 人民银行:5月债券...

  • 当前关注:断臂求...

  • 美国负债史上首次...

  • 武汉站到武昌站坐...

图说健康

更多

体育健身

更多