超實用！四個方法幫你搞定資料可視化界面設計

“儀表闆”、“大資料”、“資料可視化”、“資料分析”——越來越多人和企業，開始運用他們的資料來做一些有趣的事情。在我的職業生涯中，有幸參與一大批資料為重的界面設計，我要在此分享一些觀點，講講如何造就這種特殊且有意義的産品。

很多人已經讨論過這個議題，我會圍繞創作過程中最具影響力的部分。

一、使用者不同，資料不同

任何時候設計一套複雜的系統，都不可避免要為很多使用者和角色進行設計。總裁、經理和分析師是幾個常見角色，每個都有自己的工作流程和對資料的需求。

定義好角色，産生不同視角，這本身就是一種藝術。我就不在此詳細解釋了。如果你對此有興趣，請看Cooper的這篇有用的文章。

關于角色，重要的一點是預先确定好，圍繞它們來組織資訊結構與線框圖。

下面是我們去年做的一款健康報告應用的最終成品。這套系統有着不同的使用者群，他們各自都需要不同的資料管理。建立了關鍵角色後，我們每次評審會将它們放在旁邊。

注意畫闆上的那些角色。我們的客戶都接受這種方式。

在滿屋子客戶面前展示作品是件難事。無論是在解釋線框圖、流程圖，還是就視覺設計進行讨論，都很難讓每個人跟上你的觀點。

通過角色來組織作品，會防止你(和客戶)在這些讨論中跑題。

二、制作頁面模型

我多年所用的一個技巧，是制作頁面模型。核心點很簡單：

首先為使用者呈現他們需要的，再将頁面餘下的資訊根據使用者故事或資訊層級，進行結構化處理。

制作頁面模型的概念，正是寫散文(和其他很多種溝通形式)的核心原則，我在寫過一本書之後就對它了如指掌了。多年來，我花費大量時間在這本書《樣式：清晰與優雅的基本要素》上。它除了作為絕佳的寫作參考之外，還清晰闡明這項觀點：

如果一開始就使人分心，那麼使用者不僅難以分辨每個元素是什麼，也難以集中精力于整個流程。

這是進行使用者體驗設計時需要牢記的一項準則。下面是制作頁面模型的兩個常用方式。

給畫闆建立某種結構。問問自己——通過這些資訊要講述怎樣的故事?

我在Behance和Dribbble上看到很多儀表闆和資料畫報項目，(視覺上)設計得很漂亮，但通常都使人眼花缭亂、過目即忘。它們要麼是各種圖表元件以缺乏層級的瀑布流形式排列，要麼視覺上過度設計，并不适合這項資料。

左圖展示的就是眼花缭亂的資料畫報。右圖例子則是裝飾物分散注意力，注意不到資料。

在上面的圖中(左圖)，這個資料面闆用了控制台的方式來呈現資訊……相當有壓迫感。為避免如此，我們試着以組織資訊的方式處理這類界面，讓人們感覺像是在閱讀雜志文章。

并不是說控制台式的界面就沒有用武之地……我個人願意設計成那樣。但多數情況下，沒有必要時刻看見所有資訊。

最關鍵的一點——避免創造出令人一知半解的圖形。為頁面資訊建立模型，首先給使用者呈現關鍵資訊，然後才是支撐内容。

三、選擇正确的圖形

在美學方面，有很多(太多了)設計都在誤用圖表。

最糟的是——這些“壞習慣”似乎在成倍增加。随處可見本應是餅形圖的面積圖，還有本應該是柱狀圖的曲線圖。讓我們一起來制止這些設計……下面這些建議有助于你正确對待資料：

始于資料

未經處理的原始資料表格一點也沒有吸引力。但它是最佳的起點。它幫你開始思考資料中有哪些變量可用，這些變量資料如何關聯。

原始資料的單調特性，會幫你思考系統中各種變量間的關聯。

除了從空白資料行列入手，等待靈感忽然進入你意識。你還可以更積極一些，通過下面這些很棒的資源，幫你揭示出有趣的關聯：

Charted ——Medium開發的一款自動資料可視化工具。

通過Google Sheets、Illustrator和Sketch設計更好的圖表。

Tableau——這個工具是最好的，不過相當昂貴。

在整個過程中，這部分并沒有靈丹妙藥。别對深入研究資料心存恐懼，試着混合搭配不同變量，建立基本圖表。這需要時間，但它是值得的。我想到的一些絕妙點子，都來自這些原始資料檔案的拼拼湊湊。

處理離散資料和連續資料

我花了很長時間才意識到這點，有些圖表比其他更能表達你的資料。在創作中很容易陷入這樣的境地，選擇一種好看的圖表，然後指望它能發揮作用。我經常這麼做(我挺喜歡散點圖)，并為此感到内疚。

有些圖形比其他更好，這取決于你所處理的資料類型。選擇合适圖表的方法之一，是評估你手中的資料。有兩種主要資料：

