我最近一直在想自己要寫(xiě)什么，不如這次就來(lái)說(shuō)說(shuō)我最近在項(xiàng)目中遇到的問(wèn)題吧~

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

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

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

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

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

一、為什么要設(shè)計(jì)圖表？

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

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

一張標(biāo)準(zhǔn)樣式的圖表基本上是如下圖所標(biāo)示的幾種元素組成，如下圖所示：

當(dāng)然這只是最基礎(chǔ)的一種圖標(biāo)形式，對(duì)于別的形式就不多介紹了，大家都有基礎(chǔ)知識(shí)，本文將嘗試從圖表設(shè)計(jì)動(dòng)機(jī)的角度和大家一起探討如何更好的進(jìn)行圖表設(shè)計(jì)。

三、圖表設(shè)計(jì)？

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

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

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

上來(lái)就是一頓設(shè)計(jì)操作，把表單設(shè)計(jì)成了這樣，如下圖所示：

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

就是因?yàn)橐婚_(kāi)始在拿到表單的時(shí)候沒(méi)有仔細(xì)去分析，才會(huì)導(dǎo)致這種情況的發(fā)生，因此要如何改進(jìn)呢？

2、明確設(shè)計(jì)目的

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

就像我之前設(shè)計(jì)方案被推翻，就是因?yàn)樗伎疾幻鞔_導(dǎo)致的，定義設(shè)計(jì)目標(biāo)的過(guò)程需要站在業(yè)務(wù)的角度和數(shù)據(jù)的角度進(jìn)行綜合分析從而進(jìn)行構(gòu)建，一方面需要考慮業(yè)務(wù)如何更簡(jiǎn)單的分析、理解數(shù)據(jù)從而提高決策效率；一方面又需要考慮數(shù)據(jù)本身如何更加精準(zhǔn)、一目了然的傳達(dá)給用戶。

3、規(guī)劃設(shè)計(jì)方案

我在寫(xiě)這篇文章的時(shí)候，看了很多相關(guān)的圖表文章，很多都是分析哪些不同類型的圖表，配色上要怎么處理，或者哪些圖標(biāo)是用在什么地方的，對(duì)我都沒(méi)有太大幫助，因?yàn)閳D表設(shè)計(jì)并不是普通的只是要好看的圖表而已。

4、解決問(wèn)題

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

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

在功能確定了之后，就是我們的細(xì)節(jié)問(wèn)題，不是說(shuō)我們?cè)?50*1624的畫(huà)布上設(shè)計(jì)好了圖表就行了，我們還要考慮到適配的問(wèn)題，如下圖所示：

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

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

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

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

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

五、劃重點(diǎn)

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

轉(zhuǎn)自：ui中國(guó)-潘團(tuán)子