為什么要建立Banner組件庫

在互聯(lián)網(wǎng)公司中，運(yùn)營Banner往往是由不同的運(yùn)營團(tuán)隊去完成，甚至在一些跨國企業(yè)，運(yùn)營Banner是由不同國家的運(yùn)營團(tuán)隊完成的。那么如何保證大家輸出的運(yùn)營Banner在保證視覺沖擊力的同時，還能高效輸出以及體現(xiàn)統(tǒng)一的設(shè)計語言呢？甚至不用設(shè)計師也能輕松替換Banner組件？想要解決這種難題的最好方法就是設(shè)計Banner組件庫，Banner組件庫的四大優(yōu)點能夠完美解決以上的問題。

Banner組件庫的類別

根據(jù)設(shè)計師個人及每個公司業(yè)務(wù)的不同需求，我一共把Banner組件庫分為兩大類別：

1. 設(shè)計師及設(shè)計團(tuán)隊操作的Banner組件庫：

這類組件庫面向的操作人群是設(shè)計師，僅有設(shè)計師才對其有操作權(quán)限：

案例部分效果演示：

2. 非設(shè)計師操作的Banner組件庫：

這類組件庫面向的操作人群是非設(shè)計師人員（運(yùn)營、銷售、子公司員工等），是設(shè)計師根據(jù)運(yùn)營的需求特制的Banner組件庫。

我當(dāng)時制作這個組件庫的原由是因為母、子公司經(jīng)常都會有相同的模板化設(shè)計界面替換，而每次替換都需要花費設(shè)計師很多零碎的時間，所以我們干脆就直接設(shè)定好Banner組件庫，讓運(yùn)營人員自行替換，我們先教會母公司的主運(yùn)營操作流程，主運(yùn)營再去負(fù)責(zé)子公司的操作流程培訓(xùn)，這樣一套下來省去了運(yùn)營人員與設(shè)計師的溝通及修改過程，運(yùn)營人員可直接輸出成品，從而提升了整個團(tuán)隊的生產(chǎn)力，也讓設(shè)計師專注于設(shè)計上的創(chuàng)意與用戶體驗。

案例部分效果演示：

Banner組件庫的四大知識要點

不管是建立哪一類別的Banner組件庫，想要設(shè)計好它，那么首先就要清楚的了解Banner中的基本構(gòu)成以及設(shè)計原則，從底層邏輯出發(fā)去構(gòu)建Banner組件庫，我構(gòu)建Banner組件庫的思路主要依據(jù)以下四大知識點：

1. Banner的層級拆分

Banner層級拆分的主要目的是為了組件的設(shè)定，我們通過層級拆分可以有規(guī)律的把每一個層級都設(shè)置為可替換選項，在Banner組件庫中可分為5個層級：

• 背景層：可替換背景顏色、背景樣式
• 文案層：可替換字體、顏色
• 標(biāo)簽層：可替換標(biāo)簽、顯示隱藏標(biāo)簽、標(biāo)簽顏色
• 點綴層：可替換點綴元素、元素顏色
• 產(chǎn)品配圖：可替換顯示圖片、也可更換為插畫元素

案例：

2. 合理運(yùn)用Banner中的點線面

在組件化的Banner設(shè)定中，我們可以用點、線、面來劃分畫面的整體層面，我們要羅列出哪些層級是用點來表達(dá)，哪些層級是用線或面來表達(dá)，這樣不僅有利于組件庫的快速建立，也有利于Banner整體畫面的視覺表達(dá)。

點、線、面是相對存在的，點可能在畫面中成為線、面，線也可能在畫面中成為點、面。

“點”越大就可能會變成“面”，“點”發(fā)生規(guī)律性變化也可能成為“線”。

當(dāng)“線”在畫面上顯得短小時，可以把它看成“點”，當(dāng)把“線”加粗一定程度，那么我們就會把它看成“面”。

當(dāng)“面”成為未封閉狀態(tài)時就會成為“線”，當(dāng)“面”在畫面中的比例縮小時我們可以把它看成“點”。

我們在組件Banner時要事先把層級的點線面歸納好，這樣才不會在我們設(shè)計相同元素時出現(xiàn)雜亂的現(xiàn)象，層級與點線面的常規(guī)關(guān)系圖如下（這樣的常規(guī)組合關(guān)系有利于建立組件庫）：

需要注意的是在Banner組件庫中點綴層與標(biāo)簽層并非一定要存在于Banner中。

3. Banner組件庫常用版式

