推薦！書法字體在設計中的應用及信息可視化研究

@騰訊游戲TGideas 本期《ideas》主要就"書法字體在設計中的得當應用"與"信息可視化研究"這兩個主題進行分享。
本期作者：jasongao ，boxzhang

1.淺談書法在視覺設計中的應用 by:jasongao

用 毛筆書寫漢字是一種個性、抽象的中國傳統文化藝術。它通過簡潔的線條，演繹出魅力無窮的視覺藝術形象，表現出豐富的內涵，極具表現力和感染力。漢字通過毛 筆的書寫，不單是把字寫出來，更重要的是將精神和意境傳達出來，使文字具有更高的審美價值和藝術特征。書法的應用也豐富了視覺設計的表現形式。

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

篆書
篆書空間結構勻稱、中正、嚴整有序。嚴謹、秩序、莊嚴的靜態美，給人一種古色古香、古樸高雅的的感覺。常應用于賀年卡、請柬、印章設計等方面。

隸書
隸書是小篆的簡易寫法。蠶頭雁尾的橫和分張外拓的撇捺，是隸書最有特征的筆畫。隸書平正、清晰，給人莊重、勻整的感覺。

楷書
楷書又稱"正書"，從篆、隸演變而來。楷書筆跡有力，筆劃清楚，易讀性高。一般書籍信件常用的標準字。

行書
行書是楷書的變體。濃淡相映，動靜兼有，具有陽剛之美。易識好寫，實用范圍廣，被認為是最流行的字體。常應用于產品包裝、文化類書籍封面等方面。

草書
草書是簡省字體。體勢放縱，輕重緩急，有意動神飛的意境，極具個性。一般草書在造型上較難被大眾理解，缺乏易讀性。在煙酒包裝、書籍裝禎等方面相對應用較多。

> 書法在現代視覺設計中的應用
隨著社會的發展，書法的應用范圍不斷被拓展。在現代視覺設計中也得到設計師的青睞，運用的好，往往是點睛之筆，很好的豐富了設計元素。書法的恰當應用有助于對設計主題更好的體現，取得更好的視覺效果，它的感染力非同一般。

近些年，在游戲包裝上，書法越來越被設計界所重視，一些優秀作品應運而生:

上圖是《QQ仙俠傳》封測官網，水墨風韻盡顯國風網游之魅力，書法的運用可謂是畫龍點睛，表現得淋漓盡致。

上圖是2009技藝非凡變形金剛設計大賽一等獎作品。精美中國水墨風格變形金剛別有一番風味，中西風格的融合很到位，書法的完美運用更是令人贊嘆。

上面的游戲專題頁面中，沒有一如既往的人物角色，也沒有華麗的場景，而是選用書法作為核心元素，拿捏的恰到好處，韻味十足，盡顯大氣。

Asta的官網，簡潔獨特的版式，書法與墨跡的結合，大氣且有張力，典雅而不失時尚，令人佩服。

> 如何應用書法
經過對一些經典之作的賞析，發現書法應用到現代視覺設計中并非隨便拿過來直接使用，必須經過反復推敲及設計加工。個人經驗總結了如下幾點：

1． 適用性： 書法并不是在任何設計中都適合使用的，有一定的適用范圍。如：書法有利于傳達"中國性"、"歷史性"、"古典的"、"藝術的"、"有文化底蘊"、"古色古香"等信息，而不利于傳達"統一"、"現代"、"規范化"等信息。

2． 易讀性： 文字設計的根本目的是為了更好的傳達設計意圖和主題。因此，書法應盡量使人易讀、易懂，切忌為了設計而設計。重點文字選用識別性強的字體，慎用繁體、草書和篆書。

3． 風格： 應充分考慮產品的特征，并注意書法與其它設計元素之間的協調關系。根據產品特色不同，所設計的字體風格也各異：有的瀟灑流暢、潑墨自如；有的清新儒雅、端莊秀麗。設計形式也多姿多彩。

