「卡片式设计」知识点

卡片式设计对于我们来说并不陌生，从设计类网站上或市场上的一些 APP 中也会看到很多的卡片式设计的案例，卡片式设计也是 UI 设计中最常用的方式之一。

来源于日常

在现实生活中的卡片式设计可以说是无处不在，例如身份证、交通卡、银行卡、名片、便利贴、扑克牌、游戏卡……诸如此类的生活常见品都是以卡片的方式存在，其共同点都使用一个容器承载着内容，并且具有「便携性、信息简洁和相对独立性」。

UI设计中卡片的使用场景

1. Feed流

卡片式的 feed 流设计是一种非常常见的设计，早在前几年 Facebook、Google+ 等产品就使用了这一方式，Feed 流作为一种长内容的媒介，用户需要长时间的滑动看内容并筛选有效信息，卡片式设计很好的解决了内容与内容的区块分隔，让用户在长屏幕滑动中依旧可以很好的明确识别每一块的内容。

实际案例-淘宝微淘

瀑布流设计

瀑布流的出现让单屏区域内显示更多的内容，而内容较多的情况下，使用卡片式设计可以较好的对内容进行了区域划分，让上下左右的内容从整体中具有相对独立性。

实际案例-Pinterest

左右滑动组合型内容

卡片式设计具有较强的层次感，相比于平铺更能呈现内容可滑动的感受，并且块状化的设计让内容具有较高的区域分割感。

实际案例-QQ音乐

Tips提醒

作为非界面固定内容，卡片式设计可以让 tips 提醒设计变得更自由，在符合用户体验的基础上，它可以出现在任何我们想要它出现的位置。

实际案例-淘票票会员提醒

结合手势的单块可互动内容

若页面中有且只有一个主内容，并且需要用户进行快速筛选时，可考虑这种结合卡片式设计与手势设计的方式。大大增强了用户对于设计的体验感知和丰富视觉表现。

实际案例-探探首页

卡券类设计

卡券类的设计实际上是一种物化映射的过程，我们在现实中看到的卡券造型，结合卡片式的拟物化设计，让用户在屏幕上可以更直观的感知，提升了设计的代入感。

实际案例-京东领券中心

集合型功能入口

集合型功能入口往往会有多个入口，使用卡片式设计让入口形成一个区域整体，可以做到既统一又相对独立。

实际案例-淘宝微淘关注账号

个人主页顶部内容卡片

个人主页的设计往往会在氛围上营造沉浸感，卡片式的设计可以把关键信息进行概括收归，让原本单个的内容形成一个整体。

实际案例-美团外卖会员

规则探讨

基础的卡片设计规则，相信大家在一些系统级别的设计指导规范中也或多或少都能了解到，不同平台的规范差异其实不会有太多本质性的区别，更多的是处理技巧或方式的差异，而每个设计师对其理解的角度也会具有一些差异化，这里分享下我对于卡片式设计的一些基础想法。

卡片的质感打磨

同样的卡片设计，不同的人做出来的感受可能会有所差别，而表达卡片质感的主要关键点在于：卡片形体、投影深度、卡片颜色对比，我们需要了解这些基础知识点之后，再结合实际的 APP 风格进行设计。

卡片形体

就像图标的图形设计一样，不一样的形体也能表达出不一样的气质，因此在设计的时候我们需要依据整体的风格进行表达。异形卡片的设计，可以让原有方方正正的卡片表达出差异化，从造型上打破一些传统的处理方式，再结合一些 IP 人物元素可以更加直观的表达出具体的内容氛围。

投影深度

投影的视觉效果，会直接影响整体卡片的质感，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得过度生硬，因此合理的数值比例可以让卡片看起来自然有质感。在项目中我常用的一组数值规律是 1:2 或 1:3，例如 Y 轴偏移 10px，模糊度则设定为 20 或 30px，这样成比例的数值出来的效果会较为自然，如下图：

卡片颜色对比

卡片与背景的颜色对比会影响这卡片的整体质感，在设计时我们需要把握好卡片与底色的对比，不同的明暗对比出来的质感也会有差异。这里有两点建议：

卡片色与背景色不宜太过接近或使用同一颜色，因为会影响卡片整体的空间质感或使得卡片的边缘锐度下降；
深色背景上，尽量让卡片与背景色在同一色系或者明度不要差异太大，避免过于突兀。

边距的设定

在使用卡片式设计时，经常会纠结边距的设定，宽边还是窄边？多少像素更为合适？我经常会带着这种疑问去设计。

基于内容的简单规则

卡片式设计作为设计的表现形式，最终是为了承载内容，因此边距的宽窄也需要依赖于实际内容的判断。结合我在项目中的尝试分享以下几点：

多窄少宽

卡片内容较多是使用窄边距，让卡片具有足够的空间来展现内容，内容较少则可以考虑采用宽边距来打造整体的视觉空间感，如下图 app store 和淘宝的设计对比。当然这只是一个建议，实际还得具体问题具体分析。

再如一些瀑布流、宫格、横滑模块较多的 APP 设计亦是如此，在内容较多的情况下会把边距压缩到最小的合理间距。

内外成比例

以最外边为基础值往里设计，间距以固定比例进行缩减，虽然没有删格来得规范，但也可以让设计变得有迹可循。

基于删格

删格系统解决了一些基础的板式问题，有助于提升设计的规范性，让设计更加有迹可循。在设定卡片式的边距时可以适当应用删格系统，让边距与内容形成固定的关系，这样可以帮助整体的卡片设计更加具有细节和规则。

卡片的标题设定

标题的设定主要考虑以下几点：1.是在卡片内还是卡片外；2.标题的字号设定多少更合适；3.标题是否加粗？

卡片内或外的对比

在项目设计中让我较为纠结的是：标题应该在卡片内还是卡片外？通过了一些案例的尝试之后，我总结了一个规则（需要依据内容的形态而进行设计）：当卡片内容是独立的模块或模块中只有一个大标题时可设定在卡片内；当卡片内容是以组合呈现或者具有延续性内容时设定在卡片外，形成最外层的主标题。

标题的字号设定

标题主要作用为 2 点：1.简短说明每个模块的内容；2.让用户在长页面浏览中起到引导、定位的作用。

通过一些尝试发现：1.当内容较少时，并不需要太大的字号即可起到标题的作用；2.当内容较多时，较小的标题字号则容易被沉入内容中，让用户在浏览的过程中难以发现，而导致信息获取缺失；3.建议标题与正文字号大小差异在 6-10px，这样可以更好的拉开差异，让标题更具有标题感。

字体是否加粗

常规思维下我们都会对标题进行加粗，我在实际中的经验得到的总结是：需要看手机系统或不同厂商的机型。我在项目之初都对标题进行了加粗，但后续在跟进还原时看到的效果并不理想，特别是 Android 的机型上，因为我们使用的是系统默认字体，android 系统很多字体并未对系统进行优化，而是使用微软雅黑，微软雅黑在android 系统上再加粗，就会显得整个系统的外轮廓特别粗糙，最后我们依据不同的机型进行了差异化的选择。