在運(yùn)營(yíng)專題高效設(shè)計(jì)法（上）中，我們一起探討了項(xiàng)目分析的四個(gè)步驟，從項(xiàng)目目標(biāo)到用戶人群，進(jìn)行分析洞察得出設(shè)計(jì)執(zhí)行方向的策略。在設(shè)計(jì)執(zhí)行版塊中介紹了【高效構(gòu)圖】、【高效色彩】的方法與技巧，接下來(lái)繼續(xù)跟隨我探討【字體】與【延展】的高效設(shè)計(jì)方法。

高效字體

字體設(shè)計(jì)是在創(chuàng)作運(yùn)營(yíng)設(shè)計(jì)中重要的組成部分，也是互聯(lián)網(wǎng)行業(yè)從事設(shè)計(jì)所最重要的基礎(chǔ)要素。運(yùn)用裝飾手法來(lái)美化文字，增強(qiáng)視覺效果，提高作品的訴求和賦予版面的審美價(jià)值。但創(chuàng)作一款字體需要花費(fèi)較大的時(shí)間成本，那么在我們節(jié)奏較快的運(yùn)營(yíng)設(shè)計(jì)中，如何高效地創(chuàng)作一款適合項(xiàng)目主題并且符合設(shè)計(jì)審美的字體呢？

我總結(jié)出了四套設(shè)計(jì)方法：字庫(kù)造字、矩形造字、鋼筆造字、手繪造字。

首先在開始創(chuàng)作字體之前，需要了解基本的造字流程，同樣也分為四個(gè)步驟：

1. 分析：根據(jù)“項(xiàng)目分析”得出的設(shè)計(jì)策略，對(duì)“活動(dòng)標(biāo)題”或“主題文案”進(jìn)行字體分析得出適合的風(fēng)格方向，收集相關(guān)主題案例資料，輔助創(chuàng)作。
2. 搭建：利用字庫(kù)字體或手繪來(lái)搭建該字體骨架。
3. 創(chuàng)作：使用變化、裁剪、裝飾、添加等方法進(jìn)行創(chuàng)作表達(dá)主題風(fēng)格寓意。
4. 塑造：添加顏色、特效、裝飾物、背景，置入使用場(chǎng)景，搭配輔助文案驗(yàn)證其效果。

了解了造字的基本流程，設(shè)計(jì)師還需完善好電腦里的字庫(kù)，對(duì)字體廠商需要保持好奇、敏感以及尊敬。

接下來(lái)將介紹四種字體設(shè)計(jì)的高效方法：

1. 字庫(kù)造字

利用現(xiàn)有字庫(kù)字體，進(jìn)行有主題的字體改造、筆畫添加、筆畫刪減、或重新組合的方法。分為：嫁接、刪減、替代三種不同的方法，適應(yīng)不同的創(chuàng)作方向。

嫁接：根據(jù)主題進(jìn)行針對(duì)性的設(shè)計(jì)修飾，在橫、豎、撇、捺的筆畫端點(diǎn)或字體的襯線部分出進(jìn)行添加，通過(guò)“多”出來(lái)的細(xì)節(jié)，讓字體符合項(xiàng)目主題。比如：添加剛直硬朗的裝飾讓字體變得有力量，添加尖銳三角裝飾讓字體變得尖銳等……

刪減：刪減與嫁接是相對(duì)應(yīng)的，在保證字體識(shí)別度的前提下，對(duì)筆畫進(jìn)行斷筆、刪除、裁剪；或者將筆畫的某一個(gè)局部斷開，讓字體存在殘缺之美。

替代：在原字體的基礎(chǔ)上，刪減某處或多處筆畫，再用其他形式進(jìn)行代替，可以是另一種字體筆畫替代或是圖形創(chuàng)意的添加。

2. 矩形造字

利用矩形、方形、平行四邊形進(jìn)行拼接方法字體設(shè)計(jì)，選取一款適合的字體作為基礎(chǔ)骨架，根據(jù)主題需要進(jìn)行拉伸變形（高、矮、胖、瘦）再將“矩形”元素在骨架上拼接設(shè)計(jì)。

