起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識運營專題高效設計法（下）
在運營專題高效設計法（上）中，我們一起探討了項目分析的四個步驟，從項目目標到用戶人群，進行分析洞察得出設計執行方向的策略。在設計執行版塊中介紹了【高效構圖】、【高效色彩】的方法與技巧，接下來繼續跟隨我探討【字體】與【延展】的高效設計方法。
高效字體
字體設計是在創作運營設計中重要的組成部分，也是互聯網行業從事設計所最重要的基礎要素。運用裝飾手法來美化文字，增強視覺效果，提高作品的訴求和賦予版面的審美價值。但創作一款字體需要花費較大的時間成本，那么在我們節奏較快的運營設計中，如何高效地創作一款適合項目主題并且符合設計審美的字體呢？
我總結出了四套設計方法：字庫造字、矩形造字、鋼筆造字、手繪造字。
首先在開始創作字體之前，需要了解基本的造字流程，同樣也分為四個步驟：
- 分析：根據“項目分析”得出的設計策略，對“活動標題”或“主題文案”進行字體分析得出適合的風格方向，收集相關主題案例資料，輔助創作。
- 搭建：利用字庫字體或手繪來搭建該字體骨架。
- 創作：使用變化、裁剪、裝飾、添加等方法進行創作表達主題風格寓意。
- 塑造：添加顏色、特效、裝飾物、背景，置入使用場景，搭配輔助文案驗證其效果。
了解了造字的基本流程，設計師還需完善好電腦里的字庫，對字體廠商需要保持好奇、敏感以及尊敬。
接下來將介紹四種字體設計的高效方法：
1. 字庫造字
利用現有字庫字體，進行有主題的字體改造、筆畫添加、筆畫刪減、或重新組合的方法。分為：嫁接、刪減、替代三種不同的方法，適應不同的創作方向。
嫁接：根據主題進行針對性的設計修飾，在橫、豎、撇、捺的筆畫端點或字體的襯線部分出進行添加，通過“多”出來的細節，讓字體符合項目主題。比如：添加剛直硬朗的裝飾讓字體變得有力量，添加尖銳三角裝飾讓字體變得尖銳等……
刪減：刪減與嫁接是相對應的，在保證字體識別度的前提下，對筆畫進行斷筆、刪除、裁剪；或者將筆畫的某一個局部斷開，讓字體存在殘缺之美。
替代：在原字體的基礎上，刪減某處或多處筆畫，再用其他形式進行代替，可以是另一種字體筆畫替代或是圖形創意的添加。
2. 矩形造字
利用矩形、方形、平行四邊形進行拼接方法字體設計，選取一款適合的字體作為基礎骨架，根據主題需要進行拉伸變形（高、矮、胖、瘦）再將“矩形”元素在骨架上拼接設計。
Tips：在使用矩形造字法的過程中，需要遵循字體的粗細原則（字體在字體筆畫結構簡單的情況下，可以用同樣粗細的矩形來拼接，但是字體為較復雜大筆畫結構時可以遵循以下五個原則：橫細豎粗、副細主粗、內細外粗、密細疏粗、交叉變細）
案例：《放肆青春》
分析：該字體是QQ空間12周年的一款廣告字體，需要運用在運營活動、品牌廣告等一系列的地方。品牌紋樣的方形搭配以及構成形式，需要一款偏方塊字體來進行搭配。
搭建：結合方形品牌紋樣，選取了結構比較方正硬朗結實的“造字工房版黑”字體來作為字體骨架。
創作：根據搭建的版黑字體骨架將字體進行“矩形再造”，使用“斷筆處理”增強設計感。設計過程中調整筆畫粗細、端點以及角度。
塑造：利用矩形造字的五大原則，進行最終的完稿調整。以及運用同樣的原理，輸出了整套的文案字庫來適應QQ空間12周年項目中所有運用。
完稿后，將其他文案字體也進行了同樣的創作設計，適用在品牌廣告、運營活動當中。
3. 鋼筆造字
利用“鋼筆工具”來設計字體的筆畫，通過字體的相連、相減、圓滑達到設計感符合項目主題。
案例：《空間大咖秀》
分析：QQ空間直播平臺推出的欄目，會讓合作藝人來進行直播、互動。需要整個主題字有節目感、時尚感、娛樂性、親民性等特點。
搭建：運用手繪的形式來進行基礎搭建，在草圖形式上大概畫出字體造型，需表達粗細、筆畫、曲線、組合形式等。
創作：在軟件里用鋼筆工具畫出筆畫、曲線、以及圓角半徑和線條粗度，進行字體編排組合，添加“播放”相關創意的圖形。
塑造：繼續調整字的大小與結構，置入使用場景，確定最終描邊粗度，添加色彩、效果、質感讓主題文字表述得更為形象生動。
4. 手繪造字
這類字體本身帶有手繪痕跡，清新別致，利用筆刷直接在軟件里寫出的字體，隨性自由，使用場景廣泛，但對設計師的字體基礎和書法功底要求很高。這種方法當然因人而異，根據設計師的書法功底，也有不同的做法，可以直接書寫，也可以使用一款字庫字體作為骨骼框架，在其基礎上進行手繪創作。
案例：《QQ空間直播版本宣傳》
QQ空間直播版本宣傳，UGC直播場景，用直播來給好友分享此時此刻的心情、感受、畫面。采用了手繪體、手記體形式可以增添直播場景中的即時感。
最后，按其方法繼續延展出其他兩組字體，覆蓋更多的直播場景中的故事……
高效延展
經過構圖、色彩、字體的設計執行基本完成頂部為視覺風格的創意構圖，接下來就開始進入設計延展的設計。好的設計延展，可讓活動變得加分添彩。
那么如何高效地進行設計延展部分呢？分為“表現方式”與“設計方法”兩個部分來進行設計。
表現方式
表現方式我們可以從最基礎的，點、線、面的形式進行拆分，來輔助設計延展。
點：網格布局、線性布局、隨機布局、半調化以及粒子組合。
線：線性排列、面化、結構化、粗細混合以及異性組合。
面：拼接、疊加、偽3D、Alpha、層級化。
設計方法
將表現方式進行設計再創作可分為：拆分、釋義、聯想、重構的方法。
（1）拆分法
將品牌logo主體，拆分為多個簡約的圖形元素作為輔助圖形進行延展。
案例：《Buchanan》從Buchanan的品牌logo中拆分出圖形元素進行重新排列，組合新的品牌元素（數字、圖形）結合品牌色進行設計延展。
案例：《QGC》是QQ游戲嘉年華的簡稱，是一年一度QQ游戲平臺的賽事盛宴，為了更好的突出QQ游戲的品牌創作了機甲戰鵝來演繹QGC的專屬形象，在logo的字體設計、以及輔助圖形創作上中也同樣提取了高達的機甲元素進行設計延展。
案例：《QGC》是QQ游戲嘉年華的簡稱，是一年一度QQ游戲平臺的賽事盛宴，為了更好的突出QQ游戲的品牌創作了機甲戰鵝來演繹QGC的專屬形象，在logo的字體設計、以及輔助圖形創作上中也同樣提取了高達的機甲元素進行設計延展。
（2）釋義法
結合品牌釋意或形象，衍伸出多種關聯圖形元素作為輔助圖形進行設計延展。
案例：《COP25》這款氣候變化大會的品牌創意是從不同天氣、氣候的特征提取的元素進行logo創作，輔助圖形也是根據天氣、氣候的各種形態進行重組搭配創作。
案例：《QQ20周年 · 大會員預熱》太空企鵝探索科技作為本次20周年的品牌理念，來寓意新的里程碑。在進行運營活動設計時，希望繼續延展探索宇宙的概念。用深藍色宇宙銀河作為整個主活動的背景承托氛圍。主視覺使用了Cyperpunk動畫效果，延展設計中按鈕和邊框色圖形上也效仿科技電影中未來UI效果，強化整個活動的科技未來感受。
（3）聯想法
總結品牌圖形特征，通過相似形代表品牌主題，進行設計延展。
案例：《TEDx Koenigsallee》從X的變化進行圖形創作，形成有序的X，成為輔助圖形進行品牌設計延展。
案例：《Qzone 12th》從QQ空間的logo出發，圍繞星星造型設計延展出不同的圖形。注入最有記憶點的品牌色，紋樣的多樣性也映射出用戶青春故事的多樣性。
（3）重構法
總結品牌圖形特征，通過相似形代表品牌主題符號。
案例：《黃鉆10周年》從logo從中提取“10”和“黃鉆”元素來進行設計創作，使用重構法重新對黃鉆的特權進行歸納。分會場以及其他的延展圖形（游戲、直播、情侶空間、旅行、個性化等）繼續沿用10字的造型進行重構延展。
案例：《騰訊20周年》騰訊公司旗下已經有數百種產品服務和組織機構，在20周年之際設計團隊發起把每一個業務、部門進行圖形創作，利用重構法進行延展設計，表達出每個子品牌、業務、部門的不同的性格、特性以及職能。
以上高效的創作方法與技巧，希望對大家后續的設計工作中有所幫助，為了項目的準確性，需要多與你的合作伙伴、需求方進行反復溝通；明確了項目目標、用戶人群，進行創意、洞察得出指導項目的設計策略進行高效的設計執行。
案例應用
通過《星聯賽》案例來復盤一次完整的運營需求設計步驟。首先從需求目標入手，電競行業近年來可謂炙手可熱，用戶玩家都以觀眾的身份投身于電競項目，能以選手身份在電競比賽中競技的人其實鳳毛麟角，許多玩家都會幻想成為一名電競選手征戰電競比賽?！缎锹撡悺范床炝送婕也莞碾姼倝?，希望能承辦實現每個玩家心中電競夢想的比賽，全民體驗電競的樂趣。
構圖-logo
不同于普通的運營活動，星聯賽項目啟動后，第一步，需為整個活動設立品牌logo，將QQ空間logo與“Victory”進行結合創造“勝利五星”的圖形，象征每位玩家角逐勝利的雄心壯志，寓意很貼切電競比賽，也容易讓用戶聯想到QQ空間。
字體-logo
在進行創作logo字體設計時，也提煉出的“V”和“三角”元素運用在字體中。為了貼合電競比賽緊張激情氛圍，將心跳波動的元素與“星聯賽”字體結合。
色彩-logo
活動單色反白logo確定之后，我們繼續塑造logo的質感，三角形作為背景襯托整個《星聯賽》logo。在選取配色的時候，考慮到電競比賽也是體育競技的一環，在「星聯賽」籌備同時，亞運會也將電子競技項目正式納入了亞運會表演項目，所以我們選取了象征勝利榮耀的金色與紅色來詮釋星聯賽的體育競技屬性。
構圖-主視覺
確定好logo設計后，我們進入構圖的創作，主KV的構圖風格需與logo呼應，同時它也將奠定界面的視覺設計延展基調。
為此創作了三個方向的概念稿：
- 一是插滿各種游戲道具的武器星球；
- 二是結合“鐵王座”的梗，設計一個游戲道具打造的至尊王座；
- 三是由游戲中的元素共同組成的勝利之門。
最終選擇了和logo外形更加適配的倒三角形“勝利之門”這一方案作進一步細化。3D白模階段，同樣運用了打散重組的方式，將幾款游戲的元素集結到主體模型中；王者榮耀的水晶塔、武器、翅膀；兩側部分為QQ飛車中的賽車模型，下半部分則是出和平精英中的各類槍械。
色彩-主視覺
主視覺整體的色彩搭配，沿用logo的配色，象征勝利榮耀的金色與紅色來詮釋星聯賽的體育競技屬性。背景搭配宇宙深邃的藍色來突出Cyperpunk三角金屬門，希望通過這種三維虛擬的表現形式第一時間抓住用戶眼球，增強畫面對用戶的感染力，添加藍色與紅色的對比進行競技對抗。
延展-主活動
活動中有大量圖片展示（如每款游戲的輪播圖、賽事和戰隊精彩視頻回放、積分商城獎品展示、浮層等）這都是需要我們利用起來強化品牌感的位置，也可以打造活動細節，提升項目視覺品質。以《星聯賽》首頁輪播圖為例，運用logo中提煉出的“V”元素，延續整個活動傳達出的品牌感受，結合偏游戲感擬物化的視覺表現，搭配金色，雕琢細節，強化質感，貫穿到整個延展設計中。
活動詳情頁是對具體游戲相關數據展示，頭部運用等邊三角形元素對logo加以修飾，結合本款游戲的CG原畫，增強頁面的游戲感和競技感。戰隊詳情頁主要展示本戰隊的排名、戰績、參賽場次等數據烘托戰隊競賽氛圍。
游戲《王者榮耀》、《QQ飛車》以及《和平精英》，在icon的設計中體現出每款游戲特點的同時還要與星聯賽整體的視覺調性保持一致，首先提取游戲中具有代表性的元素，分別來代表：報名玩家、參賽戰隊、對戰場次。圖形以三角形為基礎，添加質感，折角由45°角相切而成，三角邊框協調圖標之間的平衡感，確保圖標體量感統一。
最后，希望本文介紹的方法可以幫助大家的設計創作提升效率速度。
本文由 @騰訊ISUX 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
文字是關鍵，圖片是次要，看看招商展示就知道