Date 2026-01-22 23:25:27
在互联网公司中，Banner的运营往往是由不同的运营团队完成的，即使在一些跨国企业中，Banner的运营也是由不同国家的运营团队完成的。那么，如何确保每个人的输出运营Banner能够有效地输出并反映统一的设计语言，同时确保视觉冲击呢？即使是设计师也可以很容易地更换Banner组件吗？解决这个问题的最好方法是设计Banner组件库。Banner组件库的四个优点可以完美地解决上述问题。
根据个别设计师和各公司业务的不同需求，我将Banner组件库分为两类：
1. Banner组件库由设计师和设计团队操作：
该组件库面向的操作人员是设计师，只有设计师才有操作权限：
案例部分效果演示：
2. Banner组件库由非设计师操作：
这类组件库面向非设计师人员(运营、销售、子公司员工等)。)，是设计师根据运营需要专门设计的banner组件库。
当时我之所以做这个组件库，是因为妈妈和子公司经常有相同的模板设计界面更换，每次更换都需要设计师很多零碎的时间，所以我们只是直接设置组件库，让运营商自己更换，我们首先教母公司的主要运营流程，主要运营负责子公司的运营流程培训，节省运营商与设计师的沟通和修改过程，运营商可以直接输出成品，从而提高整个团队的生产力，也让设计师专注于设计创意和用户体验。
案例部分效果演示：
无论建立哪种类型的Banner组件库，如果你想设计它，你必须首先清楚地了解Banner的基本组成和设计原则，并从底层逻辑构建Banner组件库。我构建Banner组件库的想法主要基于以下四个知识点：
Banner级别拆分的主要目的是设置组件。我们可以定期将每个级别设置为可替代选项，并在Baner组件库中分为五个级别：
背景层：可替换背景颜色、背景风格复制层：可替换字体、颜色标签层：可替换标签、隐藏标签、标签颜色装饰层：可替换装饰元素、元素颜色产品图片：可替换显示图片或插图元素
案例：
在组件化的Banner设置中，我们可以用点、线、面来划分画面的整体层次。我们需要列出哪些层次是用点来表达的，哪些层次是用线或面来表达的，这不仅有利于组件库的快速建立，也有利于Bannner整体画面的视觉表达。
点、线、面相对存在，点可以成为画面中的线、面，线也可以成为画面中的点、面。
“点”越大，就越有可能成为“面”，“点”的规律性变化也可能成为“线”。
当“线”在画面上显得短小时，就可以看作是“点”，当“线”粗化到一定程度时，就会看作是“面”。
当“面”变得不封闭时，就会变成“线”。当“面”在画面中的比例缩小时，我们可以把它看作是“点”。
当我们设计相同的元素时，我们应该提前总结层次的点、线和表面，以免在设计相同的元素时出现混乱。层次和点、线表面的传统关系图如下（这种传统的组合关系有利于组件库的建立）：
需要注意的是，Banner组件库中的点缀层和标签层并不一定存在于Banner中。
Banner的布局复杂多样，我们的组件库想要轻量化，所以更适合以下三种常规布局，如下:
构件库的建立必须遵循五个原则：对齐、统一、对比、留白、结构平衡。
对齐
Banner的内容应该有一个对齐的标准，特别是在文案层面。每个元素都有自己的位置。只有有序，我们才能感到舒适。常见的对齐方法包括左对齐、右对齐和中对齐。建议只使用一个板式对齐齐法。一个小小的Banner布局，如果使用多种对齐，实际上这些信息在用户眼中是分散的，增加了认知成本。
统一
字体和字体颜色最好不超过两种，内容元素的设计风格也必须一致，过多容易导致内容混乱，干扰过强。
对比
了解各种信息的权重大小，加强重要信息的显示，弱化次要信息。
留白
为Banner留出一定的空间，让Banner有更多的呼吸感，这样更容易关注重要的信息。
降噪原则
不要在Banner设计中使用太多的字体、颜色或太复杂的图形。这种持续的“乘法”行为实际上是在增加用户认知的“噪音”。
字体使用规范
在使用字体时，要确定字体的类型和大小。
颜色使用规范
为了保证Banner的强适应性，我们可以不规定准确的颜色，而不是使用颜色亮度的范围。（颜色规格仅限于主色调，不包括特殊颜色：如标签、装饰元素）
版式说明
布局的整体尺寸、元素间距、排版、字数限制。
设计师应用的Banner组件库可以用Sketch或Figma制作。
如果只有一个人用于外包设计或公司设计师，建议使用Sketch；如果设计团队数量众多，建议使用Figma。让我在这里用Sketch向您解释生产过程。
步骤1：Banner中的元素根据层次和点线面设计
第二步:将各级元素组件化
在Sketch中，只需选择要组件的图层(或组)，点击按钮即可生成组件，如下图所示:
在组件级别中，我们需要注意从哪里开始，在哪里结束。例如，我做宠物Banner案例，第一层是Banner风格切换，然后是风格中的层次切换，不是所有的内部层组件，可能有更多的小组件切换，例如，在风格2中，我没有将装饰层合成组件切换，但分为三个组件切换，即使在三个切换中，你也可以设置它们的颜色切换，所有设置所以真正的组件结束，以下是我的组件级别图：
第三步：设计可替代组件
在完成元素组件化后，我们可以在组件库中添加更多可替换组件的样式，如下图所示：
设计完所有可替代组件后，即可使用。如果发现内容不够，可以再次添加到内部。以下是Banner风格1的切换效果显示:
Banner样式2的效果显示：
注意要点：
Banner组件库的内部层数不宜过多，应尽可能轻。组件库中的相同元素可以同时使用。例如，在不单独设置的情况下，可以使用样式1和样式2的副本部分。命名应清晰，级别应与“/”分开，以避免组件库内的回收混乱。由于SKetch的组件机制，应区分组件的尺寸。如果有相同尺寸的组件，请随意修改一个。（添加1px）如果您想快速获得组件，可以用组件面板代替左侧的图层面板，直接拖动内部组件。建立运营商应用的Banner组件库所需的软件是PS和Excel。
在设计这类组件库时，我们必须从操作人员的角度进行设计，这是最简单的。以下案例来自以前在老俱乐部制作的PS组件。
第一步：Banner中的元素根据层次和点线面进行设计
第二步:设计可替代元素组件
在设置之前，我们需要了解以下知识：
PS用于组件库中的图像变量属性。我们在Excel操作替换，而不是在PS中替换所有元素。如果有图片替换，图片将存储在与源文件相同的文件夹中。所有元素的显示和隐藏都可以设置。通过以上四点，我们可以知道，我们需要设计的元素只是背景图片，而其他元素可以通过变量实现效果。以下是四种不同颜色的背景替换图：
第三步：定义变量元素：
只是给需要变量的元素贴上标签，第四步怎么做变量？
定量步骤：选择要定量的图层-图像-变量-定义
注:PS会自动识别定量元素。如果是组，只有可见性选项(可见性选项意味着可显示和隐藏)；如果是图片，会有更多的像素替换(替换图片)；如果是文字，就会有文字替换(替换文字)
在定义时，为了避免操作错误，将名称定义为图层名称。定义完成后，按下“下一个”按钮，然后按下“确认”按钮，直到所有定义完成。本案例中的Banner共定义了六个元素，即商品图（像素替换）、商品名(文字替换)、原价(文字替换)、优惠价格(文字替换)、背景图(像素替换)特价标(可见性)
步骤4：制作Excel表格
我们所有的数据修改都是在Excel中进行的。Excel表格制作非常简单。第一排是定义的名称。我们只需要将刚刚定义的六个名称输入表格的第一排。
如上图所示，建议您添加更多的编号定义，并将编号定义的图层隐藏在PS中，以便在选择数据组时更直观。操作如下：
除第一排外，下面的排列都是输入定义，如果要改变商品名称的文字，可以在下面输入修改的文字；
如果要替换图像，请输入替换图像的名称和后缀，只支持png和jpg格式的图像，并且图像必须与源文件在一个文件夹中。
若要显示或隐藏某一元素，则可输入大写“TRUE”或“FALSE”。
填写表格信息后，最后一步是将表格存储为.CSV格式。(注意：.CSV文件必须与PS源文件和图片文件存在于同一文件夹中）
第五步：导入操作
当所有设置完成后，我们可以在PS中导入和切换不同的数据应用。
操作路径：图像-变量-数据组-导入数据组-选择数据-应用-确定
这五步之后，我们的Banner组件库顺利完成！
特别提醒：为避免操作错误，建议锁定PS内的所有图层。
第六步：培训操作人员
通过建立上述组件，操作人员只需添加Excel文件的子列表，并在PS选择中导出即可完成操作。操作人员可以将PS视为图片导出工具，并且可以非常容易地完成。（机械化过程）
考虑到操作人员可能无法理解设计逻辑，可能会出现操作错误或不知道如何操作，建议通过直播、视频文件、PDF文件和GIF文件引导操作人员操作。
直播优势：直播在线操作，不懂可以及时询问，可以让操作人员快速启动。文件优势：主要用于操作人员忘记操作或操作错误时的提醒。特别提醒：操作文件（PS源文件、背景图片、Excel表格）必须包含在操作人员文件中、字体包(PS中使用的字体)、操作提示文档(视频，PDF、GIF）以下是员工PDF操作步骤图：
Sketch组件库源文件：
PS、Excel组件库源文件：
下载链接：https://pan.baidu.com/s/1376TAJVr4V8sqiu9 提取码：e3li
喜欢可以点个小赞，拜拜～
注：文章部分图片来自网络，有些链接真的找不到，如果作者看到可以把作品链接放在评论里，谢谢。
阅读文章 >欢迎关注作者微信微信官方账号:「黑狮力」
什么是噪声插图？
阅读文章 >