想做卡片式设计，花瓣不在了该上哪里找参考？

卡片式设计凭借其简单方便又充满逻辑的特性，如今深受移动端UI设计师的欢迎。

作为承载信息的“容器”，卡片式设计能够包含文本、媒体和按钮等元素，而且能够适应不同设备、屏幕尺寸，平衡用户界面和用户体验之间的关系。

1

什么是卡片式设计？

现如今，我们浏览各个设计网站时，80%的网站设计都是卡片式风格。卡片式设计长什么样呢？来看一组图：

▲ 网站设计

▲ UI 交互

简单来说，卡片式设计就是将“卡片”置于一个图片或形状背景上，通常会给卡片添加阴影，使页面有立体效果。

复杂来说，卡片式设计是我们在各个网站/APP中常常见到的承载着图片、文字等内容的矩形区块，它是交互信息的承载体，通常以直角矩形或圆角矩形的方式呈现。

2

卡片式设计的优点

增加空间利用率

传统的列表样式，需要我们不断往下滚动才能看到更多内容，而且显示的内容有限。但用卡片式布局，即使是瀑布流，通过水平滑动也能显示更多内容。

提高可操作性

卡片不仅仅是能够展示信息，同时卡片式设计还具有可以被覆盖、折叠、移动和滑动的特点。如此一来，更有利于扩展内容的视觉深度和可操作性了。

像是iPhone的通知中心，就是使用堆叠的卡片式设计，同类型的消息会被折叠起来，可以帮助用户迅速找到自己想要的东西，只需要点击就能打开，或者通过滑动删除。

方便信息集成

卡片式设计，除了能尽可能展现信息以外，其实还具有“逻辑”，即使我们超快速浏览页面，也不会因信息多而感到混乱。卡片式设计将界面用块状分割开来，让页面更加整洁、赏心悦目。一个页面中各种卡片大小不一，信息的层次结构立马就被区分开来了。

个性化的用户体验

比起传统的UI设计，卡片式UI相对简单直观，最大的优势是它让整个界面更加清晰、平衡和简洁，同时又没有影响App的功能。

3

优秀的卡片式设计

Google Play

Google Play是一个很好的例子，整个网站的色调都遵循着Google的风格。卡片式设计在网站里随处可见，模块化让整个网站看起来井井有条。

Quora

作为一个内容网站，Quora用卡片式设计解决了如何在有限的布局内平衡显示内容和用户体验。用卡片将信息组合成每个小模块，便于用户阅读。

Linkedin

点击目标越大，用户的操作越快，Linkedin展示内容的格式就是文本、图片、链接，当一张卡片都具备这些元素的时候，中心的图片就成为了整个卡片上最大的可点击区域。

Pinterest

作为卡片式设计的先驱，Pinterest的瀑布流页面设计为用户提供了一种流畅无缝的浏览体验。尽可能减少点击次数，很大程度上留住了用户。跟Linkedin，Pinterest的每个图片都是可以点击的，在鼠标停留在页面图片的时候，图片就会有微妙的阴影、颜色变化，引导用户点击。

Dribbble

经验表明，图片能够快速吸引用户的注意力。由于每天都有很多设计师上传自己的创意，Dribbble选择了使用卡片式设计来展现每个作品。

Instagram

Instagram里面所有图像都是以正方形发布的，这样可以将瀑布流布局中的图像宽度标准化。

Trello

Trello运用卡片式UI将内容分类，优化了用户管理任务和工作的方式。

Airbnb

Airbnb一直专注于用视觉效果来吸引用户，卡片式设计简单直观，有利于改善用户体验和区分每个内容。Airbnb还采用无框设计，将统一和重复的信息相结合，内容显示有一个标准的模式展现。

除了这些例子，Dribbble上还有很多优秀的卡片式UI供我们参考学习。

Maciej Dyjak

Faria

Masudur Rahman

Uber Design

Jack W.

卡片式的UI设计，不仅仅是页面上的控件，它还是创建高质量内容和提供好的用户体验的重要布局元素。上面的例子展示了卡片式设计的最佳实践，最为当下UI设计的常态风格，所以还在等什么？快快掌握起来吧~