Tips：在使用矩形造字法的過(guò)程中，需要遵循字體的粗細(xì)原則（字體在字體筆畫結(jié)構(gòu)簡(jiǎn)單的情況下，可以用同樣粗細(xì)的矩形來(lái)拼接，但是字體為較復(fù)雜大筆畫結(jié)構(gòu)時(shí)可以遵循以下五個(gè)原則：橫細(xì)豎粗、副細(xì)主粗、內(nèi)細(xì)外粗、密細(xì)疏粗、交叉變細(xì)）

案例：《放肆青春》

分析：該字體是QQ空間12周年的一款廣告字體，需要運(yùn)用在運(yùn)營(yíng)活動(dòng)、品牌廣告等一系列的地方。品牌紋樣的方形搭配以及構(gòu)成形式，需要一款偏方塊字體來(lái)進(jìn)行搭配。

搭建：結(jié)合方形品牌紋樣，選取了結(jié)構(gòu)比較方正硬朗結(jié)實(shí)的“造字工房版黑”字體來(lái)作為字體骨架。

創(chuàng)作：根據(jù)搭建的版黑字體骨架將字體進(jìn)行“矩形再造”，使用“斷筆處理”增強(qiáng)設(shè)計(jì)感。設(shè)計(jì)過(guò)程中調(diào)整筆畫粗細(xì)、端點(diǎn)以及角度。

塑造：利用矩形造字的五大原則，進(jìn)行最終的完稿調(diào)整。以及運(yùn)用同樣的原理，輸出了整套的文案字庫(kù)來(lái)適應(yīng)QQ空間12周年項(xiàng)目中所有運(yùn)用。

完稿后，將其他文案字體也進(jìn)行了同樣的創(chuàng)作設(shè)計(jì)，適用在品牌廣告、運(yùn)營(yíng)活動(dòng)當(dāng)中。

3. 鋼筆造字

利用“鋼筆工具”來(lái)設(shè)計(jì)字體的筆畫，通過(guò)字體的相連、相減、圓滑達(dá)到設(shè)計(jì)感符合項(xiàng)目主題。

案例：《空間大咖秀》

分析：QQ空間直播平臺(tái)推出的欄目，會(huì)讓合作藝人來(lái)進(jìn)行直播、互動(dòng)。需要整個(gè)主題字有節(jié)目感、時(shí)尚感、娛樂性、親民性等特點(diǎn)。

搭建：運(yùn)用手繪的形式來(lái)進(jìn)行基礎(chǔ)搭建，在草圖形式上大概畫出字體造型，需表達(dá)粗細(xì)、筆畫、曲線、組合形式等。

創(chuàng)作：在軟件里用鋼筆工具畫出筆畫、曲線、以及圓角半徑和線條粗度，進(jìn)行字體編排組合，添加“播放”相關(guān)創(chuàng)意的圖形。

塑造：繼續(xù)調(diào)整字的大小與結(jié)構(gòu)，置入使用場(chǎng)景，確定最終描邊粗度，添加色彩、效果、質(zhì)感讓主題文字表述得更為形象生動(dòng)。

4. 手繪造字

這類字體本身帶有手繪痕跡，清新別致，利用筆刷直接在軟件里寫出的字體，隨性自由，使用場(chǎng)景廣泛，但對(duì)設(shè)計(jì)師的字體基礎(chǔ)和書法功底要求很高。這種方法當(dāng)然因人而異，根據(jù)設(shè)計(jì)師的書法功底，也有不同的做法，可以直接書寫，也可以使用一款字庫(kù)字體作為骨骼框架，在其基礎(chǔ)上進(jìn)行手繪創(chuàng)作。

案例：《QQ空間直播版本宣傳》

QQ空間直播版本宣傳，UGC直播場(chǎng)景，用直播來(lái)給好友分享此時(shí)此刻的心情、感受、畫面。采用了手繪體、手記體形式可以增添直播場(chǎng)景中的即時(shí)感。

最后，按其方法繼續(xù)延展出其他兩組字體，覆蓋更多的直播場(chǎng)景中的故事……

高效延展

