晉小彥視覺(jué)設(shè)計(jì)系列文章（五）：你看起來(lái)很好吃

你看起來(lái)很好吃?在這各類(lèi)資訊爆炸的時(shí)代，如果說(shuō)資訊是我們必需喂給用戶(hù)的食物，那用戶(hù)往往會(huì)是一群偏食厭食的寶寶，如何讓他們樂(lè)意吞下這送到嘴邊的食物呢?好吃!好吃當(dāng)然受人喜歡，但真的好不好吃、有沒(méi)有營(yíng)養(yǎng)做為設(shè)計(jì)師的我們還真決定不了，不過(guò)”看起來(lái)很好吃”那便是我們的活兒了!

　　說(shuō)說(shuō)——信息的圖形化設(shè)計(jì)

　　剝皮、挑刺、嚼碎。分行、標(biāo)識(shí)、加重點(diǎn)。正如F型的閱讀排版研究只是針對(duì)食物的食用性問(wèn)題在一定程度上解決了”有閱讀需求”的用戶(hù)的掃描性閱讀，但對(duì)于偏食厭食的寶寶們來(lái)說(shuō)并無(wú)多大的作用。所以除了哼小曲扮鬼臉外，我們必需對(duì)食物進(jìn)行有效的包裝和加工。

　　如果它激發(fā)了你的食欲，那我們就繼續(xù)往下看吧。

　　煎、蒸、炒、炸正如食物加工的方法一樣，大偏幅的文字同樣也有著它幾種可歸屬的邏輯關(guān)系。把握了這幾種基本的邏輯關(guān)系，我們就可以添油加醋，使其看起來(lái)簡(jiǎn)單有趣充滿(mǎn)食欲啦!

　　想想——并列型、對(duì)比型、流程型

　　一、并列型

　　并列組合型 ，它可以是有共同邏輯關(guān)系的不同事物，也可以是同一事物的不同方面，在設(shè)計(jì)的表現(xiàn)上它們之間是一種平等、均衡的狀態(tài)。而在這些內(nèi)容的表現(xiàn)形式和結(jié)構(gòu)上也是相對(duì)一致的。我們可以結(jié)合以下幾個(gè)圖解進(jìn)行分析。在日常的設(shè)計(jì)中我們也可以套用以下的幾個(gè)圖示來(lái)表達(dá)相近的邏輯關(guān)系。

　　這組并列關(guān)系圖的五個(gè)元素，它們雖然沒(méi)有具像的組合關(guān)系，但它們都有一個(gè)潛在的共同屬性叫交通工具。這種由潛在的關(guān)聯(lián)性讓他們組成了形態(tài)結(jié)構(gòu)一致的并列關(guān)系。在設(shè)計(jì)上并列的排布、相同的布局結(jié)構(gòu)、統(tǒng)一風(fēng)格的圖標(biāo)，將這種內(nèi)在的共同屬性關(guān)系表現(xiàn)出來(lái)。類(lèi)似這種并列關(guān)系的如：蘋(píng)果、梨、香蕉它們雖不組成什么，但它們同屬于水果。冰箱、電腦、洗衣機(jī)雖不構(gòu)成變形金剛但它們同屬于家電或機(jī)器。我們可以用結(jié)構(gòu)一致，但邏輯上并列不組合的方式來(lái)表現(xiàn)這類(lèi)關(guān)系。

　　這個(gè)并列的邏輯圖表達(dá)了三個(gè)內(nèi)容，首先，它們是四個(gè)并列的元素，次其，四個(gè)元素組成了一個(gè)共同的合體，第三，這四個(gè)元素有其各自不同的特點(diǎn)。這種邏輯形式是最常見(jiàn)的，比如一本書(shū)，它由幾個(gè)章節(jié)組成，每個(gè)章節(jié)有不同針對(duì)的內(nèi)容;或者今天中午午餐，它由幾道菜組成，每道菜更是什么食物，口味有何不同等等……當(dāng)我們遇到類(lèi)似的邏輯關(guān)系時(shí)，就可以套用上圖的格局。

