你看起來很好吃?在這各類資訊爆炸的時代，如果說資訊是我們必需喂給用戶的食物，那用戶往往會是一群偏食厭食的寶寶，如何讓他們樂意吞下這送到嘴邊的食物呢?好吃!好吃當然受人喜歡，但真的好不好吃、有沒有營養做為設計師的我們還真決定不了，不過”看起來很好吃”那便是我們的活兒了。
說說——信息的圖形化設計
剝皮、挑刺、嚼碎。分行、標識、加重點。正如F型的閱讀排版研究只是針對食物的食用性問題在一定程度上解決了”有閱讀需求”的用戶的掃描性閱讀，但對于偏食厭食的寶寶們來說并無多大的作用。所以除了哼小曲扮鬼臉外，我們必需對食物進行有效的包裝和加工。
如果它激發了你的食欲，那我們就繼續往下看吧。
煎、蒸、炒、炸正如食物加工的方法一樣，大偏幅的文字同樣也有著它幾種可歸屬的邏輯關系。把握了這幾種基本的邏輯關系，我們就可以添油加醋，使其看起來簡單有趣充滿食欲啦!
想想——并列型、對比型、流程型
一、并列型
并列組合型 ，它可以是有共同邏輯關系的不同事物，也可以是同一事物的不同方面，在設計的表現上它們之間是一種平等、均衡的狀態。而在這些內容的表現形式和結構上也是相對一致的。我們可以結合以下幾個圖解進行分析。在日常的設計中我們也可以套用以下的幾個圖示來表達相近的邏輯關系。
這組并列關系圖的五個元素，它們雖然沒有具像的組合關系，但它們都有一個潛在的共同屬性叫交通工具。這種由潛在的關聯性讓他們組成了形態結構一致的并列關系。在設計上并列的排布、相同的布局結構、統一風格的圖標，將這種內在的共同屬性關系表現出來。類似這種并列關系的如：蘋果、梨、香蕉它們雖不組成什么，但它們同屬于水果。冰箱、電腦、洗衣機雖不構成變形金剛但它們同屬于家電或機器。我們可以用結構一致，但邏輯上并列不組合的方式來表現這類關系。
這個并列的邏輯圖表達了三個內容，首先，它們是四個并列的元素，次其，四個元素組成了一個共同的合體，第三，這四個元素有其各自不同的特點。這種邏輯形式是最常見的，比如一本書，它由幾個章節組成，每個章節有不同針對的內容;或者今天中午午餐，它由幾道菜組成，每道菜更是什么食物，口味有何不同等等……當我們遇到類似的邏輯關系時，就可以套用上圖的格局。
相對于上一張的并列組合形態，這張并列的組合則是具像的，它組成了世界地圖。在不圖的版圖上標識著不同的特征符號，雖然特征符號各不相同，但地理位置之間以及它們的特征之間依然屬于并列關系。這是在并列關系中將特征圖形化并強化。如果特征進一步強化，并列的關系也會潛移默化成對比的關系，也就是我們接下來看到的這種關系。
二、對比型
對比關系是指兩個或兩個以上的事物之間的比較，或者是一個事物的幾個方面的比較。它是在并列關系的基礎上強化特征，并通過數據或圖形進行可視化的比對。它是并列關系的升級和特征強化。對比關系區別于并列關系的特征在于，它的對比表現高于它的并列表現。通常是需要經過對比得出某結論而存在。從簡單的二者對比到多個元素之間的對比，從并列的單一數字呈現到數據化的圖表，從橫軸的圖表到環形的圖表，對比型的樣式因為其不同的特征而擁有許多豐富的表現形態。下面我們結合圖表來看一看。
兩個數據的對比
這是一個簡單的二者之間的數據對比，它強化了二者的數據差異，并通過顏色和面積來輔助表達二者的差異性。
多個同類數據的對比
這是一個圖形化的數據對比圖。在圖表上既把并列的事物交待了，又把它們之間的對比關系形像的描述了。數字在這里起到了補充說明的作用。
標名參數的同類數據對比
這組圖表和上圖也有類似的地方，它們都是通過圖形和數據相結合的方式，只是這張圖標明了對比的時間參數。時間是以年為單位，油價方面表現了一個上漲的趨勢，不過本圖沒有具體標明上漲的具體數值，僅體現了一種趨勢。
同類數據的多層屬性的對比
這是一張含有多重數據的圖組，它包括四個并列的類別，每個大類別有一個總對比數，而每個大類中又有四個小分類的對比數據，它用四種顏色定義這四個類別，而這四個小類別的紅黃綠藍又可以分別獨立形成四個分類，形成細分對比。這種多層次的屬性對比層次清晰、視覺的節奏感也較強。
非同類數據的對比
這是一個多個事物之間的數據對比，它們可以是非同類事特，也可以是具有某一潛在關聯屬性的同類事物。統一風格的圖標設計和統一節奏的圖文結構為數據的對比打下了視覺基礎。對比關系區別于并列關系的標準在于，它的數據和特征對比的表現高于它們之間并列表現。
單個數據的軸線圖
單個事物的軸線變化趨勢圖，它根據橫軸數值的遞增而不斷變化，可以直觀看到一個事物的發展規律和趨勢。
兩個數據的軸線圖
這是一個兩個事物的對比數據圖表，藍色和黃色各代表了兩個事物在相同環境下的不同數據表現。從中我們不但可以看到某個事物的變化規律和趨勢，也可以看到兩個數據之間的變化關系。
多個數據的軸線圖
這是一個多個事物的軸線數據圖，通過顏色進行區別每個個體及它們在不同時刻的數據表現。較之前面兩張圖有了更加多重的元素。
環形對比數據圖表
數據對比圖表并不僅限于直線。這是一個圓形的數據圖，它代表著邏輯上的并列和包含關系，并通過長度和數值表達它們之間的差異。
環形組合對比數據圖表
這是在并列組合結構基礎上的數據對比圖，它含有三個基本內容，一，幾個事物屬于并列關系。二，它們共同構成了一個事物，是一個事物的幾個并列分類。三，它們這幾個并列事物之間有著數值的差異并明確標識這種差異的具體數字化比率。
三、流程型
流程也是在并列基礎上的升級，它是指處于并列關系的兩個或兩以上的單位，它們之間具有前后的任務關系，共同擁有一個的目標和方向性并共同完一個完整行為，這種關系我們稱之為流程關系。流程關系在商業運作、操作指導或是任務說明中也是很常見的。
兩個任務的流程關系
最簡單的流程就是從A到B，它們是并列的、組合的、又有先后順序的關系。在流程型的邏輯表現中箭頭的圖示是最常被使用到的。
多個任務的流程關系
這是一個單向的漸進流程，在流程的表現中我們也可以通過色彩來區分，并且通過比例來增強表現它們的量級的對比關系。這些都是可以同時存在的，只要在節奏上處理得當是可以不互相干擾的。
多個支線流程
流程并非都是直線型的，這是一個分流的流程圖，它可以由一個事物分流向兩個事物，也可以從兩個事物再匯聚成一個事物。
循環流程
流程是可循環的，它可以從重復的無限的依照某個規律在幾個事物之間循環持續的進行下去。正如我們的天氣一樣，海水蒸發變成云，云匯聚變成雨，雨又流向大海，海水繼續蒸發……
看看——形意結合，視覺信息兩不誤
一、并列型
這是一個期待棒球場八百萬觀眾席的專題頁面，圖中模擬觀眾席的主視覺對多個方陣的觀眾席進行了介紹。每個色塊的觀眾席屬于并列組合的關系。從圖中引出的內容結合了操作按鈕。信息瀏覽直觀且交互性較好。
二、對比型
軸現是對比型常用的圖形表現方式，在這種基礎的軸線型數據上，我們看到了這個頁面很好的與內容結合。這是一個CF魚場管理的頁面，主視覺和內容分居水上和水下，海底魚和透藍色的數據圖深動的融合在一起。既充分的展現了數據，又直觀的展示了場景。做到了形與意的豐滿結合。
三、流程型
這是一個比較復雜的流程圖表，它包含了多項的、分流的、匯聚的、循環的的流程類型。這么多的流程箭頭作者將其歸納到幾個有規律的方塊內。內容雖多，但指向明確清晰。
這是一個帶對比屬性的流程圖，它們之前既有對比關系，又有流程關系。由低到高、顏色有淺入深的藍色配合橙色的箭頭指示為我們直觀的展示了邏輯關系。最后藍色大方塊上的角色點精，給目標以明確的指示，還配有橙色小氣泡，整體邏輯清晰，風格親和有愛。
做做——上古世紀郵件、劍靈封測數據頁面、C9指引專題
一、《上古世紀》SLOGAN 內部征集郵件
需求分析
以虛線框中的內容舉例，這也是一個長篇的文字，如果直接獎內容拷貝進網頁，也就大大降低了頁面整體閱讀的食欲。如果我們用文字衣櫥的方式進行收納內容又太多，敘述 性太強，比較難收納。所以這里我們通過圖形化將其進行邏輯表現，然后再配以文字說明。
并列關系是大多數邏輯關系的起源，不論是對比關系還是流程關系，它們都是在并列關系的基本上進行側重的描述。在這種關系基礎上我們再思考它們的細分類型，比如它們是各自獨立但具有同一屬性的并列關系，還是共同組成一個完整體系的并列關系，亦或是一種層級遞進層層深入的并列關系。然后根據內容的需要對它進行圖形化。
在這一類快速的專題中，我們可以迅速的套用方法總結里的數據圖表，來幫助人們快速的將長篇的文字圖形化。面對大長篇文字的時候我可以先進行文意的梳理，拉開每個段落的節奏，強化標題，并給大標題配上輔助說明的文字，方便快速閱讀。其次再咀嚼內容，分析它的邏輯關系。由于大部分的邏輯關系都源于并列的關系，在沒有特別明顯的數據對比或流程的情況下，我們都可以將其歸類于并列關系，然后再把握其進一步的邏輯和主次。這個案例的梳理圖較為簡單，是邏輯快速套用的嘗試。它可以在很短的時間內梳理擺布完成大篇幅的文字。當然，有人說，電影不如有聲小說，有聲小說不如原著，因為純文字的書有更多的想像空間，因為每個人對信息的理解各有不同，圖像化也便是設計師通過對信息理解而進行的進一步的設計表現。
有些信息是快速消費，有些信息是經典藝術。如果說無形和有形各有利弊，那就努力將自己訓練成一個信息的好導演好設計吧。
設計分解
第一部分是對制作團隊的介紹，包括三個主要人物和一個300人的研發團隊以及3億的研發成本。這里我們將這五個信息定義為并列關系的，圖形上突出三個主要人物，將300人的研發團隊以虛擬人的形式平鋪在背景上。并在各自相應的位置用需求中的文字進行補充說明。這樣有了視覺的核心，閱讀起來也相對有了可依附的實體，文字信息也便更形像了起來，分要點的描述也同樣注重文字排布的節奏，序號、主標題、詳情文字，這樣的形式不論掃描閱讀還是細致閱讀都能滿足。另外由于人類的本能，我們的眼睛對人臉是有極大的關注和興趣的，適當的使用人臉可以增強閱讀的欲望。
這是一個游戲品質介紹，品質、規模、引擎這樣的概念我們很難用具體的圖形表示它，所以這面選擇了套用這個圓環餅圖，表達出一種游戲品質由這四類構成的并列組合的大邏輯，有了圖形的依附再深入填充具體的文字，關系和內容也就一目了然了。
在理念和玩法的部分，使用了逐層影響和擴張的并列遞進的關系。用四個由小到大的環形圈來表達，從由虛擬世界引出的高度自由既而推動著玩家改變的可能性，最后產生充滿未知和變數的游戲樂趣。這是在并列基礎上的進一步圖像化。有了這些圖形，瀏覽者在面對大量的文字時就可以相對不那么茫然和無所適從。
二、劍靈極智封測數據公布
需求分析
這是一個劍靈封測數據，希望能夠通過相對有愛的表達方式為玩家展示測試結果。由于公布日期正值年終，所以整體數據的包裝則依附于”公布年終考核”這樣一個形式概念。玩過游戲玩家都知道”洪七公”是洪門的師傅。所以網頁使用洪七公的形像來貫穿整個表現。
設計分解
我們查看整體的文字信息，主要是對玩家在極智封測的測試中的數據進行對比和公示。所以我們選擇對比的結構進行圖表化，下面我們針對每一塊的數據內容進行分析設計。
1.各職業誰最先到達頂級的玩家
從提供的數據來看，第一部分的數據主要展示了不同職業最快滿級玩完家的時間點，由于大家滿級的日期是同一天，所以我們用小時和分鐘為單位來描述它，通過時鐘的表現時間，依照時間的先后從左至右依次排列。在時間表的下方匹配了洪七搞笑表情。彈出的小對話框中加入”干得不錯”的字樣，為視覺增添了有愛的氣氛。
2.在線時間最長的徒兒們
第二部分的數據是展示在線的時間長短，因為時間的直接聯想是鐘表，所以在第二部分的數據圖形化中，我們使用了環形數據對比的模板，因為也正好契合了圓形的時間表現方式，通過弧線的長短來模擬在線的時間長短。在圓形圖表的中央置入洪七師傅摸頭的小插畫，邊上配以”努力的孩子”的文字，將數據的含義進行了擬人化的點睛。
3.被3大BOSS擊殺最多的徒兒和擊殺總數
由于同是BOSS擊殺的數據，所以我們將3.4.5三個板塊的信息進行了整合。使用了同類數據多層屬性的對比模式圖形模板。將細分的最高擊殺數和最高擊殺數進行了整合表現。單個玩家的平均死亡次數和最高死亡次數通過人形的大小進行表示。右側配合洪七倒地的插圖，附上對話”平日里不好好練功”，暗喻著今天被殺的慘狀。
4.玩家平均時裝數
第四部分的設計比較簡單直接，用一件衣服剪影來表示時裝。并使用大字號標識”15件”強化數擾，通過洪七公右測的服裝展示和左側的配合文字”衣服倒是有不少啊!”或者”你們都是愛美的貨”等等來補充說明，有將整體氣氛有愛化。
頁面展示
三、C9新手指引專題
這是C9新手指南的”如何快速上手”的介紹頁面。主要由8個內容組成，這些內容之間有先后的順序關系，具體的內容通過點擊跳轉到相應的頁面。根據內容的關系，我們可以將其設計成流程關系的圖表。
這個案例比較直觀，在這里我們僅做一下簡要的分享。
這里我們將流程圖表設定為地圖的樣式，每個步驟作為一個任務，點擊區域和流程感覺更加鮮明，并加入了地圖樣式的手繪，為閱讀步驟的過程增添了游戲性，整體視覺和交互的趣味性也優于純文字的流程表現。
作者：晉小彥
歡迎轉載：http://www.kanwencang.com/bangong/20161206/64844.html
文章列表
留言列表