Banner的版式復(fù)雜多樣，而我們的組件庫想要達(dá)到輕量化，所以更適用于下面三種常規(guī)的版式，如下：

4. Banner設(shè)計五大原則

組件庫的建立必須遵循Banner設(shè)計五大原則：對齊、統(tǒng)一、對比、留白、結(jié)構(gòu)平衡。

對齊

Banner的內(nèi)容都要有一個對齊的準(zhǔn)則，特別是文案層面，每個元素都有自己應(yīng)該處于的位置，要有秩序化，才有舒適感。常見的對齊方式有左對齊、右對齊、居中對齊，建議一個板式只使用其中一種對齊方式。一個小小的Banner版面，如果使用了多種對齊方式，實際上在用戶看來這些信息都是零散的，增加了認(rèn)知成本。

統(tǒng)一

字體以及字體顏色最好不超過兩種，內(nèi)容元素設(shè)計風(fēng)格也必須一致，太多容易導(dǎo)致內(nèi)容雜亂，干擾過強(qiáng)。

對比

了解各項信息的權(quán)重大小，重要的信息要加強(qiáng)顯示，次要信息可以弱化。

留白

要為Banner留出一定空間，讓Banner多一些呼吸感，這樣也更容易聚焦重要信息。

降噪原則

在Banner設(shè)計中不要使用過多的字體、顏色或者過于復(fù)雜的圖形，這種不斷做“乘法”的行為，實際上是在增加用戶認(rèn)知的“噪音”。

組件庫制作流程及案例展示

1. 制作前提：設(shè)計規(guī)范（字體/顏色/版式說明）

字體使用規(guī)范

在字體的使用中，我們要確定字體類型以及字體的大小。

顏色使用規(guī)范

為了保證Banner擁有較強(qiáng)的適應(yīng)性，我們可以不規(guī)定精準(zhǔn)顏色，用顏色明度的使用區(qū)間來代替。(顏色規(guī)范僅限于主色調(diào)，并不包含特殊用色：如標(biāo)簽、點綴元素)

版式說明

制定版式的整體尺寸、元素間距、排版、字?jǐn)?shù)限制。

2. 設(shè)計師應(yīng)用版制作流程：

設(shè)計師應(yīng)用的Banner組件庫可以用Sketch制作，也可以用Figma制作。

如果是用于外包設(shè)計或公司設(shè)計師僅有一人，那么建議用Sketch制作；如果設(shè)計團(tuán)隊人數(shù)較多，那么建議用Figma，我這里就用SKetch給大家講解一下制作流程。

第一步：根據(jù)層級與點線面設(shè)計Banner中的元素

第二步：把每一層級的元素組件化

在Sketch中只用選擇想要組件的圖層（或組），點擊按鈕即可立即生成組件，如下圖：

在組件層級時我們需要注意從哪里開始，到哪里結(jié)束。例如我做的這個寵物Banner案例，第一層是Banner樣式切換，接著才是樣式里面的層級切換，并不是把內(nèi)部所有層級都組件完后就結(jié)束了，可能層級中還存在更多的小組件切換，比如在樣式2中我沒有把點綴層合成一個組件切換，而是分為三個組件切換，甚至在三個切換里你還可以設(shè)置它們的顏色切換，全部設(shè)置完后這樣才算真正的組件結(jié)束，下面是我組件的層級圖：

第三步：設(shè)計可替換組件

在完成元素組件化后，我們就可以在組件庫里添加更多可替換組件的樣式，添加方式如下圖：

當(dāng)把可替換的組件全部設(shè)計完后就可以使用了，如果發(fā)現(xiàn)內(nèi)容不夠用還可以往內(nèi)部再次添加，下面是Banner樣式1的切換效果展示：

Banner樣式2的效果展示：

注意要點：

• Banner組件庫的內(nèi)部層數(shù)不宜過多，盡量輕量化。
• 組件庫內(nèi)部的相同元素可以同時使用，例如樣式1與樣式2的文案部分，都可以用一個組件，不用再單獨設(shè)置。
• 命名要清晰，層級之間用“/”隔開，以免發(fā)生組件庫內(nèi)部的調(diào)取錯亂。
• 因SKetch的組件機(jī)制，組件的尺寸大小要有區(qū)分，如果出現(xiàn)相同大小的組件請任意修改一個。（增加1px）
• 想要快速得到組件，可以把左側(cè)的圖層面板更換為組件面板，直接可拖取內(nèi)部組件。

3. 運(yùn)營人員應(yīng)用版制作流程：

