APP推广合作
联系“鸟哥笔记小乔”
两大类别Banner组件库的全面解析教程(内附源文件下载)
2020-12-21 11:48:15

公众号改推动机制了,以后可能收不到咱们的消息了,不想错过优质的免费资源分享,请点击左上角蓝字黑狮力,然后按下面步骤,设置星标就可以优先推送了,谢谢大家的支持。



一、为什么要建立Banner组件库

在互联网公司中,运营banner往往是由不同的运营团队去完成,甚至在一些跨国企业,运营banner是由不同国家的运营团队完成的。那么如何保证大家输出的运营banner在保证视觉冲击力的同时,还能高效输出以及体现统一的设计语言呢?甚至不用设计师也能轻松替换banner组件?想要解决这种难题的最好方法就是设计banner组件库,Banner组件库的四大优点能够完美解决以上的问题。


二、Banner组件库的类别

根据设计师个人及每个公司业务的不同需求,我一共把Banner组件库分为两大类别:

1、设计师及设计团队操作的Banner组件库:
这类组件库面向的操作人群是设计师,仅有设计师才对其有操作权限:


案例部分效果演示:


2、非设计师操作的Banner组件库:

这类组件库面向的操作人群是非设计师人员(运营、销售、子公司员工等),是设计师根据运营的需求特制的Banner组件库。


我当时制作这个组件库的原由是因为母、子公司经常都会有相同的模板化设计界面替换,而每次替换都需要花费设计师很多零碎的时间,所以我们干脆就直接设定好banner组件库,让运营人员自行替换,我们先教会母公司的主运营操作流程,主运营再去负责子公司的操作流程培训,这样一套下来省去了运营人员与设计师的沟通及修改过程,运营人员可直接输出成品,从而提升了整个团队的生产力,也让设计师专注于设计上的创意与用户体验。

案例部分效果演示:

三、banner组件库的四大知识要点

不管是建立哪一类别的banner组件库,想要设计好它,那么首先就要清楚的了解banner中的基本构成以及设计原则,从底层逻辑出发去构建banner组件库,我构建banner组件库的思路主要依据以下四大知识点:

1、Banner的层级拆分
Banner层级拆分的主要目的是为了组件的设定,我们通过层级拆分可以有规律的把每一个层级都设置为可替换选项,在banner组件库中可分为5个层级:
1-背景层:可替换背景颜色、背景样式
2-文案层:可替换字体、颜色
3-标签层:可替换标签、显示隐藏标签、标签颜色
4-点缀层:可替换点缀元素、元素颜色
5-产品配图:可替换显示图片、也可更换为插画元素


案例:


2、合理运用Banner中的点线面

在组件化的banner设定中,我们可以用点、线、面来划分画面的整体层面,我们要罗列出哪些层级是用点来表达,哪些层级是用线或面来表达,这样不仅有利于组件库的快速建立,也有利于banner整体画面的视觉表达。

点、线、面是相对存在的,点可能在画面中成为线、面,线也可能在画面中成为点、面。

“点”越大就可能会变成“面”,“点”发生规律性变化也可能成为“线”。


当“线”在画面上显得短小时,可以把它看成“点”,当把“线”加粗一定程度,那么我们就会把它看成“面”。


当“面”成为未封闭状态时就会成为“线”,当“面”在画面中的比例缩小时我们可以把它看成“点”。


我们在组件banner时要事先把层级的点线面归纳好,这样才不会在我们设计相同元素时出现杂乱的现象,层级与点线面的常规关系图如下(这样的常规组合关系有利于建立组件库):


需要注意的是在banner组件库中点缀层与标签层并非一定要存在与banner中。

3、Banner组件库常用版式
Banner的版式复杂多样,而我们的组件库想要达到轻量化,所以更适用于下面三种常规的版式,如下:


4Banner设计五大原则
组件库的建立必须遵循Banner设计五大原则:对齐、统一、对比、留白、结构平衡。

1-对齐
banner的内容都要有一个对齐的准则,特别是文案层面,每个元素都有自己应该处于的位置,要有秩序化,才有舒适感。常见的对齐方式有左对齐、右对齐、居中对齐,建议一个板式只使用其中一种对齐方式。一个小小的banner版面,如果使用了多种对齐方式,实际上在用户看来这些信息都是零散的,增加了认知成本。


2-统一
字体以及字体颜色最好不超过两种,内容元素设计风格也必须一致,太多容易导致内容杂乱,干扰过强。


3-对比
了解各项信息的权重大小,重要的信息要加强显示,次要信息可以弱化。


4-留白
要为banner留出一定空间,让banner多一些呼吸感,这样也更容易聚焦重要信息。


5-降噪原则
在banner设计中不要使用过多的字体、颜色或者过于复杂的图形,这种不断做“乘法”的行为,实际上是在增加用户认知的“噪音”。


四、组件库制作流程及案例展示


制作前提:设计规范(字体/颜色/版式说明)

