花瓣不在的第三天，想它...想它...想它...

卡片式设计（Card Design）作为2018年UI设计的大趋势之一，已经深深植根于互联网世界当中。

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

什么是卡片式设计？

就像是名片一样，一个小小的矩形，里面有图片和文字，卡片式设计能够作为用户获取信息的切入点，既美观又不失可用性。由于卡片式设计能够显示包含不同的元素内容，也易于使用，所以现在不少界面默认选择用卡片式设计。

卡片式设计的优点？

增加空间利用率

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

提高可操作性

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

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

方便信息集成

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

个性化的用户体验

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

优秀的卡片式设计

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供我们参考学习。

卡片式的UI设计，不仅仅是页面上的控件，它还是创建高质量内容和提供好的用户体验的重要布局元素。上面的例子展示了卡片式设计的最佳实践，最为当下UI设计的常态风格，再不掌握连跳槽的资格都没有啊( ´▽｀)

汇包装，一站解决产品包装定制需求，18年经验/包装盒定制厂家，一分钟就给到您产品的包装预算，万款案例让您快速做出决策，最快看到样品及量产所需时间，让您产品销量开始暴增！