【海外2.7K點贊量好文】數據驅動的界面設計

「儀錶盤」，「大數據」，「數據可視化」，「數據分析」-在這裡，期待利用數據去做一些有趣的事的人和公司呈現爆髮式增長。在我的職業生涯中，我曾非常幸運參與很多重度數據的界面設計工作。對於如何實現一個獨特和有意義的產品，我想分享下我的想法。

很多人已經提起過這個問題，所以我將圍繞部分最有影響的方法。

1.不同的用戶，不同的數據

無論何時你要設計一個複雜的系統，都不可避免要為不同的用戶或角色設計。經理，管理者，和分析者都是普通的用戶，他們每個人都有他們各自的工作流程和數據需求。

定義良好的角色和生成洞察力本身就是一門藝術,這並不是我將要在這裡詳細說的。如果你好奇如何做到這一點,可以在Cooper看看這個有用的帖子。

最需謹記的是在前期確定角色，組織信息架構任務，以及圍繞它們設計線框圖。

下面是我們去年用於醫療報告應用程序的交付成品。這個系統有不同的用戶，每個用戶都要求有他們自己的數據工作流程。一旦我們建立了關鍵人物角色，在每個評審會議，我們就把它們放在我們的交付成品中。

注意人物角色頂上的每個畫板。我們的客戶已經接受這種方法。

向客戶展示藝術品可能是一項艱巨的任務。無論你是解釋線框圖和流程圖或爭論視覺處理，很難讓每個人都跟上你的思路。

通過人物角色組織你的作品，將有助於你（和你的客戶）在這些討論中保持冷靜。

2.適應頁面

我多年來學到的一個技巧是塑造頁面的概念。核心理念真的很簡單：

先展示用戶需要查看的內容，然後根據用戶的故事或信息層次構造頁面的剩餘部分。

塑造頁面的概念是寫散文（以及許多其他交流形式）的核心原則，這個是在我寫了一本書之後所熟悉的。多年來，我花了很多時間在這本書《「風格：清晰和優雅的基礎」》上。它除了是一本優秀的參考寫作，還形象地描述了這個觀點：

當你開始分心時，你的聽眾不僅很難看到每一個元素是什麼，而且無法得到整個流程的焦點。

當進行交互設計時，這是需要謹記的有用原則。下面是我們常用來塑造頁面的兩種方法。

給你儀錶板結構。問問你自己?-?我要用信息闡述什麼故事？

許多我在Behance和Dribbble看到的儀錶盤和數據即項目雖然（視覺上）設計精美但往往極其平庸。他們要麼沒有層次地將無數的圖形組件組織在Pinterest風格的布局裡，要麼過度設計不適合數據的可視化。

左邊的圖像展示了過多的數據可視化信息。右邊的圖像像一個裝飾品，降低了對數據的關注度。

在上面的圖片（左邊），報告儀錶盤採取任務控制的方式來呈現信息……這是相當有壓迫感的。為了避免這種情況，我們試圖通過規劃信息來處理這些類型的界面，讓其更像是你在閱讀雜誌上讀的一篇文章。

但並不是說對於任務控制界面是沒有時機和場景使用的…我個人喜歡設計這樣的東西。但在大多數情況下，沒有必要一直看到每一個。

最關鍵要考慮的是-避免創建一些一知半解的可視化。在頁面上組織信息，使得向用戶首先提供關鍵信息，然後跟蹤提供支持內容。

3.選擇「正確」可視化

有很多（太多）的設計為了好看而濫用圖表。

最糟糕的是-這些「壞習慣」似乎成倍增加。在我看來，我看到的區域圖應該是餅圖，或折線圖應該是條形圖。因此，讓我們一起儘力停止這種行為……這裡有幾個規範數據的建議：

從數據開始

原始表格的數據是不直觀形象的。然而，這是最好的開始。它將幫助你開始思考數據中有哪些變數，以及各種數據實體是如何關聯的。

原始數據的扁平性質將幫助你思考系統中實體之間的關係。

除了從空白的數據開始，期待靈感最終溜進你的潛意識，你可以更主動地審視這些豐富的資源，藉此發現數據間有趣的聯繫：

• Charted-一個由Medium開發的，可以將數據自動可視化的工具。

用Google Sheets，Illustrator和Sketch設計更好的圖表

• Tableau-在這裡這個工具是最好的，但非常昂貴。

這個部分的過程沒有技巧。不要害怕摸索數據，嘗試通過混合和匹配不同的變數來製作基本圖表。它需要時間，但是值得的。我想出的一些好的想法，都是從擺弄原始數據文件開始的。

使用離散與連續數據