　　相對(duì)于上一張的并列組合形態(tài)，這張并列的組合則是具像的，它組成了世界地圖。在不圖的版圖上標(biāo)識(shí)著不同的特征符號(hào)，雖然特征符號(hào)各不相同，但地理位置之間以及它們的特征之間依然屬于并列關(guān)系。這是在并列關(guān)系中將特征圖形化并強(qiáng)化。如果特征進(jìn)一步強(qiáng)化，并列的關(guān)系也會(huì)潛移默化成對(duì)比的關(guān)系，也就是我們接下來(lái)看到的這種關(guān)系。

　　二、對(duì)比型

　　對(duì)比關(guān)系是指兩個(gè)或兩個(gè)以上的事物之間的比較，或者是一個(gè)事物的幾個(gè)方面的比較。它是在并列關(guān)系的基礎(chǔ)上強(qiáng)化特征，并通過(guò)數(shù)據(jù)或圖形進(jìn)行可視化的比對(duì)。它是并列關(guān)系的升級(jí)和特征強(qiáng)化。對(duì)比關(guān)系區(qū)別于并列關(guān)系的特征在于，它的對(duì)比表現(xiàn)高于它的并列表現(xiàn)。通常是需要經(jīng)過(guò)對(duì)比得出某結(jié)論而存在。從簡(jiǎn)單的二者對(duì)比到多個(gè)元素之間的對(duì)比，從并列的單一數(shù)字呈現(xiàn)到數(shù)據(jù)化的圖表，從橫軸的圖表到環(huán)形的圖表，對(duì)比型的樣式因?yàn)槠洳煌奶卣鞫鴵碛性S多豐富的表現(xiàn)形態(tài)。下面我們結(jié)合圖表來(lái)看一看。

　　兩個(gè)數(shù)據(jù)的對(duì)比

　　這是一個(gè)簡(jiǎn)單的二者之間的數(shù)據(jù)對(duì)比，它強(qiáng)化了二者的數(shù)據(jù)差異，并通過(guò)顏色和面積來(lái)輔助表達(dá)二者的差異性。

　　多個(gè)同類(lèi)數(shù)據(jù)的對(duì)比

　　這是一個(gè)圖形化的數(shù)據(jù)對(duì)比圖。在圖表上既把并列的事物交待了，又把它們之間的對(duì)比關(guān)系形像的描述了。數(shù)字在這里起到了補(bǔ)充說(shuō)明的作用。

　　標(biāo)名參數(shù)的同類(lèi)數(shù)據(jù)對(duì)比

　　這組圖表和上圖也有類(lèi)似的地方，它們都是通過(guò)圖形和數(shù)據(jù)相結(jié)合的方式，只是這張圖標(biāo)明了對(duì)比的時(shí)間參數(shù)。時(shí)間是以年為單位，油價(jià)方面表現(xiàn)了一個(gè)上漲的趨勢(shì)，不過(guò)本圖沒(méi)有具體標(biāo)明上漲的具體數(shù)值，僅體現(xiàn)了一種趨勢(shì)。

　　同類(lèi)數(shù)據(jù)的多層屬性的對(duì)比

　　這是一張含有多重?cái)?shù)據(jù)的圖組，它包括四個(gè)并列的類(lèi)別，每個(gè)大類(lèi)別有一個(gè)總對(duì)比數(shù)，而每個(gè)大類(lèi)中又有四個(gè)小分類(lèi)的對(duì)比數(shù)據(jù)，它用四種顏色定義這四個(gè)類(lèi)別，而這四個(gè)小類(lèi)別的紅黃綠藍(lán)又可以分別獨(dú)立形成四個(gè)分類(lèi)，形成細(xì)分對(duì)比。這種多層次的屬性對(duì)比層次清晰、視覺(jué)的節(jié)奏感也較強(qiáng)。

　　非同類(lèi)數(shù)據(jù)的對(duì)比

　　這是一個(gè)多個(gè)事物之間的數(shù)據(jù)對(duì)比，它們可以是非同類(lèi)事特，也可以是具有某一潛在關(guān)聯(lián)屬性的同類(lèi)事物。統(tǒng)一風(fēng)格的圖標(biāo)設(shè)計(jì)和統(tǒng)一節(jié)奏的圖文結(jié)構(gòu)為數(shù)據(jù)的對(duì)比打下了視覺(jué)基礎(chǔ)。對(duì)比關(guān)系區(qū)別于并列關(guān)系的標(biāo)準(zhǔn)在于，它的數(shù)據(jù)和特征對(duì)比的表現(xiàn)高于它們之間并列表現(xiàn)。