4． 美感與創造性： 從字形與排版上進行推敲，反復琢磨，創造出獨具特色的字體，使字體形態和整體效果都能給人眼前一亮的愉悅視覺感受，更有利于設計意圖的傳達。

>以下是本人在一些游戲專題頁面中的書法應用小嘗試：

上圖是《七雄爭霸》在兩周年慶典之際推出的全新slogan——"贏得天下"。根據對產品階段和特色的分析，采用了稍顯奔放筆觸的行書與隸書結合，試圖打造出古代帝王揮毫潑墨之霸氣。

上圖是《七雄爭霸》的跨服戰場專題，試圖通過行書蒼勁有力的筆觸，以及飛白和潑墨效果，給人一種力量感，加強PK氛圍。

上圖是《刀劍2》的賽事記錄專題，采用了行書與楷體的結合，這里的筆觸稍顯內斂、穩重，并與卷軸等古典元素結合，試圖打造出古樸、典藏之感覺。

以下是TGIDEAS團隊在部分游戲專題頁面中的書法應用嘗試：

> 游戲包裝設計中如何打造書法字體效果
在游戲包裝設計中，具體如何打造恰如其分的書法字體達到畫龍點睛之效果呢？結合個人經驗，總結了以下幾種方法，僅供大家參考：

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

2． 自己寫： 設計師自己寫出獨具特色且頗具美感的個性文字，并將設計意圖和主題很好的傳達出來，這樣的作品更具原創性和獨特風格，頗好。當然這需要設計師具有較強的書法功底。

3． 再加工： 現成字體不太合適，又沒有很好的書法功底，怎么辦？還有一種方法叫"再加工"。顧名思義，就是在現有字體的基礎上，進行調整和修飾等設計處理，達到預期的 字體效果適用于整體設計。 一般大概分四步：選字體——改字形——加筆觸——加質感。具體來講第一步就是通過一些書法字體網站，搜索、選擇適合的字體；第二步，在現有字體基礎上修改 部分筆畫得到合適的字形；第三步，用筆刷或畫筆添加筆觸和墨跡；第四步就是根據需要添加適當的紋理、材質，并處理好與其它設計元素之間的協調關系。

> 結束語： 以上是個人的小結與嘗試，僅供參考。書法字體的設計方法和應用還有很多，設計師們都各有奇招。 個人覺得運用書法進行視覺設計主要在于分析產品特色，找出書法與產品的交融點，創造獨特的書法效果，并體現價值。作為商業設計師，我們堅持對書法應用的探 討和學習，力求在設計中應用得當的書法字體，將產品的文化底蘊、品牌形象、個性特色更好的體現出來，產生更大的魅力和價值。

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

在此把信息可視化分成兩種常用的設計類型，一是呈現數據，二是陳述觀點。

1:呈現數據
設計師用直觀而極具美感的視覺表現方式把數據呈現出來，讀者在觀賞這件"藝術品"的時候自然讀到里面蘊含著一些有趣的故事。 （就例如看facebook用戶連接數的可視化，能看到連線再美也連不進中國版圖。）

Facebook全球用戶連接數：

qq的實時在線人數的可視化：

除了上述的兩個基于地圖的可視化，各種將傳統統計圖表經過再設計，圖形美化，形象化的可視化都屬于這種類型。
各種呈現數據類型可視化：

互動式數據呈現
在數據呈現類的可視化項目中，設計師工作是要吸引讀者能自發挖掘數據里的故事，所以除了數據的視覺美化外，還會考慮讀圖體驗的設計，也就是常用可交互方式來呈現整個可視化。

這里分享個案例：《university-autonomy》

