在如今的工作中（尤其是 B 端）越來(lái)越多的會(huì)開(kāi)始出現(xiàn)數(shù)據(jù)可視化的身影，對(duì)于一部分小伙伴來(lái)說(shuō)這個(gè)概念是較為陌生的，面對(duì)這道無(wú)形之中提升的“門檻”我們常常會(huì)表現(xiàn)的手足無(wú)措。所以，為了讓大家對(duì)于數(shù)據(jù)可視化不再那么束手無(wú)措，我希望能通過(guò)這篇文章和大家一起交流學(xué)習(xí)，解決一些屬于我們共同的問(wèn)題。
那么我們還是老規(guī)矩，想要了解一個(gè)事物首先需要知道的是它的定義。
1. 數(shù)據(jù)可視化的定義
較為籠統(tǒng)的來(lái)說(shuō)數(shù)據(jù)可視化是一種由圖形、圖像、數(shù)字等元素組成的語(yǔ)言用于解釋、呈現(xiàn)目標(biāo)數(shù)據(jù)之間的關(guān)系。從這個(gè)定義上來(lái)看，數(shù)據(jù)可視化從外觀層面來(lái)說(shuō)是與圖形、圖像這些視覺(jué)元素密不可分，這也是數(shù)據(jù)可視化最為明顯的特征。
而結(jié)合我們實(shí)際的生活與工作來(lái)說(shuō)，數(shù)據(jù)可視化是一種以圖形符號(hào)為主要表現(xiàn)形式，將不可見(jiàn)的、抽象的、復(fù)雜的、枯燥的、專業(yè)的、不直觀的數(shù)據(jù)內(nèi)容，有趣的、淺顯的傳遞給用戶的有效手段。用戶可以通過(guò)這樣的手段完成自己的目標(biāo)（例如對(duì)選定范圍內(nèi)的數(shù)據(jù)進(jìn)行分析，發(fā)現(xiàn)數(shù)據(jù)的周期與規(guī)律、迅速找到自己目標(biāo)節(jié)點(diǎn)中的關(guān)鍵數(shù)值、對(duì)比幾組數(shù)據(jù)以了解當(dāng)下研究對(duì)象的情況等）這也是數(shù)據(jù)可視化最為明顯的價(jià)值。
2. 可視化發(fā)展簡(jiǎn)史
關(guān)于可視化的發(fā)展史上可追溯至 1950 年，當(dāng)時(shí)人們利用計(jì)算機(jī)創(chuàng)建出了首批圖形圖表，可以說(shuō)是數(shù)據(jù)可視化圖表最為早期的雛形，而在 50-60 年代的可視化中又以查爾斯·約瑟夫·米納德的《1812－1813 對(duì)俄戰(zhàn)爭(zhēng)中法軍人力持續(xù)損失示意圖》為代表。
該圖描繪了拿破侖的軍隊(duì)自離開(kāi)波蘭到俄羅斯邊界后軍力損失的狀況，也是后世分析拿破侖對(duì)俄戰(zhàn)爭(zhēng)的重要數(shù)據(jù)分析資料，后來(lái)這種帶狀圖被稱為“?；鶊D”用來(lái)解釋能量的流動(dòng)。
而可視化真正被提到一個(gè)應(yīng)用理論的高度是到了 1987 年布魯斯·麥考梅克和馬克沁·布朗所編寫(xiě)的美國(guó)國(guó)家科學(xué)基金會(huì)報(bào)告《Visualization in Scientific Computing》（科學(xué)計(jì)算之中的可視化），其意在強(qiáng)調(diào)了基于計(jì)算機(jī)的可視化技術(shù)方法的必要性，此時(shí)的概念已經(jīng)與現(xiàn)在我們所接觸的工作中的數(shù)據(jù)可視化是非常接近。
到了 90 年代初人們發(fā)起了一個(gè)稱為“信息可視化”的研究領(lǐng)域旨在為許多應(yīng)用領(lǐng)域（科學(xué)、商業(yè)、行政、財(cái)務(wù)、數(shù)字媒體）之中對(duì)于抽象的異質(zhì)性數(shù)據(jù)集的分析工作提供支持，與前面提到的“科學(xué)可視化”交叉形成了現(xiàn)在耳熟能詳?shù)摹皵?shù)據(jù)可視化”，此時(shí)這個(gè)詞匯才慢慢的被更多的專業(yè)領(lǐng)域的人所接受，并在之后互聯(lián)網(wǎng)的不斷發(fā)展中擴(kuò)充著自己的分支。
3. 為什么會(huì)使用數(shù)據(jù)可視化
目前大量開(kāi)始使用視覺(jué)可視化的原因其實(shí)非常簡(jiǎn)單大致的原因可以分為需要處理的數(shù)據(jù)量太大了和人腦不夠用了。
據(jù)不完全統(tǒng)計(jì) IBM 公司每天有 2.5 億字節(jié)數(shù)據(jù)的吞吐量，麻省理工學(xué)院的研究科學(xué)家 Andrew McAfee 和 Erik Brynjolfsson 教授指出，如今在互聯(lián)網(wǎng)上傳遞的數(shù)據(jù)量比過(guò)去 20 年的總和還多，而且根據(jù) IDC 預(yù)測(cè)，到 2025 年將有 163 萬(wàn)億 GB 的數(shù)據(jù)。
這是非常驚人的，而這么多需求的數(shù)據(jù)量單憑人腦的計(jì)算能力和處理能力來(lái)說(shuō)是完全無(wú)法與之匹配的，研究表明人腦很難同時(shí)處理 5 組以上的抽象數(shù)據(jù)，所以這種單線程的處理方式就決定了需要借助外力。
而對(duì)于用戶尤其是決策層的用戶來(lái)說(shuō)在現(xiàn)實(shí)的工作場(chǎng)景中經(jīng)常需要同時(shí)處理超過(guò) 5 組以上的數(shù)據(jù)并需要對(duì)其建立精準(zhǔn)的分析模型以便于做出最準(zhǔn)確的決策所以基于這樣的需求，數(shù)據(jù)可視化設(shè)計(jì)氤氳而生。
4. 數(shù)據(jù)可視化的優(yōu)勢(shì)
基于數(shù)據(jù)可視化的需求來(lái)看，數(shù)據(jù)可視化的優(yōu)勢(shì)是顯而易見(jiàn)的，可以概括為兩點(diǎn)：認(rèn)知減負(fù)和傳遞賦能。
認(rèn)知減負(fù)是使用者在使用數(shù)據(jù)可視化工具時(shí)候的最直觀感受，當(dāng)所面對(duì)的龐大的、復(fù)雜的枯燥海量數(shù)據(jù)集變成了圖像化、通俗化、形象化的視覺(jué)符號(hào)時(shí)，我們會(huì)本能的放下對(duì)于面對(duì)冰冷數(shù)據(jù)時(shí)候的抗拒和戒備，這是因?yàn)槿藢?duì)于一目了然更加接近自己熟悉的有趣事物的時(shí)候，會(huì)更為親切和愿意去主動(dòng)理解。而且被處理過(guò)、規(guī)劃過(guò)的簡(jiǎn)潔直觀表現(xiàn)形式，能更為直接的讓使用者看到數(shù)據(jù)與數(shù)據(jù)之間的關(guān)聯(lián)，進(jìn)而分析出其潛在關(guān)系，在人對(duì)數(shù)據(jù)的認(rèn)知這個(gè)環(huán)節(jié)上降低了識(shí)別成本和分析成本。
傳遞賦能上圖像傳遞更接近人類最本能的獲取信息的方式，比起文字來(lái)說(shuō)圖像更像是一個(gè)解密的步驟，通過(guò)解開(kāi)文字描述這重“密碼”將最本質(zhì)的信息進(jìn)行呈現(xiàn)，而且對(duì)比文字，圖像所能夠承載的信息其實(shí)更為廣泛，而且人類讀圖的效率要遠(yuǎn)遠(yuǎn)高于閱讀文字。
無(wú)論是一個(gè)約定俗成的語(yǔ)義符號(hào)形象還是符合語(yǔ)境的配色都能夠起到比文字直白表述更為強(qiáng)烈的深入人心效果，并且圖解的形式并不受限于語(yǔ)言的障礙，極大的降低了溝通成本。
5. 使用目標(biāo)
基于用戶的使用目標(biāo)來(lái)說(shuō)，使用數(shù)據(jù)可視化其實(shí)就像是一個(gè)偵探用“蛛網(wǎng)圖”輔助自己梳理思緒進(jìn)行破案的過(guò)程：將一些有關(guān)的，但是較為零散信息數(shù)據(jù)用一根根線索穿插起來(lái)，形成體系化的聯(lián)系，方便使用者迅速把握各個(gè)節(jié)點(diǎn)之間的關(guān)系進(jìn)行推導(dǎo)。
所以說(shuō)我們?cè)谠O(shè)計(jì)數(shù)據(jù)可視化的時(shí)候并不是對(duì)我們拿到的數(shù)據(jù)的無(wú)腦映射，而是要基于用戶的目標(biāo)經(jīng)過(guò)一定的處理和優(yōu)化后才能進(jìn)行呈現(xiàn)，隨時(shí)記住我們是給用戶在打輔助，所以我們每一步的設(shè)計(jì)一定要基于用戶的思考。
用戶的期望是能夠高效、清晰、簡(jiǎn)潔地完成數(shù)據(jù)的對(duì)比、關(guān)鍵節(jié)點(diǎn)的查詢、每組數(shù)據(jù)之間的分析等一系列交互，提升自己的工作效率，降低自己的學(xué)習(xí)和使用成本。
6. 應(yīng)用場(chǎng)景
數(shù)據(jù)可視化的應(yīng)用領(lǐng)域較為廣泛涉及醫(yī)療、統(tǒng)計(jì)、管理、金融、娛樂(lè)、人工智能等一系列領(lǐng)域，在 UI 的設(shè)計(jì)中我們最常接觸到的包括：PC 后臺(tái)的數(shù)據(jù)概覽、數(shù)據(jù)可視化大屏、游戲 UI、后臺(tái)實(shí)時(shí)監(jiān)控等。
當(dāng)我們大致了解了數(shù)據(jù)可視化的歷史、使用原因、優(yōu)勢(shì)、用戶目標(biāo)、應(yīng)用領(lǐng)域后下面就要切入我們?cè)O(shè)計(jì)師最為關(guān)心的話題：我們?cè)谠O(shè)計(jì)中的任務(wù)。
1. 設(shè)計(jì)難點(diǎn)
數(shù)據(jù)可視化作為一門跨領(lǐng)域的學(xué)科，本身對(duì)于從業(yè)者而言就有著一定的綜合素質(zhì)要求，但由于國(guó)內(nèi)教育并沒(méi)有垂直教學(xué)學(xué)科，所以在現(xiàn)在的階段從業(yè)人員一部分由純視覺(jué)設(shè)計(jì)專業(yè)的同學(xué)組成，另一部分由純工科類型的專業(yè)的同學(xué)組成。
于是這就導(dǎo)致了非視覺(jué)設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)，會(huì)將全副精力放在強(qiáng)數(shù)據(jù)的準(zhǔn)確性、合理性上，從而讓視覺(jué)的易讀性上有一定的損失，表現(xiàn)形式也較為單一枯燥，視覺(jué)感官較差，反觀視覺(jué)設(shè)計(jì)師通常會(huì)將數(shù)據(jù)可視化在視覺(jué)表現(xiàn)形式上過(guò)度用力，雖然營(yíng)造了很好的視覺(jué)體驗(yàn)，但是從其實(shí)用度、可用性上來(lái)說(shuō)會(huì)大打折扣。
于是設(shè)計(jì)的難點(diǎn)很多時(shí)候就會(huì)集中在平衡視覺(jué)與實(shí)用之間的關(guān)系。
2. 設(shè)計(jì)目標(biāo)
通過(guò)以上分析，不難看出設(shè)計(jì)的主要目標(biāo)，而面對(duì)這句較為抽象的“把握設(shè)計(jì)與實(shí)用之間的平衡”其實(shí)無(wú)外乎也就是拆解到功能和視覺(jué)這兩個(gè)方面。
從功能上來(lái)說(shuō)，我的目標(biāo)是提升用戶的數(shù)據(jù)閱讀效率、讓用戶能夠迅速 Touch 到目標(biāo)信息，提升交互效率，一切都是以結(jié)果為導(dǎo)向，以解決用戶問(wèn)題為導(dǎo)向，一定記住人們不愿意接受未處理過(guò)的數(shù)據(jù)。
而從視覺(jué)上來(lái)說(shuō)，我們的目標(biāo)是處理好在視覺(jué)上各個(gè)模塊之間的統(tǒng)一、透氣關(guān)系，將數(shù)據(jù)進(jìn)行可視化的同時(shí)盡量提升感官上的審美體驗(yàn)與傳達(dá)上的有趣。
以上會(huì)作為后文中我們每一步設(shè)計(jì)的指導(dǎo)和檢驗(yàn)的方式，從實(shí)際操作的維度上來(lái)說(shuō)二者也并不是五十比五十的分配，遵循的原則是：體驗(yàn)一定要讓位于功能，所以在視覺(jué)的層面發(fā)揮的空間其實(shí)需要比較克制。
了解了數(shù)據(jù)可視化的設(shè)計(jì)難點(diǎn)，明確了數(shù)據(jù)可視化的設(shè)計(jì)目標(biāo)，那么我下面進(jìn)入我們最重點(diǎn)的環(huán)節(jié)：可視化頁(yè)面案例制作，由于數(shù)據(jù)可視化的形式較多，這次我們以工作中經(jīng)常接觸得到的 PC 頁(yè)面數(shù)據(jù)概覽頁(yè)為例。
1. 明確性質(zhì)
同樣的，細(xì)化到數(shù)據(jù)概覽這個(gè)分支項(xiàng)目，我們同樣需要明確了解其基礎(chǔ)定義和性質(zhì)，嚴(yán)格意義上來(lái)說(shuō)數(shù)據(jù)概覽部分屬于 Dashboard design（儀表盤(pán)設(shè)計(jì)）的一種，其主要的目的和功能可分為分析和操作兩塊。
所以從綜合的角度來(lái)說(shuō)數(shù)據(jù)概覽部分可以理解為：
其它模塊的摘要視圖，并顯示來(lái)自應(yīng)用程序各個(gè)部分的關(guān)鍵信息，從這點(diǎn)上來(lái)說(shuō)建議此模塊可以在其余模塊設(shè)計(jì)完后再進(jìn)行設(shè)計(jì)，如此有利于設(shè)計(jì)師從一個(gè)全局的視角切入進(jìn)行設(shè)計(jì)，理解上也會(huì)更加透徹，否則很可能會(huì)陷入在你設(shè)計(jì)其他模塊的時(shí)候不斷地返回對(duì)其進(jìn)行修改的怪圈。
它也是核心功能、常用功能的快速操作助手和快捷頁(yè)面跳轉(zhuǎn)（有點(diǎn)類似于導(dǎo)航），交互功能的排布和關(guān)鍵信息的顯示，其共同的要求點(diǎn)是顯而易見(jiàn)的，即明確各個(gè)模塊之間的層級(jí)，做好順序、優(yōu)先級(jí)排布。這就需要你對(duì)業(yè)務(wù)目標(biāo)有一定的了解，記住，對(duì)業(yè)務(wù)目標(biāo)不了解，你的設(shè)計(jì)將毫無(wú)意義。
你可以通過(guò)查詢一些內(nèi)部資料、報(bào)告、也可以詢問(wèn)產(chǎn)品經(jīng)理等相關(guān)負(fù)責(zé)人，還可以通過(guò)用戶調(diào)研得出，這里不展開(kāi)說(shuō)，在動(dòng)手之前你需要搞清楚：各模塊之間優(yōu)先級(jí)如何、你需要在一張單獨(dú)的圖表內(nèi)展示多少變量、想展示一段時(shí)間內(nèi)的值是項(xiàng)目和項(xiàng)目之間還是組與組之間、每段變量中有多少關(guān)鍵數(shù)據(jù)需要展示等問(wèn)題。
2. 定義模塊優(yōu)先級(jí)
如上圖所示，在工作中我們接到需求的時(shí)候是面對(duì)一堆冗雜的數(shù)據(jù)集，組成了若干個(gè)模塊，但是正如上文所說(shuō)，我們并不能對(duì)其進(jìn)行無(wú)腦的可視化映射，所以首先要做的就是要對(duì)各個(gè)模塊進(jìn)行優(yōu)先級(jí)的梳理排序
明確了各個(gè)模塊的優(yōu)先級(jí)排布之后，我們開(kāi)始對(duì)每一個(gè)單獨(dú)模塊進(jìn)行可視化轉(zhuǎn)化，即哪一個(gè)部分分別用什么類型的可視化形式表現(xiàn)，這一步非常類似于土地使用規(guī)劃，當(dāng)你在將土地劃分完后，為每一塊土地定義其使用類型。
3. 明確圖表選擇
想準(zhǔn)確的將圖表與所要表現(xiàn)的數(shù)據(jù)進(jìn)行對(duì)應(yīng)，需要了解圖表本身所包含的基本元素。
在這些元素中正常情況下一定在圖表中的有：標(biāo)題、時(shí)間范圍、圖形主體，經(jīng)常出現(xiàn)的有：坐標(biāo)系、圖例、提示信息，有時(shí)候會(huì)有的有：切換選項(xiàng)和值域。
知道了這些重要的基礎(chǔ)信息了，那么在面對(duì)這么多圖表的時(shí)候我們?cè)撊绾握_的選擇來(lái)進(jìn)行使用呢？
其實(shí)和之前說(shuō)的一樣：基于目的來(lái)進(jìn)行思考，所謂的基于目的來(lái)進(jìn)行思考也就是要明確你所確立的數(shù)據(jù)指標(biāo)需要分析的維度，而日常使用的數(shù)據(jù)需要分析的維度無(wú)外乎：比較、構(gòu)成、分布聯(lián)系。
比較類圖表
比較類圖表應(yīng)該是大家最為熟悉的范疇，第一時(shí)間能夠想到的就是柱狀圖，這也是運(yùn)用最為廣泛的圖表之一，經(jīng)常出現(xiàn)在 PC 端之中，用于描述分類數(shù)據(jù)之間的對(duì)比，描述的數(shù)據(jù)可以是地區(qū)、品類甚至一個(gè)時(shí)間周期，但由于其擴(kuò)展能力有限，所以一般不建議項(xiàng)目超過(guò) 12 條。
條形圖與柱狀圖類似，看上去只是交換了 X 軸與 Y 軸，功能和承載數(shù)據(jù)種類較為類似，但不同的是，條形所能承載的項(xiàng)目數(shù)量相對(duì)于柱狀圖而言更多，由于其優(yōu)良的縱向延展性一般用于手機(jī)端較多，而且從上到下的閱讀方式符合人眼閱讀習(xí)慣，所以也會(huì)經(jīng)常用于排行榜的設(shè)計(jì)中。
分組條形圖是條形圖的衍生之一用于比較多個(gè)變量在不同區(qū)域之間的數(shù)量關(guān)系，比如當(dāng)想比較同樣一款衣服和鞋子在四個(gè)門店中的一個(gè)季度的營(yíng)業(yè)額時(shí)就可以使用分組條形圖。
雙向條形圖表適合比較兩組以上的分類數(shù)據(jù)比較，和分組條形圖較為類似，但是由于自身外觀特征更適合用于比較兩組意義相反的數(shù)據(jù)，也正是如此，雙向條形圖的組內(nèi)二級(jí)分類數(shù)量一般不要超過(guò) 3 條最好。
折線圖與前者最大的不同就在于在坐標(biāo)軸中加入了連續(xù)類別這個(gè)概念，數(shù)據(jù)基于時(shí)間等因素變得動(dòng)態(tài)了起來(lái)，注重變化趨勢(shì)的展現(xiàn)。
面積圖是折線圖的延伸，除了表示變化趨勢(shì)之外還能比較所選范圍內(nèi)積累的值。
玫瑰圖應(yīng)該算是可視化圖表中的“網(wǎng)紅”，因?yàn)槲覀儚男W(xué)的課本中就知道它還有一個(gè)別稱叫“南丁格爾玫瑰圖”。它是一種圓形的直方圖，使用半徑長(zhǎng)短表示數(shù)值大小，其特點(diǎn)就在于因?yàn)槠洫?dú)特的外觀可以將數(shù)值之間的差距在視覺(jué)層面進(jìn)行放大，和將坐標(biāo)軸范圍縮小來(lái)提升視覺(jué)上數(shù)值的碾壓是一個(gè)道理，發(fā)布會(huì)吹水最愛(ài)，但是要注意的是這不是一個(gè)表示占比構(gòu)成的圖，因?yàn)槊倒鍒D的每一份角度是一樣的，一定要和餅狀圖等圖區(qū)分開(kāi)來(lái)，它用來(lái)表示的還是數(shù)值與數(shù)值之間的大小
雷達(dá)圖經(jīng)常用于分析一些多維的性能數(shù)據(jù)、評(píng)分?jǐn)?shù)據(jù)，經(jīng)常打游戲的朋友應(yīng)該不陌生，有多少五邊形選手可以扣個(gè) 1，每一項(xiàng)指標(biāo)越接近圓心說(shuō)明狀態(tài)越差，越向外說(shuō)明越佳。
子彈圖用于比較當(dāng)前數(shù)值與目標(biāo)之間的關(guān)系，比如看當(dāng)前業(yè)績(jī)是否達(dá)標(biāo)，也可以通過(guò)標(biāo)記劃分區(qū)域來(lái)進(jìn)行更好的評(píng)估。
漏斗圖適用于業(yè)務(wù)流程比較規(guī)范、周期長(zhǎng)、環(huán)節(jié)多的單流程單項(xiàng)分析，一定要有清晰的環(huán)節(jié)，比如監(jiān)控買家從瀏覽到最后下單的數(shù)量統(tǒng)計(jì)以求得轉(zhuǎn)化率，不適合無(wú)邏輯、無(wú)流程的分類對(duì)比。
構(gòu)成類圖表
構(gòu)成類圖表整體上來(lái)說(shuō)主要用于觀察部分和整體的占比關(guān)系，最經(jīng)典的莫過(guò)于餅狀圖，這個(gè)不用多說(shuō)，通過(guò)每一份半圓角度所占整個(gè)圓的大小來(lái)表示部分和整體的關(guān)系，但是由于其所占面積較大，經(jīng)常會(huì)讓視覺(jué)過(guò)于集中，影響注意力。
相對(duì)于餅狀圖而言，環(huán)狀圖十分有效的避免的干擾視覺(jué)的問(wèn)題，其本質(zhì)是將餅圖中間掏空，功能與餅圖基本一致，但是視覺(jué)上做到了輕量化，目前在日常設(shè)計(jì)中較為常用。
旭日?qǐng)D相當(dāng)于前面二者的結(jié)合，適用于展示多層級(jí)數(shù)據(jù)的占比關(guān)系，距離圓心越近代表層級(jí)越高，下一層級(jí)的總和構(gòu)成上一層級(jí)，存在一定的父子層級(jí)關(guān)系。
堆疊面積圖出了可以表達(dá)趨勢(shì)外，其優(yōu)勢(shì)在于能夠表達(dá)總量和分量的構(gòu)成關(guān)系，堆疊面積圖上的最大的面積代表了所有的數(shù)據(jù)量的總和，是一個(gè)整體。各個(gè)疊起來(lái)的面積表示各個(gè)數(shù)據(jù)量的大小。
堆疊柱狀圖的優(yōu)勢(shì)在于它既可以表達(dá)一級(jí)分類的比較，同時(shí)還能看出二級(jí)分類在其一級(jí)分類中的占比，但是缺點(diǎn)在于二級(jí)分類并不是按照同一基準(zhǔn)線對(duì)齊的，相比于堆疊面積圖更為常用。
瀑布圖用表達(dá)兩個(gè)數(shù)值之間的變化過(guò)程，過(guò)程值為正的時(shí)候，向上加，過(guò)程值為負(fù)的時(shí)候向下減。
分布聯(lián)系類圖表
分布聯(lián)系類地圖在這兩年在國(guó)人的心中其實(shí)已經(jīng)非常熟悉了，因?yàn)橐咔榻衲甑牡貓D可視化的應(yīng)用經(jīng)常出現(xiàn)在我們的生活中，地圖可以結(jié)合不同的表達(dá)方式：
可以結(jié)合散點(diǎn)、可以結(jié)合動(dòng)畫(huà)、還可以結(jié)合引導(dǎo)線以及熱力圖的方式，圖的形式使用視具體的業(yè)務(wù)需求來(lái)定
最后就是氣泡圖，這是在查看分布關(guān)系中最為經(jīng)典的視覺(jué)模型，用氣泡的面積大小表示數(shù)量，結(jié)合輔助線可以更好地觀察分布情況
4. 匹配圖表 重構(gòu)布局
當(dāng)我們對(duì)每種圖表的功能和使用范圍有了一個(gè)較為明確的認(rèn)知之后，下面我們就可以對(duì)我們之前所規(guī)劃好的優(yōu)先級(jí)的模塊進(jìn)行可視化形式（圖表）的匹配了。
進(jìn)行匹配過(guò)后，我們將對(duì)布局進(jìn)行重構(gòu)，整體重構(gòu)需要遵循的原則是
-
布局層級(jí)明確，首屏盡量曝光更多內(nèi)容
-
統(tǒng)一透氣，具有呼吸感
布局層級(jí)明確，首屏盡量曝光更多內(nèi)容
從首屏曝光更多內(nèi)容來(lái)說(shuō)，主要是因?yàn)榛诜治鲱惖臄?shù)據(jù)概覽工作場(chǎng)景和 Analytical dashboard 自身特征決定的，用戶希望能夠通過(guò)僅僅一屏的的大小進(jìn)行對(duì)各類信息的情況有基本的把控，達(dá)到一眼全局的目的，其主要注意力都會(huì)放在首屏，所以我們需要盡可能的在首屏安排更多的信息。
當(dāng)然首屏內(nèi)容也并不是越多越好，一般建議也盡量不要超過(guò) 7 組模塊，而在層級(jí)明確這塊兒主要是根據(jù)人眼閱讀習(xí)慣所產(chǎn)生的優(yōu)先級(jí)排布：正常情況下都是左上為優(yōu)先級(jí)最高，而右下優(yōu)先級(jí)較低，這是無(wú)數(shù)經(jīng)典的眼動(dòng)測(cè)試和設(shè)計(jì)總結(jié)產(chǎn)生的最常用結(jié)論，就不展開(kāi)敘述了，所以當(dāng)我們按照優(yōu)先級(jí)、首屏曝光更多內(nèi)容的原則進(jìn)行處理后會(huì)得到如上圖的布局。
統(tǒng)一透氣 具有呼吸感
這主要是視覺(jué)層面的問(wèn)題，統(tǒng)一透氣的要求在首頁(yè)概覽中可以依靠柵格系統(tǒng)來(lái)解決，它可以有效的保持頁(yè)面布局一致性，為頁(yè)面建立基礎(chǔ)布局框架，將頁(yè)面中的所有元素都捆綁在一個(gè)體系之中，同時(shí)還能有效解決適配問(wèn)題。
5. 模塊拆解
完成了大規(guī)劃之后，下面我們開(kāi)始對(duì)一個(gè)一個(gè)的模塊進(jìn)行拆解，同樣的以目標(biāo)指導(dǎo)設(shè)計(jì)，邊設(shè)計(jì)邊驗(yàn)證
層級(jí)明確 突出重點(diǎn)
和大規(guī)劃一樣，單獨(dú)到每一個(gè)圖表同樣要時(shí)刻注意層級(jí)的梳理，銷售渠道部分很明確應(yīng)該是運(yùn)用一個(gè)折線圖的形式，由于業(yè)務(wù)目標(biāo)上來(lái)說(shuō)更關(guān)注銷售額而不是銷售額和訂單數(shù)的比較，所以我們選用了一個(gè)帶有切換選項(xiàng)的折線圖形式。
但是我們會(huì)很容易發(fā)現(xiàn)在讀圖時(shí)會(huì)出現(xiàn)較大的視覺(jué)干擾，并沒(méi)有能夠很好地突出重點(diǎn)信息，視覺(jué)層級(jí)不清晰、混亂。
于是我們對(duì)沒(méi)有重點(diǎn)的視覺(jué)層級(jí)進(jìn)行梳理，像之前劃分模塊那樣，對(duì)視覺(jué)元素進(jìn)行高、中、低的 P0、P1、P2 的設(shè)定，提升易讀性
P0：層級(jí)最高的自然是重點(diǎn)信息突出部分，所以我們需要在其之上做加法，給予內(nèi)容異形懸停樣式進(jìn)行具體強(qiáng)調(diào)，配合投影加強(qiáng)視覺(jué)效果，有效傳遞用戶，拉開(kāi)與別的元素的層級(jí)，同時(shí)數(shù)據(jù)部分用特殊字體并適當(dāng)加大字號(hào)進(jìn)行設(shè)計(jì)，方便用戶第一時(shí)間能夠看到所要強(qiáng)調(diào)的數(shù)據(jù)具體值。
P1: 其次就是主體圖形部分，這是用戶需要看到的重要部分，在使用場(chǎng)景中會(huì)長(zhǎng)時(shí)間盯視，所以采用更低的明度與更高的飽和色顏色確保易讀性，但是也不致于會(huì)讓用戶太晃眼產(chǎn)生視覺(jué)疲勞，最后考慮到該模塊所處位置屬于頁(yè)面中較為核心的地帶，給予一定的顏色透明度漸變裝飾，在強(qiáng)化主體圖形的同時(shí)不致于太顯單薄。
P2：前兩者都是一定程度的做加法，那么層級(jí)最低的元素需要開(kāi)始做減法，此時(shí)軸線、刻度、切換選項(xiàng)等元素需要弱化視覺(jué)層級(jí)，降低透明度，尤其是背后的刻度線與背景的明度對(duì)比大概控制在 1.6:1 上較為合適。
銷售總額、訂單數(shù)、渠道數(shù)同屬于一個(gè)數(shù)據(jù)統(tǒng)計(jì)的范疇，最忌諱的就是把以上提供的三個(gè)信息給做平，讓用戶抓不住重點(diǎn)，面對(duì)這樣的情況還是一樣，確立需要突出的重點(diǎn)信息給予特殊文字和大小的設(shè)計(jì)，選擇合適的主體圖形。
但在這里需要注意的是由于在這個(gè)模塊中 P0 是金額數(shù)、訂單數(shù)、渠道數(shù)這些重要值，所以可視化圖形需要適當(dāng)為其讓步，不要放在閱讀中心位置，按照 P1 來(lái)進(jìn)行處理，而訂單數(shù)、轉(zhuǎn)換率這樣的標(biāo)題就成了 P2 需要適當(dāng)降低透明度和文字大小，不干擾主要信息的表達(dá)。
統(tǒng)一營(yíng)造
說(shuō)到統(tǒng)一，最先想到的一定是色彩，無(wú)非也就是需要處理好對(duì)立統(tǒng)一關(guān)系，而這其中統(tǒng)一的比例又要大于對(duì)立，配色上盡量選用同類色系，不宜太過(guò)花哨，尤其是對(duì)于 B 端而言，建議在可能的情況下不要超過(guò) 5 種，而且主色、輔助色，對(duì)比色的比例建議控制在 6:3:1 的比例（但不絕對(duì)），既能做到有所區(qū)別又不致于過(guò)于絢麗干擾視覺(jué)。
你的主色不一定要遷就你的品牌色，但是一定要是如上文說(shuō)的盡量低明度高飽和，以適應(yīng)于長(zhǎng)時(shí)間的注視。
顏色過(guò)后就是字體，字體的使用需要極為謹(jǐn)慎，如果可以盡量只出現(xiàn)一種字體（但不要超過(guò)三種），并且只采用基礎(chǔ)字體，正常情況下都是將其作為一個(gè)需要被降噪了的視覺(jué)元素來(lái)對(duì)待（比如降低透明度），在 PC 端中盡量也不要出現(xiàn)較多不同的字號(hào)、字重，造成沒(méi)有必要的視覺(jué)干擾。
除了字體之外，在統(tǒng)一感的營(yíng)造上卡片的布局結(jié)構(gòu)也需要盡量保持一致，這是為了提升易用性，同一個(gè)產(chǎn)品內(nèi)，相同布局會(huì)給予用戶相同交互、相同功能的暗示，也更容易培養(yǎng)用戶習(xí)慣，提升操作效率。
呼吸適中
呼吸感是留白的藝術(shù)，很考驗(yàn)設(shè)計(jì)師的排版能力，在單獨(dú)的模塊內(nèi)，元素與元素之間盡量不要用實(shí)線進(jìn)行間隔，可以的話利用親密性原則通過(guò)元素間距的遠(yuǎn)近進(jìn)行布局。
而柱狀圖的設(shè)計(jì)上，柱與柱之間的間距最好大于柱寬的 1.5 倍，這樣才顯得視覺(jué)上較為透氣，不致于太臃腫。
最后就是模塊中的邊距留白部分，這點(diǎn)一定要重視，不然不僅你的版心會(huì)變散，還會(huì)嚴(yán)重影響你的頁(yè)面呼吸感。
細(xì)節(jié)處理
細(xì)節(jié)上首先要說(shuō)的就是橫縱坐標(biāo)軸上的文字，上面的文字一定不要過(guò)長(zhǎng)，最好的方式是將文字進(jìn)行精簡(jiǎn)。然后橫、豎排對(duì)齊處理，如果實(shí)在不能精簡(jiǎn)那么再進(jìn)行斜排的方式。
第二點(diǎn)就是橫縱坐標(biāo)軸有的時(shí)候會(huì)因?yàn)樾枰故镜臄?shù)據(jù)過(guò)多而過(guò)于密集影響閱讀，這個(gè)時(shí)候可以采用適當(dāng)增加一個(gè)值域的劃定的方式來(lái)進(jìn)行坐標(biāo)間距的縮放。
第三點(diǎn)就是，在排行榜等模塊可以適當(dāng)增加一些小設(shè)計(jì)，比如金、銀、銅的設(shè)計(jì)，提升情感化元素的融入。
第四點(diǎn)就是，盡量不要選用一些 3D 的酷炫效果來(lái)做可視化，因?yàn)檫@種效果很容易對(duì)數(shù)據(jù)進(jìn)行遮擋和扭曲，不是非常適用于高效閱讀，也不適合 PC 頁(yè)面上的交互，而且也不利于開(kāi)發(fā)，比較得不償失。
6. 組裝自檢
當(dāng)所有的模塊設(shè)計(jì)完成后，像拼高達(dá)一樣進(jìn)行組裝，組裝完成后適當(dāng)調(diào)整其過(guò)于干擾視覺(jué)的地方，然后進(jìn)行自檢。
自檢不只是從檢查你的視覺(jué)、你的模塊間的布局，更重要的是帶入使用角色來(lái)進(jìn)行檢查，你可以模仿用戶使用中的各種需求場(chǎng)景，對(duì)已經(jīng)制作好的頁(yè)面進(jìn)行交互和閱讀，看是否能夠快速高效地完成使用目標(biāo)。
當(dāng)然除了自己之外，你還能在有條件的情況下找專家用戶進(jìn)行使用，即使記錄使用中存在的問(wèn)題并及時(shí)進(jìn)行調(diào)整，當(dāng)初步使用大致無(wú)問(wèn)題后便可以交付。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來(lái)源：優(yōu)設(shè) 作者：肅靜、
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
1.氣泡圖
a. 選擇合適的氣泡大小，不可過(guò)大或者過(guò)小，太的氣泡容易遮擋到其他氣泡不便于選擇查看被遮擋的詳細(xì)數(shù)據(jù)；太小的氣泡難以選擇
b. 不要使用奇怪的形狀，均采用同一種氣泡類型僅通過(guò)顏色做區(qū)分即可；無(wú)需做太多造型，多種造型結(jié)合不夠直觀難以區(qū)分種類
d. 選擇合適的數(shù)據(jù)范圍：數(shù)據(jù)范圍區(qū)間應(yīng)該是均等的，而超出范圍的數(shù)據(jù)可用 +/- 表示。
3.?；鶊D
4.華夫餅圖
5.矩形樹(shù)圖
6.旭日?qǐng)D
7.靶心圖
8.熱詞云
9.河流圖
10. 瀑布圖
11.儀表盤(pán)
12.甘特圖