　　單個(gè)數(shù)據(jù)的軸線圖

　　單個(gè)事物的軸線變化趨勢(shì)圖，它根據(jù)橫軸數(shù)值的遞增而不斷變化，可以直觀看到一個(gè)事物的發(fā)展規(guī)律和趨勢(shì)。

　　兩個(gè)數(shù)據(jù)的軸線圖

　　這是一個(gè)兩個(gè)事物的對(duì)比數(shù)據(jù)圖表，藍(lán)色和黃色各代表了兩個(gè)事物在相同環(huán)境下的不同數(shù)據(jù)表現(xiàn)。從中我們不但可以看到某個(gè)事物的變化規(guī)律和趨勢(shì)，也可以看到兩個(gè)數(shù)據(jù)之間的變化關(guān)系。

　　多個(gè)數(shù)據(jù)的軸線圖

　　這是一個(gè)多個(gè)事物的軸線數(shù)據(jù)圖，通過(guò)顏色進(jìn)行區(qū)別每個(gè)個(gè)體及它們?cè)诓煌瑫r(shí)刻的數(shù)據(jù)表現(xiàn)。較之前面兩張圖有了更加多重的元素。

　　環(huán)形對(duì)比數(shù)據(jù)圖表

　　數(shù)據(jù)對(duì)比圖表并不僅限于直線。這是一個(gè)圓形的數(shù)據(jù)圖，它代表著邏輯上的并列和包含關(guān)系，并通過(guò)長(zhǎng)度和數(shù)值表達(dá)它們之間的差異。

　　環(huán)形組合對(duì)比數(shù)據(jù)圖表

　　這是在并列組合結(jié)構(gòu)基礎(chǔ)上的數(shù)據(jù)對(duì)比圖，它含有三個(gè)基本內(nèi)容，一，幾個(gè)事物屬于并列關(guān)系。二，它們共同構(gòu)成了一個(gè)事物，是一個(gè)事物的幾個(gè)并列分類(lèi)。三，它們這幾個(gè)并列事物之間有著數(shù)值的差異并明確標(biāo)識(shí)這種差異的具體數(shù)字化比率。

　　三、流程型

　　流程也是在并列基礎(chǔ)上的升級(jí)，它是指處于并列關(guān)系的兩個(gè)或兩以上的單位，它們之間具有前后的任務(wù)關(guān)系，共同擁有一個(gè)的目標(biāo)和方向性并共同完一個(gè)完整行為，這種關(guān)系我們稱(chēng)之為流程關(guān)系。流程關(guān)系在商業(yè)運(yùn)作、操作指導(dǎo)或是任務(wù)說(shuō)明中也是很常見(jiàn)的。

　　兩個(gè)任務(wù)的流程關(guān)系

　　最簡(jiǎn)單的流程就是從A到B，它們是并列的、組合的、又有先后順序的關(guān)系。在流程型的邏輯表現(xiàn)中箭頭的圖示是最常被使用到的。

　　多個(gè)任務(wù)的流程關(guān)系

　　這是一個(gè)單向的漸進(jìn)流程，在流程的表現(xiàn)中我們也可以通過(guò)色彩來(lái)區(qū)分，并且通過(guò)比例來(lái)增強(qiáng)表現(xiàn)它們的量級(jí)的對(duì)比關(guān)系。這些都是可以同時(shí)存在的，只要在節(jié)奏上處理得當(dāng)是可以不互相干擾的。

　　多個(gè)支線流程

　　流程并非都是直線型的，這是一個(gè)分流的流程圖，它可以由一個(gè)事物分流向兩個(gè)事物，也可以從兩個(gè)事物再匯聚成一個(gè)事物。

　　循環(huán)流程

　　流程是可循環(huán)的，它可以從重復(fù)的無(wú)限的依照某個(gè)規(guī)律在幾個(gè)事物之間循環(huán)持續(xù)的進(jìn)行下去。正如我們的天氣一樣，海水蒸發(fā)變成云，云匯聚變成雨，雨又流向大海，海水繼續(xù)蒸發(fā)……

