浅谈UI设计中的卡片式设计

卡券类设计

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

实际案例-京东领券中心

集合型功能入口

集合型用途入口通常会有多个入口，使用卡片式设计让入口产生一个区域整体，可以做到既统一又相对独立。

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

个人主页顶部内容卡片

个人主页的设计通常会在气氛上塑造沉浸感，卡片式的设计可以把关键信息进行概括收归，让当时单个的内容产生一个整体。

实际案例-美团外卖会员

规则探讨

基础的卡片设计规则，相信你们在一些平台级别的设计指导规范中也或多或少都能知道到，不同系统的完善差异性似乎不会有很多本质性的差别，更多的是处理方法或形式的差别，而每位设计师对其理解的视角也会带有一些变化化，这里分享下我针对卡片式设计的一些基础构想。

1.卡片的质感打磨

同样的卡片设计，不同的人做起来的体会可能会有差异，而表达卡片质感的主要关键基础点在于：卡片形体、投影深度、卡片样式对比，我们必须知道这种基础知识点以后，再结合实际的APP风格进行设计。

卡片形体

就像图标的图形设计一样，不一样的形体也能表达出不一样的个性，因此在设计的之后我们必须根据整体的样式进行表达。异形卡片的设计，可以让原有方方正正的卡片表达出差异化，从外形上摆脱一些特色的处理方法，再结合一些IP人物元素可以非常深入的表达出具体的内容氛围。

投影深度

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

卡片颜色对比

卡片与背景的色调对比会影响这卡片的整体气质，在设计时我们必须掌握好卡片与颜色的对比，不同的浓淡对比起来的细腻也会有差别。这里有两点建议：1.卡片色与背景色不宜太过接近或使用同一形状，因为会妨碍卡片整体的空间质感或因而卡片的边缘锐度下降；2.深色背景上，尽量让卡片与背景色在同一色系以及色调不要变化太大，避免过度突兀。

2.边距的设置

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

基于内容的简单规则

卡片式设计成为设计的体现方式，最终是为了承载内容，因此边距的宽窄也必须依赖于实际内容的判定。结合我在项目中的尝试分享以下几点：

多窄少宽

卡片内容较多是使用窄边距，让卡片具有足够的空间来呈现内容，内容较少则可以考量采取宽宽度来构建整体的触觉空间感，如下图appstore和京东的设计对比。当然这并非一个建议，实际还得准确问题具体探讨。

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

内外成比例

以最里面为基础值往里设计，间距以固定比率进行扩大，虽然没有删格来得规范，但也可以让设计更加有迹可循。

基于栅格

栅格系统解决了一些基础的板式问题，有助于提高设计的完善性，让设计非常有迹可循。在设置卡片式的宽度时可以适度应用删格系统，让边距与内容产生固定的关系，这样可以帮助整体的卡片设计非常具有细节和规则。

4.卡片的标题设定

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

卡片内或外的对比

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

标题的字号设定

标题主要作用为2点：1.简短说明每个模块的内容；2.让客户在长页面浏览中起到引导、定位的作用。通过一些尝试看到：1.当内容较少时，并不应该太大的字号即可起到标题的作用；2.当内容众多时，较小的标题字号则容易被沉入内容中，让用户在浏览的过程中无法看到，而造成信息获得缺乏；3.标题必须与正文字号大小变化建议在6-10px，这样可以更好的拉开差异，让标题更带有标题感。

字体是否加粗

常规思维下我们就会对标题进行加粗，我在实际中的心得得到的小结是：需要看手机平台或不同厂家的机型。我在项目之初都对标题进行了加粗，但后续在跟进还原时发现的效果并不理想，特别是Android的机型上，因为我们使用的是平台默认图标，android系统诸多字体并未对平台进行改进，而是使用谷歌雅黑，微软雅黑在android系统上再加粗，就会变得整个系统的外轮廓非常粗糙，最后我们根据不同的机型进行了变化化的选择。

4.圆角的规则

