卡片式内容设计【预热篇】

最近在做现金贷部分的首页改版，为了给用户更直接的提现体验，和产品运营部门同学决定用信用卡的形式体现产品特点。于是，这次设计的重点在信用卡的设计，我查看了这次改版的所有需求，并且结合优秀竞品的界面形态，总结了本次设计的挑战点（需要重点解决的问题），如下：

一、信用卡卡片状态的展示：

「状态一」用户在初次登陆、用户已登陆未形成初次订单、用户在等待审核状态，这三个状态中卡片都是未开卡状态。模拟现实状态，可以概括为相当于用户向银行发起申请了一个信用卡，信用卡还在银行处在办理状态，或者信用卡已经办理好寄到用户手中，但是用户还没有去银行发起激活使用。这时候的卡，相当于还在信封中，处于睡眠状态。

「状态二」用户在审核通过或者复贷可借款或者补充材料、审核拒绝、等待放款、还款中这五种状态时，用户已经提交了个人资料，不管可借款资金是否冻结，这个卡是激活状态。现实中这个卡是持有在用户手中，用户可以使用卡片的，因此此时卡的状态是激活展示，并且可以及时查询到卡片的信息。

这就意味着，设计这个虚拟的信用卡，需要解决两个问题：

（1）卡片在两种状态的展示方式不同，如何让用户感知到卡片状态的区别？如何引导用户从状态1到状态2？

（2）卡片上面应该有很多状态的文案，这些文案如何清晰展示给用户？

二、卡片的扩展性     

做设计的时候，我问了产品方一个问题，以后的卡片只有一种么，有没有考虑到根据用户使用情况，给用户的等级区分，增加用户粘性。产品方回答，确实考虑了未来卡片会有一种类似会员等级的区分，会有5个等级，这给设计释放了一个重大的信号——这个卡是动态的，要考虑到卡片的扩展。未来会有黑卡、白金卡、黄金卡、晋级卡等等，虽然我们做的是小白卡，但是这个样式是否适用多种卡种类？是否需要增加卡片升级的状态提醒？加在卡片什么位置？都是我们需要考虑的。

三、品牌性的延续

这个卡怎么可以给用户留下深刻的印象，怎么一打开产品、看到卡就能想到是我们的产品，如何把品牌的DNA植入卡中，都是我们需要思考的事情。

四、卡片与运营位置切换

在状态一种，产品方提供的想法是，卡片展示在广告区域，也就是滑动指示器第一个位置展示的是卡片、第二第三个位置可能是新人礼包、等级说明等等活动或者规则补充的内容。

总结了设计需要解决的几个重要问题后，我打开了自己认为业务模式比较相似，产品形态做的比较好的竞品，开始观察，图片体验不分先后：

「图1」提取的灵感在于卡片提前在按钮上预热，并且与情境结合起来。

「图2」灵感在多个卡展示的时候，可以把卡做成导航的形式，也可以说导航就是各种类型的卡（并且多种卡配色统一，一看就是一套东西），这样瞬间思路就打开了：

「图3」灵感在卡片与运营的结合，运营区域可以结合卡片的形态做，很有创意

「图4」灵感在卡片引导文案的布局，居中布局，通过心里格式塔的统一和对比，突出信息

「图5」灵感在多种卡片，多种颜色的协调，元素的协调（例如圆角、字体的统一）、整个页面不同状态的展示

「图6、7」是京东金融截图，灵感在卡片如何简化信息、突出品牌、信息布局和表达、整个色彩基调统一。

「图8」灵感在卡片和活动礼包的结合；黑金风格的设计