1-字体使用规范
在字体的使用中,我们要确定字体类型以及字体的大小。


2-颜色使用规范
为了保证banner拥有较强的适应性,我们可以不规定精准颜色,用颜色明度的使用区间来代替。(颜色规范仅限于主色调,并不包含特殊用色:如标签、点缀元素)


3-版式说明
制定版式的整体尺寸、元素间距、排版、字数限制。


设计师应用版制作流程:


设计师应用的Banner组件库可以用Sketch制作,也可以用Figma制作。


如果是用于外包设计或公司设计师仅有一人,那么建议用Sketch制作;如果设计团队人数较多,那么建议用Figma,我这里就用SKetch给大家讲解一下制作流程。


第一步:

根据层级与点线面设计banner中的元素



第二步:

把每一层级的元素组件化


在Sketch中只用选择想要组件的图层(或组),点击按钮即可立即生成组件,如下图:



在组件层级时我们需要注意从哪里开始,到哪里结束。例如我做的这个宠物banner案例,第一层是banner样式切换,接着才是样式里面的层级切换,并不是把内部所有层级都组件完后就结束了,可能层级中还存在更多的小组件切换,比如在样式2中我没有把点缀层合成一个组件切换,而是分为三个组件切换,甚至在三个切换里你还可以设置它们的颜色切换,全部设置完后这样才算真正的组件结束,下面是我组件的层级图:


第三步:

设计可替换组件


在完成元素组件化后,我们就可以在组件库里添加更多可替换组件的样式,添加方式如下图:



当把可替换的组件全部设计完后就可以使用了,如果发现内容不够用还可以往内部再次添加,下面是banner样式1的切换效果展示:


banner样式2的效果展示:


注意要点:


1-Banner组件库的内部层数不宜过多,尽量轻量化。

2-组件库内部的相同元素可以同时使用,例如样式1与样式2的文案部分,都可以用一个组件,不用再单独设置。

3-命名要清晰,层级之间用“/”隔开,以免发生组件库内部的调取错乱。

4-因SKetch的组件机制,组件的尺寸大小要有区分,如果出现相同大小的组件请任意修改一个。(增加1px)

5-想要快速得到组件,可以把左侧的图层面板更换为组件面板,直接可拖取内部组件。



运营人员应用版制作流程:


运营人员应用的Banner组件库的建立需要用到的软件是PS与Excel。

在设计这类组件库时我们一定要多从操作人员的角度出发去设计,最简单化,下面案例来自于之前在老东家做的PS组件。


第一步:

根据层级与点线面设计banner中的元素



第二步:

设计可替换元素组件


在设定前我们需要了解以下几点知识:

1-PS做组件库用到的是图像-变量属性。

2-我们进行所有的元素替换都不在PS内部,而是在Excel操作替换,若有图片替换,图片则与源文件存在同一文件夹内。

3-可设置所有元素的显示和隐藏。


通过以上4点可以得知我们需要设计的元素仅仅只有背景图片,而其他元素可以通过变量来达到效果,下面是设计的4张不同颜色的背景替换图:



第三步:

定义变量元素(只是给需要变量的元素打标签,具体该如何变量在第四步)


定量步骤:选择想要定量的图层-图像-变量-定义

注:PS会自动识别定量元素,如果是组,那么只有可见性选项(可见性选项的意思就是可显示可隐藏);如果是图片,则会多出像素替换(替换图片);如果是文字则会有文字替换(替换文字


在定义时为了避免操作错误,定义名称就为图层名称,定义完成一个就按“下一个”按钮,直到全部定义完成再按“确认”按钮,案例中的banner一共定义了6个元素,分别为商品图(像素替换)、商品名(文字替换)、原价(文字替换)、优惠价(文字替换)、特价标(可见性)背景图(像素替换)



第四步:

制作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)


下面是员工PDF操作步骤图示:



五、案例源文件提取


Sketch组件库源文件:



PS、Excel组件库源文件:



设计交流  |  商务合作
添加微信:zhangmitian (需备注)

公众号       |     个人微信

如何获取源文件资料?
如果喜欢请“点赞”+“再看”,然后打开公众号黑狮力会话窗,回复发送  004,就能自动获取下载。
黑狮力
分享到朋友圈
收藏
收藏
评分

综合评分:

我的评分
Xinstall 15天会员特权
Xinstall是专业的数据分析服务商,帮企业追踪渠道安装来源、裂变拉新统计、广告流量指导等,广泛应用于广告效果统计、APP地推与CPS/CPA归属统计等方面。
20羽毛
立即兑换
一书一课30天会员体验卡
领30天VIP会员,110+门职场大课,250+本精读好书免费学!助你提升职场力!
20羽毛
立即兑换
顺丰同城急送全国通用20元优惠券
顺丰同城急送是顺丰推出的平均1小时送全城的即时快送服务,专业安全,准时送达!
30羽毛
立即兑换
黑狮力
黑狮力
发表文章30
发布干货:学习视频、文章
确认要消耗 羽毛购买
两大类别Banner组件库的全面解析教程(内附源文件下载)吗?
考虑一下
很遗憾,羽毛不足
我知道了