經(jīng)過(guò)構(gòu)圖、色彩、字體的設(shè)計(jì)執(zhí)行基本完成頂部為視覺風(fēng)格的創(chuàng)意構(gòu)圖，接下來(lái)就開始進(jìn)入設(shè)計(jì)延展的設(shè)計(jì)。好的設(shè)計(jì)延展，可讓活動(dòng)變得加分添彩。

那么如何高效地進(jìn)行設(shè)計(jì)延展部分呢？分為“表現(xiàn)方式”與“設(shè)計(jì)方法”兩個(gè)部分來(lái)進(jìn)行設(shè)計(jì)。

表現(xiàn)方式

表現(xiàn)方式我們可以從最基礎(chǔ)的，點(diǎn)、線、面的形式進(jìn)行拆分，來(lái)輔助設(shè)計(jì)延展。

點(diǎn)：網(wǎng)格布局、線性布局、隨機(jī)布局、半調(diào)化以及粒子組合。

線：線性排列、面化、結(jié)構(gòu)化、粗細(xì)混合以及異性組合。

面：拼接、疊加、偽3D、Alpha、層級(jí)化。

設(shè)計(jì)方法

將表現(xiàn)方式進(jìn)行設(shè)計(jì)再創(chuàng)作可分為：拆分、釋義、聯(lián)想、重構(gòu)的方法。

（1）拆分法

將品牌logo主體，拆分為多個(gè)簡(jiǎn)約的圖形元素作為輔助圖形進(jìn)行延展。

案例：《Buchanan》從Buchanan的品牌logo中拆分出圖形元素進(jìn)行重新排列，組合新的品牌元素（數(shù)字、圖形）結(jié)合品牌色進(jìn)行設(shè)計(jì)延展。

案例：《QGC》是QQ游戲嘉年華的簡(jiǎn)稱，是一年一度QQ游戲平臺(tái)的賽事盛宴，為了更好的突出QQ游戲的品牌創(chuàng)作了機(jī)甲戰(zhàn)鵝來(lái)演繹QGC的專屬形象，在logo的字體設(shè)計(jì)、以及輔助圖形創(chuàng)作上中也同樣提取了高達(dá)的機(jī)甲元素進(jìn)行設(shè)計(jì)延展。

案例：《QGC》是QQ游戲嘉年華的簡(jiǎn)稱，是一年一度QQ游戲平臺(tái)的賽事盛宴，為了更好的突出QQ游戲的品牌創(chuàng)作了機(jī)甲戰(zhàn)鵝來(lái)演繹QGC的專屬形象，在logo的字體設(shè)計(jì)、以及輔助圖形創(chuàng)作上中也同樣提取了高達(dá)的機(jī)甲元素進(jìn)行設(shè)計(jì)延展。

（2）釋義法

結(jié)合品牌釋意或形象，衍伸出多種關(guān)聯(lián)圖形元素作為輔助圖形進(jìn)行設(shè)計(jì)延展。

案例：《COP25》這款氣候變化大會(huì)的品牌創(chuàng)意是從不同天氣、氣候的特征提取的元素進(jìn)行l(wèi)ogo創(chuàng)作，輔助圖形也是根據(jù)天氣、氣候的各種形態(tài)進(jìn)行重組搭配創(chuàng)作。

案例：《QQ20周年 · 大會(huì)員預(yù)熱》太空企鵝探索科技作為本次20周年的品牌理念，來(lái)寓意新的里程碑。在進(jìn)行運(yùn)營(yíng)活動(dòng)設(shè)計(jì)時(shí)，希望繼續(xù)延展探索宇宙的概念。用深藍(lán)色宇宙銀河作為整個(gè)主活動(dòng)的背景承托氛圍。主視覺使用了Cyperpunk動(dòng)畫效果，延展設(shè)計(jì)中按鈕和邊框色圖形上也效仿科技電影中未來(lái)UI效果，強(qiáng)化整個(gè)活動(dòng)的科技未來(lái)感受。

（3）聯(lián)想法

總結(jié)品牌圖形特征，通過(guò)相似形代表品牌主題，進(jìn)行設(shè)計(jì)延展。

案例：《TEDx Koenigsallee》從X的變化進(jìn)行圖形創(chuàng)作，形成有序的X，成為輔助圖形進(jìn)行品牌設(shè)計(jì)延展。

