@騰訊游戲TGideas 本期《ideas》主要就"書(shū)法字體在設(shè)計(jì)中的得當(dāng)應(yīng)用"與"信息可視化研究"這兩個(gè)主題進(jìn)行分享。
本期作者：jasongao ，boxzhang

1.淺談書(shū)法在視覺(jué)設(shè)計(jì)中的應(yīng)用 by:jasongao

用 毛筆書(shū)寫(xiě)漢字是一種個(gè)性、抽象的中國(guó)傳統(tǒng)文化藝術(shù)。它通過(guò)簡(jiǎn)潔的線(xiàn)條，演繹出魅力無(wú)窮的視覺(jué)藝術(shù)形象，表現(xiàn)出豐富的內(nèi)涵，極具表現(xiàn)力和感染力。漢字通過(guò)毛 筆的書(shū)寫(xiě)，不單是把字寫(xiě)出來(lái)，更重要的是將精神和意境傳達(dá)出來(lái)，使文字具有更高的審美價(jià)值和藝術(shù)特征。書(shū)法的應(yīng)用也豐富了視覺(jué)設(shè)計(jì)的表現(xiàn)形式。

> 書(shū)法字體通常有五種："篆隸楷行草"：

篆書(shū)
篆書(shū)空間結(jié)構(gòu)勻稱(chēng)、中正、嚴(yán)整有序。嚴(yán)謹(jǐn)、秩序、莊嚴(yán)的靜態(tài)美，給人一種古色古香、古樸高雅的的感覺(jué)。常應(yīng)用于賀年卡、請(qǐng)柬、印章設(shè)計(jì)等方面。

隸書(shū)
隸書(shū)是小篆的簡(jiǎn)易寫(xiě)法。蠶頭雁尾的橫和分張外拓的撇捺，是隸書(shū)最有特征的筆畫(huà)。隸書(shū)平正、清晰，給人莊重、勻整的感覺(jué)。

楷書(shū)
楷書(shū)又稱(chēng)"正書(shū)"，從篆、隸演變而來(lái)?？瑫?shū)筆跡有力，筆劃清楚，易讀性高。一般書(shū)籍信件常用的標(biāo)準(zhǔn)字。

行書(shū)
行書(shū)是楷書(shū)的變體。濃淡相映，動(dòng)靜兼有，具有陽(yáng)剛之美。易識(shí)好寫(xiě)，實(shí)用范圍廣，被認(rèn)為是最流行的字體。常應(yīng)用于產(chǎn)品包裝、文化類(lèi)書(shū)籍封面等方面。

草書(shū)
草書(shū)是簡(jiǎn)省字體。體勢(shì)放縱，輕重緩急，有意動(dòng)神飛的意境，極具個(gè)性。一般草書(shū)在造型上較難被大眾理解，缺乏易讀性。在煙酒包裝、書(shū)籍裝禎等方面相對(duì)應(yīng)用較多。

> 書(shū)法在現(xiàn)代視覺(jué)設(shè)計(jì)中的應(yīng)用
隨著社會(huì)的發(fā)展，書(shū)法的應(yīng)用范圍不斷被拓展。在現(xiàn)代視覺(jué)設(shè)計(jì)中也得到設(shè)計(jì)師的青睞，運(yùn)用的好，往往是點(diǎn)睛之筆，很好的豐富了設(shè)計(jì)元素。書(shū)法的恰當(dāng)應(yīng)用有助于對(duì)設(shè)計(jì)主題更好的體現(xiàn)，取得更好的視覺(jué)效果，它的感染力非同一般。

近些年，在游戲包裝上，書(shū)法越來(lái)越被設(shè)計(jì)界所重視，一些優(yōu)秀作品應(yīng)運(yùn)而生:

上圖是《QQ仙俠傳》封測(cè)官網(wǎng)，水墨風(fēng)韻盡顯國(guó)風(fēng)網(wǎng)游之魅力，書(shū)法的運(yùn)用可謂是畫(huà)龍點(diǎn)睛，表現(xiàn)得淋漓盡致。

