为什么要搭建Banner组件库在互联网公司中，运营banner往往是由不同的运营团队来完成的，甚至在一些跨国公司中，运营banner也是由来自不同国家的运营团队来完成的。那么如何保证你输出的运营banner在保证视觉冲击力的情况下能够高效输出体现统一的设计语言呢？没有设计师也能轻松替换Banner组件吗？解决这个问题最好的方法就是设计Banner组件库。Banner组件库的四大优势可以完美解决以上问题。Banner组件库的分类根据设计师个人和各公司业务的不同需求，我将Banner组件库分为两类：1.设计师和设计团队运营的Banner组件库：这类运营的Banner组件库组件库面向人群是设计师，只有设计师才有操作权：案例部分效果演示：2.非设计师运营的Banner组件库：该类组件库针对的是非设计师人员（运营、销售、分公司员工等），是设计师根据运营需要制作的Banner组件库。之所以做这个组件库是因为母公司和子公司经常有相同的模板设计界面更换，而每次更换都占用设计师很多时间，所以干脆直接搭建Banner组件库，让操作人员自行更换。我们先教授母公司的主要操作流程，然后负责子公司的操作流程培训。本套省去了运营人员与设计人员的沟通修改过程。成品可直接输出，提高整个团队的工作效率，让设计师专注于设计创意和用户体验。案例局部效果演示：Banner组件库的四大关键知识点无论是要搭建什么样的Banner组件库，要想设计好，首先必须清楚的了解Banner组件库的基本构成和设计原则Banner，从底层逻辑出发构建Banner组件库，我构建Banner组件库的思路主要基于以下四个知识点：1.Banner层级拆分Banner层级拆分的主要目的是为了设置组件，我们可以通过层级拆分进行规则设置，将每个层级设置为一个可替换的选项，在Banner组件库中可以分为5个层级：背景层：可替换的背景颜色、背景样式文案层：可替换的字体、颜色标签层：可替换标签，显示隐藏标签，标签颜色修饰层：可替换修饰元素，元素颜色产品图片：可替换显示图片当然，也可以用插画元素代替案例：2.组件化Banner设置中Banner中点、线、面的合理使用，我们可以用点、线、面来划分画面的整体层次。我们需要列出哪些层次是用点表示的，哪些层次是用线或面表示的。这不仅有利于组件库的快速建立，也有利于Banner整体画面的可视化表达。点、线、面是相对存在的。点在画面中可能变成线和面，线也可能在画面中变成点和面。“点”越大，可能变成“面”，“点”的规律变化也可能变成“线”。当“线”在屏幕上显得很短时，就可以看成是一个“点”，而当“线”粗到一定程度时，我们就把它看成是一个“面”。当“面”变得不闭合时，它就会变成“线”，而当“面”在画面中的比例缩小时，我们就可以把它看成是“点”。我们在组装Banner的时候，一定要提前总结出层级的点、线、面，这样在设计同一个元素的时候就不会出现混淆的情况。组件库）：需要注意的是，Banner组件库中的点缀层和标签层不一定存在于Banner中。3、Banner组件库的常用格式Banner的排版复杂多样，而我们的组件库又想做到轻量级，所以比较适合以下三种常规格式，具体如下：4、五个原则Banner设计组件库的建立必须遵循Banner的五项设计原则：对齐、统一、对比、留白、结构平衡。对齐Banner的内容必须有一个对齐标准，尤其是在文案层面。每个元素都有自己的位置，必须有序才能有舒适感。常见的对齐方式有左对齐、右对齐和居中对齐。建议一块面板只使用一种走线方式。对于一个小的banner布局，如果采用多种对齐方式，实际上是信息分散在用户眼中，增加了认知成本。统一的字体和字体颜色最好不要超过两种，内容元素的设计风格也要保持一致。过多容易导致内容杂乱，干扰过多。比较了解每条信息的权重，重要信息可以加强，次要信息可以弱化。给banner留出一定的空间，让banner呼吸得更多，也更容易聚焦重要信息。降噪原则Banner设计中不要使用过多的字体、颜色或过于复杂的图形。这种“倍增”的行为，其实是在增加用户感知的“噪音”。元器件库制作流程及案例展示1、制作前提：设计规范（字体/颜色/格式说明）字体使用规范在字体的使用中，我们需要确定字体类型和字体大小。色彩使用规范为保证横幅具有很强的适应性，我们不能指定精确的颜色，而是使用颜色明度的范围。（颜色规范仅限于主色，不包括特殊颜色：如标签、点缀元素。）版面说明规定了版面的整体尺寸、元素间距、排版、字数限制。2、设计师应用版的制作流程：设计师应用的Banner组件库可以用Sketch或者Figma制作。如果用于外包设计或者公司只有一名设计师，那么推荐使用Sketch进行制作；如果设计团队人数较多，那么推荐使用Figma。我将使用Sketch向您解释制作过程。第一步：按照层级和点、线、面设计Banner中的元素。第二步：在Sketch中将各个关卡的元素进行组件化。只需选中你要组件化的层（或组），点击按钮即可立即生成组件，如下图所示：在组件层面，我们需要注意它从哪里开始，从哪里结束。比如我做的宠物Banner案例，第一层是Banner样式开关，然后是样式中的图层开关。它不会在所有内层组装完成后结束。该层中可能有更多的小部件。切换，比如样式2，我没有把修饰层合并成一个组件切换，而是分成了三个组件切换，甚至在三个切换里面，还可以设置它们的颜色切换，这才是真正的所有设置完成后。组件结束，下面是我的组件的层次图：第三步：设计可替换组件完成元素的组件化后，我们就可以在组件库中添加更多样式的可替换组件了。添加方法如下：当可替换的组件全部设计好后，就可以使用了。如果发现内容不够，可以在里面重新添加。下面是Banner样式1的切换效果展示：Banner样式2的效果展示：注意事项：Banner组件库的内部图层数量不要太多，尽量轻。组件库中的相同元素可以同时使用。比如风格一和风格二的文案部分可以使用一个组件，不需要单独设置。命名要清晰，层级之间用“/”分隔，避免组件库内部调用混乱。由于Sketch的组件机制，组件的大小应该有所区分。如果有相同尺寸的组件，请任意修改一个。（增加1px）如果想快速获取组件，可以将左侧的图层面板换成组件面板，直接拖拽拾取内部组件即可。3、运营人员应用版制作流程：PS和Excel是建立运营人员应用Banner组件库所需要的软件。在设计这种元件库的时候，一定要站在操作者的角度来设计，最简单的，下面这个案例来自于老公司做的PS元件。第一步：按照层级和点、线、面设计Banner中的元素第二步：设计可替换元素组件设置前我们需要了解以下几点：PS组件库使用image-variable属性。我们不替换PS里面的所有元素，而是在Excel里面操作替换。如果有图片替换，图片将保存在与源文件相同的文件夹中。所有元素都可以显示和隐藏。通过以上4点我们可以知道，我们需要设计的元素只是背景图片，其他元素可以通过变量实现效果。以下是设计的4张不同颜色的背景替换图：第三步：根据需要定义变量元素标记变量的元素，如何量化变量第四步：选择要量化的层-图像-变量-定义注：PS会自动识别量化元素，如果是组，则只有visibility选项（visible属性选项表示可以显示或隐藏）；如果是图片，会有额外的pixelreplacement（替换图片）；如果是文本，就会有文本替换（replacementtext）。为避免定义时出现操作错误，定义名称为Layername，一个定义完成后按“Next”按钮，直到所有定义完成后按“Confirm”按钮。案例中的Banner一共定义了6个元素，分别是商品图片（像素替换）、商品名称（文字替换）、原价（文字替换）、优惠价（文字替换）、特价（可见度）、背景image(pixelreplacement)第四步：制作Excel表格我们所有的数据修改都是在Excel中进行的，Excel表格的制作很简单，第一行是定义的名字，我们只需要输入刚刚定义的6个名字即可进入表格的第一行。如上图所示，建议您添加额外的号码定义。隐藏PS中数字定义的图层即可。目的是让数据组的选择更加直观。操作如下：除第一行外，以下排列均为输入定义。,如果要更改产品名称的文字，可以在下方输入修改后的文字；如果要替换图片，必须输入替换图片的名称和后缀。仅支持png和jpg格式的图片，且图片必须与源文件在同一个文件中。文件夹。如果要显示或隐藏某个元素，可以输入大写的“TRUE”或“FALSE”。当所有的表格信息都填写好后，最后一步就是将表格保存为.csv格式。（注意：.csv文件必须与PS源文件和图片文件在同一文件夹下）第五步：导入操作所有设置完成后，我们就可以在PS中导入和切换不同的数据应用了。操作路径：图片-变量-数据组-导入数据组-选择数据-应用-确认这五个步骤，我们的Banner组件库就圆满完成了！特别提醒：为避免操作失误，建议锁定PS内的所有图层。第六步：培训操作人员通过以上组件建立，操作人员只需添加Excel文件的子列表，并在PS中选择导出即可完成操作，让操作人员将PS当做图片导出工具，可以很容易的完成。（机械化过程）考虑到操作人员可能无法理解设计逻辑，很可能会出现操作错误或不知道如何操作，所以建议通过直播、视频文件、PDF等方式对操作人员进行指导文件和GIF文件。直播优势：在线直播操作，有不懂的地方可以及时提问，让运营者快速上手。文件优势：主要用于提醒操作者忘记操作或操作错误。特别提醒：给操作人员的文件必须包括：操作文件（PS源文件、背景图片、Excel表格）、字体包（PS中使用的字体）、操作提示文件（视频、PDF、GIF），以下是员工PDFs操作步骤图：案例源文件提取Sketch元件库源文件：PS、Excel元件库源文件：下载地址：https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA提取码：e3li
