大厂面试题如何做？VIP会员卡UI页面设计细节复盘解析

静电说：VIP会员卡页面是不少应用中的一个重头戏项目。是否开通VIP会员，关系到用户的存留度，以及应用本身提供的服务和内容对用户的吸引程度。在《静电的UI设计教室》课程中，我们有一个作业，就是来设计这样的一个VIP会员权益展示和购买的页面及其功能。这也是一个大厂的面试题目。各位小伙伴需要重视。我们可以从以下几个步骤来进行梳理：

01.VIP会员卡对于用户的好处

这就是目的和动机的考量，也是设计师做设计的时候必须要去达到的目的。那么对于VIP会员，用户为啥要去付钱买呢？ 很简单，第一，用户能付出少量的钱，获得多于其付出钱之外的好处，也就是赚了。比如：美团外卖月费15元，用户付出15元，得到了7张五元的优惠券，用户一想，这赚了！买买买！

第二，用户通过你提供给他的服务获益。比如百度网盘，非会员存储空间有限，下载速度低。而开通会员后，存储容量大幅度提升，下载速度飞升。

对于商家来说，这也是可以长久留住用户的一种手段。

所以，我们在设计的时候，必须要凸显出用户购买VIP会员后，可以获得的实实在在的好处。

02.页面需要展示哪些内容？

对于一个完整的会员卡页面，首先要展示的就是用户开通会员的状态，用户开通了还是没有开通？这样会给用户造成某种心理暗示，心理学上就是：损失厌恶心理。（损失厌恶是指人们面对同样数量的收益和损失时，认为损失更加令他们难以忍受。同量的损失带来的负效用为同量收益的正效用的2.5倍。损失厌恶反映了人们的风险偏好并不是一致的，当涉及的是收益时，人们表现为风险厌恶；当涉及的是损失时，人们则表现为风险寻求。）

网易云会明确告知你权益已失效

其次，告知用户可以省多少钱。这是不少VIP产品都会用的计俩。比如京东会明确告知用户，开通会员后，你一共省了多少钱。

京东Plus会员关于用户省钱的展示

第三，明确告知加入会员后你可以得到哪些好处，一般，在这个区域，会使用图标加文字的方式展示。单纯文字展示效果很不好。

使用图标加文字的方式展示权益是个好方法

第四，回归价格本身，告知用户开通价格。请注意，这些价格的展示会包含多种价格的比对，这其中是有“小心机”的。一般排在第一个的是产品经理最希望用户去开通的，而后边几个呢？对！它们就是拿来做对比的。这明摆着是告诉你，瞧瞧！你开通第一个多划算，第二个第三个多贵。这样，用户经过这样的对比，就会选择产品经理希望用户开通的。当然，最好再来个连续包月包年服务，用户悄咪咪的就会被扣第二个月的钱。也许大部分用户只想用一个月，但是，也有不少用户压根就忘了这件事，所以，第二个月第三个月，哈哈，你是否进了套路呢？

然后，我们可以以角标等方式给用户更强的心理暗示。

没有对比就没有购买

第五，运营区域。一般以Banner广告和其它权益列表的形式存在，它的主要作用就是告知用户，我们这里很热闹，权益很多，商家很多，服务很多。

第六，限时开通按钮及其它心理暗示。更极致的产品会设置“限时开通”的栏目，告知用户多久后优惠权益失效，或者放一个跑马灯一样的栏目告知用户“X分钟前，XXX用户已购买”，营造出购买火爆的气氛。

买快快快！权益马上失效

第七，用户卡包功能。会员卡购买后，用户需要领取权益，此时尽量给用户一个明确的页面入口让用户可以更方便的领取权益，我们可以考虑在页面上方一个“我的卡包”功能页面入口。

我的权益在哪里？告诉我

第八，颜色选取。一般会员卡页面多采用黑灰色，金黄色等颜色来营造尊贵感。其它颜色效果会弱不少。这一点设计师需要着重考虑。标新立异没错，但是用户心理也需要考虑到。大家在做设计之前，多看竞品，并截图分析，你的思路会更清晰。

文末总结：

会员卡页面其实是对于用户心理的极致把握而设计出来的。用户的“优越感”，“占便宜”心理，“损失厌恶心理”，“从众心理”。把握好这些，再加上明晰的视觉设计，首页的展示效果就完成了。在此过程中，我们还要确保用户购买流程的顺畅，及用户领取福利过程的明晰。总之，任何环节都不能掉链子。做到这些，VIP会员卡的展示页面，不难搞定。

在《静电的UI设计教室》课程中，我们会从视觉，交互等多个层面对这个面试题作业进行解析。作出更符合市场和用户需求，让面试官更满意的设计作品来。记住，我们不是为了应试而应试，而是真正提升我们的设计和思维能力，以不变应万变。