如何兩分鐘設計出上百種尺寸投放banner
營銷宣傳需要匯出各種尺寸的圖來往各個渠道投放banner，還有各種微信、微博渠道的轉發，如何幾分鐘快速搞定各種尺寸的banner？
如果你是一名設計師，平時做一些營銷宣傳設計肯定會經常遇到這樣很繁瑣的事情，就是需要匯出各種尺寸的圖來供市場部往各個渠道投放一些banner、KV、APP開屏頁…還有各種微信、微博渠道的轉發。
我們這個環節通常是我們最不願意做的環節。因為改尺寸、輸數值這種簡單、機械、又浪費時間的事情根本起不到任何提升設計水平的作用，我們更願意把更多的時間用來做頁面的設計上。當然，有一些公司往往會安排實習生、新人來幹這樣的差事。
如果公司的宣傳渠道比較多，比如我現在所在的公司，每次宣傳活動需要適配的圖的尺寸就超過20種，一個banner如果需要兩三個小時完成的話，做各個渠道的適配所用的時間就可能需要一下午，而且中途產品或運營突然又要改個文案，這個工作量那就需要翻倍了，從來再來一遍。
（△平時做活動需要輸出的各種廣告尺寸）
好，前面說的有點多，相信大家已經深有體會，那有什麼辦法能解放這種勞動力呢？軟體能不能做到？機器能不能做到？答案是肯定的。機械的工作當然就讓機器去完成，設計師的工作就是創作，不能把時間浪費在這種機械工作上。下面我要講的這個方法就是用到的UI設計中經常用到的軟體-Sketch。
大家肯定都知道設計界的“魯班（鹿班）”，是阿里發明的，專門用來“擼”“banner”的設計器，不僅可以自行設計banner，還可以做到自適應網頁尺寸。當然，開發這個需要一定的成本，我們完全不需要理會，只要你手上有一個Sketch，就能完成自適應尺寸這一功能。我當時也是因為這個東西想到的這一靈感，然後將這個產物運用到了實際工作中，我給它取名叫“banner尺寸介面卡”。然後改尺寸這一工作，直接從原來的半天時間縮短到了兩分鐘。同事們也天天都在用，感覺自己出了很大的力，很欣慰。好的，接下來我們就來看一下它是如何工作的。（原始檔會在在文末提供下載）
第一章：演示動畫
先來一段演示動畫：
（1.）文字右對齊的案例
（2.）文字左對齊的案例
（3.）文字居中對齊的案例
可以看出，只要把內容放進去，各個尺寸的banner就會刷的一下全搞定了！banner內容是事先準備好的，隱藏掉了圖層。演示過程是在symbol裡將圖層顯示出來，接著，回到前臺，稍等一兩秒鐘，畫布上就會自動出現各種尺寸的banner。我們需要做的，就是將他們全選，然後匯出即可。整個適配過程真的只需要兩分鐘，經過了不同banner案例的測試，屢試不爽！
另外，如果你還想預覽banner在實際頁面的呈現效果怎麼辦，別急，這裡還有一個介面預覽功能
（4.）iphone8尺寸的介面預覽圖
（5.）iphone x尺寸的介面預覽圖
如果你是長屏手機iPhone X，就可以點選左側的iPhone X介面預覽，來看實際介面預覽效果。
第二章：如何使用
看了工作流程的演示動畫，大家肯定很多疑問。那，我們通常是怎麼使用它呢，我們來截圖分析一下。
和平時做設計時不一樣的地方就是，這次我們做圖的位置是在symbols這個頁面裡。開啟symbols之後會看到下方這個畫面。
（1.）設計
第一步就是設計，設計一張banner，這個banner的尺寸建議使用投放最多的，最重要的尺寸。然後將banner拷貝到這個介面卡裡。
（2.）拆分
拆分標題+背景，將banner圖拆分成兩部分：標題和背景。
這裡會有用symbol元件建立的兩個畫板。我們分別將標題和背景放置在主標題畫板和banner背景畫板上。
主標題畫板：將主標題和副標題打組成一個整體，居中的標題放在畫布中間，左對齊的放在畫布左邊，右對齊的放在畫布右邊。
banner背景畫板：banner背景要撐滿整個畫布，重要內容資訊一定要位於安全尺寸區域內（這裡我標有banner可能出現的最小尺寸和banner文案的安全尺寸），不得超出。
（3.）鎖邊（特殊情況需要）
鎖邊這一步剛才沒有演示到，因為這種情況一般在極少數的時候會出現，比如下方這種banner的設計：
文字居中，素材在banner的四周環繞。如果我們按照前兩步，把素材當做banner背景合併在一起用的話，當出現大尺寸的banner，banner背景就不能做到很好的去填充。所以，我們需要拆分成多個部分： 
這就需要利用“鎖邊”來將邊角元素鎖定到banner的四周。
鎖邊，對於背景有貼邊的情況，將底部配圖拆分為四個角進行鎖邊。
OK！如果按照上面三步去操作，就可以適配絕大多數尺寸的banner。
（4.）預覽
這時候，可以回到iPhone 8或iPhone X畫布，接上手機連線線，來預覽各個尺寸的banner是如何在實際介面中運用的。
或者，直接回到banner前臺，大概的預覽和對比各個banner。
（5.）匯出
回到banner前臺，選擇你需要的banner，點選右下角的匯出，就可以將所有banner匯出，然後給相應的人員。
第三章：實現原理
好，來看一下實現原理，只拿到這個原始檔是沒法用的，畢竟每個公司的尺寸規範都不一樣，這要根據自己的實際情況來，就需要自己領會並動手製作一個屬於自己的設計器。
（1.）尺寸的定義
首先，我通過整理所有投放banner的尺寸，將寬度大於750px的按照750px的比例縮小，小於682px的（682的尺寸也是750的介面切圖，只是兩側各留了34px的邊距，所以得出的682尺寸）按比例放大到682px，等於682px不變，得到下方的重合圖樣：
所以，我們把背景與文案分離出來，背景無限填充最大比例的區域，標題按不同banner尺寸進行比例縮放，就可以做到一張banner適配所有尺寸。
從上方的圖我們還可以得出一個資訊，就是重疊的最多的地方（顏色最深的），就是我們的最小banner，也就是最小尺寸，我們在最小尺寸的基礎上往裡縮小一定的邊距來做標題，所得出的尺寸就是安全尺寸，這樣整個banner不會顯得太滿，如下： 
（2.）實現原理
頁面分為前臺頁面和Symbols頁面，利用Sketch自帶的Symbols功能，將分離出的圖層分別放置在建好的symbol畫板上，這樣就可以傳到前臺並按照不同尺寸進行等比例縮放（縮放的時候一定要注意不能手動去拖拽，拖拽的話陰影和描邊不會等比例縮放，一定要用軟體中的縮放工具）。
前臺利用蒙版切割，對不同尺寸的banner背景Symbols元件進行切割，得到相應尺寸的banner。如下示意： 
（3.）如何鎖邊
對於貼邊處理的配圖元素，前臺將四個角的symbol元件一起打組，利用Sketch自帶的智慧縮放功能，進行自動貼邊處理，類似於點9切圖的原理。設計師可以根據畫面需要在前臺可以手動調節鎖邊元件：
所以畫板上放了四個symbol畫板，分別對應左上、左下、右上、右下四個角。如果一張banner只有一個角有元素，那其他的三個角空著就可以。 
（4.）定義banner尺寸和規範
上面的明白之後，就可以在banner前臺建立各種尺寸banner，並把logo和響應的角標安排上。對於logo，應用場景不同，也可以準備兩套，一個是彩色的，一個是反白的，把logo也建立成symbols元件，在前臺就可以來回切換著用了，如下：
在檔案裡，還可以加入版本更新資訊，每一次的更新內容都可以記錄下來。目前為止，我的這份文件已經更新過9版了。
好了，當我們明白這些原理之後，就可以自己建立屬於你的banner尺寸介面卡了。當然，我們又可以舉一反三，同樣用這個原理，來製作app開屏頁的適配。我把他們合併在了同一個文件裡：
後來，同事也進行了舉一反三。她用這個原理製作了APP上架和APP歡迎頁的尺寸介面卡。我們知道，每次APP 上架和APP歡迎頁為了適配各種尺寸和比例的手機，一套圖要出七八種尺寸，如iPhone4、iPhone5、iPhone8、iPhoneX、安卓……有了這個介面卡，我們就不怕了。老闆，再給我來100個banner！ 
原始檔我有部分修改，因為這是公司的檔案，所以部分插圖我就做了合併處理，還有公司的logo，我也替換掉了。請關注公眾號“設計小將”後在後臺回覆“ad”下載原始檔即可自行研究。
————END————