　　看看——形意結(jié)合，視覺(jué)信息兩不誤

　　一、并列型

　　這是一個(gè)期待棒球場(chǎng)八百萬(wàn)觀眾席的專(zhuān)題頁(yè)面，圖中模擬觀眾席的主視覺(jué)對(duì)多個(gè)方陣的觀眾席進(jìn)行了介紹。每個(gè)色塊的觀眾席屬于并列組合的關(guān)系。從圖中引出的內(nèi)容結(jié)合了操作按鈕。信息瀏覽直觀且交互性較好。

　　二、對(duì)比型

　　軸現(xiàn)是對(duì)比型常用的圖形表現(xiàn)方式，在這種基礎(chǔ)的軸線型數(shù)據(jù)上，我們看到了這個(gè)頁(yè)面很好的與內(nèi)容結(jié)合。這是一個(gè)CF魚(yú)場(chǎng)管理的頁(yè)面，主視覺(jué)和內(nèi)容分居水上和水下，海底魚(yú)和透藍(lán)色的數(shù)據(jù)圖深動(dòng)的融合在一起。既充分的展現(xiàn)了數(shù)據(jù)，又直觀的展示了場(chǎng)景。做到了形與意的豐滿(mǎn)結(jié)合。

　　三、流程型

　　這是一個(gè)比較復(fù)雜的流程圖表，它包含了多項(xiàng)的、分流的、匯聚的、循環(huán)的的流程類(lèi)型。這么多的流程箭頭作者將其歸納到幾個(gè)有規(guī)律的方塊內(nèi)。內(nèi)容雖多，但指向明確清晰。

　　這是一個(gè)帶對(duì)比屬性的流程圖，它們之前既有對(duì)比關(guān)系，又有流程關(guān)系。由低到高、顏色有淺入深的藍(lán)色配合橙色的箭頭指示為我們直觀的展示了邏輯關(guān)系。最后藍(lán)色大方塊上的角色點(diǎn)精，給目標(biāo)以明確的指示，還配有橙色小氣泡，整體邏輯清晰，風(fēng)格親和有愛(ài)。

　　做做——上古世紀(jì)郵件、劍靈封測(cè)數(shù)據(jù)頁(yè)面、C9指引專(zhuān)題

　　一、《上古世紀(jì)》SLOGAN 內(nèi)部征集郵件

　　需求分析

　　以虛線框中的內(nèi)容舉例，這也是一個(gè)長(zhǎng)篇的文字，如果直接獎(jiǎng)內(nèi)容拷貝進(jìn)網(wǎng)頁(yè)，也就大大降低了頁(yè)面整體閱讀的食欲。如果我們用文字衣櫥的方式進(jìn)行收納內(nèi)容又太多，敘述　性太強(qiáng)，比較難收納。所以這里我們通過(guò)圖形化將其進(jìn)行邏輯表現(xiàn)，然后再配以文字說(shuō)明。

　　并列關(guān)系是大多數(shù)邏輯關(guān)系的起源，不論是對(duì)比關(guān)系還是流程關(guān)系，它們都是在并列關(guān)系的基本上進(jìn)行側(cè)重的描述。在這種關(guān)系基礎(chǔ)上我們?cè)偎伎妓鼈兊募?xì)分類(lèi)型，比如它們是各自獨(dú)立但具有同一屬性的并列關(guān)系，還是共同組成一個(gè)完整體系的并列關(guān)系，亦或是一種層級(jí)遞進(jìn)層層深入的并列關(guān)系。然后根據(jù)內(nèi)容的需要對(duì)它進(jìn)行圖形化。