案例：《Qzone 12th》從QQ空間的logo出發(fā)，圍繞星星造型設(shè)計(jì)延展出不同的圖形。注入最有記憶點(diǎn)的品牌色，紋樣的多樣性也映射出用戶青春故事的多樣性。

（3）重構(gòu)法

總結(jié)品牌圖形特征，通過(guò)相似形代表品牌主題符號(hào)。

案例：《黃鉆10周年》從logo從中提取“10”和“黃鉆”元素來(lái)進(jìn)行設(shè)計(jì)創(chuàng)作，使用重構(gòu)法重新對(duì)黃鉆的特權(quán)進(jìn)行歸納。分會(huì)場(chǎng)以及其他的延展圖形（游戲、直播、情侶空間、旅行、個(gè)性化等）繼續(xù)沿用10字的造型進(jìn)行重構(gòu)延展。

案例：《騰訊20周年》騰訊公司旗下已經(jīng)有數(shù)百種產(chǎn)品服務(wù)和組織機(jī)構(gòu)，在20周年之際設(shè)計(jì)團(tuán)隊(duì)發(fā)起把每一個(gè)業(yè)務(wù)、部門進(jìn)行圖形創(chuàng)作，利用重構(gòu)法進(jìn)行延展設(shè)計(jì)，表達(dá)出每個(gè)子品牌、業(yè)務(wù)、部門的不同的性格、特性以及職能。

以上高效的創(chuàng)作方法與技巧，希望對(duì)大家后續(xù)的設(shè)計(jì)工作中有所幫助，為了項(xiàng)目的準(zhǔn)確性，需要多與你的合作伙伴、需求方進(jìn)行反復(fù)溝通；明確了項(xiàng)目目標(biāo)、用戶人群，進(jìn)行創(chuàng)意、洞察得出指導(dǎo)項(xiàng)目的設(shè)計(jì)策略進(jìn)行高效的設(shè)計(jì)執(zhí)行。

案例應(yīng)用

通過(guò)《星聯(lián)賽》案例來(lái)復(fù)盤一次完整的運(yùn)營(yíng)需求設(shè)計(jì)步驟。首先從需求目標(biāo)入手，電競(jìng)行業(yè)近年來(lái)可謂炙手可熱，用戶玩家都以觀眾的身份投身于電競(jìng)項(xiàng)目，能以選手身份在電競(jìng)比賽中競(jìng)技的人其實(shí)鳳毛麟角，許多玩家都會(huì)幻想成為一名電競(jìng)選手征戰(zhàn)電競(jìng)比賽?！缎锹?lián)賽》洞察了玩家草根的電競(jìng)夢(mèng)，希望能承辦實(shí)現(xiàn)每個(gè)玩家心中電競(jìng)夢(mèng)想的比賽，全民體驗(yàn)電競(jìng)的樂趣。

構(gòu)圖-logo

不同于普通的運(yùn)營(yíng)活動(dòng)，星聯(lián)賽項(xiàng)目啟動(dòng)后，第一步，需為整個(gè)活動(dòng)設(shè)立品牌logo，將QQ空間logo與“Victory”進(jìn)行結(jié)合創(chuàng)造“勝利五星”的圖形，象征每位玩家角逐勝利的雄心壯志，寓意很貼切電競(jìng)比賽，也容易讓用戶聯(lián)想到QQ空間。

字體-logo

在進(jìn)行創(chuàng)作logo字體設(shè)計(jì)時(shí)，也提煉出的“V”和“三角”元素運(yùn)用在字體中。為了貼合電競(jìng)比賽緊張激情氛圍，將心跳波動(dòng)的元素與“星聯(lián)賽”字體結(jié)合。

色彩-logo

活動(dòng)單色反白logo確定之后，我們繼續(xù)塑造logo的質(zhì)感，三角形作為背景襯托整個(gè)《星聯(lián)賽》logo。在選取配色的時(shí)候，考慮到電競(jìng)比賽也是體育競(jìng)技的一環(huán)，在「星聯(lián)賽」籌備同時(shí)，亞運(yùn)會(huì)也將電子競(jìng)技項(xiàng)目正式納入了亞運(yùn)會(huì)表演項(xiàng)目，所以我們選取了象征勝利榮耀的金色與紅色來(lái)詮釋星聯(lián)賽的體育競(jìng)技屬性。

