超多案例！电商设计的4种常用字效

当字体设计时，我们会给字体增加适当的效果，如果字体设计是创造性的，字体效果是美化，对于更追求促销和氛围的电力设计，有时字体效果比字体设计更重要，通过添加适当的效果可以使字体更美观和吸引力，但也更有利于信息和情感交流，简而言之，是锦上添花的重要手段。注意字体效果应遵循“一致性”的原则：即字体效果呈现的气质应与整体风格一致。只有这样，我们才能发挥字体效果的真正作用，否则就会适得其反，图片就会显得不连贯。

对于电子商务视觉来说，字体效果广泛应用于各种活动页面。由于字体效果风格丰富，对整体画面和氛围的影响非常明显，有时甚至超过字体本身。因此，对于字体设计能力薄弱的设计师来说，使字体效果好看往往可以弥补字体的普通性。俗话说，“字体不够，字体效果可以收集”。关于字体效果，这里总结一下 4 常用手法。

立体

通过三维赋予字体三维属性，使其具有空间感，使文本更具分量和冲击力。常见的三维形式有 2 种类：直接立体和透视立体，实现立体效果的方法有“合成”和“三维”。

1. 直接立体

如上图所示，直接立体分为“加厚”和“凸起”两个方向。

加厚

直接将字体设计成厚度立体字，使文字饱满突出，形成强烈的冲击感，特别适合促销主题。“加厚”很难开始。如果你表现出现实的风格，那就更难了。你需要熟能生巧。然而，立体词也很容易产生效果。在强调信息的同时，画面设计感还不错。

因为三维文字本身有很强的装饰性，只要放大就可以成为主要的视觉。如下图所示，三维标题是图片的核心部分，然后在文本周围添加一些装饰元素，使视觉非常丰富。

凸起

这意味着将字体调整为轻微凸起的样式，这有点类似于“浮雕”。“凸起”没有“厚度”效果那么明显。主要原因是让文本有更多的细节，看起来不那么单调，但总的来说，“凸起”效果有点平庸，使用相对较少。

2. 透视立体

一种非常有趣的三维形式，“直接三维”是根据自己的结构和布局直接三维字体；“透视三维”是三维的，同时应与空间透视保持一致，以便整合场景，使图片更具引入性。当然，前提是图片应该有相应的场景塑造。

此外，字体有时可以直接透视变形而不设置厚度，如下图所示。

边框

在字体周围加一个边框，使文字更加突出和充满活力。传统上有“描边”和“加框”2 种思路。

1. 描边

“描边”可以说无处不在，这是一种非常经典的处理方法，可以丰富字体细节，提高信息关注度，但使用不当也会出现 “传统”的核心是掌握边缘的厚度和颜色匹配，如下图所示，无论是厚度还是颜色匹配，都应与图片的主视觉协调和统一，不能有一种不和谐的感觉。当然，边缘可以超过一层，有时可以使用多层边缘来加强单词效果（左）。

2. 加框

通过底框，文本可以有更多的“表面”。这个“表面”将文本图形化，成为图片中相对独立的视觉元素，更有利于内容的突出和视觉冲击。但是，框架会覆盖图片的一部分内容，使空间不那么透气。因此，我们应该注意元素的分布，尽量不要与框架发生冲突。根据不同的表达形式，框架分为“图形”和“拟合”两类。

图形

如下图所示，图形底框可以使文本布局更加规则。至于图形的外观，它可以是几何规则图形（左一）；也可以是围绕文字的不规则图形(左二左三)。

拟物

“拟物”适用于场景塑造的图片。请注意，拟物后的底框必须与场景氛围相呼应。例如，在下面的所有案例中，拟物可以在每个场景中合理存在。

阴影

根据添加位置的不同，通过添加阴影，字体呈现出前后层次感 3 形式：文本叠加、笔画叠加和文本投影。其中，由于设计简单、形式感强、不选择风格等优点，文本叠加和笔画叠加经常用于各种主题。

1. 文字叠压

一般来说，在每个单词的连接处添加阴影，使单词呈现出一种前后层叠的感觉。如下图所示，“文本叠加”适用于各种风格，这种微妙的空间感可以使标题生动有趣。

使用“文字叠压”时要注意 2 点:1)标题的每一个字体都要靠近，这样前后叠加才会明显；2)因为阴影是深色的，标题要尽量选择浅色。只有明暗对比强，叠加效果才更真实。

笔画叠压

同样的折叠，只是为了在笔画上添加阴影，使笔画呈现出前后的层叠感，就像交织在一起，有点像“折纸”效果。如图所示，这种方法可以使标题引人注目，更多的细节，但不会太夸张。

“笔画叠压”是我常用的一种以字效形式，前面很多案例都用过这个招数，使用时也要注意 2 点:1)不是每个字体都要加阴影，而是有选择的部分要加，一般每个字都要加。 2-3 可以处理；2)标题颜色也尽量选择浅色。

3. 文字投影

“文本投影”的操作更简单，可以直接添加到文本中的“投影”，使文本和背景可以形成一个接一个的空间关系。但要注意投影的虚拟程度：文本越接近背景，文本离背景越远，具体取决于需要。“文本投影”一般适用于背景简单的图片，因为简单，投影将很明显，以下显示案例。

质感

赋予字体一定的纹理或形状，使文字富有纹理。根据纹理属性的不同，可分为“刷子”和“写实”。

1. 笔刷

用纹理笔刷处理字体，最后在各种材料上模拟各种笔触的状态。例如，下面的案例模拟了斑驳的单词（左一、左二）、涂鸦字(左三、左四)，这些纹理和笔触使字体充满个性，同时也促进了字义的情感传达。

一般来说，“模拟材料”的斑驳词相对容易，只需直接用笔刷刷字体；“模拟笔触”的涂鸦词很难。只有当笔触与字体笔法的方向完全一致时，才会有自然流畅的手写感。

2. 写实

将真实的纹理添加到字体中，同时模拟这种纹理的应有形式。例如，金属词首先需要描绘金属材料和光影，然后将字体设计成金属常见的硬形式，使塑造真实，如下图所示。

“写实”的质感有很多种，选择哪一种取决于页面的主题和风格，但无论哪一种都需要与场景氛围高度统一。

霓虹灯 气球 冰块

总结

关于字效的 4 这种技术通常是结合使用的。核心是根据图片风格找到最佳的组合方法。如下图所示，不同的技术组合可以使字体呈现出更丰富的视觉效果，但请记住，字体效果最终是为了提高视觉美感，更好地传达信息。不要为字体效果而使用字体效果，避免形式大于内容的“夸张”字体效果。

上:立体(直接立体)+边框(加框)+质感(写实) 立体(直接立体)+框架(加框)；下:阴影(笔画叠压)+质感(写实) 立体(透视立体)+边框(描述)

本文摘自《移动终端销售商品设计：适合手机屏幕的电子商务设计规则与实际应用（上下册）》。这本书是作者12年经验的沉淀。656页干货内容与22小时案例讲解视频相匹配，只教您有效设计移动终端可以销售商品