我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求,为完善跟帖评论自律管理,为了保护用户创造的内容、维护开放、真实、专业的平台氛围,我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容,同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。


一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规,对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息,主要表现为:
    1)反对宪法所确定的基本原则;
    2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一,损害国家荣誉和利益;
    3)侮辱、滥用英烈形象,歪曲、丑化、亵渎、否定英雄烈士事迹和精神,以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉;
    4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动;
    5)煽动民族仇恨、民族歧视,破坏民族团结;
    6)破坏国家宗教政策,宣扬邪教和封建迷信;
    7)散布谣言,扰乱社会秩序,破坏社会稳定;
    8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪;
    9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序;
    10)侮辱或者诽谤他人,侵害他人名誉、隐私和其他合法权益;
    11)通过网络以文字、图片、音视频等形式,对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的;
    12)危害未成年人身心健康的;
    13)含有法律、行政法规禁止的其他内容;


2. 不友善:不尊重用户及其所贡献内容的信息或行为。主要表现为:
    1)轻蔑:贬低、轻视他人及其劳动成果;
    2)诽谤:捏造、散布虚假事实,损害他人名誉;
    3)嘲讽:以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述,以此来激怒他人;
    4)挑衅:以不友好的方式激怒他人,意图使对方对自己的言论作出回应,蓄意制造事端;
    5)羞辱:贬低他人的能力、行为、生理或身份特征,让对方难堪;
    6)谩骂:以不文明的语言对他人进行负面评价;
    7)歧视:煽动人群歧视、地域歧视等,针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击;
    8)威胁:许诺以不良的后果来迫使他人服从自己的意志;


3. 发布垃圾广告信息:以推广曝光为目的,发布影响用户体验、扰乱本网站秩序的内容,或进行相关行为。主要表现为:
    1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式:
    2)单个帐号多次发布包含垃圾广告的内容;
    3)多个广告帐号互相配合发布、传播包含垃圾广告的内容;
    4)多次发布包含欺骗性外链的内容,如未注明的淘宝客链接、跳转网站等,诱骗用户点击链接
    5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光;
    6)购买或出售帐号之间虚假地互动,发布干扰网站秩序的推广内容及相关交易。
    7)发布包含欺骗性的恶意营销内容,如通过伪造经历、冒充他人等方式进行恶意营销;
    8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。


4. 色情低俗信息,主要表现为:
    1)包含自己或他人性经验的细节描述或露骨的感受描述;
    2)涉及色情段子、两性笑话的低俗内容;
    3)配图、头图中包含庸俗或挑逗性图片的内容;
    4)带有性暗示、性挑逗等易使人产生性联想;
    5)展现血腥、惊悚、残忍等致人身心不适;
    6)炒作绯闻、丑闻、劣迹等;
    7)宣扬低俗、庸俗、媚俗内容。


5. 不实信息,主要表现为:
    1)可能存在事实性错误或者造谣等内容;
    2)存在事实夸大、伪造虚假经历等误导他人的内容;
    3)伪造身份、冒充他人,通过头像、用户名等个人信息暗示自己具有特定身份,或与特定机构或个人存在关联。


6. 传播封建迷信,主要表现为:
    1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病;
    2)求推荐算命看相大师;
    3)针对具体风水等问题进行求助或咨询;
    4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失,包括通过占卜方法问婚姻、前程、运势,东西宠物丢了能不能找回、取名改名等;


7. 文章标题党,主要表现为:
    1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户;
    2)内容与标题之间存在严重不实或者原意扭曲;
    3)使用夸张标题,内容与标题严重不符的。


8.「饭圈」乱象行为,主要表现为:
    1)诱导未成年人应援集资、高额消费、投票打榜
    2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
    3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
    4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
    5)通过「蹭热点」、制造话题等形式干扰舆论,影响传播秩序


9. 其他危害行为或内容,主要表现为:
    1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的;
    2)不当评述自然灾害、重大事故等灾难的;
    3)美化、粉饰侵略战争行为的;
    4)法律、行政法规禁止,或可能对网络生态造成不良影响的其他内容。


二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时,本网站将依据相关用户违规情节严重程度,对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号,或者滥用多个帐号发布违规内容时,本网站将加重处罚。


三、申诉
随着平台管理经验的不断丰富,本网站出于维护本网站氛围和秩序的目的,将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议,可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)

我知道了
恭喜你~答对了
+5羽毛
下一次认真读哦
成功推荐给其他人
+ 10羽毛
评论成功且进入审核!审核通过后,您将获得10羽毛的奖励。分享本文章给好友阅读最高再得15羽毛~
(羽毛可至 "羽毛精选" 兑换礼品)
好友微信扫一扫
复制链接