上圖是2009技藝非凡變形金剛設(shè)計(jì)大賽一等獎(jiǎng)作品。精美中國(guó)水墨風(fēng)格變形金剛別有一番風(fēng)味，中西風(fēng)格的融合很到位，書(shū)法的完美運(yùn)用更是令人贊嘆。

上面的游戲?qū)ｎ}頁(yè)面中，沒(méi)有一如既往的人物角色，也沒(méi)有華麗的場(chǎng)景，而是選用書(shū)法作為核心元素，拿捏的恰到好處，韻味十足，盡顯大氣。

Asta的官網(wǎng)，簡(jiǎn)潔獨(dú)特的版式，書(shū)法與墨跡的結(jié)合，大氣且有張力，典雅而不失時(shí)尚，令人佩服。

> 如何應(yīng)用書(shū)法
經(jīng)過(guò)對(duì)一些經(jīng)典之作的賞析，發(fā)現(xiàn)書(shū)法應(yīng)用到現(xiàn)代視覺(jué)設(shè)計(jì)中并非隨便拿過(guò)來(lái)直接使用，必須經(jīng)過(guò)反復(fù)推敲及設(shè)計(jì)加工。個(gè)人經(jīng)驗(yàn)總結(jié)了如下幾點(diǎn)：

1． 適用性： 書(shū)法并不是在任何設(shè)計(jì)中都適合使用的，有一定的適用范圍。如：書(shū)法有利于傳達(dá)"中國(guó)性"、"歷史性"、"古典的"、"藝術(shù)的"、"有文化底蘊(yùn)"、"古色古香"等信息，而不利于傳達(dá)"統(tǒng)一"、"現(xiàn)代"、"規(guī)范化"等信息。

2． 易讀性： 文字設(shè)計(jì)的根本目的是為了更好的傳達(dá)設(shè)計(jì)意圖和主題。因此，書(shū)法應(yīng)盡量使人易讀、易懂，切忌為了設(shè)計(jì)而設(shè)計(jì)。重點(diǎn)文字選用識(shí)別性強(qiáng)的字體，慎用繁體、草書(shū)和篆書(shū)。

3． 風(fēng)格： 應(yīng)充分考慮產(chǎn)品的特征，并注意書(shū)法與其它設(shè)計(jì)元素之間的協(xié)調(diào)關(guān)系。根據(jù)產(chǎn)品特色不同，所設(shè)計(jì)的字體風(fēng)格也各異：有的瀟灑流暢、潑墨自如；有的清新儒雅、端莊秀麗。設(shè)計(jì)形式也多姿多彩。

4． 美感與創(chuàng)造性： 從字形與排版上進(jìn)行推敲，反復(fù)琢磨，創(chuàng)造出獨(dú)具特色的字體，使字體形態(tài)和整體效果都能給人眼前一亮的愉悅視覺(jué)感受，更有利于設(shè)計(jì)意圖的傳達(dá)。

>以下是本人在一些游戲?qū)ｎ}頁(yè)面中的書(shū)法應(yīng)用小嘗試：

上圖是《七雄爭(zhēng)霸》在兩周年慶典之際推出的全新slogan——"贏(yíng)得天下"。根據(jù)對(duì)產(chǎn)品階段和特色的分析，采用了稍顯奔放筆觸的行書(shū)與隸書(shū)結(jié)合，試圖打造出古代帝王揮毫潑墨之霸氣。

上圖是《七雄爭(zhēng)霸》的跨服戰(zhàn)場(chǎng)專(zhuān)題，試圖通過(guò)行書(shū)蒼勁有力的筆觸，以及飛白和潑墨效果，給人一種力量感，加強(qiáng)PK氛圍。