圆角的设置实际上没有很多的方法问题，只要符合整体的色调调性即可。当然不同的圆角也能表达出不同的细腻，大圆角表达轻快、小圆角表达细腻。

圆角的规则设置

以卡片的圆角作为基础的参考值往内计算整体的圆角使用规范，卡片与卡内的元素产生合理的比重规则，而非轻易根据“经验”进行设置。

圆角大小差别对比

大小的差别化展现出不同的视觉体验和样式变化，我们在设计时更多必须考量我们设计的产品简约或个性是合适大圆角而是小圆角，而非根据一些设计网站上的流行趋势。因此基于不同的样式以及实际内容画面下进行设置才更为合理。

5.宽窄间距对比

卡片式设计相比拉通式设计更应该考量设计中的透气感。在常规的规则下，对内容边距及四周边距进行微调，让内容之间带有较多的空间呼吸感，从而让设计受到留白的效果。如右图对比案例，在基础删格不变的状况下，每个间距都在原有基础上缩减了12px（接近1.33倍），从而让内容带有较为时尚的长度进行阅读

优点分析

选取某一种设计方法的重点在于我们知道这些方法的特点，并且可以把这种特点融合到我们的设计当中。在项目设计中，我总结了几点卡片式设计的特点。

优化模块化，提升内容区域感

模块化的设计也有我们日常中会应用到的方式，结合卡片式的设计可以让组件化的规则变得非常简洁，增加了组件之间的可复用性和延展性。而当内容众多的状况下，使用卡片式设计可以有效直接的产生区域分割，从触觉感知上就对内容进行了分隔，提升客户获得信息的效益。

提升内容独立性

在组合型的内容设计上，使用卡片式设计可以让每位小块内容显现相对独立的凸显特性，结合模块化的设计，可以在一大片关联的内容中，做到既统一又相对独立。

增强视觉空间感

卡片式的设计可以提高整体设计层次感，通过投影、前后色彩的设置，让内容与背景之间形成视觉空间感。

增强视觉表现力

在设计中我们可以对卡片进行异形设计，用来达到我们想要的风格体现。当然在一个页面内务必不要很多，尽量使用页面中的首个卡片进行变化化处理，让整体体现出一点不同即可。

增强可点性

卡片式设计形成的空间感，让每个模块更加突显，相比扁平式的处理方法，卡片式从触觉感官上会较为突显，从感官上更具可点击感知。

缺点及建议

任何一种设计方法就会有其缘由，最终选择某一种似乎只是就是现今最合适而已，而在尝试中我也总结了几点卡片式设计存在的一些特点，当然也是个人的反思而已。

横向空间借助率增加

卡片式设计的存在左右边距，因此在有限的屏宽内内容横向区域相比于拉通式设计有所下降，在内容众多的状况下可以适度调小卡片左右边距。

避免过多的层级

从整体来说，卡片式的设计原本就是提高了基础背景的层级表现，其视觉层级相比拉通式更为丰富，因此不建议在卡片上再二次叠加块状式设计，避免引起层级复杂。在项目中也会遭遇内容层级应该多层级的体现，从中总结了2种方法：1.利用不拉通分割线；2.利用黑色背景颜色。

不适合长文或内容多的表达

若在设计上使用了卡片式的设计样式，但在一些长文体现的图标建议去掉卡片。长文章的页面更注重阅读的沉浸感，用户必须更多的专注于文字，这之后无边的感受更合适。

把握好界面的分区，避免过度拥挤的排版

卡片设计带有浓厚的触觉空间感，但卡片与卡片直接也会有分隔，因此在设计时更需要对内容进行归纳，避免造成过多的小块卡片而造成排版更加拥挤、凌乱或者内容不够宽度展现。

最后总结

无论是卡片式以及拉通平铺的方法，其最后的目的都是为了服务于内容，我们在做设计的过程中也是选择合适于展现我们内容的一种方法。根据详细的内容状况给出合理/合适的设计判断才是我们必须不断提高的关键点，切莫流于形式而忽视了内容设计原本的重要性。