形式与功能，卡片式设计的基础概念和运用方法

“形式跟随功能”可以解释这一点。最近，作者还在项目修订中使用了相关的卡片方法，发现效果很好，所以我希望通过项目中的思考和尝试，抛出介绍供您参考。

在互联网产品中，除了内容外，一些功能性产品的信息内容也相当巨大，特别是管理控制系统、业务管理、功能操作、数据显示等。在信息量如此之大的页面中，除了关注内容质量外，形式功能的组织和呈现也同样重要，这对提高用户获取有效信息的效率非常有帮助。

上述形式功能的组织和呈现实际上是关于设计和排版的问题，当然，对设计师的排版技能也有相当大的要求。有很多方法可以优化这种排版。我主要讨论卡片设计的理论。我相信你对卡片设计非常熟悉。虽然它已经流行了很多年，但设计形式并没有随着使用年龄的增长而消失。芝加哥学派路易斯.H.沙利文提出：“形式跟随功能”可以解释这一点。最近，作者还在项目修订中使用了相关的卡片方法，发现效果很好，所以我希望通过项目中的思考和尝试，抛出介绍供您参考。

卡片设计的定义

在生活中，我们经常接触到各种类似右边图片的卡片，如扑克牌、名片、机场和地铁标志等。

如上图所示，它们一般具有以下特点：

一清晰直观，二简单易懂，三信息模块化。

例如，我们可以看到，虽然扑克牌只有一个图案和一组文本，但它清楚地传达了卡片所代表的含义；例如，机场和地铁的标志使用图标和字体元素，清晰直观地指导乘客的方向。这种由文本或图案组成的方形风格称为“卡片设计”。这种轻盈简洁的物理设计也被慢慢地应用到虚拟设计中。

如上图所示，卡片设计的应用场景非常广泛，最具代表性的是微软Win8、Win Phone 7.metro风格，他们也采用了大量的卡片设计，据说这种metro的设计灵感也来自机场、地铁标志。

此外，google +、 google 许多谷歌产品，如play，也采用了这种设计，如下图所示

正是由于卡片设计广泛应用于微软和谷歌的产品界面，许多互联网公司也采用了这种设计，应用于PC界面，内容部分也采用了卡片设计，如下图所示：

在下图中的移动终端界面中，模块中的点击部分也采用了卡片风格。

这是印刷杂志界面，如下图所示，杂志中的一些信息也采用了这种卡片风格。

卡片设计的优点

1. 增强点击感

这是诺基亚手机的win phone系统(下图)，系统桌面的所有内容都是小方块显示，类似于块按钮，让人想起可以点击的操作入口:

而且每个入口都有区域大小(下图)，避免误点击。

2. 排版整齐

DNSPod管理控制台概览页

总结

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