上圖是《刀劍2》的賽事記錄專(zhuān)題，采用了行書(shū)與楷體的結(jié)合，這里的筆觸稍顯內(nèi)斂、穩(wěn)重，并與卷軸等古典元素結(jié)合，試圖打造出古樸、典藏之感覺(jué)。

以下是TGIDEAS團(tuán)隊(duì)在部分游戲?qū)ｎ}頁(yè)面中的書(shū)法應(yīng)用嘗試：

> 游戲包裝設(shè)計(jì)中如何打造書(shū)法字體效果
在游戲包裝設(shè)計(jì)中，具體如何打造恰如其分的書(shū)法字體達(dá)到畫(huà)龍點(diǎn)睛之效果呢？結(jié)合個(gè)人經(jīng)驗(yàn)，總結(jié)了以下幾種方法，僅供大家參考：

1． 用字體： 此方法簡(jiǎn)單、快捷，只需下載并選擇合適的字體應(yīng)用到作品中即可。但現(xiàn)成的字體比較有限，且一般字體缺乏張力與個(gè)性，故在特色體現(xiàn)和原創(chuàng)性上有所限制。

2． 自己寫(xiě)： 設(shè)計(jì)師自己寫(xiě)出獨(dú)具特色且頗具美感的個(gè)性文字，并將設(shè)計(jì)意圖和主題很好的傳達(dá)出來(lái)，這樣的作品更具原創(chuàng)性和獨(dú)特風(fēng)格，頗好。當(dāng)然這需要設(shè)計(jì)師具有較強(qiáng)的書(shū)法功底。

3． 再加工： 現(xiàn)成字體不太合適，又沒(méi)有很好的書(shū)法功底，怎么辦？還有一種方法叫"再加工"。顧名思義，就是在現(xiàn)有字體的基礎(chǔ)上，進(jìn)行調(diào)整和修飾等設(shè)計(jì)處理，達(dá)到預(yù)期的 字體效果適用于整體設(shè)計(jì)。 一般大概分四步：選字體——改字形——加筆觸——加質(zhì)感。具體來(lái)講第一步就是通過(guò)一些書(shū)法字體網(wǎng)站，搜索、選擇適合的字體；第二步，在現(xiàn)有字體基礎(chǔ)上修改 部分筆畫(huà)得到合適的字形；第三步，用筆刷或畫(huà)筆添加筆觸和墨跡；第四步就是根據(jù)需要添加適當(dāng)?shù)募y理、材質(zhì)，并處理好與其它設(shè)計(jì)元素之間的協(xié)調(diào)關(guān)系。

> 結(jié)束語(yǔ)： 以上是個(gè)人的小結(jié)與嘗試，僅供參考。書(shū)法字體的設(shè)計(jì)方法和應(yīng)用還有很多，設(shè)計(jì)師們都各有奇招。 個(gè)人覺(jué)得運(yùn)用書(shū)法進(jìn)行視覺(jué)設(shè)計(jì)主要在于分析產(chǎn)品特色，找出書(shū)法與產(chǎn)品的交融點(diǎn)，創(chuàng)造獨(dú)特的書(shū)法效果，并體現(xiàn)價(jià)值。作為商業(yè)設(shè)計(jì)師，我們堅(jiān)持對(duì)書(shū)法應(yīng)用的探 討和學(xué)習(xí)，力求在設(shè)計(jì)中應(yīng)用得當(dāng)?shù)臅?shū)法字體，將產(chǎn)品的文化底蘊(yùn)、品牌形象、個(gè)性特色更好的體現(xiàn)出來(lái)，產(chǎn)生更大的魅力和價(jià)值。

