关于卡片式设计的3点细节思考

卡片式设计，不是UI设计中的新风格样式，市面上已有很多关于风格优、劣，设计要点的分析总结。所以，本文就不再重复提及，而是站在用户 & 设计师角度，体验不同APP观察不同卡片设计带给我的感知。有不同就有了对比，职业病上身的我，开始思考什么样的显示方式更准确？怎样运用能让用户使用感受更好？怎样在大量运用卡片基础上提高浏览效率实现目的？

本文，以我观察到的3点卡片设计细节（纠结）来具体分析：

细节1：卡片到底应该贴边还是留有空隙？

在频繁使用【京东】和【淘宝】时，发现“我的”界面卡片设计，如下：

京东：卡片左右贴边

    淘宝：卡片左右留有空隙

我带着这样先入为主的观点：

“设计来源于生活，卡片模拟现实生活中的名片或银行卡。它们内容各异，方寸大小承载着不同信息。平铺展示时，需要留有一定的空间，让信息独立。”

来看京东的卡片设计，就有着强迫症一样的难受。

卡片设计的缺点是会占据一部分空间，内容多时，会遇到信息排版上问题。我猜想京东的做法是兼顾两者，在用卡片风格的同时也能扩大显示区域。但这样的显示形式，作为用户，我在使用中大脑不断在卡片和列表间识别切换，难有一个确定的感受。然而，在产品设计中一个重要的点是给用户提供“确定性”，即使是视觉呈现层面。卡片有卡片的样子，列表也应有列表的样子。给用户提供一个确定的感受，视线才能更聚焦内容本身。

那么，会有小伙伴问，我看也有贴边的卡片呀？那这又怎么区分？

细节2：什么样的卡片可以贴边？

上图，是苹果系统软件【健康】和【语音备忘录】运用贴边大卡片的场景和情况。从中总结得出，大占比贴边卡片的使用场景有3类：

1.当软件有更新，显示新版功能以此来告知用户；

2.在APP内，还需开启更多小功能，如“耳机通知”或是“睡眠设置”；同时在设置结束后，顺手对新手进行软件使用教育；

3.此项任务正在进行，同时尚未存入手机（语音备忘录）

所以，在苹果系统软件侧看贴边大卡片的使用，是高层级（亟待解决处理的单项内容）；是表达正在进行，像是一种悬停状态。

细节3: 卡片设计如何让用户多停留，提高效率，完成目的？

提出这样的问题，咋一看不是视觉设计应该操心的事，但视觉设计是产品思考的表象呈现。我们需要往上理解产品意图，才能选用或设计出最合适的设计方案。

3.1 卡片排版的节奏感，让用户多停留

这是一张来自：HotJar，关于长页面不同的卡片样式导致用户滑动热度差异对比图。从图可发现，长页面里卡片设计有节奏感，能很大程度上让用户长时间停留。争取用户的留存与在线时长，是产品侧的重要指标，因为更长的停留就有可能带来转化。当然节奏感不是设计师随意为之，而是了解用户的用眼情况（轻 - 重 - 轻），以及多次用户研究后才得到的结果。

当用户停留的时间变多，就要为用户考虑，怎样展示更方便用户？怎么排版更好用？

3.2 浏览效率与用户体验

我是重度网购患者，自从生了宝宝，更加。由于没有时间去逛街，家里90%的东西都是网购，即便是带宝宝出去玩，也没有更多精力拎大包小包。在分析哪个做的更优之前，“场景”是绕不开的话题。

举例：我逛天猫超市，不同时间段，不同状态，不同需求，逛的状态完全不一样：

状态1:紧急需求

家里急需某个东西，宝宝在地上玩，有可能随时有需求（臭了/哭了/要抱了），我的时间会随时被打断，我会使用检索，找到后，在结果信息中，快速筛选合适的下单；

状态2:紧急需求，但未满88元包邮

奶奶带宝宝出去玩，我在家忙完家务。刚躺下想在睡小觉前，买点家里急需的东西。急需用品加入购物车后，还没到包邮价，我这时我需要快速根据价格区间凑单；

状态3:不紧急需求，同时也想发现好物

宝宝终于睡了，家里还有3包抽纸就要用完，我要开始囤些。这时只有纸巾一个需求，同时我也想放松放松，看看有啥好的东西，可以替换家里不好用的。

状态4:闲来无事逛一逛

上班了，午休无聊时，打开逛一逛，打发时间，也许能淘到一个有用的东西；

我有个购买习惯，当需要购买贵重或大批量商品，在确定是正品的平台下，会对比哪家更优惠。有一次我需要购置大量的纸尿裤，发现同一层级界面设计，如下：

它们都是母婴类目下的纸尿裤专区，“京东超市”和“网易考拉”一屏展示9个商品，而“天猫超市”一屏展示6个。一屏多内容展示会显得杂乱不漂亮、而且会让用户觉得量大廉价，品质感不高。我曾经在设计稿上也绝对会倾向选择视觉上更美观，内容更少的版式。但自从我成为宝妈，我发现我变了。妈妈的日常事情繁琐，还是家里的采购大臣，一个钱掰成两半花。前两款APP的设计版式让我感到贴心。因为我是针对性的目录检索，我会集中注意力选购商品，所以，第1. 更多的商品呈现，我觉得视觉不重; 第2. 减少我的手指滑动翻阅，提高效率；第3. 显示主要信息，便于价格比对（价格/片数）；

当我不是紧急需求，闲来无事，想要“云逛街”时，一屏多内容展示，我会觉得内容重了。然而，瀑布流式的大卡片设计，可以让我不动脑的滑一滑，打发时间，偶尔中间穿插短视频能打破长浏览的疲惫，体验挺好。

所以，即使是一个人，使用一款产品，都会因为不同的自身状态、不同场景，有不同的使用需求。卡片样式丰富，可大可小，可长可短，可方可圆。根据不同的页面目的，使用场景，应该做到具体内容具体设计。

总结

1.卡片与卡片间需要用空间区隔开，就像美术馆的画作/雕塑，需要用空间让之独立。

2.那些亟待处理、高层级、尚未成为界面中一员的部分，可使用贴边大卡片来做展示。

3. 站在产品角度，换身为用户体验使用，做最贴合产品意图的视觉表达。

写到这，我想起一句话：没有最好，只有更好。要做好一个产品或是一个设计都需要不断的优化。卡片式设计看起来简单，视觉要点也很少，但还是有些小细节需要我们注意。

这是我在使用APP时，关于卡片式设计相关的思考。愿对你有所帮助！

- END -

原创文章，如需转载，请注明公众号名称，谢谢！

（欢迎关注微信公众账号：丘丘的设计笔记）

如果觉得还不错，那么，给我点个赞吧：）