美文网首页
卡片式内容设计【预热篇】

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

作者: Mooooon_n | 来源:发表于2017-09-05 10:35 被阅读0次

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

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

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

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

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

(1)卡片在两种状态的展示方式不同,如何让用户感知到卡片状态的区别?如何引导用户从状态1到状态2?

(2)卡片上面应该有很多状态的文案,这些文案如何清晰展示给用户?

二、卡片的扩展性     

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

三、品牌性的延续

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

四、卡片与运营位置切换

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

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

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

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

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

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

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

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

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

相关文章

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

    最近在做现金贷部分的首页改版,为了给用户更直接的提现体验,和产品运营部门同学决定用信用卡的形式体现产品特点。于是,...

  • PPT 页面设计之卡片式设计

    我们都知道设计 PPT 需要重点突出,今天讲讲使用卡片式设计的思路来突出重点。 那么什么是卡片式设计呢?以前我们预...

  • 选择卡片式设计的3大优势

    卡片式设计相信大家对于这个名词大家都不陌生啦,卡片式设计是近几年很流行的设计趋势,并且广泛的运用到各个行业领域的U...

  • 移动端常见图片浏览方式

    0. 横向铺满一列图片模式: 1)图片大,图片内容获取方便,多为卡片式设计。 2)保证每条内容在一屏内。 3)考虑...

  • 最近的流行

    弥散阴影。双色渐变多色渐变。扁平化。去中心化工具内容化的设计。卡片式设计的布局。网络热点,用语盛行。流行使用标签,...

  • 谈谈卡片式设计

    卡片式设计是近几年最常用的页面设计风格,它自带的分割属性让页面布局更加清爽,有层次感,分区内容也更加聚合。但是,分...

  • 卡片式设计

    卡片式设计的一点学习摘录 Linkon the top...

  • 无标题UI色彩是使卡片式设计独具一格的因素,如何选用和搭配色彩。

    色彩是使卡片式设计独具一格的因素,如何选用和搭配色彩,来使卡片式设计具有更高的美观度与易用性。 得益于Materi...

  • 【平面设计教程】巧用色彩为卡片设计加分

    ​​色彩是使卡片式设计独具一格的因素,如何选用和搭配色彩,来使卡片式设计具有更高的美观度与易用性。 ​ 得益于Ma...

  • 好的卡片式设计是怎样的

    用户在操作卡片式设计的应用界面时,会更加清晰的浏览卡片上的内容,顺理成章的它也成为了当前UI界面设计中的一个潮流,...

网友评论

      本文标题:卡片式内容设计【预热篇】

      本文链接:https://www.haomeiwen.com/subject/bkqujxtx.html