2.圖解的藝術(shù)——信息可視化運(yùn)用by:boxzhang
圖 解的藝術(shù)——信息可視化運(yùn)用 信息爆炸的今天人們身邊擠滿(mǎn)著各類(lèi)數(shù)據(jù)，可視化的方式能在這堆容易被忽視的繁雜數(shù)據(jù)油田里挖掘出故事告訴大家。這就是信息可視化的魅力所在。 信息可視化，最早源于數(shù)據(jù)可視化，也就是我們熟悉的那些餅圖、直方圖、散點(diǎn)圖、柱狀圖等最原始的統(tǒng)計(jì)圖表。這里不細(xì)講歷史理論和糾結(jié)專(zhuān)業(yè)術(shù)語(yǔ)，再此貼一篇 來(lái)自UCDchina關(guān)于信息可視化的介紹博文，有興趣理清概念的可瀏覽。
以 前信息可視化在大眾們聽(tīng)起來(lái)異常高深莫測(cè)，涉及著制圖學(xué)，圖形繪制設(shè)計(jì)，數(shù)據(jù)采集，統(tǒng)計(jì)學(xué)，圖解技術(shù)等等等。而近幾年，因?yàn)槭郎系目蓯?ài)設(shè)計(jì)師們，把這樣一 個(gè)原本冷酷而機(jī)械的科學(xué)類(lèi)圖解變成平易近人而極具吸引力的"藝術(shù)品"，這也是最近信息可視化流行起來(lái)的原因。今天咱們聊的，就是這些運(yùn)用信息可視化思維制 作的"藝術(shù)品"。

在此把信息可視化分成兩種常用的設(shè)計(jì)類(lèi)型，一是呈現(xiàn)數(shù)據(jù)，二是陳述觀(guān)點(diǎn)。

1:呈現(xiàn)數(shù)據(jù)
設(shè)計(jì)師用直觀(guān)而極具美感的視覺(jué)表現(xiàn)方式把數(shù)據(jù)呈現(xiàn)出來(lái)，讀者在觀(guān)賞這件"藝術(shù)品"的時(shí)候自然讀到里面蘊(yùn)含著一些有趣的故事。 （就例如看facebook用戶(hù)連接數(shù)的可視化，能看到連線(xiàn)再美也連不進(jìn)中國(guó)版圖。）

Facebook全球用戶(hù)連接數(shù)：

qq的實(shí)時(shí)在線(xiàn)人數(shù)的可視化：

除了上述的兩個(gè)基于地圖的可視化，各種將傳統(tǒng)統(tǒng)計(jì)圖表經(jīng)過(guò)再設(shè)計(jì)，圖形美化，形象化的可視化都屬于這種類(lèi)型。
各種呈現(xiàn)數(shù)據(jù)類(lèi)型可視化：

互動(dòng)式數(shù)據(jù)呈現(xiàn)
在數(shù)據(jù)呈現(xiàn)類(lèi)的可視化項(xiàng)目中，設(shè)計(jì)師工作是要吸引讀者能自發(fā)挖掘數(shù)據(jù)里的故事，所以除了數(shù)據(jù)的視覺(jué)美化外，還會(huì)考慮讀圖體驗(yàn)的設(shè)計(jì)，也就是常用可交互方式來(lái)呈現(xiàn)整個(gè)可視化。

這里分享個(gè)案例：《university-autonomy》

university- autonomy網(wǎng)站主要讓讀者清晰快速對(duì)比歐洲各國(guó)大學(xué)的自治狀態(tài)，偏向閱讀功能性。網(wǎng)站分別把四類(lèi)自制狀態(tài)配以不同顏色：組織自治（橙色），金融配置 （紅色），教職任免（紫紅色）以及學(xué)術(shù)自制（深紫色）。并且都有各自小圖標(biāo)表示，為降低閱讀成本，每個(gè)代表國(guó)家也在地圖上呈現(xiàn)。瀏覽時(shí)可以點(diǎn)某一國(guó)家瀏覽 數(shù)據(jù)，也可以直接點(diǎn)擊四類(lèi)其中一類(lèi)來(lái)觀(guān)看各國(guó)的對(duì)比。例如點(diǎn)開(kāi)英國(guó)，圓型的國(guó)旗圖標(biāo)周?chē)⒉贾念?lèi)顏色的點(diǎn)，某一色條上點(diǎn)的多與少表示某一項(xiàng)自治得分多 寡。如此對(duì)比其他國(guó)家，英國(guó)在組織自制度上是第一位的，包括自由決定自治組織，各方面的選拔，決定任期以及設(shè)定院系內(nèi)部結(jié)構(gòu)等等。 這種互動(dòng)式的可視化更重要是優(yōu)化了數(shù)據(jù)的閱讀體驗(yàn)，想知道數(shù)據(jù)里的哪些方面由讀者自行決定，設(shè)計(jì)師提供了一個(gè)舒適的可視化閱讀環(huán)境。

