想做卡片式设计，花瓣不在了该上哪里找参考？
卡片式设计凭借其简单方便又充满逻辑的特性，如今深受移动端UI设计师的欢迎。
作为承载信息的“容器”，卡片式设计能够包含文本、媒体和按钮等元素，而且能够适应不同设备、屏幕尺寸，平衡用户界面和用户体验之间的关系。
1
什么是卡片式设计？
现如今，我们浏览各个设计网站时，80%的网站设计都是卡片式风格。卡片式设计长什么样呢？来看一组图：
▲ 网站设计
▲ UI 交互
简单来说，卡片式设计就是将“卡片”置于一个图片或形状背景上，通常会给卡片添加阴影，使页面有立体效果。
复杂来说，卡片式设计是我们在各个网站/APP中常常见到的承载着图片、文字等内容的矩形区块，它是交互信息的承载体，通常以直角矩形或圆角矩形的方式呈现。
2
卡片式设计的优点
增加空间利用率
传统的列表样式，需要我们不断往下滚动才能看到更多内容，而且显示的内容有限。但用卡片式布局，即使是瀑布流，通过水平滑动也能显示更多内容。
提高可操作性
卡片不仅仅是能够展示信息，同时卡片式设计还具有可以被覆盖、折叠、移动和滑动的特点。如此一来，更有利于扩展内容的视觉深度和可操作性了。
像是iPhone的通知中心，就是使用堆叠的卡片式设计，同类型的消息会被折叠起来，可以帮助用户迅速找到自己想要的东西，只需要点击就能打开，或者通过滑动删除。
方便信息集成
卡片式设计，除了能尽可能展现信息以外，其实还具有“逻辑”，即使我们超快速浏览页面，也不会因信息多而感到混乱。卡片式设计将界面用块状分割开来，让页面更加整洁、赏心悦目。一个页面中各种卡片大小不一，信息的层次结构立马就被区分开来了。
个性化的用户体验
比起传统的UI设计，卡片式UI相对简单直观，最大的优势是它让整个界面更加清晰、平衡和简洁，同时又没有影响App的功能。
3
优秀的卡片式设计
Google Play
Google Play是一个很好的例子，整个网站的色调都遵循着Google的风格。卡片式设计在网站里随处可见，模块化让整个网站看起来井井有条。
Quora
作为一个内容网站，Quora用卡片式设计解决了如何在有限的布局内平衡显示内容和用户体验。用卡片将信息组合成每个小模块，便于用户阅读。
点击目标越大，用户的操作越快，Linkedin展示内容的格式就是文本、图片、链接，当一张卡片都具备这些元素的时候，中心的图片就成为了整个卡片上最大的可点击区域。
作为卡片式设计的先驱，Pinterest的瀑布流页面设计为用户提供了一种流畅无缝的浏览体验。尽可能减少点击次数，很大程度上留住了用户。跟Linkedin，Pinterest的每个图片都是可以点击的，在鼠标停留在页面图片的时候，图片就会有微妙的阴影、颜色变化，引导用户点击。
Dribbble
经验表明，图片能够快速吸引用户的注意力。由于每天都有很多设计师上传自己的创意，Dribbble选择了使用卡片式设计来展现每个作品。
Instagram里面所有图像都是以正方形发布的，这样可以将瀑布流布局中的图像宽度标准化。
Trello
Trello运用卡片式UI将内容分类，优化了用户管理任务和工作的方式。
Airbnb
Airbnb一直专注于用视觉效果来吸引用户，卡片式设计简单直观，有利于改善用户体验和区分每个内容。Airbnb还采用无框设计，将统一和重复的信息相结合，内容显示有一个标准的模式展现。
除了这些例子，Dribbble上还有很多优秀的卡片式UI供我们参考学习。
Maciej Dyjak
Faria
Masudur Rahman
Uber Design
Jack W.
卡片式的UI设计，不仅仅是页面上的控件，它还是创建高质量内容和提供好的用户体验的重要布局元素。上面的例子展示了卡片式设计的最佳实践，最为当下UI设计的常态风格，所以还在等什么？快快掌握起来吧~