離散資料——數值可清晰計數。比如進球數或Facebook點贊。

柱狀圖最适合表現離散資料

連續資料——任何範圍值。比如一季的降雨量，或一個人的身高體重。

曲線圖最适合表現連續資料

簡單說，曲線圖最适合表現連續資料，柱狀圖最适合表現離散資料。

四、基本的或定制化的圖形

最後，作為這些海量資料系統的設計師，你得反複問自己“我應該選擇非正常方式來定制化設計?還是使用久經考驗的圖表來展現資訊?”

最近無意中讀到這篇來自37 Signals的文章—— 隻要3種圖表就夠了。作者強烈表達一個觀點，圖形的“有效性”勝過它的視覺特征。我非常贊同文中這一觀點。不過，我覺得他的觀點代表着一種極端實用主義的視角。我相信定制化的圖形通常也能提升資料的易用性，同時獨具一格引人入勝。

基本柱狀圖的例子

對我來說，有“一種尺寸通行”的圖表，還有“适用于最佳尺寸”的圖表。表格、曲線圖和柱狀圖就很好，可以容納各種類型的資料，但它們也非常普通(一種尺寸通行)。作為專業的設計師，我希望我的作品看起來和感覺上是獨特且有用的。

比如，紐約時報做得很好，通過定制化的互動式圖形，來為他們的文章添彩。可以在這裡看到更多他們的作品。我們來看一些完美的定制化圖表案例：

這個案例對曲線圖做了調整，讓人“一睹”那些支撐圖表的基本資料。

在這個3D圖表中，透視角度的改變在視覺上非常有沖擊力，也讓使用者更好了解資料間的關聯。

最後，來自我們為CNN做的一個項目。我們用了顔色編碼來展表現政黨偏好，同時立體突起在視覺上表現人口統計資訊。

作為首要準則——資料與技術所需，我們需要嘗試各種定制化圖形。但我們還是要有備選計劃，以防設計并不奏效，或者客戶喜歡相對保守的方式。

五、那又如何?

我們為什麼要把所有這些資料放在頁面上?答案是：這樣人們才能使用——做決策、調研、預測未來，什麼都行。關鍵是，使用者不會沉浸于你所選的漂亮色彩，他們是來工作的。

我的建議是——在你排布好頁面一切就緒後，問問自己“那又如何?”。看看每個圖表、元件、表格，仔細考慮人們從中能擷取到什麼。通常你會得出這樣的結論，“這些都不重要”，這就意味着要減少或是重新思考。

這在我身上發生過好幾次——我創作了複雜漂亮的儀表闆，包含了一系列時尚的圖表、餅形圖，還有成千上萬資料點構成的地圖。但總是被客戶質疑“我隻想知道這樣有效嗎……我要的東西在哪?”還有“我隻要3樣東西……X、Y和Z。哪裡可以看到它們?”

哎，這時候你才會意識到自己迷失在雜草叢中，遺失了重點。

我會有個辦法，嘗試使用文字來精确表達人們所要的東西。

在重要資訊上，文字總結可能比圖表更有效。

上面的圖來自我們最近的兩個項目。兩者都通過文字展現使用者所需的資訊，并沒有依賴需要解釋說明的圖表。

這個方法使我們的客戶産生共鳴，尤其在重要資訊上。但我之前提過，總要考慮各種角色，是以要用在适當的地方。

就像其他所有形式的設計一樣，它也需要一種平衡。

力求使你的資料與衆不同，但是要避免過度設計和無謂的分心。

為資料選擇正确的圖形，但别忘了有層次地建構頁面。

無論多麼單調、令人沮喪，還要打磨每個小細節……還有别忘了問自己，“那又如何?”

本文作者：Erik K

來源：51CTO

超實用！四個方法幫你搞定資料可視化界面設計

繼續閱讀

Python一行代碼制作炫酷可視化 Cufflinkscufflinks實戰

【Python】Pyecharts 動态可視化 (餅圖 Pie)前言一、安裝二、示例

matplotlib資料可視化實戰——餅狀圖+雷達圖+三維圖全局中文字型設定及負數顯示問題餅狀圖繪制雷達圖繪制三維圖形繪制

Excel實作資料可視化

Linux下Tableau server連接配接Kerberos認證的CDH Impala/hive背景說明：

國外資料可視化設計，和國内差别可太大了！

【工業4.0】數字工廠可視化設計：讓生産流程一目了然

雷達圖自定義點樣式漸變背景色雷達圖的自定義點樣式與漸變背景色

Python3 資料可視化之matplotlib、Pygal、requests

Pygal簡單生成直方圖

資料可視化#大資料

5G網絡，你真的了解了嗎？

進階轉錄組調控分析和R語言資料可視化第十三期（線上線下開課）

别輕易轉資料分析了！太卷了

如何優雅的建立init.py檔案？

POPUP_TO_DECIDE_LIST 彈出選擇框_SAP劉夢_新浪部落格