運(yùn)營人員應(yīng)用的Banner組件庫的建立需要用到的軟件是PS與Excel。

在設(shè)計這類組件庫時我們一定要多從操作人員的角度出發(fā)去設(shè)計，最簡單化，下面案例來自于之前在老東家做的PS組件。

第一步：根據(jù)層級與點線面設(shè)計Banner中的元素

第二步：設(shè)計可替換元素組件

在設(shè)定前我們需要了解以下幾點知識：

• PS做組件庫用到的是圖像-變量屬性。
• 我們進(jìn)行所有的元素替換都不在PS內(nèi)部，而是在Excel操作替換，若有圖片替換，圖片則與源文件存在同一文件夾內(nèi)。
• 可設(shè)置所有元素的顯示和隱藏。

通過以上4點可以得知我們需要設(shè)計的元素僅僅只有背景圖片，而其他元素可以通過變量來達(dá)到效果，下面是設(shè)計的4張不同顏色的背景替換圖：

第三步：定義變量元素

只是給需要變量的元素打標(biāo)簽，具體該如何變量在第四步

定量步驟：選擇想要定量的圖層-圖像-變量-定義

注：PS會自動識別定量元素，如果是組，那么只有可見性選項（可見性選項的意思就是可顯示可隱藏）；如果是圖片，則會多出像素替換（替換圖片）；如果是文字則會有文字替換（替換文字）

在定義時為了避免操作錯誤，定義名稱就為圖層名稱，定義完成一個就按“下一個”按鈕，直到全部定義完成再按“確認(rèn)”按鈕，案例中的Banner一共定義了6個元素，分別為商品圖（像素替換）、商品名（文字替換）、原價（文字替換）、優(yōu)惠價（文字替換）、特價標(biāo)（可見性）背景圖（像素替換）

第四步：制作Excel表格

我們所有的數(shù)據(jù)修改都是在Excel里面進(jìn)行的，Excel表格制作非常簡單，第一排為定義的名稱，我們只需把剛才定義好的6個名稱輸入到表格的第一排。

如上圖，建議大家多加入一個編號定義，在PS里把編號定義的圖層隱藏就行了，目的是為了選取數(shù)據(jù)組時更直觀，操作如下：

除了第一排，下面的排列都是輸入性定義，如果要改變商品名的文字，就可以在下方輸入修改的文字；

如果要替換圖片，就要輸入替換圖片的名字及后綴，僅支持png與jpg格式的圖片，并且圖片必須與源文件在一個文件夾內(nèi)。

如果要顯示或隱藏某個元素，那么就可以輸入大寫的“TRUE”或“FALSE”。

當(dāng)把表格信息都填完后，最后一步就是把表格存為.csv格式。（注：.csv文件必須與PS源文件、圖片文件存在于同一文件夾內(nèi)）

第五步：導(dǎo)入操作

當(dāng)全部設(shè)定完后，我們就可以在PS內(nèi)導(dǎo)入切換不同的數(shù)據(jù)應(yīng)用。

操作路徑：圖像-變量-數(shù)據(jù)組-導(dǎo)入數(shù)據(jù)組-選擇數(shù)據(jù)-應(yīng)用-確定

這五步下來我們的Banner組件庫就順利完成了！

特別提醒：避免運(yùn)營人員操作失誤，建議把PS內(nèi)部的所有圖層鎖定。

第六步：培訓(xùn)運(yùn)營人員

通過上面的組件建立，運(yùn)營人員只需添加Excel文件的子列表，并在PS選中導(dǎo)出即可完成操作，可以讓運(yùn)營人員把PS看成圖片導(dǎo)出工具，可以非常輕松的完成。（機(jī)械化流程）

因為考慮到運(yùn)營人員可能無法理解設(shè)計邏輯，所以很可能會出現(xiàn)操作失誤或不知道怎么操作的情況，所以建議通過直播以及視頻文件、PDF文件、GIF文件來引導(dǎo)運(yùn)營人員操作。

• 直播優(yōu)勢：直播在線操作，不懂可以及時詢問，能讓運(yùn)營人員快速上手。
• 文件優(yōu)勢：主要用于操作者忘記操作或操作失誤時的提醒。
• 特別提醒：給予運(yùn)營人員文件中必須包含：操作文件（PS源文件、背景圖片、Excel表格）、字體包（PS中用到的字體）、操作提示文檔（視頻、PDF、GIF）

下面是員工PDF操作步驟圖示：

案例源文件提取

Sketch組件庫源文件：

PS、Excel組件庫源文件：

下載鏈接： https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取碼：e3li