為什么要建立Banner組件庫

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

Banner組件庫的類別

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

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

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

案例部分效果演示：

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

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

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

案例部分效果演示：

Banner組件庫的四大知識(shí)要點(diǎn)

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

1. Banner的層級(jí)拆分

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

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

案例：

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

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

點(diǎn)、線、面是相對(duì)存在的，點(diǎn)可能在畫面中成為線、面，線也可能在畫面中成為點(diǎn)、面。

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

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

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

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

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

3. Banner組件庫常用版式

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

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

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

對(duì)齊

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

統(tǒng)一

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

對(duì)比

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

留白

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

降噪原則

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

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

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

字體使用規(guī)范

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

顏色使用規(guī)范

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

版式說明

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

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

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

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

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

第二步：把每一層級(jí)的元素組件化

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

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

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

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

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

Banner樣式2的效果展示：

注意要點(diǎn)：

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

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

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

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

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

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

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

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

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

第三步：定義變量元素

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

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

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

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

第四步：制作Excel表格

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

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

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

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

如果要顯示或隱藏某個(gè)元素，那么就可以輸入大寫的“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)榭紤]到運(yùn)營人員可能無法理解設(shè)計(jì)邏輯，所以很可能會(huì)出現(xiàn)操作失誤或不知道怎么操作的情況，所以建議通過直播以及視頻文件、PDF文件、GIF文件來引導(dǎo)運(yùn)營人員操作。

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

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

案例源文件提取

Sketch組件庫源文件：

PS、Excel組件庫源文件：

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

文章來源：優(yōu)設(shè)網(wǎng)     作者：黑獅力

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)