卡片式设计_总结及实践记录

在互联网产品中，除了内容型外，一些功能型的产品信息内容也是相当巨大的，特别是管理控制系统，业务管理、功能操作、数据展示等。在信息量这么大的页面中除了重视内容质量外，形式功能的组织与呈现也是同等重要，对提高用户获取有效信息的效率有着非常大的帮助。形式功能的组织与呈现其实讲的是设计排版上的问题，当然对设计师排版功力也有相当的要求。这种排版优化的方法有很多种，我这里主要围绕卡片式设计的理论进行深入探讨，相信大家对卡片式设计已非常熟悉，虽然已流行了好多年，但是设计形式并不是随着使用年龄的增长而消失，芝加哥学派路易斯.H.沙利文提出过:”形式追随功能”就能说明这一点。正式引出今天的主题:”卡片式设计”。

卡片式设计的定义

在生活中，我们经常接触到各式各样的类似右图中的卡片，比如扑克牌、名片、机场和地铁的指示牌等等。

如上图，大家可以看出，他们普遍具有以下特点：一清晰直观，二简单易懂，三信息模块化。
比如扑克牌我们可以看出虽然只有一个图案，一组文字，但很清晰传达出这张牌所代表的含义；又比如机场和地铁的指示牌，采用了图标、字体元素，很清晰直观地引导乘客方向，这种由文字或图案组成的方块样式叫做“卡片式设计”。这种轻巧、简洁的实物设计也被慢慢应用到虚拟设计当中。

如上图，现在卡片式设计的应用场景非常广泛，最有代表性的是微软Win10的metro风格，他们也是采用了大量的卡片式设计，据说这种Metro的设计灵感也来自于机场、地铁指示牌。
很多谷歌产品也同样采用了这种设计，如下图：

卡片式设计的优点

1.增强点击感

微软当下主流的操作系统Win10，开始菜单的所有内容都是一个个小方块展示，类似一个块状类的按钮，让人联想到是可以点击的操作入口。

2.排版整齐

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

3.信息模块化

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

4.响应式设计

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

项目实践

13年春天在北京移动办理合约机买了一部Nokia，那时候Nokia与MicroSoft合作正是藐视一切的岁月。用着WinPhone系统感觉还挺棒的，因为主要就是用个邮箱、QQ、打个电话，还有微软日历。卡片式设计给我印象最深的就是直接。我是一个信息量不多的人，简单的推送就够用了。
报着总有一些人跟我一样”懒惰”的心态，我在”*省水情业务平台”项目里把卡片式设计理念用上了。在公司里内部过概要设计、详细设计的时候领导及其他同事们还是比较认可与喜欢的。多付出一些值了，后来客户开始使用来以后，给我们的反馈还不错。
在这个系统里通过卡片式的展现追求让80%的用户需求在20%的操作内完成。把这个系统内的一些典型画面分享一下，截图如下：

总结

在信息量大的页面中除了重视内容质量外，形式功能的组织与呈现也是同等重要，对提高用户获取有效信息的效率有着非常大的帮助，这时应用卡片式的设计方式是不错的选择。
感谢腾讯ISUX团队分享了卡片式设计的相关文章，让我想起了前几年在项目中引入卡片设计理念的时光。一转眼做软件项目十年了，经历了不少，总结下来的太少了，匆匆做项目知识不成体系，关键是自己偷懒不肯坚持花时间记录。