我花了一段時間才意識到這一點，有些圖表比其他圖表更好地表達了你的數據。你會很輕易地只站在你自己的角度挑選好看的圖表，從而希望自己的數據產生作用。我很自責在嘗試很多次才發現（我是一個散點圖愛好者）。

根據你所處理的數據類型，某些類型的可視化比其他見效更好。選擇適當的圖表的一種方法是評估你所擁有的數據類型。數據主要有兩種類型：

離散數據-可計算的不同值。例如，一些進球分數或臉譜網的點贊數。

條形圖最能表現離散數據

連續數據-範圍內的任何值。例如，一個季節的降雨量或一個人的身高/體重。

線圖最能表現連續數據

總之，線圖最適合連續數據，條形圖最能表現離散數據。

對我來說，真正鞏固我的觀點的一個資源是由Dona Wong創作的「華爾街日報：引導信息圖形」。但願我幾年前就擁有這本書。對於選擇適當的圖表和展示信息應注意的事項，這本書有寶貴的參考意義。

The Dos and Donts of Presenting Data, Facts, and Figures: Dona M. Wong: 9780393347289: Amazon.com: Books

4.基本與定製可視化

最後，作為這些有豐富數據的系統的設計師，你必須不斷問自己：「我應該走不尋常的路徑去實現定製化？還是我應該用可靠尋常的圖表來表達信息？」。

我最近在37 Signals遇到這篇文章-3個圖都是我需要的。作者強調了為何可視化的可用性取代其視覺效果。我完全能理解在他的處境的感受。然而，我認為他的觀點是一種非常功利的觀點。我相信定製可視化往往可以提高數據的可用性，使其看起來獨特和引人注目。

一個基本條形圖的例子

對我來說，這裡有「通用」的圖表和「最適合」圖表。表、行和條形圖可以適應多種類型的數據，但它們也非常通用（一個尺寸適合所有的）。作為一個專業的設計師，我希望我的作品的外觀和感覺是獨特和有用的。

例如，紐約時報做了一件了不起的事，定製交互可視化來充實他們的文章。你可以在這裡看到更多他們做的事。讓我們探討幾個無可挑剔的定製可視化的例子：

這個例子是提供點擊數據可以鑽取下級數據的功能，使一個線圖變得耳目一新。

http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?_r=0

在這個3D圖中，抽象的變化在視覺上讓人大開眼界，但也有助於用戶更好地洞察數據的相關性。

http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0

從Selfiecity.net這個例子能很好地使用實際的內容來創建可視化。

selfiecity

最後，來自我們與美國有線電視新聞網做的一個項目，我們使用彩色編碼顯示政黨偏好，同時用3D凸顯效果來實現人口統計信息的可視化。

Truth Labs: Digital Design Studio

一般來說，當數據和技術需要的時候，我們才會試圖拿出定製的可視化，但我們始終有一個後備計劃以防萬一，比如事情不成功或客戶喜歡一個不那麼消耗資源的方法。

5.那又怎樣？

那麼為什麼我們把所有的數據放在頁面上呢？答：這樣人們可以用它來-無論是做出決定，調查，還是預測未來。重點是，你的用戶不會因為你選擇了漂亮的顏色表示驚嘆，他們都在儘力做好本職工作。

所以我的建議是-當你已經得到了你的頁面布局，一切都精雕細琢地恰到好處後，反問自己「那又怎樣？「。看看每一個圖表，小部件，圖表，表格，並思考什麼人會從中收集信息。很多時候你會得出這樣的結論：「沒關係」，這是減少或重新思考的一個重要標誌。

這種事經常發生在我身上-我創造了非常複雜的儀錶板，包含了一系列趨勢圖、餅圖和成千上萬的數據點圖。但是客戶只問了我：「我只是想知道產品是否有效，我在哪裡可以看到？」或者「我只需要知道3件事：X軸、Y軸和Z軸。我在哪裡能找到這些？「

哎。在這一刻，你才意識到你迷失在雜草中，而錯過了大局。

我想到了一種策略來幫助解決這個問題，就是嘗試和使用文本來表達人們想知道的信息。

從較高層次來看，文本摘要比圖表更有用。

上面的圖片取自我們最近的兩個項目。都直接明了地告訴用戶他們需要通過文本來了解，而不是依賴於需要解釋的圖表。

這種方法引起了我們客戶的共鳴，特別是對於高層次的信息。但正如我前面提到的，總是有多個人物角色要考慮，所以要在適當的地方使用。

像所有形式的設計一樣，這是一種平衡的藝術。

力求以獨特的方式呈現你的數據，但避免過度設計和不必

要的干擾。

為您的數據選擇正確的圖表，但不要忘記用層次結構構建頁面。

譯者：安琪Angela

原文作者：Erik K

原文地址：https://blog.truthlabs.com/designing-data-driven-interfaces-a75d62997631

推薦閱讀：