聊聊卡片式设计的基础概念和运用方法

卡片式设计的优点

1. 增强点击感

这是诺基亚手机的win phone系统(下图)，系统桌面的所有内容都是一个个小方块展示，类似一个块状类的按钮，让人联想到是可以点击的操作入口：

而且每一块入口都是有区域大小(下图)，从而避免造成误点击。

2. 排版整齐

如下图，将信息、图像归类整合到一个方块里，清晰直观又避免页面因为信息多而散乱，卡片的排列方式是按列或者行的方式进行对齐展示，视线沿着横向或者纵向浏览能快速找到想要的信息，此外，这种固定大小的卡片方块也有利于栅格化排版。

比如下图，页面按5个单元进行栅格，利用卡片方块的展示，很轻松地计算并调整它的大小进行栅格布局

3. 信息模块化

如下图，这是google now的一个界面，将信息、图像按维度分类整合到一个卡片里，能有效地避免信息散乱、同时避免信息分类不明确像这种模块化展示有效地减少用户思考的时间，能快速找到自己所需的信息。

4. 响应式设计

卡片方块的高度和宽度的大小都是可以调整的，正是因为这种特性很适合用在响应式设计里，卡片在不同的平台展示，由于分辨率不同，卡片能自适应地展示，以上是卡片设计的优点。

项目实践

去年做了DNSPod的项目改版，尝试新的风格探索。如官网和控制台改版中，为了能让信息更好的整合、更好地发挥不同信息的作用、发挥不同信息的功能，这次DNSPod官网改版中，banner、快捷入口，业务信息以及售卖模块，也运用了卡片式设计的方法。

DNSPod管理控制台概览页

总结

在信息量大的页面中除了重视内容质量外，形式功能的组织与呈现也是同等重要，对提高用户获取有效信息的效率有着非常大的帮助，这时应用卡片式的设计方式是不错的选择。