這個項目從數(shù)據(jù)分析－視覺通道－視覺結(jié)構(gòu)－視覺設(shè)計，經(jīng)過多次迭代的方式，最終得到了一個還算滿意的設(shè)計?，F(xiàn)在和大家分享一下我在做這個設(shè)計時的思路：

一、數(shù)據(jù)分析：

在分析了諾貝爾的原始數(shù)據(jù)以后，決定以時間線為導(dǎo)向，分別展示各年份的：

（1）該年各獎項獲獎比例
（2）該年各國各獎項獲獎比例
（3）該年各國按獲獎年齡分布的獲獎人

獲獎人的數(shù)據(jù)包含（粗體為主要展示屬性）：

照片，名字，英文名，性別，獲獎年齡，國家，獎項類別

為獲獎人的屬性分配可視化的“視覺通道”：

（1）獲獎年齡：位置
（2）國家：位置
（3）獎項類別：顏色
（4）其他的數(shù)據(jù)信息：邊欄

二、視覺結(jié)構(gòu)設(shè)計：

由獲獎年齡、國家、獎項類別的視覺通道：位置、位置、顏色

可以確定用散點圖的結(jié)構(gòu)會比較直觀，由于國家的列表項有40多個，用橫向和縱向的散點圖會超出界面邊界，所以把散點圖折成了圓形來表現(xiàn)。半徑表示獲獎年齡，對應(yīng)圓心的角度表示國家，顏色表示獎項類別。再加一層時間軸就構(gòu)成了基本的數(shù)據(jù)圖：

可以看到用圓形表示散點圖，越靠近圓心等分的面積越小，比較受限制，可讀性也不好，視覺效果也不佳。所以我把它往外拉出來一些，變成環(huán)形的散點圖：

三、權(quán)衡視覺設(shè)計、交互設(shè)計、用戶體驗

現(xiàn)在的數(shù)據(jù)圖不論是在視覺和可讀性上，都有了提高?？墒菃栴}又出現(xiàn)了，時間軸放在最里面，用戶操作起來很不方便。因為還需要一個可以精確點選到從1900-2013年的某一年的功能。于是在接下來的幾天嘗試了下面的幾種解決方案：

根據(jù)之前的數(shù)據(jù)圖，拓撲出來了6個方案。這些圖各有各的優(yōu)缺點，想了好久始終是不能達到權(quán)衡視覺設(shè)計、交互設(shè)計、用戶體驗的最完美狀態(tài)。最后選擇了兩個比較接近的設(shè)計，第一個和第五個。然后，加入“各國各獎項獲獎比例”繼續(xù)往下設(shè)計：

上圖確定的最終方案為第二個。

四、環(huán)形文字的可讀性處理：

上圖中文字在環(huán)形排列的時候會有反轉(zhuǎn)過來的，可讀性不高。之前采用的是左右反轉(zhuǎn)方式，后來采用了下面的設(shè)計方式來解決：

將環(huán)形用“X”分為上下左右4個部分，上下用豎排文字，左右用橫排文字，文字的排列遵循從左到右和從上到下。這種方式很適合中文字體，因為中文字體 基本上都是顯方形的，在元素細節(jié)構(gòu)圖上會比較好看。如果是英文字體的話可能不會太美觀，英文字體大多為長方形，所以豎排的文字會顯的扁一些。

五、真實的數(shù)據(jù)往往會有“缺陷”：

諾貝爾的數(shù)據(jù)在“1900”和“1940-1942”兩個年份段會有空缺，時間在變化的時候，數(shù)據(jù)圖右側(cè)會出現(xiàn)兩次人物列表空白。而兩個年代，第一次是在開始時間1900年，第二次是在二戰(zhàn)期間1940－1942年。

為了畫面元素平衡，開始時，使用諾貝爾頭像和文字標(biāo)題替代右側(cè)的空白處；二戰(zhàn)期間，用坦克和文字標(biāo)題替代右側(cè)的空白處；都用插畫風(fēng)格來表現(xiàn)，和左側(cè)的環(huán)形數(shù)據(jù)圖相應(yīng)和。插畫用少面積的藍色填充，達到畫面色彩平衡：

六、整體和局部展示：

整個諾貝爾可視化的過程都是展示單個年份，沒有一個整體呈現(xiàn)的過程。所以在一開始的時候加了一個整體概況分布：

七、用到的設(shè)計工具：

在這次項目中用到的設(shè)計工具有：Illustrator，Processing

用Processing來動態(tài)生成中間的環(huán)形散點圖，用程序生成的好處是：如果你的變量設(shè)置合理的話，可以通過調(diào)節(jié)你的變量來快速改變數(shù)據(jù)圖的樣式。

用Illustrator來設(shè)計其他的視覺元素，例如：UI界面、插圖、靜態(tài)數(shù)據(jù)圖。

最后總結(jié)一下：

對于數(shù)據(jù)可視化設(shè)計，我覺得數(shù)據(jù)分析、視覺結(jié)構(gòu)、交互設(shè)計、視覺設(shè)計它們的耦合度比較高，所以在設(shè)計的時候要全面的、整體的考慮，權(quán)衡它們之間的影 響和關(guān)系。盡量用快速的方法進行多次迭代。這篇文章我只講到了“Star Map”散點圖的設(shè)計，另外還有“諾獎之最”、“兩次獲頒諾獎”、“諾獎一家人”，把它們都做成了靜態(tài)的數(shù)據(jù)圖，可以通過線上網(wǎng)站來看：datanews

原文來自：優(yōu)設(shè)網(wǎng)
作者：@任遠媒體實驗室