2：陳述觀(guān)點(diǎn)
觀(guān)點(diǎn)陳述類(lèi)的可視化，就是設(shè)計(jì)師先對(duì)數(shù)據(jù)分析，把挖掘到的觀(guān)點(diǎn)直接告訴讀者。
最常見(jiàn)的就是信息圖表和圖示視頻：

a：信息圖表
例如"人間胸器"的信息圖里所說(shuō)的一些和我們息息相關(guān)卻沒(méi)細(xì)細(xì)研究過(guò)的數(shù)據(jù)，直接告訴讀者設(shè)計(jì)師挖掘到的觀(guān)點(diǎn)。 "女性正常狀態(tài)的乳頭高度只發(fā)揮了3/8的高度。平均擴(kuò)張后高達(dá)五個(gè)25美分幣高度。"（是不是有點(diǎn)要找硬幣試疊的感覺(jué)？）

人間胸器：

此類(lèi)可視化相比數(shù)據(jù)呈現(xiàn)類(lèi)有個(gè)明顯的優(yōu)勢(shì)，就是對(duì)于讀者來(lái)說(shuō)接受信息更加"簡(jiǎn)單粗暴"，而且設(shè)計(jì)起來(lái)也較為簡(jiǎn)便。

最近很多游戲在宣傳上也嘗試了這種可視化方式
就例如DNF阿拉德秘史項(xiàng)目
結(jié)合DNF玩家分析和項(xiàng)目組想要宣傳的東西和相應(yīng)的玩家數(shù)據(jù)尋求一些觀(guān)點(diǎn)，例如玩家喜歡討論天空套，那就挖掘瞎天空套的相關(guān)數(shù)據(jù)，哪些人買(mǎi)了，什么身份，所在城市，這些構(gòu)成了哪些好玩的觀(guān)點(diǎn)，并結(jié)合觀(guān)點(diǎn)加入情感化畫(huà)面表現(xiàn)，以互動(dòng)網(wǎng)站形式展現(xiàn)。
阿拉德秘史第二期——boss的辛酸故事：

b：圖示視頻
對(duì)比起信息圖表來(lái)說(shuō)，圖示視頻主要是表現(xiàn)手法的不同，對(duì)讀者的吸引程度也不一樣，但這需要一個(gè)好的"導(dǎo)演"。

這里展示一個(gè)Pinterest的可視化視頻：Pinterest Statistics Facts

Pinterest Statistics Facts:

視頻設(shè)計(jì)上非常細(xì)膩，包括整體色調(diào)和圖形動(dòng)態(tài)，細(xì)心可以發(fā)現(xiàn)里面展示的信息圖表設(shè)計(jì)非常形象，包括pinterest男女用戶(hù)比例的圖表直接拉大女生形象來(lái)對(duì)比，年齡層的圖標(biāo)用生日蛋糕的蠟燭燈火來(lái)做條形圖等等，滿(mǎn)滿(mǎn)有愛(ài)的細(xì)節(jié)耐人尋味。