　　在這一類(lèi)快速的專(zhuān)題中，我們可以迅速的套用方法總結(jié)里的數(shù)據(jù)圖表，來(lái)幫助人們快速的將長(zhǎng)篇的文字圖形化。面對(duì)大長(zhǎng)篇文字的時(shí)候我可以先進(jìn)行文意的梳理，拉開(kāi)每個(gè)段落的節(jié)奏，強(qiáng)化標(biāo)題，并給大標(biāo)題配上輔助說(shuō)明的文字，方便快速閱讀。其次再咀嚼內(nèi)容，分析它的邏輯關(guān)系。由于大部分的邏輯關(guān)系都源于并列的關(guān)系，在沒(méi)有特別明顯的數(shù)據(jù)對(duì)比或流程的情況下，我們都可以將其歸類(lèi)于并列關(guān)系，然后再把握其進(jìn)一步的邏輯和主次。這個(gè)案例的梳理圖較為簡(jiǎn)單，是邏輯快速套用的嘗試。它可以在很短的時(shí)間內(nèi)梳理擺布完成大篇幅的文字。當(dāng)然，有人說(shuō)，電影不如有聲小說(shuō)，有聲小說(shuō)不如原著，因?yàn)榧兾淖值臅?shū)有更多的想像空間，因?yàn)槊總€(gè)人對(duì)信息的理解各有不同，圖像化也便是設(shè)計(jì)師通過(guò)對(duì)信息理解而進(jìn)行的進(jìn)一步的設(shè)計(jì)表現(xiàn)。

　　有些信息是快速消費(fèi)，有些信息是經(jīng)典藝術(shù)。如果說(shuō)無(wú)形和有形各有利弊，那就努力將自己訓(xùn)練成一個(gè)信息的好導(dǎo)演好設(shè)計(jì)吧。

　　設(shè)計(jì)分解

　　第一部分是對(duì)制作團(tuán)隊(duì)的介紹，包括三個(gè)主要人物和一個(gè)300人的研發(fā)團(tuán)隊(duì)以及3億的研發(fā)成本。這里我們將這五個(gè)信息定義為并列關(guān)系的，圖形上突出三個(gè)主要人物，將300人的研發(fā)團(tuán)隊(duì)以虛擬人的形式平鋪在背景上。并在各自相應(yīng)的位置用需求中的文字進(jìn)行補(bǔ)充說(shuō)明。這樣有了視覺(jué)的核心，閱讀起來(lái)也相對(duì)有了可依附的實(shí)體，文字信息也便更形像了起來(lái)，分要點(diǎn)的描述也同樣注重文字排布的節(jié)奏，序號(hào)、主標(biāo)題、詳情文字，這樣的形式不論掃描閱讀還是細(xì)致閱讀都能滿(mǎn)足。另外由于人類(lèi)的本能，我們的眼睛對(duì)人臉是有極大的關(guān)注和興趣的，適當(dāng)?shù)氖褂萌四樋梢栽鰪?qiáng)閱讀的欲望。

　　這是一個(gè)游戲品質(zhì)介紹，品質(zhì)、規(guī)模、引擎這樣的概念我們很難用具體的圖形表示它，所以這面選擇了套用這個(gè)圓環(huán)餅圖，表達(dá)出一種游戲品質(zhì)由這四類(lèi)構(gòu)成的并列組合的大邏輯，有了圖形的依附再深入填充具體的文字，關(guān)系和內(nèi)容也就一目了然了。

　　在理念和玩法的部分，使用了逐層影響和擴(kuò)張的并列遞進(jìn)的關(guān)系。用四個(gè)由小到大的環(huán)形圈來(lái)表達(dá)，從由虛擬世界引出的高度自由既而推動(dòng)著玩家改變的可能性，最后產(chǎn)生充滿(mǎn)未知和變數(shù)的游戲樂(lè)趣。這是在并列基礎(chǔ)上的進(jìn)一步圖像化。有了這些圖形，瀏覽者在面對(duì)大量的文字時(shí)就可以相對(duì)不那么茫然和無(wú)所適從。

　　二、劍靈極智封測(cè)數(shù)據(jù)公布

　　需求分析

　　這是一個(gè)劍靈封測(cè)數(shù)據(jù)，希望能夠通過(guò)相對(duì)有愛(ài)的表達(dá)方式為玩家展示測(cè)試結(jié)果。由于公布日期正值年終，所以整體數(shù)據(jù)的包裝則依附于”公布年終考核”這樣一個(gè)形式概念。玩過(guò)游戲玩家都知道”洪七公”是洪門(mén)的師傅。所以網(wǎng)頁(yè)使用洪七公的形像來(lái)貫穿整個(gè)表現(xiàn)。

　　設(shè)計(jì)分解

