文章從四個方面切入，對圖表設(shè)計做了相關(guān)總結(jié)，希望能夠給你帶來啟發(fā)。

用戶在使用產(chǎn)品過程中，會接觸到大量的數(shù)據(jù)。其實數(shù)據(jù)對用戶來說就是文字和數(shù)字的組合，大腦處理純文本的速度比較慢。例如我們來看一支球隊的技術(shù)統(tǒng)計，場均116.7分，28.3助攻，45.0籃板…這些數(shù)據(jù)對于我們來說都是冷冰冰的，我們很難快速的了解其背后的含義。

圖表的出現(xiàn)可以幫助我們對數(shù)據(jù)進行可視化處理，提升了數(shù)據(jù)的可讀性。因為相比于純文本，用戶處理圖形信息的速度要快得多。

在這里我們使用的是雷達圖，球隊各項主要統(tǒng)計一目了然。

常見圖表種類

那么如何才能設(shè)計出用戶滿意的圖表呢？要回答這個問題，首先我們要知道目前常見的圖表種類有哪些。

折線圖，曲線圖，餅圖，環(huán)狀圖，條狀圖，雷達圖，地圖等可以說是我們目前最常見的圖表樣式了。具體到每種圖表適用于表現(xiàn)什么類型的數(shù)據(jù)我這里就不多說了，數(shù)學(xué)老師應(yīng)該都說過，今天主要來說圖表設(shè)計。

我們可以從以下四個維度來剖析圖表設(shè)計：可讀性，一致性，視覺層級和美觀性。

可讀性

圖表設(shè)計的初衷就是為了讓用戶浩如煙海的數(shù)據(jù)中解脫出來，圖表需要幫助用戶更好的”讀取”數(shù)據(jù)，所以在這里我將可讀性放在圖表設(shè)計的首要位置。

圖表的可讀性主要注意以下三點。配色，文字和群組。

配色

圖表的配色這里主要來說背景色，一般來說，圖表的背景色我們可以分為深色和淺色。淺色背景的圖表更有利于用戶閱讀，可以有效的提高數(shù)據(jù)的可讀性。

可能有人會問了，既然淺色背景更有利于閱讀，那么我們就可以直接下結(jié)論了“圖表背景一律使用淺色”，為什么還要考慮深色呢？

那是因為有的界面內(nèi)容過少，為了使界面看起來不那么單調(diào)，我們會使用深色背景。因為界面內(nèi)容本身就少，用戶一眼就能看完，所以深色背景對可讀性影響不大。但是我們要記住，當(dāng)數(shù)據(jù)過多的時候，必須使用淺色背景。

文字

對于信息的讀取，圖表可以快速但是無法做到準(zhǔn)確，這就是圖表要輔以文字說明的意義所在。

文字的可讀性主要體現(xiàn)在字體(襯線字體和非襯線字體)，字號，配色和排版。以排版為例，用戶的閱讀習(xí)慣是從左往右，從上往下，也是我們常說的Z型閱讀模式。這種模式下，左對齊的文字排布就非常有利，用戶可以無意識的回到段落左端，開始新一行的閱讀。而居中和左對齊使得段落每一行左端的位置都不一樣，用戶每次都要有意識的尋找開始位置，閱讀起來會很累。

上面說到了用戶瀏覽習(xí)慣，接下來再給大家分享另一個容易被我們忽視用戶瀏覽習(xí)慣。我們在設(shè)計餅狀圖的時候，份額最大的部分應(yīng)該放置在12點鐘方向，因為用戶都習(xí)慣從12點鐘的位置開始瀏覽。其余的部分按從大到小依次排，順時針逆時針都可以。

群組

群組的設(shè)計理念跟卡片式設(shè)計相類似，都是對信息進行分割讓用戶更容易消化。以轉(zhuǎn)賬功能為例，對于收款人信息，我們可以使用左邊的列表樣式逐條展示，其實這樣做問題也不大，而且還省事。但是這種展示方式屬于毫無主次的陳鋪出所有信息，用戶無法明確優(yōu)先級。在這個界面中，用戶最關(guān)心的是收款人信息，而收款人信息中用戶的關(guān)注重點依次是收款人姓名>收款賬號>開戶行。如果用左邊的列表樣式，優(yōu)先級這個維度就無法體現(xiàn)。

那么我們可以對信息進行分組整合，將收款人姓名，賬號，開戶行整合到一起，還通過使用icon來幫助用戶快速定位重點信息，提升閱讀速度。

一致性

一款產(chǎn)品中所出現(xiàn)的圖表肯定不止一種，為了消除不同類型圖表給用戶帶來的認(rèn)知負(fù)擔(dān)，我們可以通過給圖表添加相同的設(shè)計元素來建立圖表的一致性原則。這些相同的設(shè)計元素可以是背景色，排版，標(biāo)題樣式等。

以咕咚為例，這里面出現(xiàn)的幾種圖表樣式都是比較統(tǒng)一的。

視覺層級

不同的數(shù)據(jù)有不同的重要程度，我們可以通過配色，群組，字體，間距等手法來使圖表的視覺層次分開，有助于用戶對于數(shù)據(jù)的輕重緩急有一個直觀的判斷。

相比于淺色，深色背景更能吸引用戶的注意力。

美觀性

其實如果一個圖表可以滿足以上的三個條件已經(jīng)可以說是相當(dāng)不錯了，但是我們要更進一步，從美觀性的角度再對圖表進行提升。好的圖表應(yīng)該是具有美感的，最好具備有趣，獨特等要素。這樣才可以吸引用戶的注意力，讓他們想看個究竟?？吹教貏e出彩的圖表樣式，用戶甚至?xí)シ窒??；渥龅摹皵?shù)讀NBA”就是一個非常好的例子。

現(xiàn)在我們可以看到一些圖表會引入一些動效，動效可以美化界面，有趣的動效還可以起到娛樂用戶的作用，但是動效會降低加載速度。比如下方的一個電子收據(jù)動畫，這個動畫看起來很酷炫，但是它的存在使得用戶需要4秒鐘才能看到交易細(xì)節(jié)。這個等待時間顯然超過了用戶的心里預(yù)期。所以在動效的使用上，我們一定要找到一個平衡點。

總結(jié)

這就是我從可讀性，一致性，視覺層級和美觀性這四個方面對圖表設(shè)計的總結(jié)，希望可以對大家有所幫助。大家有任何問題和想法，歡迎留言來交流。

#專欄作家#

王M爭，人人都是經(jīng)理專欄作家，資深互聯(lián)網(wǎng)人。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議