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

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

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

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

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

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

　　想想——并列型、對比型、流程型

　　一、并列型

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

　　這組并列關(guān)系圖的五個(gè)元素，它們雖然沒有具像的組合關(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)出來。類似這種并列關(guān)系的如：蘋果、梨、香蕉它們雖不組成什么，但它們同屬于水果。冰箱、電腦、洗衣機(jī)雖不構(gòu)成變形金剛但它們同屬于家電或機(jī)器。我們可以用結(jié)構(gòu)一致，但邏輯上并列不組合的方式來表現(xiàn)這類關(guān)系。

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

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

　　二、對比型

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

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

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

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

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

　　標(biāo)名參數(shù)的同類數(shù)據(jù)對比

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

　　同類數(shù)據(jù)的多層屬性的對比

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

　　非同類數(shù)據(jù)的對比

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

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

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

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

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

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

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

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

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

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

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

　　三、流程型

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

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

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

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

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

　　多個(gè)支線流程

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

　　循環(huán)流程

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

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

　　一、并列型

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

　　二、對比型

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

　　三、流程型

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

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

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

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

　　需求分析

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

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

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

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

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

　　第一部分是對制作團(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ǔ)充說明。這樣有了視覺的核心，閱讀起來也相對有了可依附的實(shí)體，文字信息也便更形像了起來，分要點(diǎn)的描述也同樣注重文字排布的節(jié)奏，序號、主標(biāo)題、詳情文字，這樣的形式不論掃描閱讀還是細(xì)致閱讀都能滿足。另外由于人類的本能，我們的眼睛對人臉是有極大的關(guān)注和興趣的，適當(dāng)?shù)氖褂萌四樋梢栽鰪?qiáng)閱讀的欲望。

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

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

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

　　需求分析

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

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

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

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

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

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

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

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

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

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

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

　　頁面展示

　　三、C9新手指引專題

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

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

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