項(xiàng)目案例｜企鵝電競品牌字體設(shè)計(jì)之路
一. 字體設(shè)計(jì)的背景
平臺定位的轉(zhuǎn)變
企鵝電競初期的定位是移動電競內(nèi)容平臺，為玩家提供移動電競的一站式體驗(yàn)，包括有賽事、直播、視頻等內(nèi)容。而隨著業(yè)務(wù)的壯大，企鵝電競已經(jīng)發(fā)展為以游戲直播內(nèi)容為主，泛娛樂多元化發(fā)展為輔，游戲興趣同好的聚集地和優(yōu)質(zhì)內(nèi)容提供平臺。平臺在字體的運(yùn)用上也隨之需要做品牌的升級和轉(zhuǎn)變。
IP 形象的誕生
而基于產(chǎn)品定位，建立了以 IP 形象為核心的具有情感化的品牌印象，提升用戶的認(rèn)知和品牌的傳播力，豐富了平臺多元化內(nèi)容的情感化傳達(dá)。配合 IP 形象，急需一套規(guī)范的字體幫助 IP 的語言、情感與行為的表達(dá)。
雜亂的字體運(yùn)用
總結(jié)線上各處字體的運(yùn)用發(fā)現(xiàn)如下幾個問題：
1 .字體風(fēng)格雜亂，沒有一個統(tǒng)一的字體，未能形成一個主導(dǎo)的字體方向；
2 .在相同場景下，例如平臺的功能模塊，字體的風(fēng)格沒有擴(kuò)展性；
3 .品牌感知弱，沒有形成風(fēng)格。除此之外，沒有統(tǒng)一的字體指導(dǎo)下，極大的降低了審核合作方設(shè)計(jì)輸出的審核效率。
不難發(fā)現(xiàn)平臺在玩法、運(yùn)營活動、線下推廣等的字體運(yùn)用雜亂沒有統(tǒng)一的標(biāo)準(zhǔn)。而字體設(shè)計(jì)的規(guī)范運(yùn)用，其最大優(yōu)點(diǎn)在于更好地輔助整合平臺品牌系統(tǒng)，并滿足不同的場景需求，使所有玩法及運(yùn)營活動在文字素材的運(yùn)用達(dá)到統(tǒng)一；并且可有效提高設(shè)計(jì)效率，減少審核時間，避免出現(xiàn)盲目設(shè)計(jì)情況出現(xiàn)。
二. 字體設(shè)計(jì)的方向
根據(jù)平臺定位的轉(zhuǎn)變、 IP 形象的建立、雜亂的字體運(yùn)用三個背景下，推導(dǎo)出符合平臺字體設(shè)計(jì)的指導(dǎo)方向，分別為 獨(dú)特性 -- 符合平臺定位與 IP 形象的特征，統(tǒng)一性 -- 統(tǒng)一字體的規(guī)范運(yùn)用，適用性 -- 適用于平臺所有玩法及運(yùn)營活動。
以品牌定位及 IP 形象的特征，結(jié)合字形的重心、字重、中宮、字懷、字面和細(xì)節(jié) 6 個維度來來確立字形的基本風(fēng)格。重心平穩(wěn)的字體重心；筆畫較粗的字重特點(diǎn)；中宮偏緊的中宮特點(diǎn)；留白少的字懷；正方形的字面；筆畫特點(diǎn)為斷線、斜切。
三. 字體設(shè)計(jì)的執(zhí)行
設(shè)計(jì)元素
在執(zhí)行之前找到與字體設(shè)計(jì)方向相符的參考字體和搭建好基礎(chǔ)的框架，讓字體設(shè)計(jì)達(dá)到事半功倍的效果。分析字體庫里的各種類型的字體發(fā)現(xiàn)銳字銳線怒放黑簡，字形方正，中宮飽滿，筆畫較粗有力度，正符合平臺字體設(shè)計(jì)的方向。
劃定一個由 100 : 100 (寬 : 高) 為基本單位的網(wǎng)格，助于安排間架及筆畫位置的米字框和輔助控制空間比例以及收筆的井字框來組成一個字形設(shè)計(jì)的基礎(chǔ)框架。
筆畫特征
在確定好參考字體和劃定網(wǎng)格之后，在參考字體基礎(chǔ)上添加具有平臺特征的筆畫特征，并延展到各種筆畫表現(xiàn)上。
這里分成了基礎(chǔ)筆畫以及特殊筆畫，基礎(chǔ)筆畫里的橫、豎絕對的水平跟垂直，點(diǎn)、撇、捺則根據(jù)傾斜度選擇橫、豎粗細(xì)和筆畫始末水平、垂直切平。根據(jù)筆畫的書寫習(xí)慣，撇的筆畫單獨(dú)增加了微彎曲的樣式選擇。遇到復(fù)雜字體時 (看、刪等) ，根據(jù)參考字體分析主干和次干決定粗細(xì)。
特殊筆畫里根據(jù)筆畫的結(jié)構(gòu)特征，統(tǒng)一規(guī)范好筆畫角度及特征。把豎提的 “提” 角度保持在 12 度，豎鉤的 “鉤” 垂直轉(zhuǎn)折，斜鉤和豎彎鉤的 “鉤” 角度保持在 75 度，橫折彎 (橫折提) 則簡化了 “彎 (提) ” 筆畫，改成垂直轉(zhuǎn)折。
除此之外，為了減弱筆畫的這種硬朗、尖銳的感覺，在筆畫的始末與外轉(zhuǎn)折處增加 2 單位的圓角。
設(shè)計(jì)步驟
明確了設(shè)計(jì)元素與筆畫特征之后，在參考字體的字形基礎(chǔ)上和劃定的基礎(chǔ)字框中調(diào)整字形骨架，水平縮放約 92% 至飽滿狀態(tài)，讓字形能合適的放置在字框中。以梳理的筆畫粗細(xì)和筆畫特征，進(jìn)行字體基礎(chǔ)骨架搭建。一般情況下，每個字體的 “豎” 都會比 “橫” 略粗 1 pt。
字形骨架調(diào)整好之后，在適當(dāng)?shù)墓P畫接縫處增加 3pt 的間距和筆畫的始末處增加 2 pt 的圓角，以增加與 IP 形象相符的特點(diǎn)。
添加完筆畫細(xì)節(jié)后再整體調(diào)整字體重心、筆畫空間和粗細(xì)。
字體庫
創(chuàng)建企鵝電競字體庫，累積盡可能多的字，減少在字體設(shè)計(jì)上的工作量。
為了滿足更多場景的運(yùn)用，在普通版本的基礎(chǔ)上，增加識別性更強(qiáng)，更具適用性的細(xì)體版本，適用于正文、說明文等次級的輔助場景。
四. 字體設(shè)計(jì)的表現(xiàn)
平臺玩法運(yùn)用
那么有了這個字體設(shè)計(jì)的規(guī)范，在平臺玩法上怎么去運(yùn)用？首先，按照規(guī)范輸出字體的基礎(chǔ)形，然后根據(jù)玩法的風(fēng)格提取圖形、顏色等元素，結(jié)合基礎(chǔ)形輸出字體設(shè)計(jì)。既有玩法的屬性，也有屬于平臺的的品牌感。
以這個方式，我們運(yùn)用在平臺里所有的玩法及功能標(biāo)題，形成一套有規(guī)范的字體設(shè)計(jì)，不但提高了輸出效率，而且增加了平臺品牌系列感。
節(jié)日活動運(yùn)用
在節(jié)日的閃屏中增加品牌字的運(yùn)用，一方面輔助品牌形象小方鵝的情感表達(dá)，另一方面形成一套具有小方鵝品牌感的推廣素材。
線下周邊運(yùn)用
除了線上玩法及運(yùn)營活動外，線下的活動中也運(yùn)用了品牌字體，使企鵝電競在運(yùn)營和線下推廣等維度上具有品牌字體的統(tǒng)一性。
小結(jié)
平臺字體設(shè)計(jì)與一般字體設(shè)計(jì)不同，不但要替品牌說話，傳達(dá)品牌特征，還需要根據(jù)不同的功能、場景、用途等做適應(yīng)性的設(shè)計(jì)，也就是說平臺字體設(shè)計(jì)更像一個具有品牌特征的基礎(chǔ)字體包，為品牌的表達(dá)打好基礎(chǔ)。
平臺字體設(shè)計(jì)不是一蹴而就的，而是會根據(jù)使用功能、場景、對象、用途等，不斷磨合、優(yōu)化，最終達(dá)到最優(yōu)解。
超值課程推薦
超 10 億用戶的產(chǎn)品，到底是怎么做用戶體驗(yàn)的？
揭秘滴滴、蔚來等大廠的用戶體驗(yàn)設(shè)計(jì)策略
原創(chuàng)好文推薦
Web Vitals —— 谷歌的新一代 Web 性能體驗(yàn)和質(zhì)量指標(biāo)
2021 年用戶體驗(yàn)設(shè)計(jì)趨勢分析
想要引導(dǎo)用戶行為轉(zhuǎn)化，設(shè)計(jì)師必須深刻理解這 4 個認(rèn)知心理學(xué)理論
讓設(shè)計(jì)圈一片嘩然的 Google 新 logo 到底出了什么問題？國外的設(shè)計(jì)專家這么說
如何系統(tǒng)的增強(qiáng)用戶粘性，提升產(chǎn)品轉(zhuǎn)化率？你要懂得“行為設(shè)計(jì)學(xué)”
設(shè)計(jì)新趨勢「玻璃擬態(tài)」到底是什么？這里有一份實(shí)現(xiàn)效果的詳細(xì)教程
如何將設(shè)計(jì)系統(tǒng)快速的從 Sketch 切換到 Figma？這里有 6 個需要注意的關(guān)鍵點(diǎn)
歡迎大家關(guān)注三分設(shè)，每天分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。
