思考总结：谈谈卡片式设计

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

（2）投影深度

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

（3）卡片颜色对比

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

这里有两点建议：

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

2. 边距的设定

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

（1）基于内容的简单规则

卡片式设计作为设计的表现形式，最终是为了承载内容，因此边距的宽窄也需要依赖于实际内容的判断。

结合我在项目中的尝试分享以下几点：

a. 多窄少宽

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

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

b. 内外成比例

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

c. 基于删格

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

3. 卡片的标题设定

标题的设定主要考虑以下几点：

1. 是在卡片内还是卡片外；
2. 标题的字号设定多少更合适；
3. 标题是否加粗？

卡片内或外的对比

在项目设计中让我较为纠结的是：标题应该在卡片内还是卡片外？

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

标题的字号设定

标题主要作用为2点：

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

通过一些尝试发现：

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

字体是否加粗

常规思维下我们都会对标题进行加粗，我在实际中的经验得到的总结是：需要看手机系统或不同厂商的机型。

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!