圖表設計總結

Comment

UI/UX設計

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

1452667

圖表的出現可以幫助我們對數據進行可視化處理,提升了數據的可讀性。因為相比於純文本,用戶處理圖形信息的速度要快得多。

在這裡我們使用的是雷達圖,球隊各項主要統計一目了然。

 

常見圖表種類

那麼如何才能設計出用戶滿意的圖表呢?要回答這個問題,首先我們要知道目前常見的圖表種類有哪些。

1452668

1452669

1452670

折線圖,曲線圖,餅圖,環狀圖,條狀圖,雷達圖,地圖等可以說是我們目前最常見的圖表樣式了。具體到每種圖表適用於表現什麼類型的數據我這裡就不多說了,數學老師應該都說過,今天主要來說圖表設計。

我們可以從以下四個維度來剖析圖表設計:可讀性,一致性,視覺層級和美觀性。

 

可讀性

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

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

 

配色

圖表的配色這裡主要來說背景色,一般來說,圖表的背景色我們可以分為深色和淺色。淺色背景的圖表更有利於用戶閱讀,可以有效的提高數據的可讀性。

1452671

可能有人會問了,既然淺色背景更有利於閱讀,那麼我們就可以直接下結論了“圖表背景一律使用淺色”,為什麼還要考慮深色呢?

1452672

那是因為有的界面內容過少,為了使界面看起來不那麼單調,我們會使用深色背景。因為界面內容本身就少,用戶一眼就能看完,所以深色背景對可讀性影響不大。但是我們要記住,當數據過多的時候,必須使用淺色背景。

1452673

 

文字

對於信息的讀取,圖表可以快速但是無法做到準確,這就是圖表要輔以文字說明的意義所在。

1452674

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

1452675

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

 

群組

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

1452676

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

 

一致性

一款產品中所出現的圖表肯定不止一種,為了消除不同類型圖表給用戶帶來的認知負擔,我們可以通過給圖表添加相同的設計元素來建立圖表的一致性原則。這些相同的設計元素可以是背景色,排版,標題樣式等。

1452677

以咕咚為例,這裡面出現的幾種圖表樣式都是比較統一的。

 

視覺層級

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

1452678

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

 

美觀性

其實如果一個圖表可以滿足以上的三個條件已經可以說是相當不錯了,但是我們要更進一步,從美觀性的角度再對圖表進行提升。好的圖表應該是具有美感的,最好具備有趣,獨特等要素。這樣才可以吸引用戶的注意力,讓他們想看個究竟。看到特別出彩的圖表樣式,用戶甚至會去分享。虎撲做的“數讀NBA”就是一個非常好的例子。

1452679

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

1452680

 

總結

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

 

 

frankbite-關注UI設計/前端/網頁,如果您喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將為您提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03

原文:王M爭