2020-5-18 ui設(shè)計分享達人
我最近一直在想自己要寫什么，不如這次就來說說我最近在項目中遇到的問題吧~
再給大家看看我的解決方案，如果大家有更好的方案歡迎留言，我們一起探討啊~
最近一兩年我所涉及的項目都是有關(guān)于將網(wǎng)頁的功能系統(tǒng)改成APP，而針對的用戶就是公司的業(yè)務(wù)經(jīng)理，是金融公司的業(yè)務(wù)經(jīng)理們，我們的甲方爸爸！
當(dāng)然這就意味著網(wǎng)頁的產(chǎn)品，會有大量的數(shù)據(jù)，而且由于網(wǎng)頁產(chǎn)品的信息處理還沒有太與時俱進，所以大量的數(shù)據(jù)都是文字和數(shù)字的組合，因此要將這些數(shù)據(jù)改成APP時，就覺得好難啊。
其實表單在APP上并不好放，最好的解決方法就是設(shè)計成圖表，而現(xiàn)在市面上圖標(biāo)樣式不管是網(wǎng)頁的還是APP一搜一大把，Ant Design有專門的數(shù)據(jù)網(wǎng)站，如下圖所示：
什么樣的都能找到，那么我為什么會覺得好難呢？因為數(shù)據(jù)超多der~考慮的內(nèi)容又有很多，難免憂愁。
一、為什么要設(shè)計圖表？
因為數(shù)據(jù)表單在手機上并不好展示，同時從用戶體驗的角度上來考慮，數(shù)據(jù)本身都是數(shù)據(jù)組成，可讀性就不太好，因此如果把這些“數(shù)字”從商業(yè)目的、用戶動機進行有機組合、關(guān)聯(lián)或定義就使得數(shù)據(jù)變得有意義（價值），圖表只是最終的表現(xiàn)形式。
二、圖表由哪些元素構(gòu)成？
一張標(biāo)準(zhǔn)樣式的圖表基本上是如下圖所標(biāo)示的幾種元素組成，如下圖所示：
當(dāng)然這只是最基礎(chǔ)的一種圖標(biāo)形式，對于別的形式就不多介紹了，大家都有基礎(chǔ)知識，本文將嘗試從圖表設(shè)計動機的角度和大家一起探討如何更好的進行圖表設(shè)計。
三、圖表設(shè)計？
1、明確數(shù)據(jù)指標(biāo)
首先，我們得先搞明白這些數(shù)據(jù)是怎么來的、干嘛的，盡可能要求他們給到你的是盡可能精準(zhǔn)的數(shù)據(jù)，否則會導(dǎo)致接下來的工作前功盡棄。就舉我前幾天的例子來說吧，產(chǎn)品給了我這樣一張圖，如下圖所示：
我沒有仔細(xì)的去問一些具體的信息，比如數(shù)據(jù)最多的時候會是什么樣、業(yè)務(wù)想在這個表里看到什么信息、想要解決的問題什么？這些我都沒有問！
上來就是一頓設(shè)計操作，把表單設(shè)計成了這樣，如下圖所示：
結(jié)果在走查的時候，業(yè)務(wù)很明確的指出數(shù)據(jù)信息不夠多，他們想要在頁面上將所有的數(shù)據(jù)信息都能看到，而數(shù)據(jù)最多的情況，數(shù)據(jù)表單是長這樣的，如下圖所示：
就是因為一開始在拿到表單的時候沒有仔細(xì)去分析，才會導(dǎo)致這種情況的發(fā)生，因此要如何改進呢？
2、明確設(shè)計目的
其實圖表設(shè)計跟產(chǎn)品設(shè)計的思路有點類似，一開始要先明確的就是設(shè)計目標(biāo)，但這個很容易被設(shè)計師所忽略，因此前期在缺少設(shè)計目標(biāo)支撐的情況下，設(shè)計師就會像一個沒有指揮的小樂手，閉著眼睛亂彈，沒有方向感。
就像我之前設(shè)計方案被推翻，就是因為思考不明確導(dǎo)致的，定義設(shè)計目標(biāo)的過程需要站在業(yè)務(wù)的角度和數(shù)據(jù)的角度進行綜合分析從而進行構(gòu)建，一方面需要考慮業(yè)務(wù)如何更簡單的分析、理解數(shù)據(jù)從而提高決策效率；一方面又需要考慮數(shù)據(jù)本身如何更加精準(zhǔn)、一目了然的傳達給用戶。
3、規(guī)劃設(shè)計方案
我在寫這篇文章的時候，看了很多相關(guān)的圖表文章，很多都是分析哪些不同類型的圖表，配色上要怎么處理，或者哪些圖標(biāo)是用在什么地方的，對我都沒有太大幫助，因為圖表設(shè)計并不是普通的只是要好看的圖表而已。
4、解決問題
重新設(shè)計之前，我去找業(yè)務(wù)很詳細(xì)的了解了他們對于數(shù)據(jù)的需求，想要一目了然的看到所有的數(shù)據(jù)對比信息，數(shù)據(jù)在表單中要全部展示出來，數(shù)據(jù)后臺每天都會刷新，針對的場景是來自在去拜訪客戶路途中查看客戶目前的信息，我就將圖表改成了下圖所示：
由于面對的數(shù)據(jù)信息比較多，條紋圖比較符合多數(shù)據(jù)的信息，當(dāng)然這是數(shù)據(jù)最多的時候出現(xiàn)的情況，每家公司出現(xiàn)的數(shù)據(jù)是根據(jù)業(yè)務(wù)所提交的信息展現(xiàn)的。
在功能確定了之后，就是我們的細(xì)節(jié)問題，不是說我們在750*1624的畫布上設(shè)計好了圖表就行了，我們還要考慮到適配的問題，如下圖所示：
屏幕較窄的時候，將X軸的標(biāo)簽文字打斜，保證數(shù)據(jù)正常閱讀的同時也不影響美觀度。還有一種解決方案就是有連續(xù)的數(shù)字時，可以有簡寫。
四、如何選深色底和淺色底
我們可以先來一個對比圖，同樣的數(shù)據(jù)在深色背景和淺色背景下的圖表可讀性做對比，如下圖所示：
很顯然淺色背景下的圖表閱讀效率更高，那么面對復(fù)雜數(shù)據(jù)的時候，情況是否一致呢？如下圖所示：
很顯然，深色更適合展示信息比較多的，突出重點信息的頁面，因此我們在找數(shù)據(jù)頁面參考，在選擇深色和淺色背景里猶豫的，可以參考一下。
五、劃重點
這里討論的只是我在公司項目中的其中一個圖表設(shè)計，不能說做的很多，只是分享一下自己在試錯的過程中的成長，從web端改到APP，都會說減少一些功能，讓產(chǎn)品更好用，但是總有不想砍功能的需求方，如何滿足這些需求，是需要我們一直都在思考的事情。
轉(zhuǎn)自：ui中國-潘團子
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com