相比信息圖表，圖示視頻會(huì)有個(gè)優(yōu)勢(shì)，就是好的動(dòng)態(tài)演示加上配音，可以彌補(bǔ)視覺(jué)設(shè)計(jì)上的不足， 例如這段《5分鐘，讓你了解自己都交了哪些稅》里提取的觀(guān)點(diǎn)非常切合民情，觀(guān)點(diǎn)異常犀利，即使視覺(jué)設(shè)計(jì)一般也能讓大家產(chǎn)生共鳴。

可視化設(shè)計(jì)方法——對(duì)比和比喻
無(wú)論是數(shù)據(jù)呈現(xiàn)還是觀(guān)點(diǎn)陳述，對(duì)比和比喻是都是可視化設(shè)計(jì)中最常用的手法。
a：對(duì)比——有對(duì)比就能催生故事。

就像Goldstar啤酒廣告，設(shè)計(jì)師把男女上洗手間的整個(gè)行為用流程圖表可視化出來(lái)，因?yàn)橛辛四信畬?duì)比而讓故事耐人尋味。從而讓目標(biāo)受眾了解一個(gè)觀(guān)點(diǎn)"感謝上帝你是個(gè)男的！"
Goldstar啤酒廣告：

還有上面提到的university-autonomy網(wǎng)站也是讓讀者對(duì)比各國(guó)大學(xué)數(shù)據(jù)從而讀出觀(guān)點(diǎn)。

b：比喻——把陌生的變熟悉
數(shù)據(jù)給到我們的都是陌生而繁雜的感覺(jué)，沒(méi)人會(huì)對(duì)一大堆煩躁的數(shù)據(jù)感興趣，設(shè)計(jì)師在數(shù)據(jù)呈現(xiàn)類(lèi)可視化設(shè)計(jì)的時(shí)候，多會(huì)用比喻的手法，把讀者感覺(jué)陌生的數(shù)據(jù)轉(zhuǎn)化為他們熟悉或者有認(rèn)知度的東西呈現(xiàn)給他們以達(dá)到共鳴。

This Exquisite Forest是Chris Milk在英國(guó)的一個(gè)藝術(shù)項(xiàng)目
先請(qǐng)一批藝術(shù)家繪制一個(gè)小短片，然后其他參與者可以在網(wǎng)站上不斷做上一個(gè)短片的接龍。（在此不細(xì)講整個(gè)藝術(shù)項(xiàng)目，有相關(guān)介紹有興趣可以看看項(xiàng)目介紹視頻）

這里主要介紹的是設(shè)計(jì)師利用了比喻手法做的一個(gè)可視化網(wǎng)站，把所有藝術(shù)家的起始視頻比喻為樹(shù)的根部，往后每個(gè)參與者接龍就會(huì)生出一支葉子，最終整個(gè)網(wǎng)站的視覺(jué)由參與者共同生成的，而且很直觀(guān)能看到那些小短片的接龍者特別多（枝繁葉茂）。
This Exquisite Forest:

用類(lèi)似手法的還有這個(gè)類(lèi)比宇宙的音樂(lè)操作界面，這里有相關(guān)介紹視頻
它把所有的音樂(lè)數(shù)據(jù)比喻成一個(gè)宇宙，音樂(lè)播放時(shí)長(zhǎng)比喻成星球運(yùn)行軌跡，同樣是比喻手法的信息可視化。

結(jié)語(yǔ)：
其實(shí)信息可視化是個(gè)跨學(xué)科領(lǐng)域需要龐大知識(shí)體系支撐的研究方向，但并不等于就是離我們?nèi)绱诉b不可及，我們無(wú)非是學(xué)習(xí)一種信息可視化的思維方式，創(chuàng)建那些以直觀(guān)方式傳達(dá)抽象信息的手段和方法，用我們?cè)O(shè)計(jì)師獨(dú)特的視角，從可信的數(shù)據(jù)油田中挖掘大家喜聞樂(lè)見(jiàn)的故事！

原文地址：http://tgideas.qq.com/webplat/info/news_version3/804/808/884/m579/201303/198029.shtml