　　我們查看整體的文字信息，主要是對(duì)玩家在極智封測(cè)的測(cè)試中的數(shù)據(jù)進(jìn)行對(duì)比和公示。所以我們選擇對(duì)比的結(jié)構(gòu)進(jìn)行圖表化，下面我們針對(duì)每一塊的數(shù)據(jù)內(nèi)容進(jìn)行分析設(shè)計(jì)。

　　1.各職業(yè)誰(shuí)最先到達(dá)頂級(jí)的玩家

　　從提供的數(shù)據(jù)來(lái)看，第一部分的數(shù)據(jù)主要展示了不同職業(yè)最快滿(mǎn)級(jí)玩完家的時(shí)間點(diǎn)，由于大家滿(mǎn)級(jí)的日期是同一天，所以我們用小時(shí)和分鐘為單位來(lái)描述它，通過(guò)時(shí)鐘的表現(xiàn)時(shí)間，依照時(shí)間的先后從左至右依次排列。在時(shí)間表的下方匹配了洪七搞笑表情。彈出的小對(duì)話框中加入”干得不錯(cuò)”的字樣，為視覺(jué)增添了有愛(ài)的氣氛。

　　2.在線時(shí)間最長(zhǎng)的徒兒們

　　第二部分的數(shù)據(jù)是展示在線的時(shí)間長(zhǎng)短，因?yàn)闀r(shí)間的直接聯(lián)想是鐘表，所以在第二部分的數(shù)據(jù)圖形化中，我們使用了環(huán)形數(shù)據(jù)對(duì)比的模板，因?yàn)橐舱闷鹾狭藞A形的時(shí)間表現(xiàn)方式，通過(guò)弧線的長(zhǎng)短來(lái)模擬在線的時(shí)間長(zhǎng)短。在圓形圖表的中央置入洪七師傅摸頭的小插畫(huà)，邊上配以”努力的孩子”的文字，將數(shù)據(jù)的含義進(jìn)行了擬人化的點(diǎn)睛。

　　3.被3大BOSS擊殺最多的徒兒和擊殺總數(shù)

　　由于同是BOSS擊殺的數(shù)據(jù)，所以我們將3.4.5三個(gè)板塊的信息進(jìn)行了整合。使用了同類(lèi)數(shù)據(jù)多層屬性的對(duì)比模式圖形模板。將細(xì)分的最高擊殺數(shù)和最高擊殺數(shù)進(jìn)行了整合表現(xiàn)。單個(gè)玩家的平均死亡次數(shù)和最高死亡次數(shù)通過(guò)人形的大小進(jìn)行表示。右側(cè)配合洪七倒地的插圖，附上對(duì)話”平日里不好好練功”，暗喻著今天被殺的慘狀。

　　4.玩家平均時(shí)裝數(shù)

　　第四部分的設(shè)計(jì)比較簡(jiǎn)單直接，用一件衣服剪影來(lái)表示時(shí)裝。并使用大字號(hào)標(biāo)識(shí)”15件”強(qiáng)化數(shù)擾，通過(guò)洪七公右測(cè)的服裝展示和左側(cè)的配合文字”衣服倒是有不少啊!”或者”你們都是愛(ài)美的貨”等等來(lái)補(bǔ)充說(shuō)明，有將整體氣氛有愛(ài)化。

　　頁(yè)面展示

　　三、C9新手指引專(zhuān)題

　　這是C9新手指南的”如何快速上手”的介紹頁(yè)面。主要由8個(gè)內(nèi)容組成，這些內(nèi)容之間有先后的順序關(guān)系，具體的內(nèi)容通過(guò)點(diǎn)擊跳轉(zhuǎn)到相應(yīng)的頁(yè)面。根據(jù)內(nèi)容的關(guān)系，我們可以將其設(shè)計(jì)成流程關(guān)系的圖表。

　　這個(gè)案例比較直觀，在這里我們僅做一下簡(jiǎn)要的分享。

　　這里我們將流程圖表設(shè)定為地圖的樣式，每個(gè)步驟作為一個(gè)任務(wù)，點(diǎn)擊區(qū)域和流程感覺(jué)更加鮮明，并加入了地圖樣式的手繪，為閱讀步驟的過(guò)程增添了游戲性，整體視覺(jué)和交互的趣味性也優(yōu)于純文字的流程表現(xiàn)。