谈谈卡片式设计

卡片式设计是近几年最常用的页面设计风格，它自带的分割属性让页面布局更加清爽，有层次感，分区内容也更加聚合。但是，分割区也容易造成造成横向/纵向空间浪费，有时也会影响用户沉浸式的浏览体验。

那么，如何用好卡片式设计呢？要根据实际场景和内容形式，不要走入卡片化误区，专门为“卡片式”而“卡片式”。

很多设计师对卡片设计习以为常，却对使用卡片的原因、表现方式少了考量。思考题：列表记录页面卡片化的意义在哪里？

记录

什么是卡片？生活中我们往往代指含有图片和文本信息的平面容器。卡片可以将某些信息归纳在一起、并形成独立的区域，以完整体的形式展示给用户，让归纳组合后的信息能快速突出重点。

22101121.png

很多移动应用的首页的功能，图文信息基本都是卡片式，既做到了视觉上的美观，也达到了平衡文字及图片强弱的效果。抛开卡片，首页应该展示更多的功能，不应该加入过多的二次操作（滑动、点选），需要给用户一览无余的视觉体验。

网易&富途

卡片式还意味着更大的交互热区，无需精准点击，操作上让人感觉更加易用。卡片很容易添加各种交互手势，可以为用户提供更多有趣、便捷的操作和动画效果。

卡片式设计本身就体现了容器与背景的层级，如果在卡片中嵌套多层卡片，容易造成层级杂/乱而增加用户的视觉负担。其实，在卡片中区分多个信息组，利用留白、分割线或撞色背景等元素进行拟物化设计也是很好的。

20029.png

如下图左，新闻部分已经包裹在屏幕形成的卡片里，而新闻部分与屏幕之间又留出间距，为了视觉效果，浪费了空间。另外，重复的内容让人疲劳，如果页面中反复出现同样的文字、图标等设计元素往往让人麻木。从用户认知角度说，当前智能手机全世界普及率超过70%，基本的设计元素是不需要引导、解释，用户就会理解的。

左A、右B

总的来说，任何表现形式都应该是为了更好的呈现功能及内容，而不是一味地卡片式。