構(gòu)圖-主視覺

確定好logo設(shè)計(jì)后，我們進(jìn)入構(gòu)圖的創(chuàng)作，主KV的構(gòu)圖風(fēng)格需與logo呼應(yīng)，同時(shí)它也將奠定界面的視覺設(shè)計(jì)延展基調(diào)。

為此創(chuàng)作了三個(gè)方向的概念稿：

• 一是插滿各種游戲道具的武器星球；
• 二是結(jié)合“鐵王座”的梗，設(shè)計(jì)一個(gè)游戲道具打造的至尊王座；
• 三是由游戲中的元素共同組成的勝利之門。

最終選擇了和logo外形更加適配的倒三角形“勝利之門”這一方案作進(jìn)一步細(xì)化。3D白模階段，同樣運(yùn)用了打散重組的方式，將幾款游戲的元素集結(jié)到主體模型中；王者榮耀的水晶塔、武器、翅膀；兩側(cè)部分為QQ飛車中的賽車模型，下半部分則是出和平精英中的各類槍械。

色彩-主視覺

主視覺整體的色彩搭配，沿用logo的配色，象征勝利榮耀的金色與紅色來(lái)詮釋星聯(lián)賽的體育競(jìng)技屬性。背景搭配宇宙深邃的藍(lán)色來(lái)突出Cyperpunk三角金屬門，希望通過(guò)這種三維虛擬的表現(xiàn)形式第一時(shí)間抓住用戶眼球，增強(qiáng)畫面對(duì)用戶的感染力，添加藍(lán)色與紅色的對(duì)比進(jìn)行競(jìng)技對(duì)抗。

延展-主活動(dòng)

活動(dòng)中有大量圖片展示（如每款游戲的輪播圖、賽事和戰(zhàn)隊(duì)精彩視頻回放、積分商城獎(jiǎng)品展示、浮層等）這都是需要我們利用起來(lái)強(qiáng)化品牌感的位置，也可以打造活動(dòng)細(xì)節(jié)，提升項(xiàng)目視覺品質(zhì)。以《星聯(lián)賽》首頁(yè)輪播圖為例，運(yùn)用logo中提煉出的“V”元素，延續(xù)整個(gè)活動(dòng)傳達(dá)出的品牌感受，結(jié)合偏游戲感擬物化的視覺表現(xiàn)，搭配金色，雕琢細(xì)節(jié)，強(qiáng)化質(zhì)感，貫穿到整個(gè)延展設(shè)計(jì)中。

活動(dòng)詳情頁(yè)是對(duì)具體游戲相關(guān)數(shù)據(jù)展示，頭部運(yùn)用等邊三角形元素對(duì)logo加以修飾，結(jié)合本款游戲的CG原畫，增強(qiáng)頁(yè)面的游戲感和競(jìng)技感。戰(zhàn)隊(duì)詳情頁(yè)主要展示本戰(zhàn)隊(duì)的排名、戰(zhàn)績(jī)、參賽場(chǎng)次等數(shù)據(jù)烘托戰(zhàn)隊(duì)競(jìng)賽氛圍。

游戲《王者榮耀》、《QQ飛車》以及《和平精英》，在icon的設(shè)計(jì)中體現(xiàn)出每款游戲特點(diǎn)的同時(shí)還要與星聯(lián)賽整體的視覺調(diào)性保持一致，首先提取游戲中具有代表性的元素，分別來(lái)代表：報(bào)名玩家、參賽戰(zhàn)隊(duì)、對(duì)戰(zhàn)場(chǎng)次。圖形以三角形為基礎(chǔ)，添加質(zhì)感，折角由45°角相切而成，三角邊框協(xié)調(diào)圖標(biāo)之間的平衡感，確保圖標(biāo)體量感統(tǒng)一。

最后，希望本文介紹的方法可以幫助大家的設(shè)計(jì)創(chuàng)作提升效率速度。

本文由 @騰訊ISUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議