university- autonomy網站主要讓讀者清晰快速對比歐洲各國大學的自治狀態，偏向閱讀功能性。網站分別把四類自制狀態配以不同顏色：組織自治（橙色），金融配置 （紅色），教職任免（紫紅色）以及學術自制（深紫色）。并且都有各自小圖標表示，為降低閱讀成本，每個代表國家也在地圖上呈現。瀏覽時可以點某一國家瀏覽 數據，也可以直接點擊四類其中一類來觀看各國的對比。例如點開英國，圓型的國旗圖標周圍散布著四類顏色的點，某一色條上點的多與少表示某一項自治得分多 寡。如此對比其他國家，英國在組織自制度上是第一位的，包括自由決定自治組織，各方面的選拔，決定任期以及設定院系內部結構等等。 這種互動式的可視化更重要是優化了數據的閱讀體驗，想知道數據里的哪些方面由讀者自行決定，設計師提供了一個舒適的可視化閱讀環境。

2：陳述觀點
觀點陳述類的可視化，就是設計師先對數據分析，把挖掘到的觀點直接告訴讀者。
最常見的就是信息圖表和圖示視頻：

a：信息圖表
例如"人間胸器"的信息圖里所說的一些和我們息息相關卻沒細細研究過的數據，直接告訴讀者設計師挖掘到的觀點。 "女性正常狀態的乳頭高度只發揮了3/8的高度。平均擴張后高達五個25美分幣高度。"（是不是有點要找硬幣試疊的感覺？）

人間胸器：

此類可視化相比數據呈現類有個明顯的優勢，就是對于讀者來說接受信息更加"簡單粗暴"，而且設計起來也較為簡便。

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

b：圖示視頻
對比起信息圖表來說，圖示視頻主要是表現手法的不同，對讀者的吸引程度也不一樣，但這需要一個好的"導演"。

這里展示一個Pinterest的可視化視頻：Pinterest Statistics Facts

Pinterest Statistics Facts:

視頻設計上非常細膩，包括整體色調和圖形動態，細心可以發現里面展示的信息圖表設計非常形象，包括pinterest男女用戶比例的圖表直接拉大女生形象來對比，年齡層的圖標用生日蛋糕的蠟燭燈火來做條形圖等等，滿滿有愛的細節耐人尋味。

相比信息圖表，圖示視頻會有個優勢，就是好的動態演示加上配音，可以彌補視覺設計上的不足， 例如這段《5分鐘，讓你了解自己都交了哪些稅》里提取的觀點非常切合民情，觀點異常犀利，即使視覺設計一般也能讓大家產生共鳴。

可視化設計方法——對比和比喻
無論是數據呈現還是觀點陳述，對比和比喻是都是可視化設計中最常用的手法。
a：對比——有對比就能催生故事。

就像Goldstar啤酒廣告，設計師把男女上洗手間的整個行為用流程圖表可視化出來，因為有了男女對比而讓故事耐人尋味。從而讓目標受眾了解一個觀點"感謝上帝你是個男的！"
Goldstar啤酒廣告：

還有上面提到的university-autonomy網站也是讓讀者對比各國大學數據從而讀出觀點。

b：比喻——把陌生的變熟悉
數據給到我們的都是陌生而繁雜的感覺，沒人會對一大堆煩躁的數據感興趣，設計師在數據呈現類可視化設計的時候，多會用比喻的手法，把讀者感覺陌生的數據轉化為他們熟悉或者有認知度的東西呈現給他們以達到共鳴。

This Exquisite Forest是Chris Milk在英國的一個藝術項目
先請一批藝術家繪制一個小短片，然后其他參與者可以在網站上不斷做上一個短片的接龍。（在此不細講整個藝術項目，有相關介紹有興趣可以看看項目介紹視頻）

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

用類似手法的還有這個類比宇宙的音樂操作界面，這里有相關介紹視頻
它把所有的音樂數據比喻成一個宇宙，音樂播放時長比喻成星球運行軌跡，同樣是比喻手法的信息可視化。

結語：
其實信息可視化是個跨學科領域需要龐大知識體系支撐的研究方向，但并不等于就是離我們如此遙不可及，我們無非是學習一種信息可視化的思維方式，創建那些以直觀方式傳達抽象信息的手段和方法，用我們設計師獨特的視角，從可信的數據油田中挖掘大家喜聞樂見的故事！

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