交互小知识04-卡片式设计

卡片式设计

一、概念介绍

卡片式设计是一个承载着图像、文本、按钮、提示信息和一些交互动作等的矩形区块，作为指向更多详细信息的功能入口，能有效区分不同信息的层级，兼容性强，不管是App还是Web，都能够有效适应响应式设计；同时在视觉上可塑性很高，能使用图片来强调，变得更加吸引人。

二、卡片式设计的作用

1. 增加空间利用率

相比于传统列表式布局，卡片式设计能更好地打破原有的框架，在纵向的内容流里，增加横（X）轴交互来提高空间的利用率，将部分内容隐藏在横轴的空间中，在屏幕可视的范围内通过交互展示更多内容。

比如，网易考拉和腾讯视频APP中的横向滑动卡片。

2. 区分不同维度内容，易于阅读

卡片，其实比较像一个容器，你可以把不同维度的内容放入不同的卡片中，使其在内容区分的同时，还能保持界面的统一性，简单明快的内容更容易引起用户兴趣。

比如：淘宝采用卡片处理信息的层级。

3. 提升可操作性

卡片是一种拟真元素，可以被覆盖、堆叠、移动、划去，这样能更好的拓展内容模块的视觉深度和可操作性。

比如：Nothing，运用卡片式设计，实现左右滑动代表感不感兴趣的操作，从而增加产品的趣味性。

4.兼容不同尺寸的屏幕

卡片可大可小，是自由可控的内容容器，是跨设备跨屏幕的UI设计的首选元素。

5. 视觉上的愉悦感

基于卡片的设计通常会严重依赖于视觉设计，好的图片能极大的提升App和网页的视觉，让用户获得愉悦感。卡片式设计在图片素材上的强调使得它更加具有吸引力。

比如：腾讯公益中的公益活动，卡片中采用与活动相关的笑脸图片，很有视觉感染力，能够引导人们进行捐助。

三、卡片式设计的不适用性

卡片式设计虽然有这么多的好处，但由于卡片式设计自身的特性所限，同样也有不适用的地方。

比如：dribbble上的一些练习稿，一屏设计展示的消息明显太少，整体来看卡片形式感太强，导致用户需要付出更多的时间和交互成本。

四、结语

       总而言之，需要对不同的信息进行整合，提高用户信息获取速度，减少用户思考时间时，卡片式设计是一个不错的选择。但设计是为了解决问题，如果不在何时的场合盲目的使用卡片设计，也会使你的设计变得低效和空间浪费。