2020-12-31 周周
在互聯網公司中，運營Banner往往是由不同的運營團隊去完成，甚至在一些跨國企業，運營Banner是由不同國家的運營團隊完成的。那么如何保證大家輸出的運營Banner在保證視覺沖擊力的同時，還能輸出以及體現統一的設計語言呢？甚至不用設計師也能輕松替換Banner組件？想要解決這種難題的最好方法就是設計Banner組件庫，Banner組件庫的四大優點能夠完美解決以上的問題。
根據設計師個人及每個公司業務的不同需求，我一共把Banner組件庫分為兩大類別：
1. 設計師及設計團隊操作的Banner組件庫：
這類組件庫面向的操作人群是設計師，僅有設計師才對其有操作權限：
案例部分效果演示：
2. 非設計師操作的Banner組件庫：
這類組件庫面向的操作人群是非設計師人員（運營、銷售、子公司員工等），是設計師根據運營的需求特制的Banner組件庫。
我當時制作這個組件庫的原由是因為母、子公司經常都會有相同的模板化設計界面替換，而每次替換都需要花費設計師很多零碎的時間，所以我們干脆就直接設定好Banner組件庫，讓運營人員自行替換，我們先教會母公司的主運營操作流程，主運營再去負責子公司的操作流程培訓，這樣一套下來省去了運營人員與設計師的溝通及修改過程，運營人員可直接輸出成品，從而提升了整個團隊的生產力，也讓設計師專注于設計上的創意與用戶體驗。
案例部分效果演示：
不管是建立哪一類別的Banner組件庫，想要設計好它，那么首先就要清楚的了解Banner中的基本構成以及設計原則，從底層邏輯出發去構建Banner組件庫，我構建Banner組件庫的思路主要依據以下四大知識點：
Banner層級拆分的主要目的是為了組件的設定，我們通過層級拆分可以有規律的把每一個層級都設置為可替換選項，在Banner組件庫中可分為5個層級：
案例：
在組件化的Banner設定中，我們可以用點、線、面來劃分畫面的整體層面，我們要羅列出哪些層級是用點來表達，哪些層級是用線或面來表達，這樣不僅有利于組件庫的快速建立，也有利于Banner整體畫面的視覺表達。
點、線、面是相對存在的，點可能在畫面中成為線、面，線也可能在畫面中成為點、面。
“點”越大就可能會變成“面”，“點”發生規律性變化也可能成為“線”。
當“線”在畫面上顯得短小時，可以把它看成“點”，當把“線”加粗一定程度，那么我們就會把它看成“面”。
當“面”成為未封閉狀態時就會成為“線”，當“面”在畫面中的比例縮小時我們可以把它看成“點”。
我們在組件Banner時要事先把層級的點線面歸納好，這樣才不會在我們設計相同元素時出現雜亂的現象，層級與點線面的常規關系圖如下（這樣的常規組合關系有利于建立組件庫）：
需要注意的是在Banner組件庫中點綴層與標簽層并非一定要存在于Banner中。
Banner的版式復雜多樣，而我們的組件庫想要達到輕量化，所以更適用于下面三種常規的版式，如下：
組件庫的建立必須遵循Banner設計五大原則：對齊、統一、對比、留白、結構平衡。
對齊
Banner的內容都要有一個對齊的準則，特別是文案層面，每個元素都有自己應該處于的位置，要有秩序化，才有舒適感。常見的對齊方式有左對齊、右對齊、居中對齊，建議一個板式只使用其中一種對齊方式。一個小小的Banner版面，如果使用了多種對齊方式，實際上在用戶看來這些信息都是零散的，增加了認知成本。
統一
字體以及字體顏色最好不超過兩種，內容元素設計風格也必須一致，太多容易導致內容雜亂，干擾過強。
對比
了解各項信息的權重大小，重要的信息要加強顯示，次要信息可以弱化。
留白
要為Banner留出一定空間，讓Banner多一些呼吸感，這樣也更容易聚焦重要信息。
降噪原則
在Banner設計中不要使用過多的字體、顏色或者過于復雜的圖形，這種不斷做“乘法”的行為，實際上是在增加用戶認知的“噪音”。
字體使用規范
在字體的使用中，我們要確定字體類型以及字體的大小。
顏色使用規范
為了保證Banner擁有較強的適應性，我們可以不規定精準顏色，用顏色明度的使用區間來代替。(顏色規范僅限于主色調，并不包含特殊用色：如標簽、點綴元素)
版式說明
制定版式的整體尺寸、元素間距、排版、字數限制。
設計師應用的Banner組件庫可以用Sketch制作，也可以用Figma制作。
如果是用于外包設計或公司設計師僅有一人，那么建議用Sketch制作；如果設計團隊人數較多，那么建議用Figma，我這里就用SKetch給大家講解一下制作流程。
第一步：根據層級與點線面設計Banner中的元素
第二步：把每一層級的元素組件化
在Sketch中只用選擇想要組件的圖層（或組），點擊按鈕即可立即生成組件，如下圖：
在組件層級時我們需要注意從哪里開始，到哪里結束。例如我做的這個寵物Banner案例，第一層是Banner樣式切換，接著才是樣式里面的層級切換，并不是把內部所有層級都組件完后就結束了，可能層級中還存在更多的小組件切換，比如在樣式2中我沒有把點綴層合成一個組件切換，而是分為三個組件切換，甚至在三個切換里你還可以設置它們的顏色切換，全部設置完后這樣才算真正的組件結束，下面是我組件的層級圖：
第三步：設計可替換組件
在完成元素組件化后，我們就可以在組件庫里添加更多可替換組件的樣式，添加方式如下圖：
當把可替換的組件全部設計完后就可以使用了，如果發現內容不夠用還可以往內部再次添加，下面是Banner樣式1的切換效果展示：
Banner樣式2的效果展示：
注意要點：
運營人員應用的Banner組件庫的建立需要用到的軟件是PS與Excel。
在設計這類組件庫時我們一定要多從操作人員的角度出發去設計，最簡單化，下面案例來自于之前在老東家做的PS組件。
第一步：根據層級與點線面設計Banner中的元素
第二步：設計可替換元素組件
在設定前我們需要了解以下幾點知識：
通過以上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文件來引導運營人員操作。
下面是員工PDF操作步驟圖示：
Sketch組件庫源文件：
PS、Excel組件庫源文件：
下載鏈接：https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取碼：e3li
文章來源：優設網 作者：黑獅力
藍藍設計( m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務