設計師如何用 zeroheight 建立公司內部的 Marketing Guideline
前言
AsiaYo 身為一個新創公司，Design team 的規模相當精簡，一直到主管 Henry 的加入，才引入更多設計概念與方法流程，包含 ─ Design System。
有了 Design System 的概念之後，我和主管還有工程師同仁們一直都很希望可以建立屬於 AsiaYo 的規範，Components 的設計大致都已經確定了，只差在將使用說明清楚解釋，在有限的零碎時間裡，我已經在 zeroheight 完成了 Product Color、Layout、Typography、Button 等的規範。
而近期因為 AsiaYo 的目的地擴增，行銷團隊開始有大量的視覺需求，又都是由不同的 Local marketer 負責，因此非常需要整理一份 Marketing Guideline 給公司的相關人員同步準則，我成為此專案的負責人，得到比較充裕的時間，與公司的另外兩位設計師 ─ Nita 與珮慈花費了一個月完成專案。
為什麼要做 Marketing Guideline
我們希望這一份 Marketing Guideline 能夠讓除了設計師以外，其他部門的 AsiaYors 都看得懂，除了更了解公司的品牌形象，也能夠節省跨部門溝通成本，並且達成以下的目標：
- 具教育性質與啟發意義
- 給予指引的框架，而非限制
- 維持視覺一至性
如何制定 Marketing Guideline
首先，先列出與 AsiaYo 行銷有關的主題 ，之後再針對不同的主題，三位設計師分頭進行與協作，最後羅列的主題分別是：
- Banner
- Character
- Dos & Don’ts
- Icon
- Logo
- Marketing Color
不過再進行這個專案之前，其實珮慈已經寫好 Icon 和 Logo 的規範，我也寫完 Product Color 的規範了。
但是這次的規範內容除了要建構 Marketing Team 需要的使用說明，也要讓非設計部門也可以理解並應用，針對這一點 Icon 和 Logo 的篇章有些微調整優化，我則另外再寫一篇說明詳細的 Marketing Color。
以下主題依照英文先後順序排列，但其實在編寫的時候，Marketing Color 和 Banner 比較複雜所以最後完成。
Banner
Nita 列出目前有投放 banner 的六個管道，共計十五種不同的banner，我們合力將圖片尺寸、檔案大小、示意圖還有應用實例整理出來。甚至為特定的 banner 提供 template，並將安全距離、排版對齊線等等另外標註以詳實說明。
Character
Character 這是一個比較特殊的主題，這個篇幅主要是在介紹我們公司的常用角色─玩鷗。
當初有資訊推廣的需求，所以珮慈設計出這個討喜的的角色，儘管牠並不是我們公司的吉祥物，但玩鷗已經被應用在很多層面。由我負責的 2018 年的尾牙視覺，以及 Marketing team 設計的宣傳輸出品，都看得到玩鷗。
Dos & Don’ts
這個主題從我歸納出幾個重點，並把方向放在的色彩、用字、畫質上。
首先顏色需要符合品牌色，再來是避開其他公司的企業色，最後是顏色避開漸層設計；字體則建議選擇黑體且不超過兩種，並透過字重營造版面上的輕重與層次。
再來是畫質，越來越多使用者將習慣從看電腦改成滑手機，好的設計如果配上模糊的畫面，就是扣分，將設計輸出 2 倍才能有細緻的呈現，已經變成網路行銷不可略過的步驟。
Icon
Design team 的主管 Henry 建議我們應該發展一套自己的 web font 以滿足設計需求後，珮慈繪製了主題 icon，內容涵蓋 UI 基本的應用，更延伸到旅遊相關如設施與床型的系列插圖，並透過 icomoon 將 Icon 轉存為字體檔，逐步替換過往使用 font awesome 的設計。
由於文件內容已臻於完善，針對這次的專案優化部分，只有上傳插畫檔案下載連結供人使用。
Logo
Logo 主要分成使用指南與檔案下載的部分，透過說明建立正確的使用概念，並提供各種樣式的 SVG & PNG 檔供部門同仁使用。
使用指南的建立流程如下，先將之前的視覺設計師制定的 Logo 識別規範給幾個部門的同事閱讀，以找出非設計部門會看不懂的部分，並針對同事給予的寶貴意見，替換更精確的用字，並輔以大量的 Dos & Don’ts 圖片說明 Logo 的應用方式。
Marketing Color
關於顏色這個主題，建立的過程比較複雜，需要先從 Product Color 先說起。
我在 2019 年 2 月期間就已經建立好 Product Color，透過 Ant Design 的色版生成工具產生四組 Functional color palettes ( Primary + Success + Warning + Danger )，在另外定義一組 Neutral color palettes。
每一組 Functional color palettes 都是以 06 作為 Base color，再運算出其他的顏色，Base color 作為 UI 裡面最常見的顏色，在版面上的搭配需要足夠清晰可見，除了 Warning Color，其他顏色經過檢測都有足夠的識別度了。
在我們已經有五組顏色的情況下，我為了 Marketing 多建立了七組顏色，分別是珊瑚紅、焦糖棕、薄荷綠、土耳其綠、皇家藍、薰衣草紫以及玫瑰粉，本來覺得提供 Color palettes 就已經足夠，後來覺得如果要講到色彩應用，需要介紹最基本的色相環、三原色、對比色，還有色彩的意義，才能夠讓非設計師，也可以理解配色方法。
紅、黃、藍為第一次色，由第一次色等量調和的橘、綠、紫為第二次色，將第一次色與第二次色調和出來的顏色，稱做第三次色。由於之前挑選的十二組顏色有不少是屬於第三次色，我必須自行設計一個可以容納這 12 色的色相環來介紹顏色。
等到對顏色有一部分的理解之後，才開始介紹比較基本的五種配色法：
- 單色配色法 (monochromatic color scheme)
- 相似色配色法 (analogous color scheme)
- 衝突色配色法 (clash color scheme)
- 三等分配色法 (triadic color scheme)
- 對比色配色法 (complementary color scheme)
在製作色相環的時候有發現 Success color 的顏色為了符合足夠的識別度，在用色上會比其他顏色黯淡，如果之後有時間，可能會針對這個顏色微調。另外，要注意焦糖棕色並沒有在色相環內，以色彩學來說，棕色就是加了黑色調的橘色。
為什麼選擇 zeroheight
zeroheight 是一套非常好用的工具，它可以讓設計師在沒有工程師的協助下，建立一套 Design System。
我們不需要佔用工程師的資源，透過 Sketch 上傳 Artboards 、Symbols 還有 Layer styles，還有花時間編寫和嵌入內容，就能夠建立一個有目錄連結、搜尋功能、可複製的色票還有可下載的檔案的 Design System。
雖然免費版只能有一個編輯者，還不能輸出文件，而且沒有版本控管的功能以至於我偶爾需要重寫，但是 zeroheight 的強大功能，對有心製作 Design System 的企業來說，這是一個非常易上手且佛心的工具，如果有問題的話，客服團隊也會耐心回覆。
總結
有了 Marketing Guideline 沒人讀得懂也是枉然，於是這個專案的最後一步，當然就是要確保公司內需要的同事，都有完整吸收此份的內容，並知道如何應用。
因此在我、Nita 與珮慈寫完 Marketing Guideline 之後，我花了時間製作一份問卷＋小測驗，我先請幾位同事閱讀這六個章節，再讓他們填寫問卷＋小測驗，針對獲得的意見微調章節內容，最後再為其他部門的人開了一個小型的說明會，作為這個專案的圓滿結尾。
特別感謝這段期間幫助我的設計師、工程師、QA 和其他同事！也謝謝鼓勵我寫文章的 Ember 和 Yolanda，能建立公司內部的 Marketing Guideline 是個相當難得的經驗，不僅讓我比較能掌握系統式的文件撰寫，也能夠讓公司內部的人對品牌有更深刻的理解。
