在如今的工作中（尤其是B端）越來越多的會開始出現(xiàn)數(shù)據(jù)可視化的身影，對于一部分小伙伴來說這個(gè)概念是較為陌生的，面對這道無形之中提升的“門檻”我們常常會表現(xiàn)的手足無措。所以，為了讓大家對于數(shù)據(jù)可視化不再那么束手無措，我希望能通過這篇文章和大家一起交流學(xué)習(xí)，解決一些屬于我們共同的問題
那么我們還是老規(guī)矩，想要了解一個(gè)事物首先需要知道的是它的定義
較為籠統(tǒng)的來說數(shù)據(jù)可視化是一種由圖形、圖像、數(shù)字等元素組成的語言用于解釋、呈現(xiàn)目標(biāo)數(shù)據(jù)之間的關(guān)系。從這個(gè)定義上來看，數(shù)據(jù)可視化從外觀層面來說是與圖形、圖像這些視覺元素密不可分，這也是數(shù)據(jù)可視化最為明顯的特征
而結(jié)合我們實(shí)際的生活與工作來說，數(shù)據(jù)可視化是一種以圖形符號為主要表現(xiàn)形式，將不可見的、抽象的、復(fù)雜的、枯燥的、專業(yè)的、不直觀的數(shù)據(jù)內(nèi)容，有趣的、淺顯的傳遞給用戶的有效手段。用戶可以通過這樣的手段在數(shù)據(jù)完成自己的目標(biāo)（例如對選定范圍內(nèi)的數(shù)據(jù)進(jìn)行分析發(fā)現(xiàn)數(shù)據(jù)的周期與規(guī)律、迅速找到自己目標(biāo)節(jié)點(diǎn)中的關(guān)鍵數(shù)值、對比幾組數(shù)據(jù)以了解當(dāng)下研究對象的情況等）這也是數(shù)據(jù)可視化最為明顯的價(jià)值
關(guān)于可視化的發(fā)展史上可追溯至1950年，當(dāng)時(shí)人們利用計(jì)算機(jī)創(chuàng)建出了首批圖形圖表，可以說是數(shù)據(jù)可視化圖表最為早期的雛形，而在50-60年代的可視化中又以查爾斯·約瑟夫·米納德的《1812－1813對俄戰(zhàn)爭中法軍人力持續(xù)損失示意圖》為代表
該圖描繪了拿破侖的軍隊(duì)自離開波蘭到俄羅斯邊界后軍力損失的狀況，也是后世分析拿破侖對俄戰(zhàn)爭的重要數(shù)據(jù)分析資料，后來這種帶狀圖被稱為“?；鶊D”用來解釋能量的流動
而可視化真正被提到一個(gè)應(yīng)用理論的高度是到了1987年布魯斯·麥考梅克和馬克沁·布朗所編寫的美國國家科學(xué)基金會報(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ù)字媒體）之中對于抽象的異質(zhì)性數(shù)據(jù)集的分析工作提供支持，與前面提到的“科學(xué)可視化”交叉形成了現(xiàn)在耳熟能詳?shù)摹皵?shù)據(jù)可視化”，此時(shí)這個(gè)詞匯才慢慢的被更多的專業(yè)領(lǐng)域的人所接受，并在之后互聯(lián)網(wǎng)的不斷發(fā)展中擴(kuò)充著自己的分支
目前大量開始使用視覺可視化的原因其實(shí)非常簡單大致的原因可以分為需要處理的數(shù)據(jù)量太大了和人腦不夠用了
據(jù)不完全統(tǒng)計(jì)IBM公司每天有2.5億字節(jié)數(shù)據(jù)的吞吐量，麻省理工學(xué)院的研究科學(xué)家Andrew McAfee和Erik Brynjolfsson教授指出，如今在互聯(lián)網(wǎng)上傳遞的數(shù)據(jù)量比過去20年的總和還多，而且根據(jù)IDC預(yù)測，到2025年將有163萬億GB的數(shù)據(jù)
這是非常驚人的，而這么多需求的數(shù)據(jù)量單憑人腦的計(jì)算能力和處理能力來說是完全無法與之匹配的，研究表明人腦很難同時(shí)處理5組以上的抽象數(shù)據(jù)，所以這種單線程的處理方式就決定了需要借助外力
而對于用戶尤其是決策層的用戶來說在現(xiàn)實(shí)的工作場景中經(jīng)常需要同時(shí)處理超過5組以上的數(shù)據(jù)并需要對其建立精準(zhǔn)的分析模型以便于做出最準(zhǔn)確的決策所以基于這樣的需求，數(shù)據(jù)可視化設(shè)計(jì)氤氳而生
基于數(shù)據(jù)可視化的需求來看，數(shù)據(jù)可視化的優(yōu)勢是顯而易見的，可以概括為兩點(diǎn)認(rèn)知減負(fù)和傳遞賦能
認(rèn)知減負(fù)是使用者在使用數(shù)據(jù)可視化工具時(shí)候的最直觀感受，當(dāng)所面對的龐大的、復(fù)雜的枯燥海量數(shù)據(jù)集變成了圖像化、通俗化、形象化的視覺符號時(shí)我們會本能的放下對于面對再面對冰冷數(shù)據(jù)時(shí)候的抗拒和戒備，這是因?yàn)槿藢τ谝荒苛巳桓咏咏约菏煜さ挠腥な挛锏臅r(shí)候會更為親切和愿意去主動理解
而且被處理過、規(guī)劃過的簡潔直觀表現(xiàn)形式能更為直接的讓使用者看到數(shù)據(jù)與數(shù)據(jù)之間的關(guān)聯(lián)，進(jìn)而分析出其潛在關(guān)系，在人對數(shù)據(jù)的認(rèn)知這個(gè)環(huán)節(jié)上降低了識別成本和分析成本
傳遞賦能上圖像傳遞更接近人類最本能的獲ju取信息的方式，比起文字來說圖像更像是一個(gè)解密的步驟，通過解開文字描述這重“密碼”將最本質(zhì)的信息進(jìn)行呈現(xiàn)，而且對比文字，圖像所能夠承載的信息其實(shí)更為廣泛，而且人類讀圖的效率要遠(yuǎn)遠(yuǎn)高于閱讀文字
無論是一個(gè)約定俗成的語義符號形象還是符合語境的配色都能夠起到比文字直白表述更為強(qiáng)烈的深入人心效果，并且圖解的形式并不受限于語言的障礙，極大的降低了溝通成本
基于用戶的使用目標(biāo)來說，使用數(shù)據(jù)可視化其實(shí)就像是一個(gè)偵探用“蛛網(wǎng)圖”輔助自己梳理思緒進(jìn)行破案的過程：將一些有關(guān)的，但是較為零散信息數(shù)據(jù)用一根根線索線穿插起來，形成體系化的聯(lián)系，方便使用者迅速把握各個(gè)節(jié)點(diǎn)之間的關(guān)系進(jìn)行推導(dǎo)
所以說我們在設(shè)計(jì)數(shù)據(jù)可視化的時(shí)候并不是對我們拿到的數(shù)據(jù)的無腦映射，而是要基于用戶的目標(biāo)經(jīng)過一定的處理和優(yōu)化后才能進(jìn)行呈現(xiàn)，隨時(shí)記住我們是給用戶在打輔助，所以我們每一步的設(shè)計(jì)一定要基于用戶的思考
用戶的期望是能夠高效、清晰、簡潔地完成數(shù)據(jù)的對比、關(guān)鍵節(jié)點(diǎn)的查詢、每組數(shù)據(jù)之間的分析等一系列交互，提升自己的工作效率，降低自己的學(xué)習(xí)和使用成本
數(shù)據(jù)可視化的應(yīng)用領(lǐng)域較為廣泛涉及醫(yī)療、統(tǒng)計(jì)、管理、金融、娛樂、人工智能等一系列領(lǐng)域，在UI的設(shè)計(jì)中我們最常接觸到的包括：PC后臺的數(shù)據(jù)概覽、數(shù)據(jù)可視化大屏、游戲UI、后臺實(shí)時(shí)監(jiān)控等
當(dāng)我們大致了解了數(shù)據(jù)可視化的歷史、使用原因、優(yōu)勢、用戶目標(biāo)、應(yīng)用領(lǐng)域后下面就要切入我們設(shè)計(jì)師最為關(guān)心的話題：我們在設(shè)計(jì)中的任務(wù)
數(shù)據(jù)可視化作為一門跨領(lǐng)域的學(xué)科，本身對于從業(yè)者而言就有著一定的綜合素質(zhì)要求，但由于國內(nèi)教育并沒有垂直教學(xué)學(xué)科所以在現(xiàn)在的階段從業(yè)人員一部分由純視覺設(shè)計(jì)專業(yè)的同學(xué)組成另一部分由純工科類型的專業(yè)的同學(xué)組成
于是這就導(dǎo)致了非視覺設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)，會將全副精力放在強(qiáng)數(shù)據(jù)的準(zhǔn)確性、合理性上，從而讓視覺的易讀性上有一定的損失，表現(xiàn)形式也較為單一枯燥，視覺感官較差，反觀視覺設(shè)計(jì)師通常會將數(shù)據(jù)可視化在視覺表現(xiàn)形式上過度用力，雖然營造了很好的視覺體驗(yàn)，但是從其實(shí)用度、可用性上來說會大打折扣
于是設(shè)計(jì)的難點(diǎn)很多時(shí)候就會集中在平衡視覺與實(shí)用之間的關(guān)系
通過以上分析，不難看出設(shè)計(jì)的主要目標(biāo)，而面對這句較為抽象的“把握設(shè)計(jì)與實(shí)用之間的平衡”其實(shí)無外乎也就是拆解到功能和視覺這兩個(gè)方面
從功能上來說，我的目標(biāo)是提升用戶的數(shù)據(jù)閱讀效率、讓用戶能夠迅速Touch到目標(biāo)信息，提升交互效率，一切都是以結(jié)果為導(dǎo)向，以解決用戶問題為導(dǎo)向，一定記住人們不愿意接受未處理過的數(shù)據(jù)
而從視覺上來說，我們的目標(biāo)是處理好在視覺上各個(gè)模塊之間的統(tǒng)一、透氣關(guān)系，同時(shí)將數(shù)據(jù)進(jìn)行可視化的同時(shí)盡量提升感官上的審美體驗(yàn)與傳達(dá)上的有趣
以上會作為后文中我們每一步設(shè)計(jì)的指導(dǎo)和檢驗(yàn)和理性的方式，從實(shí)際操作的維度上來說二者也并不是五十比五十的分配，遵循的原則是：體驗(yàn)一定要讓位于功能，所以在視覺的層面發(fā)揮的空間其實(shí)需要比較克制
了解了數(shù)據(jù)可視化的設(shè)計(jì)難點(diǎn)，明確了數(shù)據(jù)可視化的設(shè)計(jì)目標(biāo)，那么我下面進(jìn)入我們最重點(diǎn)的環(huán)節(jié)：可視化頁面案例制作，由于數(shù)據(jù)可視化的形式較多，這次我們以工作中經(jīng)常接觸得到的PC頁面數(shù)據(jù)概覽頁為例
同樣的細(xì)化到數(shù)據(jù)概覽這個(gè)分支項(xiàng)目我們同樣需要明確了解其基礎(chǔ)定義和性質(zhì)，嚴(yán)格意義上來說數(shù)據(jù)概覽部分屬于Dashboard design（儀表盤設(shè)計(jì)）的一種，其主要的目的和功能可分為分析和操作兩塊
所以從綜合的角度來說數(shù)據(jù)概覽部分可以理解為：1.其他模塊的摘要視圖，并顯示來自應(yīng)用程序各個(gè)部分的關(guān)鍵信息，從這點(diǎn)上來說建議此模塊可以在其余模塊設(shè)計(jì)完后再進(jìn)行設(shè)計(jì)，如此有利于設(shè)計(jì)師從一個(gè)全局的視角切入進(jìn)行設(shè)計(jì)，理解上也會更加透徹，否則很可能會陷入在你設(shè)計(jì)其他模塊的時(shí)候不斷地返回對其進(jìn)行修改的怪圈
2.他也是核心功能、常用功能的快速操作助手和快捷頁面跳轉(zhuǎn)(有點(diǎn)類似于導(dǎo)航)，交互功能的排布和關(guān)鍵信息的顯示其共同的要求點(diǎn)是顯而易見的，即明確各個(gè)模塊之間的層級，做好順序、優(yōu)先級排布這就需要你對業(yè)務(wù)目標(biāo)有一定的了解，記住對業(yè)務(wù)目標(biāo)不了解你的設(shè)計(jì)將毫無意義
你可以通過查詢一些內(nèi)部資料、報(bào)告、也可以詢問產(chǎn)品經(jīng)理等相關(guān)負(fù)責(zé)人，還可以通過用戶調(diào)研得出，這里不展開說，具體可以去參考我的另一篇關(guān)于用戶畫像的文章，在動手之前你需要搞清楚：各模塊之間優(yōu)先級如何、你需要在一張單獨(dú)的圖表內(nèi)展示多少變量、想展示一段時(shí)間內(nèi)的值還是項(xiàng)目和項(xiàng)目之間嗨是組與組之間、每段變量中有多少關(guān)鍵數(shù)據(jù)需要展示等問題
、
如上圖所示，在工作中我們經(jīng)常接到需求的時(shí)候是面對一堆冗雜的數(shù)據(jù)集，組成了若干個(gè)模塊，但是正如上文所說我們并不能對其進(jìn)行無腦的可視化映射，所以首先要做的就是要對各個(gè)模塊進(jìn)行優(yōu)先級的梳理排序
明確了各個(gè)模塊的優(yōu)先級排布之后我們開始對每一個(gè)單獨(dú)模塊進(jìn)行可視化轉(zhuǎn)化，即哪一個(gè)部分分別用什么類型的可視化形式表現(xiàn)，這一步非常類似于土地使用規(guī)劃，當(dāng)你在將土地劃分完后，為每一塊土地定義其使用類型
想準(zhǔn)確的將圖表與所要表現(xiàn)的數(shù)據(jù)進(jìn)行對應(yīng)現(xiàn)需要了解圖表本身所包含的基本元素
在這些元素中正常情況下一定在圖表中的有：標(biāo)題、時(shí)間范圍、圖形主體，經(jīng)常出現(xiàn)的有：坐標(biāo)系、圖例、提示信息，有時(shí)候會有的有：切換選項(xiàng)和值域
知道了這些重要的基礎(chǔ)信息了，那么在面對這么多圖表的時(shí)候我們該如何正確的選擇來進(jìn)行使用呢
、
其實(shí)和之前說的一樣：基于目的來進(jìn)行思考，所謂的基于目的來進(jìn)行思考也就是要明確你所確立的數(shù)據(jù)指標(biāo)需要分析的維度，而日常使用的數(shù)據(jù)需要分析的維度無外乎：比較、構(gòu)成、分布聯(lián)系
比較類圖表應(yīng)該是大家最為熟悉的范疇，第一時(shí)間能夠想到的就是柱狀圖，這也是運(yùn)用最為廣泛的圖表之一，經(jīng)常出現(xiàn)在PC端之中，用于描述分類數(shù)據(jù)之間的對比，描述的數(shù)據(jù)可以是地區(qū)、品類甚至一個(gè)時(shí)間周期，但由于其擴(kuò)展能力有限，所以一般不建議項(xiàng)目超過12條
條形圖與柱狀圖類似，看上去只是交換了X軸與Y軸，功能和承載數(shù)據(jù)種類較為類似，但不同的是，條形所能承載的項(xiàng)目數(shù)量相對于柱狀圖而言更多，由于其優(yōu)良的縱向延展性一般用于手機(jī)端較多，而且從上到下的閱讀方式符合人眼閱讀習(xí)慣，所以也會經(jīng)常用于排行榜的設(shè)計(jì)中
分組條形圖是條形圖的衍生之一用于比較多個(gè)變量在不同區(qū)域之間的數(shù)量關(guān)系，比如當(dāng)想比較同樣一款衣服和鞋子在四個(gè)門店中的一個(gè)季度的營業(yè)額時(shí)就可以使用分組條形圖
雙向條形圖表適合比較兩組以上的分類數(shù)據(jù)比較，和分組條形圖較為類似，但是由于自身外觀特征更適合用于比較兩組意義相反的數(shù)據(jù)，也正是如此，雙向條形圖的組內(nèi)二級分類數(shù)量一般不要超過3條最好
折線圖與前者最大的不同就在于在坐標(biāo)軸中加入了連續(xù)類別這個(gè)概念，數(shù)據(jù)基于時(shí)間等因素變得動態(tài)了起來，注重變化趨勢的展現(xiàn)
面積圖是折線圖的延伸，除了表示變化趨勢之外還能比較所選范圍內(nèi)積累的值
玫瑰圖應(yīng)該算是可視化圖表中的“網(wǎng)紅”，因?yàn)槲覀儚男W(xué)的課本中就知道它還有一個(gè)別稱叫“南丁格爾玫瑰圖”它是一種圓形的直方圖，使用半徑長短表示數(shù)值大小，其特點(diǎn)就在于因?yàn)槠洫?dú)特的外觀可以將數(shù)值之間的差距在視覺層面進(jìn)行放大，和將坐標(biāo)軸范圍縮小來提升視覺上數(shù)值的碾壓是一個(gè)道理，發(fā)布會吹水最愛，但是要注意的是這不是一個(gè)表示占比構(gòu)成的圖，因?yàn)槊倒鍒D的每一份角度是一樣的，一定要和餅狀圖等圖區(qū)分開來，它用來表示的還是數(shù)值與數(shù)值之間的大小
雷達(dá)圖經(jīng)常用于分析一些多維的性能數(shù)據(jù)、評分?jǐn)?shù)據(jù)，經(jīng)常打游戲的朋友應(yīng)該不陌生，有多少五邊形選手可以扣個(gè)1，每一項(xiàng)指標(biāo)越接近圓心說明狀態(tài)越差，越向外說明越佳
子彈圖用于比較當(dāng)前數(shù)值與目標(biāo)之間的關(guān)系，比如看當(dāng)前業(yè)績是否達(dá)標(biāo)，也可以通過標(biāo)記劃分區(qū)域來進(jìn)行更好的評估
漏斗圖適用于業(yè)務(wù)流程比較規(guī)范、周期長、環(huán)節(jié)多的單流程單項(xiàng)分析，一定要有清晰的環(huán)節(jié)，比如監(jiān)控買家從瀏覽到最后下單的數(shù)量統(tǒng)計(jì)以求得轉(zhuǎn)化率，不適合無邏輯、無流程的分類對比
構(gòu)成類圖表整體上來說主要用于觀察部分和整體的占比關(guān)系，最經(jīng)典的莫過于餅狀圖，這個(gè)不用多說，通過每一份半圓角度所占整個(gè)圓的大小來表示部分和整體的關(guān)系，但是由于其所占面積較大，經(jīng)常會讓視覺過于集中，影響注意力
相對于餅狀圖而言，環(huán)狀圖十分有效的避免的干擾視覺的問題，其本質(zhì)是將餅圖中間掏空，功能與餅圖基本一致，但是視覺上做到了輕量化，目前在日常設(shè)計(jì)中較為常用
旭日圖相當(dāng)于前面二者的結(jié)合，適用于展示多層級數(shù)據(jù)的占比關(guān)系，距離圓心越近代表層級越高，下一層級的總和構(gòu)成上一層級，存在一定的父子層級關(guān)系
堆疊面積圖出了可以表達(dá)趨勢外，其優(yōu)勢在于能夠表達(dá)總量和分量的構(gòu)成關(guān)系，堆疊面積圖上的最大的面積代表了所有的數(shù)據(jù)量的總和，是一個(gè)整體。各個(gè)疊起來的面積表示各個(gè)數(shù)據(jù)量的大小
堆疊柱狀圖的優(yōu)勢在于它既可以表達(dá)一級分類的比較，同時(shí)還能看出二級分類在各其一級分類中的占比，但是缺點(diǎn)在于二級分類并不是按照同一基準(zhǔn)線對齊的，相比于堆疊面積圖更為常用
瀑布圖用表達(dá)兩個(gè)數(shù)值之間的變化過程，過程值為正的時(shí)候，向上加，過程值為負(fù)的時(shí)候向下減
分布聯(lián)系類地圖在這兩年在國人的心中其實(shí)已經(jīng)非常熟悉了，因?yàn)橐咔榻衲甑牡貓D可視化的應(yīng)用經(jīng)常出現(xiàn)在我們的生活中，地圖可以結(jié)合不同的表達(dá)方式：
可以結(jié)合散點(diǎn)、可以結(jié)合動畫、還可以結(jié)合引導(dǎo)線以及熱力圖的方式，圖的形式使用視具體的業(yè)務(wù)需求來定
最后就是氣泡圖，這是在查看分布關(guān)系中最為經(jīng)典的視覺模型，用氣泡的面積大小表示數(shù)量，結(jié)合輔助線可以更好地觀察分布情況
當(dāng)我們對每種圖表的功能和使用范圍有了一個(gè)較為明確的認(rèn)知之后，下面我們就可以對我們之前所規(guī)劃好的優(yōu)先級的模塊進(jìn)行可視化形式（圖表）的匹配了
進(jìn)行匹配過后，我們將對布局進(jìn)行重構(gòu)，整體重構(gòu)需要遵循的原則是
1.布局層級明確，首屏盡量曝光更多內(nèi)容
2.統(tǒng)一透氣，具有呼吸感
從首屏曝光更多內(nèi)容來說主要是因?yàn)榛诜治鲱惖臄?shù)據(jù)概覽工作場景和Analytical dashboard自身特征決定的，用戶希望能夠通過僅僅一屏的的大小進(jìn)行對各類信息的情況有基本的把控達(dá)到一眼全局的目的，其主要注意力都會放在首屏，所以我們需要盡可能的在首屏安排更多的信息
當(dāng)然首屏內(nèi)容也并不是越多越好，一般建議也盡量不要超過7組模塊，而在層級明確這塊兒主要是根據(jù)人眼閱讀習(xí)慣所產(chǎn)生的優(yōu)先級排布：正常情況下都是左上為優(yōu)先級最高，而右下優(yōu)先級較低，這是無數(shù)經(jīng)典的眼動測試和設(shè)計(jì)總結(jié)產(chǎn)生的最常用結(jié)論，就不展開敘述了，所以當(dāng)我們按照優(yōu)先級、首屏曝光更多內(nèi)容的原則進(jìn)行處理后會得到如上圖的布局
這主要是視覺層面的問題，統(tǒng)一透氣的要求在首頁概覽中可以依靠柵格系統(tǒng)來來解決，它可以有效的幫助頁面布局的對其保持頁面布局一致性，為頁面建立基礎(chǔ)布局框架，將頁面中的所有元素都捆綁在一個(gè)體系之中，同時(shí)還能有效解決適配問題
完成了大規(guī)劃之后，下面我們開始對一個(gè)一個(gè)的模塊進(jìn)行拆解同樣的以目標(biāo)指導(dǎo)設(shè)計(jì)，邊設(shè)計(jì)邊驗(yàn)證
和大規(guī)劃一樣，單獨(dú)到每一個(gè)圖表同樣要時(shí)刻注意層級的梳理，銷售渠道部分很明確應(yīng)該是運(yùn)用一個(gè)折線圖的形式，由于業(yè)務(wù)目標(biāo)上來說更關(guān)注銷售額而不是銷售額和訂單數(shù)的比較，所以我們選用了一個(gè)帶有切換選項(xiàng)的折線圖形式
但是我們會很容易發(fā)現(xiàn)的在讀圖時(shí)會出現(xiàn)較大的視覺干擾，并沒有能夠很好地突出重點(diǎn)信息，視覺層級不清晰、混亂
于是我們對沒有重點(diǎn)的視覺層級進(jìn)行梳理，像之前劃分模塊那樣，對視覺元素進(jìn)行高、中、低的P0、P1、P2的設(shè)定，提升易讀性
P0：層級最高的自然是重點(diǎn)信息突出部分，所以我們需要在其之上做加法，給予內(nèi)容異形懸停樣式進(jìn)行具體強(qiáng)調(diào)，配合投影加強(qiáng)視覺效果，有效傳遞用戶，拉開與別的元素的層級，同時(shí)數(shù)據(jù)部分用特殊字體并適當(dāng)加大字號進(jìn)行設(shè)計(jì)，方便用戶第一時(shí)間能夠看到所要強(qiáng)調(diào)的數(shù)據(jù)具體值
P1: 其次就是主體圖形部分，這是用戶需要看到的重要部分，在使用場景中會長時(shí)間盯視，所以采用更低的明度與更高的飽和色顏色確保易讀性，但是也不致于會讓用戶太晃眼產(chǎn)生視覺疲勞，最后考慮到該模塊所處位置屬于頁面中較為核心的地帶，給予一定的顏色透明度漸變裝飾，在強(qiáng)化主體圖形的同時(shí)不致于太顯單薄
P2：前兩者都是一定程度的做加法，那么層級最低的元素比那需要開始做減法，此時(shí)軸線、刻度、切換選項(xiàng)等元素需要弱化視覺層級，降低透明度，尤其是背后的刻度線與背景的明度對比大概控制在1.6:1上較為合適
銷售總額、訂單數(shù)、渠道數(shù)同屬于一個(gè)數(shù)據(jù)統(tǒng)計(jì)的范疇，最忌諱的就是把以上提供的三個(gè)信息給做平，讓用戶抓不住重點(diǎn)，面對這樣的情況還是一樣，確立需要突出的重點(diǎn)信息給予特殊文字和大小的設(shè)計(jì)，選擇合適的主體圖形
但在這里需要注意的是由于在這個(gè)模塊中P0是金額數(shù)、訂單數(shù)、渠道數(shù)這些重要值，所以可視化圖形需要適當(dāng)為其讓步，不要放在閱讀中心位置，按照P1來進(jìn)行處理，而訂單數(shù)、轉(zhuǎn)換率這樣的標(biāo)題就成了P2需要適當(dāng)降低透明度和文字大小，不干擾主要信息的表達(dá)
說到統(tǒng)一，最先想到的一定是色彩，無非也就是需要處理好對立統(tǒng)一關(guān)系，而這其中統(tǒng)一的比例又要大于對立，配色上盡量選用同類色系，不宜太過花哨，尤其是對于B端而言，建議在可能的情況下不要超過5種，而且主色、輔助色，對比色的比例建議控制在6:3:1的比例（但不絕對），既能做到有所區(qū)別又不致于過于絢麗干擾視覺
你的主色不一定要遷就你的品牌色，但是一定要是如上文說的盡量低明度高飽和，以適應(yīng)于長時(shí)間的注視
顏色過后就是字體，字體字體的使用需要極為謹(jǐn)慎，如果可以盡量只出現(xiàn)一種字體（但不要超過三種），并且只采用基礎(chǔ)字體，正常情況下都是將其作為一個(gè)需要被降噪了的視覺元素來對待（比如降低透明度），在PC端中盡量也不要出現(xiàn)較多不同的字號，字重，造成沒有必要的視覺干擾
除了字體之外，在統(tǒng)一感的營造上卡片的布局結(jié)構(gòu)也需要盡量保持一致，這是為了提升易用性，同一個(gè)產(chǎn)品內(nèi)，相同布局會給予用戶相同交互、相同功能的暗示，也更容易培養(yǎng)用戶習(xí)慣，提升操作效率
呼吸感是留白的藝術(shù)，很考驗(yàn)設(shè)計(jì)師的排版能力，在單獨(dú)的模塊內(nèi)，元素與元素之間盡量不要用實(shí)線進(jìn)行間隔，可以的話利用親密性原則通過元素間距的遠(yuǎn)近進(jìn)行布局
而柱狀圖的設(shè)計(jì)上，柱與柱之間的間距最好大于柱寬的1.5倍，這樣才顯得視覺上較為透氣，不致于太臃腫
最后就是模塊中的邊距留白部分，這點(diǎn)一定要重視，不然不僅你的版心會變散，還會嚴(yán)重影響你的頁面呼吸感
細(xì)節(jié)上首先要說的就是橫縱坐標(biāo)軸上的文字，上面的文字一定不要過長，最好的方式是將文字進(jìn)行精簡。然后橫、豎排對齊處理，如果實(shí)在不能精簡那么再進(jìn)行斜排的方式
第二點(diǎn)就是橫縱坐標(biāo)軸有的時(shí)候會因?yàn)樾枰故镜臄?shù)據(jù)過多而過于密集影響閱讀，這個(gè)時(shí)候可以采用適當(dāng)增加一個(gè)值域的劃定的方式來進(jìn)行坐標(biāo)間距的縮放
第三點(diǎn)就是，在排行榜等模塊可以適當(dāng)增加一些小設(shè)計(jì)，比如金、銀、銅的設(shè)計(jì)，提升情感化元素的融入
第四點(diǎn)就是，盡量不要選用一些3D的酷炫效果來做可視化，因?yàn)檫@種效果很容易對數(shù)據(jù)進(jìn)行遮擋和扭曲，不是非常適用于高效閱讀，也不適合PC頁面上的交互，而且也不利于開發(fā)，比較得不償失
當(dāng)所有的模塊設(shè)計(jì)完成后，像拼高達(dá)一樣進(jìn)行組裝，組裝完成后適當(dāng)調(diào)整其過于干擾視覺的地方，然后進(jìn)行自檢
自檢不只是從檢查你的視覺、你的模塊間的布局，更重要的是帶入使用角色來進(jìn)行檢查，你可以模用戶使用中的各種需求場景，對已經(jīng)制作好的頁面進(jìn)行交互和閱讀，看是否能夠快速高效地完成使用目標(biāo)
當(dāng)然除了自己之外，你還能在有條件的情況下找專家用戶進(jìn)行使用，即使記錄使用中存在的問題并及時(shí)進(jìn)行調(diào)整，當(dāng)初步使用大致無問題后便可以交付
了解了圖表在PC頁面的布局使用之后，最后想和大家聊一點(diǎn)拓展性的話題：數(shù)據(jù)可視化大屏，目前在B端領(lǐng)域可視化大屏已經(jīng)是一個(gè)越來越熱的研究課題，同樣也是承載信息圖表的重要載體之一，但由于篇幅限制本篇并不展開討論
同樣從定義上來說，數(shù)據(jù)可視化大屏就是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)，聽著和PC端的數(shù)據(jù)概覽相比似乎只有載體的區(qū)別，但是兩者的差異卻不止于此
首先是尺寸上來說，數(shù)據(jù)可視化大屏要遠(yuǎn)遠(yuǎn)大于PC數(shù)據(jù)概覽，我們在市面經(jīng)常看到的大屏硬件有一整塊巨型的P3屏幕，也有用若干臺液晶電視拼接而成的大屏，而且不像是PC有一些固定尺寸的長寬約束，大屏的尺寸更自由
其次大屏的配色更為炫酷、科幻具有一種未來感，哪怕不是設(shè)計(jì)師朋友看過數(shù)據(jù)可視化大屏的朋友一定會感覺一種撲面而來的科技感、前衛(wèi)感，這主要是因?yàn)榇笃恋呐渖喟胧且运{(lán)黑等深沉的顏色為背景色主基調(diào)，然后在數(shù)據(jù)可視化展示部分以一些高明度、高飽和的色彩進(jìn)行呈現(xiàn)，給人會不由自主營造一種賽博朋克的味道
這并不是一開始就制定的配色準(zhǔn)則，而是大屏本身需要向其面向的用戶營造一種實(shí)力、科技、質(zhì)感的氛圍，所以慢慢大家不約而同的選擇了這樣的調(diào)性，還有就是考慮到大屏本身的體積問題，如果以明度較高的顏色作為背景色，很容易造成人眼的視覺疲勞和光污染，所以這也是為什么我們很少會看到可視化大屏用白色作為底色的原因
再次就是內(nèi)容上，可視化大屏比PC頁面信息承載的更多，但是頁面切換、交互操作更少，這是因?yàn)榭梢暬笃林饕繕?biāo)是對相關(guān)信息的全局展示，基本不存在PC頁面那樣的首屏、二屏的概念，用戶更多的使用場景是通過大屏的數(shù)據(jù)實(shí)時(shí)反饋來進(jìn)行決策，所以也很少會進(jìn)行頁面的跳轉(zhuǎn)、對某一個(gè)區(qū)域進(jìn)行編輯這樣的操作
最后就是在使用的時(shí)長上相對來說要比數(shù)據(jù)概覽頁面更長，這個(gè)也很好理解，尤其是在一些監(jiān)測、預(yù)防的重要部門中（如氣象監(jiān)測），很多時(shí)候都是24小時(shí)輪班來盯大屏的實(shí)時(shí)數(shù)據(jù)的，而很多PC頁面的數(shù)據(jù)概覽部分，用戶可能就是每天打開大致看一看然后就切換至別的頁面進(jìn)行其他工作了
從應(yīng)用場景的角度切入，可視化大屏的分類可以分為三種：
1.參觀視察類
2.展示宣傳類
3.辦公決策類
參觀視察類，其主要應(yīng)用場景是在企業(yè)內(nèi)部展廳，面對的用戶主要是領(lǐng)導(dǎo)、客戶、上級單位等
，這類大屏一般是不需要進(jìn)行交互的，其目的主要是盡可能完整清晰的，展示流程、業(yè)績、能力
展示宣傳類與參觀視察類其實(shí)比較類似，只是相對于參觀視察類更多的會在發(fā)布會、展臺展會等應(yīng)用場景出現(xiàn)，面向的的用戶主要是一些潛在客戶、媒體、同行等，像我們很熟悉的天貓雙十一展示大屏就屬于展示宣傳類大屏
其目的主要是用于展示公司、產(chǎn)品的品牌、價(jià)值、能力等屬性
以上兩者更多的偏向于一種純粹的對結(jié)果的呈現(xiàn)
相對于前兩者而言辦公決策類大屏的實(shí)現(xiàn)成本更高，使用的時(shí)效更長，定制化更深，工具屬性感更強(qiáng)
應(yīng)用場景上多用于交通指揮系統(tǒng)、天氣監(jiān)測預(yù)報(bào)系統(tǒng)，面向的用戶包括單位指戰(zhàn)領(lǐng)導(dǎo)、一線人員等，這樣的角色就決定了其具有較強(qiáng)的決策輔助價(jià)值
其目的主要用于讓用戶能夠通過使用大屏達(dá)到快速的指揮、調(diào)度、監(jiān)控、決策
最后給大家推薦一些數(shù)據(jù)可視化方面的工具，來助力我們平時(shí)的工作
以上是一些能夠更快速生成各種數(shù)據(jù)可視化圖表的工具，類型和樣式都十分豐富
以上是一些能夠在線生成可視化大屏模版的一些工具，有助于在日常工作中涉及數(shù)據(jù)可視化大屏的時(shí)候進(jìn)行參考
好了以上就是在B端設(shè)計(jì)中對于數(shù)據(jù)可視化尤其是PC端數(shù)據(jù)概覽的設(shè)計(jì)探討，當(dāng)然其實(shí)關(guān)于數(shù)據(jù)可視化的范圍還遠(yuǎn)遠(yuǎn)不止于此，感謝你能夠耐心看到最后，如果這對于你的工作有一點(diǎn)幫助那么備感榮幸
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：核糖bro
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
數(shù)據(jù)可視化設(shè)計(jì)的一些技巧
一、什么是數(shù)據(jù)可視化
把相對復(fù)雜、抽象的數(shù)據(jù)通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數(shù)據(jù)可視化，數(shù)據(jù)可視化是為了更形象地表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用。
在當(dāng)前新技術(shù)支持下，數(shù)據(jù)可視化除了“可視”，還可有可交流、可互動的特點(diǎn)。數(shù)據(jù)可視化的本質(zhì)是數(shù)據(jù)空間到圖形空間的映射，是抽象數(shù)據(jù)的具象表達(dá)。
二、什么是大屏數(shù)據(jù)可視化
大屏數(shù)據(jù)可視化是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)。
“大面積、炫酷動效、豐富色彩”，大屏易在觀感上給人留下震撼印象，便于營造某些獨(dú)特氛圍、打造儀式感。原本看不見的數(shù)據(jù)可視化后，便能調(diào)動人的情緒、引發(fā)人的共鳴，傳遞企業(yè)文化和價(jià)值。
利用面積大、可展示信息多的特點(diǎn)，通過關(guān)鍵信息大屏共享的方式可方便團(tuán)隊(duì)討論、決策，故大屏也常用來做數(shù)據(jù)分析監(jiān)測使用。大屏數(shù)據(jù)可視化目前主要有信息展示、數(shù)據(jù)分析及監(jiān)控預(yù)警三大類。
三、大屏數(shù)據(jù)可視化設(shè)計(jì)原則
設(shè)計(jì)服務(wù)需求
大屏設(shè)計(jì)要避免為了展示而展示，排版布局、圖表選用等應(yīng)服務(wù)于業(yè)務(wù)，所以大屏設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的。
那什么是業(yè)務(wù)需求呢？
業(yè)務(wù)需求就是要解決的問題或達(dá)成的目標(biāo)。設(shè)計(jì)師通過設(shè)計(jì)的手段幫助相關(guān)人員達(dá)成這個(gè)目標(biāo)，是大屏數(shù)據(jù)可視化的價(jià)值所在。
先總覽后細(xì)節(jié)
大屏因?yàn)榇?，承載數(shù)據(jù)多，為了避免觀者迷失，大屏信息呈現(xiàn)要有焦點(diǎn)、有主次?？梢酝ㄟ^對比，先把核心數(shù)據(jù)拋給用戶，待用戶理解大屏主要內(nèi)容與展示邏輯后，再逐級瀏覽二三級內(nèi)容。部分細(xì)節(jié)數(shù)據(jù)可暫時(shí)隱藏，用戶需要時(shí)可通過鼠標(biāo)點(diǎn)擊等交互方式喚起。
四、大屏可視化設(shè)計(jì)流程
1. 根據(jù)業(yè)務(wù)場景抽取關(guān)鍵指標(biāo)
關(guān)鍵指標(biāo)是一些概括性詞語，是對一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個(gè)指標(biāo)在大屏上獨(dú)占一塊區(qū)域，所以通過關(guān)鍵指標(biāo)定義，我們就知道大屏上大概會顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K。
確定關(guān)鍵指標(biāo)后，根據(jù)業(yè)務(wù)需求擬定各個(gè)指標(biāo)展示的優(yōu)先級（主、次、輔）。
2. 確立指標(biāo)分析維度
同一個(gè)指標(biāo)的數(shù)據(jù)，從不同維度分析就有不同結(jié)果。很多小伙伴做完可視化設(shè)計(jì)，發(fā)現(xiàn)可視化圖形并沒有準(zhǔn)確表達(dá)自己的意圖，也沒能向觀者傳達(dá)出應(yīng)有的信息，可視化圖形讓人困惑或看不懂。出現(xiàn)這種情況很大程度就是因?yàn)榉治龅木S度沒有找準(zhǔn)或定義的比較混亂。
我們在選定指標(biāo)后，就需要跟項(xiàng)目組其他小伙伴討論：我們的各個(gè)指標(biāo)主要想給大家展示什么，更進(jìn)一步的講，是我們想通過可視化表達(dá)什么樣的規(guī)律和信息。
我們可以從“聯(lián)系、分布、比較、構(gòu)成”四個(gè)維度更有邏輯的思考這個(gè)問題。
1.聯(lián)系：數(shù)據(jù)之間的相關(guān)性
2.分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律
3.比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面
4.構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何
3. 選定可視化圖表類型
當(dāng)確定好分析維度后，事實(shí)上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數(shù)幾個(gè)圖表里，篩選出最能體現(xiàn)我們設(shè)計(jì)意圖的那個(gè)就好了。選定圖表注意事項(xiàng)：易理解、可實(shí)現(xiàn)。
易理解：
就是可視化設(shè)計(jì)要考慮大屏最終用戶，可視化結(jié)果應(yīng)該是一看就懂，不需要思考和過度理解，因而選定圖表時(shí)要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。
可實(shí)現(xiàn)：
（1）我們需要了解現(xiàn)有數(shù)據(jù)的信息、規(guī)模、特征、聯(lián)系等，然后評估數(shù)據(jù)是否能夠支撐相應(yīng)的可視化表現(xiàn)。
（2）我們設(shè)計(jì)的圖形圖表，要開發(fā)能夠?qū)崿F(xiàn)。實(shí)際工作中，一些可視化效果開發(fā)用代碼寫很容易實(shí)現(xiàn)，效果也不錯(cuò)，但這些效果設(shè)計(jì)師用Ps/Ai/Ae這些工具模擬時(shí)會發(fā)現(xiàn)比較困難。同樣的，某些效果設(shè)計(jì)師用設(shè)計(jì)工具可以輕易實(shí)現(xiàn)，但開發(fā)要用代碼落地卻非常困難。
所以大屏設(shè)計(jì)中跟開發(fā)常溝通非常重要，我們需要明確哪些地方設(shè)計(jì)師可以盡情發(fā)揮，哪些地方需要謹(jǐn)慎設(shè)計(jì)！一個(gè)項(xiàng)目總有周期與預(yù)算限制，不會無限期的修改迭代，所以設(shè)計(jì)師在這里需要抓住重點(diǎn)，有取舍，不鉆牛角尖、死磕不放。
4. 制作圖表
當(dāng)確定了要使用哪些圖表做圖后，開始進(jìn)入制作流程，影響最終圖表展現(xiàn)效果的元素一般分為兩個(gè)層面：
非數(shù)據(jù)層：
不受數(shù)據(jù)影響樣式的元素，比如說背景、網(wǎng)格線、外邊框等等。這類元素起到的是輔助閱讀作用，但如果不加處理全部放出，視覺上會顯得雜亂和不夠簡潔，干擾到你真正想展示的信息。對于這類元素，應(yīng)該盡量隱藏和弱化。
隱藏
·去除不必要的背景填充
·去掉無意義的顏色變化
·去掉不必要的外框
弱化
·坐標(biāo)軸淡色或隱藏
·網(wǎng)格線淡色或隱藏
數(shù)據(jù)層：
受數(shù)據(jù)影響樣式的元素，比如說柱狀圖的柱條長度，柱條顏色，柱條展示個(gè)數(shù)，氣泡圖氣泡大小等等，這類元素的展示效果和圖表本身的數(shù)據(jù)息息相關(guān)，一旦圖表本身的數(shù)據(jù)比較極端，有可能會使得最終視覺展現(xiàn)不盡如人意，我們無法改變具體的數(shù)據(jù)，是否就完全無法操控這些元素了呢？
精簡數(shù)據(jù)項(xiàng)
在做數(shù)據(jù)報(bào)告時(shí)，不管有多少數(shù)據(jù)項(xiàng)，為了完整和精確性，所有的內(nèi)容都會顯示出來，但在大屏中，如此滿的數(shù)據(jù)展示，不但忽略了視覺體驗(yàn)，還會讓用戶抓不住重點(diǎn)，對于餅圖來說，建議扇區(qū)個(gè)數(shù)不要超過5個(gè)，例如保留占比前5的扇區(qū)，剩下的非重點(diǎn)數(shù)據(jù)全部歸到“其他”。
保留前五或后五
如果柱狀圖的數(shù)據(jù)項(xiàng)過多，展示時(shí)會過于密集，建議先把數(shù)據(jù)項(xiàng)按照數(shù)值大小排序，只保留前五或后五的數(shù)據(jù)項(xiàng)。
5. 頁面布局、劃分
尺寸確立后，接下來要對設(shè)計(jì)稿進(jìn)行布局和頁面的劃分。這里的劃分，主要根據(jù)我們之前定好的業(yè)務(wù)指標(biāo)進(jìn)行，核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積；其余的指標(biāo)按優(yōu)先級依次在核心指標(biāo)周圍展開。一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類型相近的指標(biāo)放一起，這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。
6.可視化設(shè)計(jì)
根據(jù)選定的圖表類型進(jìn)行合理的可視化設(shè)計(jì)。目前來講大屏可視化主要有：指標(biāo)類信息點(diǎn)和地理類信息點(diǎn)兩大可視化數(shù)據(jù)。
指標(biāo)類信息點(diǎn)可視化效果相對簡單易實(shí)現(xiàn)，而地理類信息點(diǎn)一般可視化效果酷炫，但是開發(fā)相對困難，需要設(shè)計(jì)師跟開發(fā)多溝通的。
地理類信息一般具有很強(qiáng)的空間感、豐富的粒子、流光等動效、高精度的模型和材質(zhì)以及可交互實(shí)時(shí)演算等特點(diǎn)，所以對于被投電腦、大屏拼接器等硬件設(shè)備的性能會有要求，硬件配置不夠的情況下可能出現(xiàn)卡頓甚至崩潰的情況，所以這點(diǎn)也是需要提前溝通評估的。
數(shù)據(jù)可視化大屏設(shè)計(jì)少不了動效，動效是可視化重要的組成部分，動效的增加能讓大屏看上去是活的，增加觀感體驗(yàn)。但過分的動效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而弱化了數(shù)據(jù)的展示。
7.樣圖溝通確認(rèn)
樣圖溝通環(huán)節(jié)，最初的樣圖不需要十分精致，我們可以把它理解為一個(gè)“低保真”原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點(diǎn)，然后又大修大改的情況。
因?yàn)槲覀冊谇皫撞揭呀?jīng)分別確定了頁面布局、圖表類型、頁面風(fēng)格特點(diǎn)，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現(xiàn)出來，然后根據(jù)樣圖效果嘗試確定五方面內(nèi)容：
1.之前確立的布局在放入設(shè)計(jì)內(nèi)容后是否依然合適；
2.確立的圖表類型帶入數(shù)據(jù)后是否仍然客觀準(zhǔn)確；
3.根據(jù)關(guān)鍵元素、色彩、結(jié)構(gòu)、質(zhì)感打造出的頁面風(fēng)格是否基本傳達(dá)出了預(yù)期的氛圍和感受；
4.已有的樣式、數(shù)據(jù)內(nèi)容、動效等在開發(fā)實(shí)現(xiàn)方面是否存在問題；
5.大屏是否存在色差、文字內(nèi)容是否清晰可見、頁面是否存在變形拉伸等現(xiàn)象。
大屏有它自己獨(dú)特的分辨率、屏幕組成、色彩顯示以及運(yùn)行、展示環(huán)境，這里的很多問題只有設(shè)計(jì)稿投到大屏上才能夠被發(fā)現(xiàn)。所以這一步在樣圖溝通確認(rèn)環(huán)節(jié)非常重要，有時(shí)候需要開發(fā)出demo，反復(fù)測試多次。
8.頁面定稿、開發(fā)
事實(shí)上頁面開發(fā)階段并不是到了這一步才進(jìn)行，這里說的頁面開發(fā)僅指前端樣式的實(shí)現(xiàn)，實(shí)際上后臺數(shù)據(jù)準(zhǔn)備工作在定義好分析指標(biāo)后就已經(jīng)開始進(jìn)行了，而我們當(dāng)前的工作是把數(shù)據(jù)接入到前端，然后用設(shè)計(jì)的樣式呈現(xiàn)出來。
一般開發(fā)用代碼寫不出的樣式或動效，都需要設(shè)計(jì)師切圖作支持：比如數(shù)據(jù)容器的邊框、小的動效、頁面整體大背景、部分圖標(biāo)等。切圖按正常網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)切就可以了。
9.整體細(xì)節(jié)調(diào)優(yōu)與測試
這部分是指頁面開發(fā)完成后，將真實(shí)頁面投放到大屏進(jìn)行的測試與優(yōu)化。這里主要有兩部分工作。
視覺方面的測試：關(guān)鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預(yù)期顯示、有無變形、錯(cuò)位等情況。
性能與數(shù)據(jù)方面的測試：圖形圖表動畫是否流暢、數(shù)據(jù)加載、刷新有無異常；頁面長時(shí)間展示是否存在奔潰、卡死等情況；后臺控制系統(tǒng)能否正常切換前端頁面顯示。
五、大屏設(shè)計(jì)的注意事項(xiàng)
1. 字體使用
字體優(yōu)先使用系統(tǒng)默認(rèn)字體，需要嵌入字體時(shí)考慮字體的可識別性、與當(dāng)前設(shè)計(jì)風(fēng)格是否融合、是否可免費(fèi)商用。
如果頁面是云端部署，需要嵌入字體包時(shí)，我們可以使用FontCreator這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優(yōu)化頁面加載體驗(yàn)，避免在替換默認(rèn)字體的過程中出現(xiàn)頁面文字跳動等現(xiàn)象。
一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個(gè)明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數(shù)字
2. 顏色搭配
（1）色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色
3. 頁面布局
主次分明、條理清晰、注意留白，合理利用大屏上各小的顯示單元，并盡量避免關(guān)鍵數(shù)據(jù)被拼縫分割。
六、問題
設(shè)計(jì)稿投到大屏上顯示效果不佳怎么辦？
大屏的分辨率、比例、使用環(huán)境、投射方式等均會對設(shè)計(jì)造成影響。理想情況下，我們應(yīng)該在設(shè)計(jì)開始前，就能打開大屏系統(tǒng)做一些簡單測試。我們可以從網(wǎng)上收集不同設(shè)計(jì)師不同風(fēng)格的大屏設(shè)計(jì)作品，然后投上去查看實(shí)際效果。
因?yàn)榇蠖鄶?shù)時(shí)候大屏都會存在色彩偏差，這時(shí)通過測試我們就能發(fā)現(xiàn)漸變色、鄰近色等不同類型的色彩搭配是否可以在目標(biāo)大屏上良好呈現(xiàn)。如果不可以，那我們設(shè)計(jì)進(jìn)行時(shí)就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環(huán)節(jié)及時(shí)測試也很重要。
文章來源：優(yōu)設(shè) 作者：Captain相
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
語言交流是人類的本能，近幾年語音交互的迅速崛起讓產(chǎn)品更加人性化了。然而即使不考慮技術(shù)限制，人與機(jī)器的互動也不是只有聽或說單一模態(tài)的，因?yàn)檫@不符合我們的自然交流。目前，在居家場景中，用戶與電視的交互依然是對眾多信息-圖像、語音、觸感-的同時(shí)處理，它們分別對應(yīng)著觀看、聽說和必要的遙控器操作。對UX設(shè)計(jì)師而言，如何讓電視端同時(shí)承載這樣多的感知設(shè)計(jì)是值得思考的。
語音體驗(yàn)設(shè)計(jì)是一個(gè)很大的系統(tǒng)，從用研、功能、內(nèi)容到交互、技術(shù)實(shí)現(xiàn)等等，而GUI的展示只是一種輔助模態(tài)。今天我想探討的是如何結(jié)合GUI與VUI展開界面設(shè)計(jì)。
文章分兩個(gè)部分：電視端VUI的搭建和一次改版迭代。
1. VUI的構(gòu)成
2. 改版需求
3. 界面改版
4. 設(shè)計(jì)驗(yàn)證
“Voice User Interface (or VUI) is an interaction model where a human interacts with a machine and performs a set of tasks at least in part by using voice.”
<Voice User Interface Design>
VUI：是一種交互模態(tài)，讓人能夠或多或少通過語音交互與機(jī)器共同完成一系列任務(wù)；
領(lǐng)域：是將用戶想要完成的任務(wù)分為一些大的類型，比如視頻領(lǐng)域、音樂領(lǐng)域、百科領(lǐng)域等；
意圖：指某領(lǐng)域下的具體任務(wù)，比如視頻領(lǐng)域下的“我想看某部電影”，即為影視搜索意圖。
小明：“給我推薦點(diǎn)美劇”；
電視：“看看這些有沒有你喜歡的”，并推送一些熱門美劇；
小明：考慮了一會兒....說“風(fēng)騷律師吧”；
電視：起播《風(fēng)騷律師》。
在這個(gè)故事中，除了眾所周知的VUI應(yīng)具備的基礎(chǔ)功能-聽和說-以外，我們還需要定義更完整的體驗(yàn)流程：
1. 小明如何開啟與電視的對話？因?yàn)殡娨暀C(jī)不能一直處于聆聽狀態(tài)，那樣很可能會識別用戶無意圖的語言，從而誤響應(yīng)。
2. 電視端應(yīng)該以什么方式推薦美劇？如果只一個(gè)個(gè)播報(bào)片名，小明會記不住。
3. 推薦幾部合適？隔空喊話的情況下（遠(yuǎn)場語音，下圖解釋），最好不需要再用遙控器翻頁。
4. 如果小明問的是其他領(lǐng)域問題，比如天氣、歌曲、球賽等，對應(yīng)的媒體資源會涉及到多樣化的信息類型，如圖形、音頻等。不僅要統(tǒng)一設(shè)計(jì)風(fēng)格，還要為未來可能支持的新領(lǐng)域/新意圖預(yù)留承載框架。
5. 如果小明的詢問得到了錯(cuò)誤答復(fù)，或者一直未被答復(fù)，除了技術(shù)上提高識別率和語義理解程度，該怎么緩解用戶的茫然和憤怒情緒？
6. 當(dāng)小明問了一個(gè)問題，不被理解，但換個(gè)問法卻成功理解。如何教會小明盡可能一次就做出能被識別的表達(dá)？
7. 我們能支持幾十個(gè)領(lǐng)域、幾百種意圖，怎樣能讓小明知道一共有哪些？
8. 如何結(jié)束對話，以免電視一直聆聽造成誤識別？
9. ......
為了回答以上問題，我們經(jīng)過大量的模擬對話、競品分析和demo體驗(yàn)，從而定義了電視端VUI的交互流程和組成模塊：
喚起、聆聽、思考、反饋、退出：
電視端的語音有三種對話狀態(tài)：
1. 單輪對話：每說一句話都需要喚起一次語音；
2. 多輪對話：一次喚起，多輪對話，但輪數(shù)受限于領(lǐng)域范圍；
3. 全雙工模式：一次喚起，多輪對話，輪數(shù)不限。
圖源網(wǎng)絡(luò)
這是本文重點(diǎn)描述的部分，電視端的GUI包括：
1. 狀態(tài)指示動畫：告知用戶當(dāng)前狀態(tài)；
2. 提示詞條：提示用戶有哪些說法；
3. 用戶指令：用戶說法的文字識別結(jié)果，它讓人知道自己說的話是否被正確識別，若出了錯(cuò)，用戶就知道原來是錯(cuò)在這一環(huán)節(jié)；
4. 電視答復(fù)：文字+音頻；
5. 內(nèi)容展示：所有媒資內(nèi)容的呈現(xiàn)，如果沒有，則不展示。比如，天氣需要展示圖像，而交通限行用一句話回答即可。
舊版設(shè)計(jì)方案概覽：
語音GUI分為兩塊：語音基礎(chǔ)界面（必須）和內(nèi)容展示區(qū)（可選），基礎(chǔ)界面包括上圖中的1234內(nèi)容。
上圖效果是從17年逐漸搭建起來的框架，隨著需求增多、不同設(shè)計(jì)師的參與，設(shè)計(jì)越來越碎片。從易用性、視覺、開發(fā)維護(hù)難度和新功能兼容上，都存在很多問題：
1. 布局調(diào)整
由于電視用戶使用最多、最重要的功能是觀看影視，所以優(yōu)先考慮視頻領(lǐng)域。因此布局調(diào)整的優(yōu)先順序是：基礎(chǔ)界面>視頻領(lǐng)域>其他領(lǐng)域。
2. 建立視覺規(guī)范
建立原子化設(shè)計(jì)規(guī)范：配色方案、文字、間距、圓角、圖標(biāo)，以及可復(fù)用和拓展的組件、模版。
3. 統(tǒng)一狀態(tài)動效
將上文的5種基礎(chǔ)狀態(tài)結(jié)合全雙工狀態(tài)統(tǒng)一設(shè)計(jì)，并為未來可能開發(fā)的主動提示等狀態(tài)，預(yù)留一席之地。
經(jīng)過競品分析，窮舉了7種可能的布局方式：
這么多的優(yōu)缺點(diǎn)該如何取舍？我們將痛點(diǎn)歸類，并根據(jù)通用的交互原則排列了優(yōu)先級：
最后決定用B1-底部長矩形，但設(shè)計(jì)UI時(shí)需要借鑒B2那樣增加一點(diǎn)漸變過渡。而針對B1的痛點(diǎn)，需要重新設(shè)計(jì)小面積狀態(tài)指示動畫，并定義好低欄左側(cè)的識別文字與右側(cè)的提示詞條之間間距，從技術(shù)上，我們能做到跟進(jìn)用戶說話和播報(bào)內(nèi)容，說一句、展示一句。
電視端就像是一塊自由發(fā)揮的大畫布。視頻海報(bào)的擺放，得從幾個(gè)方面考慮：
1. 背景占比：半屏、全屏、半屏至全屏；
2. 導(dǎo)航方式：宮格（我們的海報(bào)尺寸是可以統(tǒng)一的，所以不考慮瀑布流，此階段也沒有專題分類，無需考慮tab欄和泳道欄）；
3. 海報(bào)方向：橫幅、豎幅；
4. 展示數(shù)量：是否超過一頁、海報(bào)尺寸。
市面上的競品就有這幾種方案：
行為數(shù)據(jù)顯示，我們用戶的視頻意圖分兩種：明確自己想看什么－“播放陳情令”，和不明確目標(biāo)、向電視尋求推薦－“推薦點(diǎn)古裝劇”。我們分別稱為普通推薦和個(gè)性化推薦。由于前者在大多數(shù)情況下內(nèi)容較少，所以用半屏，后者則用全屏。由于視頻會單獨(dú)設(shè)計(jì)一個(gè)APP，故最后定的普推和個(gè)推的坑位都是十張：
上面確定了視頻領(lǐng)域，而其他幾十個(gè)領(lǐng)域的信息，同所有平面設(shè)計(jì)的信息一樣，都是文字、圖片、圖標(biāo)的排列組合，可以把它們按照原子化設(shè)計(jì)系統(tǒng)，從分子到模版逐步搭建：
這樣的結(jié)構(gòu)，能確保20多個(gè)帶內(nèi)容的領(lǐng)域都能從中找到對應(yīng)的排列方式，模版如下表。這里看起來可能比較抽象，可以先看后面的UI效果圖再回來看這里。
實(shí)際界面中，內(nèi)容可能會以前面的任何一種排列形式出現(xiàn)，給較少的內(nèi)容使用大背景是浪費(fèi)，反過來則擁擠雜亂，故不同內(nèi)容需要不同的背景。依然還是窮舉了5種背景待選擇：
1. 卡片
2. 懸空半透明容器
3. 半屏羽化背景
4. 半屏實(shí)心背景
5. 全屏背景
按照痛點(diǎn)的優(yōu)先級打分：
可見方案d-半屏實(shí)心背景最佳，但它最適合內(nèi)容量級為中等的情況。所以我們考慮了是否也采用卡片和全屏來適應(yīng)內(nèi)容過少和過多的情況。最后結(jié)論是：只采用方案d和e，舍棄a，因?yàn)閐的背景高度可以隨內(nèi)容的多寡而變化。這樣以來，設(shè)計(jì)就不會很碎片化了。
到這里，已經(jīng)確定了語音基礎(chǔ)界面（低欄）、各領(lǐng)域信息排列方式和背景。接下來就像搭積木把它們組合起來，這一步重點(diǎn)考慮的是內(nèi)容是否上焦點(diǎn)和翻頁，這需要根據(jù)具體領(lǐng)域的資源參數(shù)和使用場景甄別。
正好在做這個(gè)項(xiàng)目時(shí)，我們電視端的視覺規(guī)范也在完善中，所以焦點(diǎn)色、文字、柵格等規(guī)范是直接從規(guī)范庫搬過來的。
實(shí)際效果：（抱歉GIF原圖太大了，只好展示一小截。手機(jī)拍攝有一點(diǎn)色差，實(shí)際的色彩還原度是很高的。）
我們找來40名用戶體驗(yàn)新舊版本語音，進(jìn)行了偏好測試和用戶反饋收集，部分反饋如下：
40名用戶中，有80%認(rèn)為新版更好，分別有12.5%和7.5%的人認(rèn)為兩者差不多和舊版更好。這次的改版中，UI&交互、動效、顏色&背景三者，體驗(yàn)感分別提升了12%、2%和7%。
當(dāng)時(shí)大家對新版評價(jià)最高的是：簡潔易看、空間利用率高、布局更好。
吐槽最多的問題是：背景色太深、配色單一，動畫不夠好看、不夠明顯。我們隨即對背景色做了優(yōu)化，上圖看到的是優(yōu)化后的效果。
后續(xù)兼容性驗(yàn)證：新版結(jié)構(gòu)能較好適應(yīng)節(jié)假日換膚、半屏小程序、第三方App適配等多種需求。
文章復(fù)盤了電視端語音的基礎(chǔ)界面、視頻領(lǐng)域、其他領(lǐng)域和背景的重構(gòu)過程。主要用到的方法有原子化設(shè)計(jì)理論、競品分析、痛點(diǎn)云圖（表格形式）和用戶偏好測試。對界面布局有較好的優(yōu)化效果。最大的收獲是掌握了從最底層元素展開剖析的方法，這種細(xì)致的方法用來搭建界面設(shè)計(jì)會很穩(wěn)固、全面，并且拓展性強(qiáng)。
經(jīng)驗(yàn)和不足：
1. 大屏經(jīng)常強(qiáng)調(diào)沉浸式體驗(yàn)，因而電視端疊加功能很多，但必須要注意分個(gè)主次。一是疊加內(nèi)容不能太多，要么就不疊加、全屏展示。二是一定要考慮背景播的不確定因素，避免花亂；
2. 上面只是分析了二維平面，還有次級頁面、時(shí)序等三、四維的規(guī)則還未深入學(xué)習(xí)研究。這樣的研究會對所有App設(shè)計(jì)都有更好的指引。
3. 我們雖然已有了簡單的導(dǎo)航、柵格等布局規(guī)范，但內(nèi)容展示區(qū)依然是毫無章法的自定義排列，智能電視產(chǎn)品還沒有像手機(jī)、PC一樣較成熟的設(shè)計(jì)框架，我覺得蘋果的tvOS模版規(guī)范做的比較穩(wěn)定，我們也應(yīng)該借鑒，形成自己的風(fēng)格。
文章來源：優(yōu)設(shè) 作者：lady珠珠
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
數(shù)據(jù)可視化即數(shù)據(jù)的圖形表示，旨在以更易于掌握和理解的有效方式傳達(dá)大量海量數(shù)據(jù)。從某種意義上說，數(shù)據(jù)可視化是原始數(shù)據(jù)和圖形元素之間的映射，它決定了這些元素的屬性如何變化。可視化通常是通過使用圖表，折線或點(diǎn)，條形圖和地圖來進(jìn)行的。
Data Viz是描述性統(tǒng)計(jì)的一個(gè)分支，但它需要設(shè)計(jì)，計(jì)算機(jī)和統(tǒng)計(jì)技能。
美學(xué)和功能齊頭并進(jìn)，以直觀的方式傳達(dá)復(fù)雜的統(tǒng)計(jì)信息。
Data Viz工具和技術(shù)對于做出以數(shù)據(jù)為依據(jù)的決策至關(guān)重要。
在形式和功能之間取得了很好的平衡。
每個(gè)STEM領(lǐng)域都將從了解數(shù)據(jù)中受益。
Jorge Rey的化石燃料Dataviz
如果我們能看到它，我們的大腦就可以內(nèi)在化并對其進(jìn)行反思。這就是為什么理解圖表和查看趨勢比閱讀大量的文檔要花費(fèi)大量時(shí)間和精力進(jìn)行合理化更容易和有效的原因。我們不想重復(fù)人類是視覺生物的陳詞濫調(diào)，但這是事實(shí)，可視化更加有效和全面。
在某種程度上，我們可以說數(shù)據(jù)Viz是講故事的一種形式，目的是幫助我們根據(jù)數(shù)據(jù)做出決策。這些數(shù)據(jù)可能包括：
追蹤銷售
識別趨勢
識別變化
監(jiān)控目標(biāo)
監(jiān)測結(jié)果
合并數(shù)據(jù)
秘密7 –塞爾吉奧·費(fèi)爾南德斯（Sergio Fernandez）提出離婚可視化的理由
數(shù)據(jù)可視化對于每天處理大量數(shù)據(jù)的公司很有用。必須立即顯示您的數(shù)據(jù)和趨勢。勝過瀏覽龐大的電子表格。當(dāng)趨勢立即脫穎而出時(shí)，這也可以幫助您的客戶或觀看者理解它們，而不會迷失在混亂的數(shù)字中。
話雖如此，Data Viz適用于：
年度報(bào)告
簡報(bào)
社交媒體微敘事
信息手冊
研究
趨勢販運(yùn)
SciViz
燭臺圖，用于財(cái)務(wù)分析
確定路線
可以看到數(shù)據(jù)可視化的常見情況是在銷售和營銷，醫(yī)療保健，科學(xué)，金融，政治和物流中。
娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金統(tǒng)計(jì)信息圖
簡短的答案：決策。數(shù)據(jù)可視化具有快速識別模式和解釋數(shù)據(jù)的不可否認(rèn)的好處。更具體地說，它是確定以下情況的寶貴工具。
識別變量關(guān)系之間的相關(guān)性。
獲得有關(guān)受眾行為的市場見解。
確定價(jià)值與風(fēng)險(xiǎn)指標(biāo)。
隨時(shí)間監(jiān)視趨勢。
通過頻率檢查速率和潛力。
應(yīng)對變化的能力。
太空垃圾-BBC科學(xué)焦點(diǎn)，作者：Federica Fragapane
您可能已經(jīng)猜到了，Data Viz不僅僅是簡單的餅圖和圖形，而且還具有視覺吸引力。該分支用于可視化統(tǒng)計(jì)信息的方法包括一系列有效類型。
地圖可視化是一種很好的方法，可以分析和顯示與地理位置相關(guān)的信息，并通過地圖準(zhǔn)確地將其呈現(xiàn)出來。這種直觀的方法旨在按區(qū)域分布數(shù)據(jù)。由于地圖可以是2D或3D（靜態(tài)或動態(tài)），因此可以使用多種組合來創(chuàng)建Data Viz地圖。
COVID-19支出數(shù)據(jù)可視化POGO，George Railean
但是，最常見的是：
區(qū)域地圖：顯示國家，城市或地區(qū)的經(jīng)典地圖。對于每個(gè)區(qū)域中的不同特征，它們通常以不同的顏色表示數(shù)據(jù)。
線圖：它們通常包含空間和時(shí)間，由于對特定場景進(jìn)行了分析，因此通常是路線選擇的理想選擇，尤其是該地區(qū)的駕車或出租車路線。
點(diǎn)地圖：這些地圖分發(fā)地理信息的數(shù)據(jù)。它們是企業(yè)確定區(qū)域中建筑物確切位置的理想選擇。
熱圖：它們根據(jù)特定屬性指示地理區(qū)域的權(quán)重。例如，熱圖可以按區(qū)域分布感染者的飽和度。
圖表以圖形，圖表和表格的形式顯示數(shù)據(jù)。由于圖形確實(shí)是圖表的子類別，因此它們經(jīng)常與圖形混淆。但是，兩者之間的差別很?。簣D形顯示數(shù)據(jù)組之間的數(shù)學(xué)關(guān)系，并且僅是表示數(shù)據(jù)的統(tǒng)計(jì)圖方法之一。
圖表數(shù)據(jù)可視化，作者：Madeline VanRemmen
順便說一句，讓我們談?wù)剶?shù)據(jù)可視化中最基本的圖表類型。
條狀圖
他們使用一系列的條形圖來說明數(shù)據(jù)。它們是較輕量數(shù)據(jù)的理想選擇，并遵循不超過三個(gè)變量的趨勢，否則，條形變得混亂且難以理解。
餅狀圖
這些熟悉的圓形圖按部分劃分?jǐn)?shù)據(jù)。切片越大，部分越大。它們非常適合描述整體的各個(gè)部分，它們的總和必須始終為100％。當(dāng)您需要顯示一段時(shí)間內(nèi)的數(shù)據(jù)發(fā)展或缺少任何部分的價(jià)值時(shí)，請避免使用餅圖。甜甜圈圖與餅圖具有相同的用途。
線形圖
他們使用一條線或多條線來顯示隨著時(shí)間的發(fā)展。它允許同時(shí)跟蹤多個(gè)變量。一個(gè)很好的例子是跟蹤品牌多年來的產(chǎn)品銷售情況。面積圖與折線圖具有相同的用途。
散點(diǎn)圖
這些圖表使您可以通過數(shù)據(jù)可視化查看模式。它們有兩個(gè)不同值的x軸和y軸。例如，如果您的x軸包含有關(guān)汽車價(jià)格的信息，而y軸包含有關(guān)薪水的信息，則正向或負(fù)向關(guān)系將告訴您某人的汽車所反映的薪水。
表格
與我們剛剛討論過的圖表不同，表格幾乎以原始格式顯示數(shù)據(jù)。當(dāng)您的數(shù)據(jù)難以以視覺方式呈現(xiàn)，并且旨在顯示應(yīng)該閱讀而不是可視化的特定數(shù)值數(shù)據(jù)時(shí)，它們是理想的選擇。
數(shù)據(jù)可視化| Aishwarya Anand Singh的養(yǎng)蜂與否
例如，圖表非常適合顯示特定區(qū)域內(nèi)一段時(shí)間內(nèi)特定疾病的數(shù)據(jù)，但是當(dāng)您還需要了解具體原因（例如原因，結(jié)果，復(fù)發(fā)，治療時(shí)間和治療方法）時(shí)，最好使用表格。
它們并沒有什么不同，因?yàn)樗鼈冊谝曈X上都代表數(shù)據(jù)。通常，您搜索信息圖表并找到標(biāo)題為“數(shù)據(jù)可視化”的圖像，反之亦然。但是，在許多情況下，這些標(biāo)題都不會引起誤解。這是為什么？
數(shù)據(jù)可視化僅由一個(gè)元素組成。它可以是地圖，圖表或表格。另一方面，信息圖表通常包含多個(gè)Data Viz元素。
與可能簡單或極其復(fù)雜且繁重的數(shù)據(jù)可視化不同，信息圖表簡單易行，并且面向更廣泛的受眾。即使對于信息圖表代表的研究領(lǐng)域之外的人，后者通常也是可以理解的。
有趣的是，數(shù)據(jù)Viz不提供敘述和結(jié)論，而是提供這些敘述和結(jié)論的工具和基礎(chǔ)。雖然信息圖表在大多數(shù)情況下提供了故事和敘述。例如，數(shù)據(jù)可視化地圖的標(biāo)題可能是“按區(qū)域劃分的空氣污染飽和度”，而帶有相同數(shù)據(jù)的信息圖則顯示為“ A區(qū)和B區(qū)在C國污染最嚴(yán)重”。
數(shù)據(jù)可視化可以在Excel中進(jìn)行，也可以使用其他自動生成設(shè)計(jì)的工具，除非將其設(shè)置為演示或發(fā)布。但是，信息圖表的美學(xué)非常重要，其設(shè)計(jì)必須吸引更廣泛的受眾。
在交互方面，數(shù)據(jù)可視化通常提供交互式圖表，尤其是在線形式的圖表。另一方面，信息圖表很少互動，通常是靜態(tài)圖像。
Skype通過可視化.com進(jìn)行可視化
該過程自然類似于創(chuàng)建信息圖表，并且圍繞了解您的數(shù)據(jù)和受眾。更準(zhǔn)確地說，這些是準(zhǔn)備有效的數(shù)據(jù)可視化以使您的查看者立即了解的主要步驟和最佳實(shí)踐。
準(zhǔn)備工作已經(jīng)完成了一半。在甚至開始可視化數(shù)據(jù)之前，必須確保您了解該數(shù)據(jù)的最后細(xì)節(jié)。
不可否認(rèn)的是，了解您的數(shù)據(jù)查看對象是另一個(gè)重要部分，因?yàn)椴煌娜藢π畔⒌奶幚矸绞讲煌?。您要為?shù)據(jù)可視化的對象是誰？他們?nèi)绾翁幚硪曈X數(shù)據(jù)？只需給他們一張餅圖就足夠了，否則您將需要更深入的可視化報(bào)告？
您正在可視化什么樣的信息，它能反映出您的目標(biāo)嗎？
最后，考慮要使用多少數(shù)據(jù)并加以考慮。
圖片來自Brodie Vissers
在上一節(jié)中，我們列出了可在數(shù)據(jù)可視化中使用的基本圖表類型。要確定最適合您工作的人，需要考慮的因素很少。
圖表中將有多少個(gè)變量？
您將為每個(gè)變量放置幾項(xiàng)？
值之間的關(guān)系是什么（時(shí)間段，比較，分布等）
話雖如此，如果您需要展示整個(gè)項(xiàng)目的各個(gè)部分，那么餅圖將是理想的選擇。例如，您可以使用它來展示特定產(chǎn)品的市場份額的百分比。但是，餅圖不適用于時(shí)間范圍內(nèi)的分布，比較和跟蹤趨勢。在這些情況下，條形圖，散點(diǎn)圖，s和折線圖更為有效。
另一個(gè)示例是如何在圖表中使用時(shí)間。使用水平軸會更準(zhǔn)確，因?yàn)闀r(shí)間應(yīng)該從左到右。它在視覺上更直觀。
Oberhaeuser的MagnaGlobal廣告市場海報(bào)
首先刪除所有不會增加價(jià)值并且基本上是圖表多余的數(shù)據(jù)。有時(shí)，您必須處理大量數(shù)據(jù)，這不可避免地會使您的圖表變得非常復(fù)雜且難以閱讀。不要猶豫，將您的信息分成兩個(gè)或多個(gè)圖表。如果這對您不起作用，則可以使用突出顯示或使用更合適的內(nèi)容更改整個(gè)圖表類型。
提示：使用條形圖和柱形圖進(jìn)行比較時(shí)，請按值（而不是字母順序）以升序或降序?qū)π畔⑦M(jìn)行排序。
圖片由薩曼莎·赫爾利（Samantha Hurley）
在每種可視化形式中，顏色都是您最好的朋友和最強(qiáng)大的工具。它們產(chǎn)生對比，重音，強(qiáng)調(diào)并直觀地引導(dǎo)眼睛。即使在這里，色彩理論也很重要。
設(shè)計(jì)圖表時(shí)，請確保不要使用超過5或6種顏色。除此之外，任何其他操作都將使您的圖表不堪重負(fù)，并且難以為觀眾閱讀。但是，您可以使用顏色強(qiáng)度來發(fā)揮自己的優(yōu)勢。例如，當(dāng)您在不同的時(shí)間段內(nèi)比較同一概念時(shí)，可以將數(shù)據(jù)從所選顏色的最淺陰影到其較深的顏色進(jìn)行排序。它會創(chuàng)建適合您時(shí)間線的強(qiáng)烈視覺效果。
選擇顏色時(shí)要考慮的事項(xiàng)：
不同類別的顏色不同。
系列中所有圖表的采用一致調(diào)色板，方便以后將進(jìn)行比較。
最好使用對色盲友好的調(diào)色板。
Jamie Kettle可視化塑料廢物污染數(shù)據(jù)
當(dāng)您想成為數(shù)據(jù)可視化設(shè)計(jì)中的佼佼者時(shí)，請多多發(fā)揮自己的靈感。查看優(yōu)秀的示例、信息圖、其他人的工作，并了解哪種方法最適合您需要實(shí)現(xiàn)的每種數(shù)據(jù)。
下圖這個(gè)Twitter帳戶數(shù)據(jù)可視化是一個(gè)很好的例子。同時(shí)，我們還將精選一些令人稱贊的示例，這些示例將使您有信心開始為數(shù)據(jù)創(chuàng)建視覺效果。
lilit Hayrapetyan創(chuàng)作的大數(shù)據(jù)紀(jì)錄片的人臉
作為另一種藝術(shù)形式，Data Viz為一些令人驚嘆的精心設(shè)計(jì)的圖表提供了沃土，這些圖表證明了數(shù)據(jù)也可以是美麗的?，F(xiàn)在，讓我們來看看一些例子。
我們從孟小偉的個(gè)人項(xiàng)目開始，介紹他玩《黑暗之魂3》的經(jīng)驗(yàn)。這是信息圖表和數(shù)據(jù)可視化也是個(gè)人設(shè)計(jì)工具的完美例子。這項(xiàng)研究非常龐大，但非常專業(yè)地歸類為針對不同概念的不同類型的圖表。所有數(shù)據(jù)可視化都使用相同的調(diào)色板進(jìn)行制作，并且在信息圖表中看起來很棒。
我的黑暗之魂3孟小偉在播放數(shù)據(jù)
凱蒂·西爾弗（Katie Silver）根據(jù)評論家和觀眾的評論匯總了有史以來最偉大的100部電影。可視化顯示了每部電影的關(guān)鍵數(shù)據(jù)點(diǎn)，例如發(fā)行年份、奧斯卡提名和獲勝、預(yù)算、利潤、IMDB得分、類型、拍攝地點(diǎn)、電影背景和制作工作室。所有電影均按發(fā)行日期排序。
凱蒂·西爾弗（Katie Silver）的100部最佳電影數(shù)據(jù)可視化
費(fèi)德里卡·弗拉加帕內(nèi)（Federica Fragapane）顯示了2017年全球50個(gè)最暴力城市的數(shù)據(jù)。這些項(xiàng)目根據(jù)人口在垂直軸上排列，并根據(jù)兇殺率在水平軸上排序。
這些數(shù)據(jù)可視化和插圖由Valerio Pellegrini為《透視》雜志制作。它們顯示了一個(gè)餅圖，其中包含行業(yè)細(xì)分以及對就業(yè)貢獻(xiàn)的散點(diǎn)圖。
視角雜志–家族企業(yè)by Valerio Pellegrini
該地圖顯示了太陽系中18000多個(gè)小行星的軌道數(shù)據(jù)。每個(gè)小行星都顯示在1999年除夕的位置，并按小行星的類型進(jìn)行了著色。
埃莉諾·盧茲（Eleanor Lutz）的太陽系軌道圖
KatjaFlükiger對頭條新聞的故事情有獨(dú)鐘。數(shù)據(jù)可視化旨在傳達(dá)銷售對算術(shù)的影響程度。該項(xiàng)目在馬里蘭大學(xué)藝術(shù)學(xué)院完成，目的是可視化對移民的引用，并對用詞選擇和上下文所暗含的價(jià)值判斷進(jìn)行顏色編碼。
標(biāo)題語義學(xué)KatjaFlükiger
該數(shù)據(jù)可視化用于回答月球是否引起地震。該圖顯示了根據(jù)月球的相位和軌道位置而發(fā)生的地震的時(shí)間和強(qiáng)度。
月亮與地震艾西瓦婭·阿南德·辛格（Aishwarya Anand Singh）
可視化效果顯示了從2003年到2015年發(fā)射的衛(wèi)星。該圖表示了專注于項(xiàng)目的機(jī)構(gòu)類型以及為其提供資金的國家。左側(cè)顯示了每年的發(fā)射次數(shù)和衛(wèi)星應(yīng)用次數(shù)。
有線英國–由Nanosats拍攝的黎明（Valerio Pellegrini）
數(shù)據(jù)可視化不僅是一種科學(xué)形式，而且還是一種藝術(shù)形式。其目的是幫助任何領(lǐng)域的企業(yè)快速理解復(fù)雜數(shù)據(jù)，并開始根據(jù)該數(shù)據(jù)做出決策。為了使您的圖表高效且易于閱讀，這一切都與了解您的數(shù)據(jù)和受眾有關(guān)。這樣，您就可以選擇正確的圖表類型，并使用可視化技術(shù)來發(fā)揮自己的優(yōu)勢。
文章來源：站酷 作者：ZZiUP
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
大屏可視化界面設(shè)計(jì)可謂是當(dāng)今行業(yè)、企業(yè)發(fā)展的見證，生動直觀地再現(xiàn)了行業(yè)、企業(yè)的全貌。不僅作為展示，方便了解、監(jiān)督；同時(shí)可以作為一個(gè)有效的管理平臺，帶來效益。大屏界面面向范圍廣，協(xié)同性好，易于被采用。下面幾個(gè)大屏的界面設(shè)計(jì)，沉穩(wěn)的背景上，加上亮色作為點(diǎn)綴和強(qiáng)調(diào)。既不失其風(fēng)格，又富有靈動性。
接下來為大家分享精美的大屏 UI設(shè)計(jì)案例：
藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計(jì)公司，公司對UI設(shè)計(jì)的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機(jī) ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)，用戶研究、交互設(shè)計(jì)等服務(wù)。
圖片均來源于網(wǎng)絡(luò)）
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
更多精彩文章：
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（一）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（二）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（三）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（四）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（五）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（六）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（七）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（八）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（九）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（十）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（十一）
大屏可視化界面設(shè)計(jì)可謂是當(dāng)今行業(yè)、企業(yè)發(fā)展的見證，生動直觀地再現(xiàn)了行業(yè)、企業(yè)的全貌。不僅作為展示，方便了解、監(jiān)督；同時(shí)可以作為一個(gè)有效的管理平臺，帶來效益。大屏界面面向范圍廣，協(xié)同性好，易于被采用。下面幾個(gè)大屏的界面設(shè)計(jì)，沉穩(wěn)的背景上，加上亮色作為點(diǎn)綴和強(qiáng)調(diào)。既不失其風(fēng)格，又富有靈動性。
接下來為大家分享精美的大屏 UI設(shè)計(jì)案例：
藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計(jì)公司，公司對UI設(shè)計(jì)的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機(jī) ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)，用戶研究、交互設(shè)計(jì)等服務(wù)。
圖片均來源于網(wǎng)絡(luò)）
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
更多精彩文章：
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（一）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（二）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（三）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（四）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（五）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（六）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（七）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（八）
大屏可視化界面設(shè)計(jì)可謂是當(dāng)今行業(yè)、企業(yè)發(fā)展的見證，生動直觀地再現(xiàn)了行業(yè)、企業(yè)的全貌。不僅作為展示，方便了解、監(jiān)督；同時(shí)可以作為一個(gè)有效的管理平臺，帶來效益。大屏界面面向范圍廣，協(xié)同性好，易于被采用。下面幾個(gè)大屏的界面設(shè)計(jì)，沉穩(wěn)的背景上，加上亮色作為點(diǎn)綴和強(qiáng)調(diào)。既不失其風(fēng)格，又富有靈動性。
接下來為大家分享精美的大屏 UI設(shè)計(jì)案例：
藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計(jì)公司，公司對UI設(shè)計(jì)的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機(jī) ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)，用戶研究、交互設(shè)計(jì)等服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
更多精彩文章：
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（一）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（二）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（三）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（四）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（五）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（六）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（七）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（八）
大屏可視化界面設(shè)計(jì)可謂是當(dāng)今行業(yè)、企業(yè)發(fā)展的見證，生動直觀地再現(xiàn)了行業(yè)、企業(yè)的全貌。不僅作為展示，方便了解、監(jiān)督；同時(shí)可以作為一個(gè)有效的管理平臺，帶來效益。大屏界面面向范圍廣，協(xié)同性好，易于被采用。下面幾個(gè)大屏的界面設(shè)計(jì)，沉穩(wěn)的背景上，加上亮色作為點(diǎn)綴和強(qiáng)調(diào)。既不失其風(fēng)格，又富有靈動性。
接下來為大家分享精美的大屏 UI設(shè)計(jì)案例：
藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計(jì)公司，公司對UI設(shè)計(jì)的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機(jī) ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)，用戶研究、交互設(shè)計(jì)等服務(wù)。
（圖片均來源于網(wǎng)絡(luò)）
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
更多精彩文章：
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（一）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（二）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（三）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（四）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（五）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（六）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（七）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（八）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（九）
大屏可視化界面設(shè)計(jì)可謂是當(dāng)今行業(yè)、企業(yè)發(fā)展的見證，生動直觀地再現(xiàn)了行業(yè)、企業(yè)的全貌。不僅作為展示，方便了解、監(jiān)督；同時(shí)可以作為一個(gè)有效的管理平臺，帶來效益。大屏界面面向范圍廣，協(xié)同性好，易于被采用。下面幾個(gè)大屏的界面設(shè)計(jì)，沉穩(wěn)的背景上，加上亮色作為點(diǎn)綴和強(qiáng)調(diào)。既不失其風(fēng)格，又富有靈動性。
接下來為大家分享精美的大屏 UI設(shè)計(jì)案例：
藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計(jì)公司，公司對UI設(shè)計(jì)的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機(jī) ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)，用戶研究、交互設(shè)計(jì)等服務(wù)。
（圖片均來源于網(wǎng)絡(luò)）
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
更多精彩文章：
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（一）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（二）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（三）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（四）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（五）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（六）
大數(shù)據(jù)可視化界面設(shè)計(jì)賞析（七）
數(shù)據(jù)可視化實(shí)踐案例幫助你思考在執(zhí)行可視化設(shè)計(jì)時(shí)需要注意哪些方面以及如何讓你的用戶理解可視化圖形。
數(shù)據(jù)可視化一直處于大熱的狀態(tài)，已成為互聯(lián)網(wǎng)產(chǎn)品的基本配置。它用于各種行業(yè)，從商業(yè)智能到信息傳達(dá)，幫助用戶更好的理解數(shù)據(jù)背后的故事。
我們的大腦善于處理可視化信息，這使我們更容易理解圖表或圖形中可視化的數(shù)據(jù)，而不是表格和電子表格中列出的數(shù)據(jù)。一個(gè)偉大的數(shù)據(jù)可視化應(yīng)該利用人類視覺系統(tǒng)的優(yōu)勢來呈現(xiàn)數(shù)據(jù)，以便數(shù)據(jù)被吸收和理解。它應(yīng)該考慮用戶對視覺處理的了解，提高并簡化用戶的數(shù)據(jù)體驗(yàn)。
目前有很多工具和框架可用于構(gòu)建數(shù)據(jù)可視化圖形，今天我們一起回歸可視化設(shè)計(jì)的基礎(chǔ)，了解是什么讓數(shù)據(jù)可視化有效？在設(shè)計(jì)數(shù)據(jù)時(shí)我們應(yīng)該遵循哪些指導(dǎo)原則？
以下 10 個(gè)要點(diǎn)和實(shí)踐案例將幫助你進(jìn)行思考，完成豐富、有洞察力的數(shù)據(jù)體驗(yàn)。
PART 01
可視化以視覺表現(xiàn)形式，將信息以概要形式抽提出來，提供上下文并描述數(shù)據(jù)中的關(guān)系。雖然設(shè)計(jì)師對給定的一組數(shù)據(jù)集中的模式和關(guān)系沒有任何影響，但他可以根據(jù)用戶的需求選擇顯示哪些數(shù)據(jù)以及提供怎樣的語境。畢竟，就像其他產(chǎn)品一樣，如果用戶無法使用它，那么可視化就毫無意義。
為新手用戶設(shè)計(jì)的可視化產(chǎn)品應(yīng)該是結(jié)構(gòu)化的、明確的和有吸引力的。他們應(yīng)該用文字直接說明受眾應(yīng)該從數(shù)據(jù)中得到什么。
轉(zhuǎn)換雙親的工作時(shí)間：媽媽 VS 爸爸
另一方面，面向?qū)＜矣脩舻目梢暬a(chǎn)品可以顯示更精細(xì)的數(shù)據(jù)視圖，以驅(qū)動用戶探索和發(fā)現(xiàn)。細(xì)節(jié)和數(shù)據(jù)密度應(yīng)該簡單明了。
工作來來往往：國民失業(yè)情況
PART 02
《紐約時(shí)報(bào)》網(wǎng)站上只有 10 - 15％ 參與可視化交互的用戶實(shí)際點(diǎn)擊了按鈕。《紐約時(shí)報(bào)》的圖形團(tuán)隊(duì)制作了一些業(yè)內(nèi)最好的可視化作品，但幾乎沒有人與這些作品互動。
這表明，在可視化設(shè)計(jì)中，我們不能依賴交互操作幫助用戶建立理解。關(guān)鍵數(shù)據(jù)不能隱藏在交互操作后面，而應(yīng)該明確的展示在圖表中。
然而，怎樣在可視化中融入交互比較好呢？
設(shè)計(jì)師應(yīng)該允許在圖表中整合更多數(shù)據(jù)（排除非關(guān)鍵數(shù)據(jù)），允許感興趣的用戶更深入地研究數(shù)據(jù)集。
Nathan Yau 的流動數(shù)據(jù)是在可視化中合理應(yīng)用交互操作的知名案例，在可視化行業(yè)中廣泛應(yīng)用。下圖是他在關(guān)于死亡原因和預(yù)期壽命的圖表應(yīng)用交互操作的案例，頂部 tab 可以切換數(shù)據(jù)展示維度，點(diǎn)擊曲線，可以看到對應(yīng)的數(shù)據(jù)。
2005 年至 2014 年的死亡率數(shù)據(jù)：死因如何因性別和種族而異
來源：https://flowingdata.com/2016/01/05/causes-of-death/
或者，交互可以用作吸引點(diǎn)，讓你的用戶在瀏覽圖表之前，就親自參與該項(xiàng)目。看看 Quartz 這款有趣的書寫和文化作品。這件作品首先要求讀者在文化形態(tài)的分析概述之前，簡單地繪制一個(gè)圓圈 ，這個(gè)圓圈展示了有效的可視化的特征。
畫圓圈的方式說了很多關(guān)于你的故事
同樣， The Pudding 最近發(fā)布了一個(gè)交互式可視化軟件，向讀者講述有關(guān)生日悖論的知識（生日悖論，指如果一個(gè)房間里有 23 個(gè)或 23 個(gè)以上的人，那么至少有兩個(gè)人的生日相同的概率要大于 50% ）。雖然大多數(shù)非統(tǒng)計(jì)學(xué)家可能會發(fā)現(xiàn)生日悖論，這是概率論中的一個(gè)標(biāo)準(zhǔn)問題，非常枯燥且不直觀，但這種可視化使得它看起來有趣且易于理解。創(chuàng)作者融入最近的用戶互動的方式使得整個(gè)體驗(yàn)非常具有關(guān)聯(lián)性。
生日悖論實(shí)驗(yàn)
這兩個(gè)在可視化產(chǎn)品中融入交互操作的案例都很成功，因?yàn)樗鼈兪褂媒换ёx者參與數(shù)據(jù)研究。
PART 03
視覺突出性，使視覺元素從周圍環(huán)境凸顯的特性，是數(shù)據(jù)可視化的強(qiáng)大工具。它可以用于引導(dǎo)用戶注意可視化中最重要的信息，以幫助防止信息過載。通過使用視覺突出一些細(xì)節(jié)并壓制其他細(xì)節(jié)，可以使我們的設(shè)計(jì)更清晰，更容易理解。
一些視覺變量 —— 顏色和大小 —— 是我們創(chuàng)造和控制視覺顯著性的關(guān)鍵。
色彩方案是數(shù)據(jù)可視化設(shè)計(jì)的關(guān)鍵因素。眾所周知，色彩特別易于視覺識別。我們可以使用溫暖，高飽和度的顏色來突出關(guān)鍵數(shù)據(jù)點(diǎn)，并應(yīng)用冷色調(diào)，使用低飽和度的顏色將不太重要的信息放到背景中。
2014：最熱的年份
尺寸也非常易于營造視覺突出性。較大的元素比較小的元素更有吸引力，因此要擴(kuò)大您希望用戶首先閱讀的元素，并縮小不太相關(guān)的文本和元素。
PART 04
Cleveland 和 McGill 在信息可視化方面的著名研究 —— 視覺編碼的有效性（即數(shù)據(jù)維度與視覺屬性的映射）。他們根據(jù)人們對視覺編碼的準(zhǔn)確感知程度，對不同類型的視覺編碼的識別程度進(jìn)行了排序，給出了以下（簡化的）列表：
1.位置
2.長度
3.角度
4.區(qū)域
5.顏色
這對數(shù)據(jù)可視化設(shè)計(jì)的意義在于，我們顯示定量信息的首選應(yīng)該是按位置進(jìn)行編碼（如經(jīng)典散點(diǎn)圖和條形圖所示）。與基于角度（如餅圖）或基于區(qū)域（如氣泡圖）的編碼相比，基于位置的編碼有助于用戶在更短的時(shí)間內(nèi)進(jìn)行更準(zhǔn)確的比較。
然而，這并不是說所有可視化都必須是條形圖或散點(diǎn)圖。在研究可視化數(shù)據(jù)的新方法時(shí)，牢記這些原則是個(gè)好主意。
我真正想要強(qiáng)調(diào)的是，顏色不應(yīng)該用于編碼定量信息，而是應(yīng)該用來編碼分類信息。也就是說，我們可以使用顏色來表示屬于不同類別的數(shù)據(jù)。
出生時(shí)的預(yù)期壽命
PART 05
無論你是否支持 Edward Tufte 在設(shè)計(jì)中使用極簡主義的極端方法，都需要不斷思考，如何消除圖表視覺上的混亂。通過在數(shù)據(jù)元素和非數(shù)據(jù)元素之間創(chuàng)建可視化對比，來讓您的數(shù)據(jù)大放異彩，就像 Nadieh Bremer 在他的獲獎(jiǎng)作品“美國出生時(shí)間”中所做的那樣。
嬰兒潮：白天工作時(shí)間出生高峰期
刪除不起任何作用的結(jié)構(gòu)元素使數(shù)據(jù)清晰（如背景、線條和邊框）。減弱必要的結(jié)構(gòu)元素（如軸、網(wǎng)格和刻度線），否則這些元素會與數(shù)據(jù)爭奪注意力。(網(wǎng)格為淺灰色，最寬設(shè)為 0.5 pt，軸為黑色或灰色，最寬設(shè)為 1 pt )
PART 06
圖表中的每個(gè)數(shù)據(jù)都使用圖例標(biāo)注，以便讀者理解它所代表的內(nèi)容，這樣的設(shè)計(jì)對嗎？
錯(cuò)。太多設(shè)計(jì)師依靠圖例來告訴用戶哪些符號或顏色代表圖表中的哪些數(shù)據(jù)。列舉圖例雖然對設(shè)計(jì)師來說很容易，但對讀者來說卻很難。它們迫使讀者在圖例和數(shù)據(jù)之間來回掃描，給讀者的記憶帶來不必要的壓力。
更好的方法是直接在圖表上標(biāo)記數(shù)據(jù)。作為設(shè)計(jì)師，你的工作就是完善體驗(yàn)，便于用戶閱讀。在下面的例子中，Nathan Yau 進(jìn)行了去除圖例的設(shè)計(jì)，創(chuàng)建了一個(gè)帶有大量直接標(biāo)簽的小型交互式多重顯示。
每人每日平均消費(fèi)量
最好的可視化講述著引人入勝的故事。這些故事通過圖表中的趨勢、相關(guān)性或異常值展示，圖表數(shù)據(jù)周圍的元素可以進(jìn)一步豐富故事內(nèi)容。這些故事將原始數(shù)據(jù)轉(zhuǎn)化為有用的信息。
從表面上看，似乎數(shù)據(jù)可視化完全與數(shù)字相關(guān)，但一個(gè)偉大的數(shù)據(jù)故事是無法用語言來講述的。信息傳遞清晰的視覺層次，才能一步一步地引導(dǎo)讀者閱讀數(shù)據(jù)。
例如，可視化的標(biāo)題，應(yīng)該明確闡明一個(gè)關(guān)鍵觀點(diǎn)，使讀者領(lǐng)會。分散在數(shù)據(jù)中的微小注釋，可以通過異常值或趨勢引起讀者注意，從而為關(guān)鍵觀點(diǎn)提供支撐。
我在這里要說的是：幫助用戶，確切地告訴他們在數(shù)據(jù)中尋找什么！
正如上一條建議提到的，我們可以在可視化中使用注釋來豐富數(shù)據(jù)故事。有時(shí)可以添加圖形元素來使這些注釋更有意義，以便將這些信息更直接地關(guān)聯(lián)到我們的數(shù)據(jù)。
以這張來自 Susie Lu 的圖片為例?！跋募敬笃焙汀皧W斯卡季”的數(shù)據(jù)重疊賦予了原本看似隨機(jī)的高峰和低谷以意義。它們幫助觀眾理解數(shù)據(jù)的重要性，比單獨(dú)使用字幕或注釋更直接。
2015 - 2017.08 票房趨勢：強(qiáng)大的開場和后期的爆發(fā)
PART 09
靜態(tài)可視化通常以 JPG 和 PNG 等位圖圖像格式發(fā)布，這對移動端用戶來說是一個(gè)明顯的挑戰(zhàn)。許多數(shù)據(jù)可視化的美妙之處在于它們的視覺細(xì)節(jié) —— 微小的數(shù)據(jù)點(diǎn)和微妙的編碼 —— 而這些細(xì)節(jié)許多在靜態(tài)格式的小屏幕上被丟失了。
例如：Accurat 工作室在諾貝爾獎(jiǎng)上的精美復(fù)雜的作品，在印刷和高分辨率視網(wǎng)膜顯示器上看起來非常棒的全尺寸，卻在移動設(shè)備上幾乎難以辨認(rèn)。
視覺數(shù)據(jù)
為移動體驗(yàn)設(shè)計(jì)，使用像 D3.js 或 Highcharts 這樣的 JavaScript 可視化庫構(gòu)建響應(yīng)式可視化，嘗試為印刷、桌面和移動設(shè)備多種載體創(chuàng)建相同的靜態(tài)可視化設(shè)計(jì)。
PART 10
今天談到的所有最佳實(shí)踐可以歸結(jié)為一件事：在復(fù)雜性和清晰度之間找到合適的平衡，以滿足受眾的需求。
制作精美的、探索性的可視化細(xì)節(jié)總是誘人的，但這不一定是最合適的方法。在設(shè)計(jì)圖形時(shí)要考慮周到 ，讓讀者的知識和目標(biāo)決定應(yīng)該包含哪些數(shù)據(jù)以及包含多少數(shù)據(jù)，并整理數(shù)據(jù)以講述想要講述的故事。
文章來源：站酷 作者：TCC設(shè)計(jì)情報(bào)局
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn