2020-12-31 周周
在互聯(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)能夠完美解決以上的問題。
根據(jù)設(shè)計(jì)師個(gè)人及每個(gè)公司業(yè)務(wù)的不同需求，我一共把Banner組件庫分為兩大類別：
1. 設(shè)計(jì)師及設(shè)計(jì)團(tuán)隊(duì)操作的Banner組件庫：
這類組件庫面向的操作人群是設(shè)計(jì)師，僅有設(shè)計(jì)師才對其有操作權(quán)限：
案例部分效果演示：
2. 非設(shè)計(jì)師操作的Banner組件庫：
這類組件庫面向的操作人群是非設(shè)計(jì)師人員（運(yùn)營、銷售、子公司員工等），是設(shè)計(jì)師根據(jù)運(yùn)營的需求特制的Banner組件庫。
我當(dāng)時(shí)制作這個(gè)組件庫的原由是因?yàn)槟?、子公司?jīng)常都會有相同的模板化設(shè)計(jì)界面替換，而每次替換都需要花費(fèi)設(shè)計(jì)師很多零碎的時(shí)間，所以我們干脆就直接設(shè)定好Banner組件庫，讓運(yùn)營人員自行替換，我們先教會母公司的主運(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è)計(jì)好它，那么首先就要清楚的了解Banner中的基本構(gòu)成以及設(shè)計(jì)原則，從底層邏輯出發(fā)去構(gòu)建Banner組件庫，我構(gòu)建Banner組件庫的思路主要依據(jù)以下四大知識點(diǎn)：
Banner層級拆分的主要目的是為了組件的設(shè)定，我們通過層級拆分可以有規(guī)律的把每一個(gè)層級都設(shè)置為可替換選項(xiàng)，在Banner組件庫中可分為5個(gè)層級：
案例：
在組件化的Banner設(shè)定中，我們可以用點(diǎn)、線、面來劃分畫面的整體層面，我們要羅列出哪些層級是用點(diǎn)來表達(dá)，哪些層級是用線或面來表達(dá)，這樣不僅有利于組件庫的快速建立，也有利于Banner整體畫面的視覺表達(dá)。
點(diǎn)、線、面是相對存在的，點(diǎn)可能在畫面中成為線、面，線也可能在畫面中成為點(diǎn)、面。
“點(diǎn)”越大就可能會變成“面”，“點(diǎn)”發(fā)生規(guī)律性變化也可能成為“線”。
當(dāng)“線”在畫面上顯得短小時(shí)，可以把它看成“點(diǎn)”，當(dāng)把“線”加粗一定程度，那么我們就會把它看成“面”。
當(dāng)“面”成為未封閉狀態(tài)時(shí)就會成為“線”，當(dāng)“面”在畫面中的比例縮小時(shí)我們可以把它看成“點(diǎn)”。
我們在組件Banner時(shí)要事先把層級的點(diǎn)線面歸納好，這樣才不會在我們設(shè)計(jì)相同元素時(shí)出現(xiàn)雜亂的現(xiàn)象，層級與點(diǎn)線面的常規(guī)關(guān)系圖如下（這樣的常規(guī)組合關(guān)系有利于建立組件庫）：
需要注意的是在Banner組件庫中點(diǎn)綴層與標(biāo)簽層并非一定要存在于Banner中。
Banner的版式復(fù)雜多樣，而我們的組件庫想要達(dá)到輕量化，所以更適用于下面三種常規(guī)的版式，如下：
組件庫的建立必須遵循Banner設(shè)計(jì)五大原則：對齊、統(tǒng)一、對比、留白、結(jié)構(gòu)平衡。
對齊
Banner的內(nèi)容都要有一個(gè)對齊的準(zhǔn)則，特別是文案層面，每個(gè)元素都有自己應(yīng)該處于的位置，要有秩序化，才有舒適感。常見的對齊方式有左對齊、右對齊、居中對齊，建議一個(gè)板式只使用其中一種對齊方式。一個(gè)小小的Banner版面，如果使用了多種對齊方式，實(shí)際上在用戶看來這些信息都是零散的，增加了認(rèn)知成本。
統(tǒng)一
字體以及字體顏色最好不超過兩種，內(nèi)容元素設(shè)計(jì)風(fēng)格也必須一致，太多容易導(dǎo)致內(nèi)容雜亂，干擾過強(qiáng)。
對比
了解各項(xiàng)信息的權(quán)重大小，重要的信息要加強(qiáng)顯示，次要信息可以弱化。
留白
要為Banner留出一定空間，讓Banner多一些呼吸感，這樣也更容易聚焦重要信息。
降噪原則
在Banner設(shè)計(jì)中不要使用過多的字體、顏色或者過于復(fù)雜的圖形，這種不斷做“乘法”的行為，實(shí)際上是在增加用戶認(rèn)知的“噪音”。
字體使用規(guī)范
在字體的使用中，我們要確定字體類型以及字體的大小。
顏色使用規(guī)范
為了保證Banner擁有較強(qiáng)的適應(yīng)性，我們可以不規(guī)定精準(zhǔn)顏色，用顏色明度的使用區(qū)間來代替。(顏色規(guī)范僅限于主色調(diào)，并不包含特殊用色：如標(biāo)簽、點(diǎn)綴元素)
版式說明
制定版式的整體尺寸、元素間距、排版、字?jǐn)?shù)限制。
設(shè)計(jì)師應(yīng)用的Banner組件庫可以用Sketch制作，也可以用Figma制作。
如果是用于外包設(shè)計(jì)或公司設(shè)計(jì)師僅有一人，那么建議用Sketch制作；如果設(shè)計(jì)團(tuán)隊(duì)人數(shù)較多，那么建議用Figma，我這里就用SKetch給大家講解一下制作流程。
第一步：根據(jù)層級與點(diǎn)線面設(shè)計(jì)Banner中的元素
第二步：把每一層級的元素組件化
在Sketch中只用選擇想要組件的圖層（或組），點(diǎn)擊按鈕即可立即生成組件，如下圖：
在組件層級時(shí)我們需要注意從哪里開始，到哪里結(jié)束。例如我做的這個(gè)寵物Banner案例，第一層是Banner樣式切換，接著才是樣式里面的層級切換，并不是把內(nèi)部所有層級都組件完后就結(jié)束了，可能層級中還存在更多的小組件切換，比如在樣式2中我沒有把點(diǎn)綴層合成一個(gè)組件切換，而是分為三個(gè)組件切換，甚至在三個(gè)切換里你還可以設(shè)置它們的顏色切換，全部設(shè)置完后這樣才算真正的組件結(jié)束，下面是我組件的層級圖：
第三步：設(shè)計(jì)可替換組件
在完成元素組件化后，我們就可以在組件庫里添加更多可替換組件的樣式，添加方式如下圖：
當(dāng)把可替換的組件全部設(shè)計(jì)完后就可以使用了，如果發(fā)現(xiàn)內(nèi)容不夠用還可以往內(nèi)部再次添加，下面是Banner樣式1的切換效果展示：
Banner樣式2的效果展示：
注意要點(diǎn)：
運(yùn)營人員應(yīng)用的Banner組件庫的建立需要用到的軟件是PS與Excel。
在設(shè)計(jì)這類組件庫時(shí)我們一定要多從操作人員的角度出發(fā)去設(shè)計(jì)，最簡單化，下面案例來自于之前在老東家做的PS組件。
第一步：根據(jù)層級與點(diǎn)線面設(shè)計(jì)Banner中的元素
第二步：設(shè)計(jì)可替換元素組件
在設(shè)定前我們需要了解以下幾點(diǎn)知識：
通過以上4點(diǎn)可以得知我們需要設(shè)計(jì)的元素僅僅只有背景圖片，而其他元素可以通過變量來達(dá)到效果，下面是設(shè)計(jì)的4張不同顏色的背景替換圖：
第三步：定義變量元素
只是給需要變量的元素打標(biāo)簽，具體該如何變量在第四步
定量步驟：選擇想要定量的圖層-圖像-變量-定義
注：PS會自動(dòng)識別定量元素，如果是組，那么只有可見性選項(xiàng)（可見性選項(xiàng)的意思就是可顯示可隱藏）；如果是圖片，則會多出像素替換（替換圖片）；如果是文字則會有文字替換（替換文字）
在定義時(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è)編號定義，在PS里把編號定義的圖層隱藏就行了，目的是為了選取數(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ì)邏輯，所以很可能會出現(xiàn)操作失誤或不知道怎么操作的情況，所以建議通過直播以及視頻文件、PDF文件、GIF文件來引導(dǎo)運(yùn)營人員操作。
下面是員工PDF操作步驟圖示：
Sketch組件庫源文件：
PS、Excel組件庫源文件：
下載鏈接：https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取碼：e3li
文章來源：優(yōu)設(shè)網(wǎng) 作者：黑獅力
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com