我最近一直在想自己要寫什么，不如這次就來說說我最近在項目中遇到的問題吧~

再給大家看看我的解決方案，如果大家有更好的方案歡迎留言，我們一起探討啊~

最近一兩年我所涉及的項目都是有關于將網(wǎng)頁的功能系統(tǒng)改成APP，而針對的用戶就是公司的業(yè)務經(jīng)理，是金融公司的業(yè)務經(jīng)理們，我們的甲方爸爸！

當然這就意味著網(wǎng)頁的產(chǎn)品，會有大量的數(shù)據(jù)，而且由于網(wǎng)頁產(chǎn)品的信息處理還沒有太與時俱進，所以大量的數(shù)據(jù)都是文字和數(shù)字的組合，因此要將這些數(shù)據(jù)改成APP時，就覺得好難啊。

其實表單在APP上并不好放，最好的解決方法就是設計成圖表，而現(xiàn)在市面上圖標樣式不管是網(wǎng)頁的還是APP一搜一大把，Ant Design有專門的數(shù)據(jù)網(wǎng)站，如下圖所示：

什么樣的都能找到，那么我為什么會覺得好難呢？因為數(shù)據(jù)超多der~考慮的內(nèi)容又有很多，難免憂愁。

一、為什么要設計圖表？

因為數(shù)據(jù)表單在手機上并不好展示，同時從用戶體驗的角度上來考慮，數(shù)據(jù)本身都是數(shù)據(jù)組成，可讀性就不太好，因此如果把這些“數(shù)字”從商業(yè)目的、用戶動機進行有機組合、關聯(lián)或定義就使得數(shù)據(jù)變得有意義（價值），圖表只是最終的表現(xiàn)形式。

二、圖表由哪些元素構(gòu)成？

一張標準樣式的圖表基本上是如下圖所標示的幾種元素組成，如下圖所示：

當然這只是最基礎的一種圖標形式，對于別的形式就不多介紹了，大家都有基礎知識，本文將嘗試從圖表設計動機的角度和大家一起探討如何更好的進行圖表設計。

三、圖表設計？

1、明確數(shù)據(jù)指標

首先，我們得先搞明白這些數(shù)據(jù)是怎么來的、干嘛的，盡可能要求他們給到你的是盡可能精準的數(shù)據(jù)，否則會導致接下來的工作前功盡棄。就舉我前幾天的例子來說吧，產(chǎn)品給了我這樣一張圖，如下圖所示：

我沒有仔細的去問一些具體的信息，比如數(shù)據(jù)最多的時候會是什么樣、業(yè)務想在這個表里看到什么信息、想要解決的問題什么？這些我都沒有問！

上來就是一頓設計操作，把表單設計成了這樣，如下圖所示：

結(jié)果在走查的時候，業(yè)務很明確的指出數(shù)據(jù)信息不夠多，他們想要在頁面上將所有的數(shù)據(jù)信息都能看到，而數(shù)據(jù)最多的情況，數(shù)據(jù)表單是長這樣的，如下圖所示：

就是因為一開始在拿到表單的時候沒有仔細去分析，才會導致這種情況的發(fā)生，因此要如何改進呢？

2、明確設計目的

其實圖表設計跟產(chǎn)品設計的思路有點類似，一開始要先明確的就是設計目標，但這個很容易被設計師所忽略，因此前期在缺少設計目標支撐的情況下，設計師就會像一個沒有指揮的小樂手，閉著眼睛亂彈，沒有方向感。 

就像我之前設計方案被推翻，就是因為思考不明確導致的，定義設計目標的過程需要站在業(yè)務的角度和數(shù)據(jù)的角度進行綜合分析從而進行構(gòu)建，一方面需要考慮業(yè)務如何更簡單的分析、理解數(shù)據(jù)從而提高決策效率；一方面又需要考慮數(shù)據(jù)本身如何更加精準、一目了然的傳達給用戶。

3、規(guī)劃設計方案

我在寫這篇文章的時候，看了很多相關的圖表文章，很多都是分析哪些不同類型的圖表，配色上要怎么處理，或者哪些圖標是用在什么地方的，對我都沒有太大幫助，因為圖表設計并不是普通的只是要好看的圖表而已。

4、解決問題

重新設計之前，我去找業(yè)務很詳細的了解了他們對于數(shù)據(jù)的需求，想要一目了然的看到所有的數(shù)據(jù)對比信息，數(shù)據(jù)在表單中要全部展示出來，數(shù)據(jù)后臺每天都會刷新，針對的場景是來自在去拜訪客戶路途中查看客戶目前的信息，我就將圖表改成了下圖所示：

由于面對的數(shù)據(jù)信息比較多，條紋圖比較符合多數(shù)據(jù)的信息，當然這是數(shù)據(jù)最多的時候出現(xiàn)的情況，每家公司出現(xiàn)的數(shù)據(jù)是根據(jù)業(yè)務所提交的信息展現(xiàn)的。

在功能確定了之后，就是我們的細節(jié)問題，不是說我們在750*1624的畫布上設計好了圖表就行了，我們還要考慮到適配的問題，如下圖所示：

屏幕較窄的時候，將X軸的標簽文字打斜，保證數(shù)據(jù)正常閱讀的同時也不影響美觀度。還有一種解決方案就是有連續(xù)的數(shù)字時，可以有簡寫。

四、如何選深色底和淺色底

我們可以先來一個對比圖，同樣的數(shù)據(jù)在深色背景和淺色背景下的圖表可讀性做對比，如下圖所示：

很顯然淺色背景下的圖表閱讀效率更高，那么面對復雜數(shù)據(jù)的時候，情況是否一致呢？如下圖所示：

很顯然，深色更適合展示信息比較多的，突出重點信息的頁面，因此我們在找數(shù)據(jù)頁面參考，在選擇深色和淺色背景里猶豫的，可以參考一下。

五、劃重點

這里討論的只是我在公司項目中的其中一個圖表設計，不能說做的很多，只是分享一下自己在試錯的過程中的成長，從web端改到APP，都會說減少一些功能，讓產(chǎn)品更好用，但是總有不想砍功能的需求方，如何滿足這些需求，是需要我們一直都在思考的事情。

轉(zhuǎn)自：ui中國-潘團子