編輯導語：将數據進行處理，并通過視覺展示的表達過程就是圖表設計的過程。既然有視覺展示，那就要考慮到視覺展示層面的設計。本文會跟大家分享一些簡單易學的小技巧，感興趣的朋友不要錯過了哦。

圖表設計的過程是将數據進行處理，并通過視覺展示的表達過程。無論是條形圖、折線圖還是扇形圖，都要考慮圖表視覺展示層面的設計，例如圖表采用什麼顔色、什麼樣式，用戶怎麼與圖表交互…這裡介紹一些簡單易學的小技巧，快速上手數據圖表設計。

一、顔色的運用

顔色的巧妙運用能為數據提供更加豐富的内涵。以最常見的紅、黃、綠三種顔色為例，分别代表了需要不好、中性、好的意思。

現在越來越多的産品願意使用品牌色作為圖表的主色調，通過調整品牌色的深淺程度，做成一組同色系的色闆供圖表使用，其中顔色越深代表數值越大，顔色越淺代表數值越小。

如果覺得紅黃綠這些顔色太普通，還可以考慮使用藍色和橙色這類互補色作為調色闆。

藍橙色的搭配相較于紅綠色更具有活力，用藍色表示正值，橙色表示負值，對用戶來說也容易理解。

對于顔色的運用，最重要的是考慮可訪問性，不僅是圖表本身顔色的對比，還要考慮圖表與背景色之間也要具有足夠高的對比度。

二、線條和紋理

除了使用不同的顔色，還可以在圖表中添加線條或者紋理效果來構建多種多樣的圖表樣式。

選擇一個基礎色，在基礎色的基礎上添加點、橫線、豎線、斜線、網格等多種填充樣式，構成一套顔色統一但内容差異化的柱狀圖系統。

線條也可以添加不同的紋理效果。由多種不同顔色的實線組成的折線圖往往很難讓用戶快速理解其中的意思，我們可以為折線添加各種樣式的虛線，來提高圖表的可用性。

三、響應性設計

如果要在手機上展示圖表信息，需要考慮手機屏幕的尺寸對于圖表的适配性。例如PC端屏幕寬度更大，更适合展示多個豎向的柱狀圖。

同樣一組圖表如果放到手機端展示，采用橫向的條形圖會更合适且合理。

手機屏幕寬度小，如果PC端的圖表直接照搬過來，在一屏上隻能顯示幾個圖表，而且還需要用戶左右滑動來查看更多圖表。

這樣的照搬不僅無法一下展示所有圖表，缺少直觀性和對比性，還會增加用戶操作負擔，顯然是不可取的。

如果覺得在手機上使用橫向的條形圖成本太高，又想讓用戶一下看到圖表的所有内容，可以考慮使用“屏幕旋轉”提示，告知用戶把手機橫過來看圖表效果會更好。

四、标簽

标簽是圖表重要的組成部分，标簽的長度、大小都會影響圖表整體的效果。

比如有的圖表尺寸很小，空間有限，但是标簽卻很長，如果盡可能在有限的空間中将标簽展示清楚，值得我們去思考。

在圖表中并非所有内容都要始終可見，圖表中的數據圖就可以傳達大部分的信息。如果覺得圖表中展示的标簽過多，可以隐藏次要的信息，通過鼠标懸浮或點擊來觸發這些内容。

懸停狀态是隐藏次要數據同時避免圖表在視覺上看着太複雜的解決方法。在懸停時透露更多信息是漸進式披露的重要用途，用戶可以在需要時進行交互，并且默認情況下不會造成頁面混亂。

另外設計圖表的時候，要做到提前規劃标簽導航，确定長标簽的展示方式，考慮怎麼放置不會讓圖表顯得太臃腫。

五、排版和層級結構

現在有很多儀表盤設計得很簡約、很現代，這類儀表盤使用超大字号的加粗字體展示幾項最重要的信息，既突出重點，又讓整個頁面有層次和對比。

類似的排版能夠吸引用戶的注意力，通過前期研究确定幾個用戶最關心的内容，然後将這些内容重點展示，起到強調作用。

慢慢來比較快，希望對你有幫助！

#專欄作家#

作者：Clippp，Clip設計夾。每周精選設計文章，專注分享關于産品、交互、UI視覺上的設計思考。

本文原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部