數據可視化設計的一些技巧
一、什么是數據可視化
把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化，數據可視化是為了更形象地表達數據內在的信息和規律，促進數據信息的傳播和應用。
在當前新技術支持下，數據可視化除了“可視”，還可有可交流、可互動的特點。數據可視化的本質是數據空間到圖形空間的映射，是抽象數據的具象表達。
二、什么是大屏數據可視化
大屏數據可視化是以大屏為主要展示載體的數據可視化設計。
“大面積、炫酷動效、豐富色彩”，大屏易在觀感上給人留下震撼印象，便于營造某些獨特氛圍、打造儀式感。原本看不見的數據可視化后，便能調動人的情緒、引發人的共鳴，傳遞企業文化和價值。
利用面積大、可展示信息多的特點，通過關鍵信息大屏共享的方式可方便團隊討論、決策，故大屏也常用來做數據分析監測使用。大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。
三、大屏數據可視化設計原則
設計服務需求
大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業務，所以大屏設計是在充分了解業務需求的基礎上進行的。
那什么是業務需求呢？
業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。
先總覽后細節
大屏因為大，承載數據多，為了避免觀者迷失，大屏信息呈現要有焦點、有主次。可以通過對比，先把核心數據拋給用戶，待用戶理解大屏主要內容與展示邏輯后，再逐級瀏覽二三級內容。部分細節數據可暫時隱藏，用戶需要時可通過鼠標點擊等交互方式喚起。
四、大屏可視化設計流程
1. 根據業務場景抽取關鍵指標
關鍵指標是一些概括性詞語，是對一組或者一系列數據的統稱。一般情況下，一個指標在大屏上獨占一塊區域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。
確定關鍵指標后，根據業務需求擬定各個指標展示的優先級（主、次、輔）。
2. 確立指標分析維度
同一個指標的數據，從不同維度分析就有不同結果。很多小伙伴做完可視化設計，發現可視化圖形并沒有準確表達自己的意圖，也沒能向觀者傳達出應有的信息，可視化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。
我們在選定指標后，就需要跟項目組其他小伙伴討論：我們的各個指標主要想給大家展示什么，更進一步的講，是我們想通過可視化表達什么樣的規律和信息。
我們可以從“聯系、分布、比較、構成”四個維度更有邏輯的思考這個問題。
1.聯系：數據之間的相關性
2.分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律
3.比較：數據之間存在何種差異、差異主要體現在哪些方面
4.構成：指標里的數據都由哪幾部分組成、每部分占比如何
3. 選定可視化圖表類型
當確定好分析維度后，事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里，篩選出最能體現我們設計意圖的那個就好了。選定圖表注意事項：易理解、可實現。
易理解：
就是可視化設計要考慮大屏最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。
可實現：
（1）我們需要了解現有數據的信息、規模、特征、聯系等，然后評估數據是否能夠支撐相應的可視化表現。
（2）我們設計的圖形圖表，要開發能夠實現。實際工作中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用Ps/Ai/Ae這些工具模擬時會發現比較困難。同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難。
所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計！一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、死磕不放。
4. 制作圖表
當確定了要使用哪些圖表做圖后，開始進入制作流程，影響最終圖表展現效果的元素一般分為兩個層面：
非數據層：
不受數據影響樣式的元素，比如說背景、網格線、外邊框等等。這類元素起到的是輔助閱讀作用，但如果不加處理全部放出，視覺上會顯得雜亂和不夠簡潔，干擾到你真正想展示的信息。對于這類元素，應該盡量隱藏和弱化。
隱藏
·去除不必要的背景填充
·去掉無意義的顏色變化
·去掉不必要的外框
弱化
·坐標軸淡色或隱藏
·網格線淡色或隱藏
數據層：
受數據影響樣式的元素，比如說柱狀圖的柱條長度，柱條顏色，柱條展示個數，氣泡圖氣泡大小等等，這類元素的展示效果和圖表本身的數據息息相關，一旦圖表本身的數據比較極端，有可能會使得最終視覺展現不盡如人意，我們無法改變具體的數據，是否就完全無法操控這些元素了呢？
精簡數據項
在做數據報告時，不管有多少數據項，為了完整和精確性，所有的內容都會顯示出來，但在大屏中，如此滿的數據展示，不但忽略了視覺體驗，還會讓用戶抓不住重點，對于餅圖來說，建議扇區個數不要超過5個，例如保留占比前5的扇區，剩下的非重點數據全部歸到“其他”。
保留前五或后五
如果柱狀圖的數據項過多，展示時會過于密集，建議先把數據項按照數值大小排序，只保留前五或后五的數據項。
5. 頁面布局、劃分
尺寸確立后，接下來要對設計稿進行布局和頁面的劃分。這里的劃分，主要根據我們之前定好的業務指標進行，核心業務指標安排在中間位置、占較大面積；其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。
6.可視化設計
根據選定的圖表類型進行合理的可視化設計。目前來講大屏可視化主要有：指標類信息點和地理類信息點兩大可視化數據。
指標類信息點可視化效果相對簡單易實現，而地理類信息點一般可視化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通的。
地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。
數據可視化大屏設計少不了動效，動效是可視化重要的組成部分，動效的增加能讓大屏看上去是活的，增加觀感體驗。但過分的動效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而弱化了數據的展示。
7.樣圖溝通確認
樣圖溝通環節，最初的樣圖不需要十分精致，我們可以把它理解為一個“低保真”原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點，然后又大修大改的情況。
因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來，然后根據樣圖效果嘗試確定五方面內容：
1.之前確立的布局在放入設計內容后是否依然合適；
2.確立的圖表類型帶入數據后是否仍然客觀準確；
3.根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受；
4.已有的樣式、數據內容、動效等在開發實現方面是否存在問題；
5.大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。
大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境，這里的很多問題只有設計稿投到大屏上才能夠被發現。所以這一步在樣圖溝通確認環節非常重要，有時候需要開發出demo，反復測試多次。
8.頁面定稿、開發
事實上頁面開發階段并不是到了這一步才進行，這里說的頁面開發僅指前端樣式的實現，實際上后臺數據準備工作在定義好分析指標后就已經開始進行了，而我們當前的工作是把數據接入到前端，然后用設計的樣式呈現出來。
一般開發用代碼寫不出的樣式或動效，都需要設計師切圖作支持：比如數據容器的邊框、小的動效、頁面整體大背景、部分圖標等。切圖按正常網頁設計標準切就可以了。
9.整體細節調優與測試
這部分是指頁面開發完成后，將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作。
視覺方面的測試：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。
性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展示是否存在奔潰、卡死等情況；后臺控制系統能否正常切換前端頁面顯示。
五、大屏設計的注意事項
1. 字體使用
字體優先使用系統默認字體，需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。
如果頁面是云端部署，需要嵌入字體包時，我們可以使用FontCreator這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優化頁面加載體驗，避免在替換默認字體的過程中出現頁面文字跳動等現象。
一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數字
2. 顏色搭配
（1）色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色
3. 頁面布局
主次分明、條理清晰、注意留白，合理利用大屏上各小的顯示單元，并盡量避免關鍵數據被拼縫分割。
六、問題
設計稿投到大屏上顯示效果不佳怎么辦？
大屏的分辨率、比例、使用環境、投射方式等均會對設計造成影響。理想情況下，我們應該在設計開始前，就能打開大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品，然后投上去查看實際效果。
因為大多數時候大屏都會存在色彩偏差，這時通過測試我們就能發現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現。如果不可以，那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環節及時測試也很重要。
文章來源：優設 作者：Captain相
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
語言交流是人類的本能，近幾年語音交互的迅速崛起讓產品更加人性化了。然而即使不考慮技術限制，人與機器的互動也不是只有聽或說單一模態的，因為這不符合我們的自然交流。目前，在居家場景中，用戶與電視的交互依然是對眾多信息-圖像、語音、觸感-的同時處理，它們分別對應著觀看、聽說和必要的遙控器操作。對UX設計師而言，如何讓電視端同時承載這樣多的感知設計是值得思考的。
語音體驗設計是一個很大的系統，從用研、功能、內容到交互、技術實現等等，而GUI的展示只是一種輔助模態。今天我想探討的是如何結合GUI與VUI展開界面設計。
文章分兩個部分：電視端VUI的搭建和一次改版迭代。
1. VUI的構成
2. 改版需求
3. 界面改版
4. 設計驗證
“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：是一種交互模態，讓人能夠或多或少通過語音交互與機器共同完成一系列任務；
領域：是將用戶想要完成的任務分為一些大的類型，比如視頻領域、音樂領域、百科領域等；
意圖：指某領域下的具體任務，比如視頻領域下的“我想看某部電影”，即為影視搜索意圖。
小明：“給我推薦點美劇”；
電視：“看看這些有沒有你喜歡的”，并推送一些熱門美??；
小明：考慮了一會兒....說“風騷律師吧”；
電視：起播《風騷律師》。
在這個故事中，除了眾所周知的VUI應具備的基礎功能-聽和說-以外，我們還需要定義更完整的體驗流程：
1. 小明如何開啟與電視的對話？因為電視機不能一直處于聆聽狀態，那樣很可能會識別用戶無意圖的語言，從而誤響應。
2. 電視端應該以什么方式推薦美??？如果只一個個播報片名，小明會記不住。
3. 推薦幾部合適？隔空喊話的情況下（遠場語音，下圖解釋），最好不需要再用遙控器翻頁。
4. 如果小明問的是其他領域問題，比如天氣、歌曲、球賽等，對應的媒體資源會涉及到多樣化的信息類型，如圖形、音頻等。不僅要統一設計風格，還要為未來可能支持的新領域/新意圖預留承載框架。
5. 如果小明的詢問得到了錯誤答復，或者一直未被答復，除了技術上提高識別率和語義理解程度，該怎么緩解用戶的茫然和憤怒情緒？
6. 當小明問了一個問題，不被理解，但換個問法卻成功理解。如何教會小明盡可能一次就做出能被識別的表達？
7. 我們能支持幾十個領域、幾百種意圖，怎樣能讓小明知道一共有哪些？
8. 如何結束對話，以免電視一直聆聽造成誤識別？
9. ......
為了回答以上問題，我們經過大量的模擬對話、競品分析和demo體驗，從而定義了電視端VUI的交互流程和組成模塊：
喚起、聆聽、思考、反饋、退出：
電視端的語音有三種對話狀態：
1. 單輪對話：每說一句話都需要喚起一次語音；
2. 多輪對話：一次喚起，多輪對話，但輪數受限于領域范圍；
3. 全雙工模式：一次喚起，多輪對話，輪數不限。
圖源網絡
這是本文重點描述的部分，電視端的GUI包括：
1. 狀態指示動畫：告知用戶當前狀態；
2. 提示詞條：提示用戶有哪些說法；
3. 用戶指令：用戶說法的文字識別結果，它讓人知道自己說的話是否被正確識別，若出了錯，用戶就知道原來是錯在這一環節；
4. 電視答復：文字+音頻；
5. 內容展示：所有媒資內容的呈現，如果沒有，則不展示。比如，天氣需要展示圖像，而交通限行用一句話回答即可。
舊版設計方案概覽：
語音GUI分為兩塊：語音基礎界面（必須）和內容展示區（可選），基礎界面包括上圖中的1234內容。
上圖效果是從17年逐漸搭建起來的框架，隨著需求增多、不同設計師的參與，設計越來越碎片。從易用性、視覺、開發維護難度和新功能兼容上，都存在很多問題：
1. 布局調整
由于電視用戶使用最多、最重要的功能是觀看影視，所以優先考慮視頻領域。因此布局調整的優先順序是：基礎界面>視頻領域>其他領域。
2. 建立視覺規范
建立原子化設計規范：配色方案、文字、間距、圓角、圖標，以及可復用和拓展的組件、模版。
3. 統一狀態動效
將上文的5種基礎狀態結合全雙工狀態統一設計，并為未來可能開發的主動提示等狀態，預留一席之地。
經過競品分析，窮舉了7種可能的布局方式：
這么多的優缺點該如何取舍？我們將痛點歸類，并根據通用的交互原則排列了優先級：
最后決定用B1-底部長矩形，但設計UI時需要借鑒B2那樣增加一點漸變過渡。而針對B1的痛點，需要重新設計小面積狀態指示動畫，并定義好低欄左側的識別文字與右側的提示詞條之間間距，從技術上，我們能做到跟進用戶說話和播報內容，說一句、展示一句。
電視端就像是一塊自由發揮的大畫布。視頻海報的擺放，得從幾個方面考慮：
1. 背景占比：半屏、全屏、半屏至全屏；
2. 導航方式：宮格（我們的海報尺寸是可以統一的，所以不考慮瀑布流，此階段也沒有專題分類，無需考慮tab欄和泳道欄）；
3. 海報方向：橫幅、豎幅；
4. 展示數量：是否超過一頁、海報尺寸。
市面上的競品就有這幾種方案：
行為數據顯示，我們用戶的視頻意圖分兩種：明確自己想看什么－“播放陳情令”，和不明確目標、向電視尋求推薦－“推薦點古裝劇”。我們分別稱為普通推薦和個性化推薦。由于前者在大多數情況下內容較少，所以用半屏，后者則用全屏。由于視頻會單獨設計一個APP，故最后定的普推和個推的坑位都是十張：
上面確定了視頻領域，而其他幾十個領域的信息，同所有平面設計的信息一樣，都是文字、圖片、圖標的排列組合，可以把它們按照原子化設計系統，從分子到模版逐步搭建：
這樣的結構，能確保20多個帶內容的領域都能從中找到對應的排列方式，模版如下表。這里看起來可能比較抽象，可以先看后面的UI效果圖再回來看這里。
實際界面中，內容可能會以前面的任何一種排列形式出現，給較少的內容使用大背景是浪費，反過來則擁擠雜亂，故不同內容需要不同的背景。依然還是窮舉了5種背景待選擇：
1. 卡片
2. 懸空半透明容器
3. 半屏羽化背景
4. 半屏實心背景
5. 全屏背景
按照痛點的優先級打分：
可見方案d-半屏實心背景最佳，但它最適合內容量級為中等的情況。所以我們考慮了是否也采用卡片和全屏來適應內容過少和過多的情況。最后結論是：只采用方案d和e，舍棄a，因為d的背景高度可以隨內容的多寡而變化。這樣以來，設計就不會很碎片化了。
到這里，已經確定了語音基礎界面（低欄）、各領域信息排列方式和背景。接下來就像搭積木把它們組合起來，這一步重點考慮的是內容是否上焦點和翻頁，這需要根據具體領域的資源參數和使用場景甄別。
正好在做這個項目時，我們電視端的視覺規范也在完善中，所以焦點色、文字、柵格等規范是直接從規范庫搬過來的。
實際效果：（抱歉GIF原圖太大了，只好展示一小截。手機拍攝有一點色差，實際的色彩還原度是很高的。）
我們找來40名用戶體驗新舊版本語音，進行了偏好測試和用戶反饋收集，部分反饋如下：
40名用戶中，有80%認為新版更好，分別有12.5%和7.5%的人認為兩者差不多和舊版更好。這次的改版中，UI&交互、動效、顏色&背景三者，體驗感分別提升了12%、2%和7%。
當時大家對新版評價最高的是：簡潔易看、空間利用率高、布局更好。
吐槽最多的問題是：背景色太深、配色單一，動畫不夠好看、不夠明顯。我們隨即對背景色做了優化，上圖看到的是優化后的效果。
后續兼容性驗證：新版結構能較好適應節假日換膚、半屏小程序、第三方App適配等多種需求。
文章復盤了電視端語音的基礎界面、視頻領域、其他領域和背景的重構過程。主要用到的方法有原子化設計理論、競品分析、痛點云圖（表格形式）和用戶偏好測試。對界面布局有較好的優化效果。最大的收獲是掌握了從最底層元素展開剖析的方法，這種細致的方法用來搭建界面設計會很穩固、全面，并且拓展性強。
經驗和不足：
1. 大屏經常強調沉浸式體驗，因而電視端疊加功能很多，但必須要注意分個主次。一是疊加內容不能太多，要么就不疊加、全屏展示。二是一定要考慮背景播的不確定因素，避免花亂；
2. 上面只是分析了二維平面，還有次級頁面、時序等三、四維的規則還未深入學習研究。這樣的研究會對所有App設計都有更好的指引。
3. 我們雖然已有了簡單的導航、柵格等布局規范，但內容展示區依然是毫無章法的自定義排列，智能電視產品還沒有像手機、PC一樣較成熟的設計框架，我覺得蘋果的tvOS模版規范做的比較穩定，我們也應該借鑒，形成自己的風格。
文章來源：優設 作者：lady珠珠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
數據可視化即數據的圖形表示，旨在以更易于掌握和理解的有效方式傳達大量海量數據。從某種意義上說，數據可視化是原始數據和圖形元素之間的映射，它決定了這些元素的屬性如何變化。可視化通常是通過使用圖表，折線或點，條形圖和地圖來進行的。
Data Viz是描述性統計的一個分支，但它需要設計，計算機和統計技能。
美學和功能齊頭并進，以直觀的方式傳達復雜的統計信息。
Data Viz工具和技術對于做出以數據為依據的決策至關重要。
在形式和功能之間取得了很好的平衡。
每個STEM領域都將從了解數據中受益。
Jorge Rey的化石燃料Dataviz
如果我們能看到它，我們的大腦就可以內在化并對其進行反思。這就是為什么理解圖表和查看趨勢比閱讀大量的文檔要花費大量時間和精力進行合理化更容易和有效的原因。我們不想重復人類是視覺生物的陳詞濫調，但這是事實，可視化更加有效和全面。
在某種程度上，我們可以說數據Viz是講故事的一種形式，目的是幫助我們根據數據做出決策。這些數據可能包括：
追蹤銷售
識別趨勢
識別變化
監控目標
監測結果
合并數據
秘密7 –塞爾吉奧·費爾南德斯（Sergio Fernandez）提出離婚可視化的理由
數據可視化對于每天處理大量數據的公司很有用。必須立即顯示您的數據和趨勢。勝過瀏覽龐大的電子表格。當趨勢立即脫穎而出時，這也可以幫助您的客戶或觀看者理解它們，而不會迷失在混亂的數字中。
話雖如此，Data Viz適用于：
年度報告
簡報
社交媒體微敘事
信息手冊
研究
趨勢販運
SciViz
燭臺圖，用于財務分析
確定路線
可以看到數據可視化的常見情況是在銷售和營銷，醫療保健，科學，金融，政治和物流中。
娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金統計信息圖
簡短的答案：決策。數據可視化具有快速識別模式和解釋數據的不可否認的好處。更具體地說，它是確定以下情況的寶貴工具。
識別變量關系之間的相關性。
獲得有關受眾行為的市場見解。
確定價值與風險指標。
隨時間監視趨勢。
通過頻率檢查速率和潛力。
應對變化的能力。
太空垃圾-BBC科學焦點，作者：Federica Fragapane
您可能已經猜到了，Data Viz不僅僅是簡單的餅圖和圖形，而且還具有視覺吸引力。該分支用于可視化統計信息的方法包括一系列有效類型。
地圖可視化是一種很好的方法，可以分析和顯示與地理位置相關的信息，并通過地圖準確地將其呈現出來。這種直觀的方法旨在按區域分布數據。由于地圖可以是2D或3D（靜態或動態），因此可以使用多種組合來創建Data Viz地圖。
COVID-19支出數據可視化POGO，George Railean
但是，最常見的是：
區域地圖：顯示國家，城市或地區的經典地圖。對于每個區域中的不同特征，它們通常以不同的顏色表示數據。
線圖：它們通常包含空間和時間，由于對特定場景進行了分析，因此通常是路線選擇的理想選擇，尤其是該地區的駕車或出租車路線。
點地圖：這些地圖分發地理信息的數據。它們是企業確定區域中建筑物確切位置的理想選擇。
熱圖：它們根據特定屬性指示地理區域的權重。例如，熱圖可以按區域分布感染者的飽和度。
圖表以圖形，圖表和表格的形式顯示數據。由于圖形確實是圖表的子類別，因此它們經常與圖形混淆。但是，兩者之間的差別很?。簣D形顯示數據組之間的數學關系，并且僅是表示數據的統計圖方法之一。
圖表數據可視化，作者：Madeline VanRemmen
順便說一句，讓我們談談數據可視化中最基本的圖表類型。
條狀圖
他們使用一系列的條形圖來說明數據。它們是較輕量數據的理想選擇，并遵循不超過三個變量的趨勢，否則，條形變得混亂且難以理解。
餅狀圖
這些熟悉的圓形圖按部分劃分數據。切片越大，部分越大。它們非常適合描述整體的各個部分，它們的總和必須始終為100％。當您需要顯示一段時間內的數據發展或缺少任何部分的價值時，請避免使用餅圖。甜甜圈圖與餅圖具有相同的用途。
線形圖
他們使用一條線或多條線來顯示隨著時間的發展。它允許同時跟蹤多個變量。一個很好的例子是跟蹤品牌多年來的產品銷售情況。面積圖與折線圖具有相同的用途。
散點圖
這些圖表使您可以通過數據可視化查看模式。它們有兩個不同值的x軸和y軸。例如，如果您的x軸包含有關汽車價格的信息，而y軸包含有關薪水的信息，則正向或負向關系將告訴您某人的汽車所反映的薪水。
表格
與我們剛剛討論過的圖表不同，表格幾乎以原始格式顯示數據。當您的數據難以以視覺方式呈現，并且旨在顯示應該閱讀而不是可視化的特定數值數據時，它們是理想的選擇。
數據可視化| Aishwarya Anand Singh的養蜂與否
例如，圖表非常適合顯示特定區域內一段時間內特定疾病的數據，但是當您還需要了解具體原因（例如原因，結果，復發，治療時間和治療方法）時，最好使用表格。
它們并沒有什么不同，因為它們在視覺上都代表數據。通常，您搜索信息圖表并找到標題為“數據可視化”的圖像，反之亦然。但是，在許多情況下，這些標題都不會引起誤解。這是為什么？
數據可視化僅由一個元素組成。它可以是地圖，圖表或表格。另一方面，信息圖表通常包含多個Data Viz元素。
與可能簡單或極其復雜且繁重的數據可視化不同，信息圖表簡單易行，并且面向更廣泛的受眾。即使對于信息圖表代表的研究領域之外的人，后者通常也是可以理解的。
有趣的是，數據Viz不提供敘述和結論，而是提供這些敘述和結論的工具和基礎。雖然信息圖表在大多數情況下提供了故事和敘述。例如，數據可視化地圖的標題可能是“按區域劃分的空氣污染飽和度”，而帶有相同數據的信息圖則顯示為“ A區和B區在C國污染最嚴重”。
數據可視化可以在Excel中進行，也可以使用其他自動生成設計的工具，除非將其設置為演示或發布。但是，信息圖表的美學非常重要，其設計必須吸引更廣泛的受眾。
在交互方面，數據可視化通常提供交互式圖表，尤其是在線形式的圖表。另一方面，信息圖表很少互動，通常是靜態圖像。
Skype通過可視化.com進行可視化
該過程自然類似于創建信息圖表，并且圍繞了解您的數據和受眾。更準確地說，這些是準備有效的數據可視化以使您的查看者立即了解的主要步驟和最佳實踐。
準備工作已經完成了一半。在甚至開始可視化數據之前，必須確保您了解該數據的最后細節。
不可否認的是，了解您的數據查看對象是另一個重要部分，因為不同的人對信息的處理方式不同。您要為數據可視化的對象是誰？他們如何處理視覺數據？只需給他們一張餅圖就足夠了，否則您將需要更深入的可視化報告？
您正在可視化什么樣的信息，它能反映出您的目標嗎？
最后，考慮要使用多少數據并加以考慮。
圖片來自Brodie Vissers
在上一節中，我們列出了可在數據可視化中使用的基本圖表類型。要確定最適合您工作的人，需要考慮的因素很少。
圖表中將有多少個變量？
您將為每個變量放置幾項？
值之間的關系是什么（時間段，比較，分布等）
話雖如此，如果您需要展示整個項目的各個部分，那么餅圖將是理想的選擇。例如，您可以使用它來展示特定產品的市場份額的百分比。但是，餅圖不適用于時間范圍內的分布，比較和跟蹤趨勢。在這些情況下，條形圖，散點圖，s和折線圖更為有效。
另一個示例是如何在圖表中使用時間。使用水平軸會更準確，因為時間應該從左到右。它在視覺上更直觀。
Oberhaeuser的MagnaGlobal廣告市場海報
首先刪除所有不會增加價值并且基本上是圖表多余的數據。有時，您必須處理大量數據，這不可避免地會使您的圖表變得非常復雜且難以閱讀。不要猶豫，將您的信息分成兩個或多個圖表。如果這對您不起作用，則可以使用突出顯示或使用更合適的內容更改整個圖表類型。
提示：使用條形圖和柱形圖進行比較時，請按值（而不是字母順序）以升序或降序對信息進行排序。
圖片由薩曼莎·赫爾利（Samantha Hurley）
在每種可視化形式中，顏色都是您最好的朋友和最強大的工具。它們產生對比，重音，強調并直觀地引導眼睛。即使在這里，色彩理論也很重要。
設計圖表時，請確保不要使用超過5或6種顏色。除此之外，任何其他操作都將使您的圖表不堪重負，并且難以為觀眾閱讀。但是，您可以使用顏色強度來發揮自己的優勢。例如，當您在不同的時間段內比較同一概念時，可以將數據從所選顏色的最淺陰影到其較深的顏色進行排序。它會創建適合您時間線的強烈視覺效果。
選擇顏色時要考慮的事項：
不同類別的顏色不同。
系列中所有圖表的采用一致調色板，方便以后將進行比較。
最好使用對色盲友好的調色板。
Jamie Kettle可視化塑料廢物污染數據
當您想成為數據可視化設計中的佼佼者時，請多多發揮自己的靈感。查看優秀的示例、信息圖、其他人的工作，并了解哪種方法最適合您需要實現的每種數據。
下圖這個Twitter帳戶數據可視化是一個很好的例子。同時，我們還將精選一些令人稱贊的示例，這些示例將使您有信心開始為數據創建視覺效果。
lilit Hayrapetyan創作的大數據紀錄片的人臉
作為另一種藝術形式，Data Viz為一些令人驚嘆的精心設計的圖表提供了沃土，這些圖表證明了數據也可以是美麗的?，F在，讓我們來看看一些例子。
我們從孟小偉的個人項目開始，介紹他玩《黑暗之魂3》的經驗。這是信息圖表和數據可視化也是個人設計工具的完美例子。這項研究非常龐大，但非常專業地歸類為針對不同概念的不同類型的圖表。所有數據可視化都使用相同的調色板進行制作，并且在信息圖表中看起來很棒。
我的黑暗之魂3孟小偉在播放數據
凱蒂·西爾弗（Katie Silver）根據評論家和觀眾的評論匯總了有史以來最偉大的100部電影?？梢暬@示了每部電影的關鍵數據點，例如發行年份、奧斯卡提名和獲勝、預算、利潤、IMDB得分、類型、拍攝地點、電影背景和制作工作室。所有電影均按發行日期排序。
凱蒂·西爾弗（Katie Silver）的100部最佳電影數據可視化
費德里卡·弗拉加帕內（Federica Fragapane）顯示了2017年全球50個最暴力城市的數據。這些項目根據人口在垂直軸上排列，并根據兇殺率在水平軸上排序。
這些數據可視化和插圖由Valerio Pellegrini為《透視》雜志制作。它們顯示了一個餅圖，其中包含行業細分以及對就業貢獻的散點圖。
視角雜志–家族企業by Valerio Pellegrini
該地圖顯示了太陽系中18000多個小行星的軌道數據。每個小行星都顯示在1999年除夕的位置，并按小行星的類型進行了著色。
埃莉諾·盧茲（Eleanor Lutz）的太陽系軌道圖
KatjaFlükiger對頭條新聞的故事情有獨鐘。數據可視化旨在傳達銷售對算術的影響程度。該項目在馬里蘭大學藝術學院完成，目的是可視化對移民的引用，并對用詞選擇和上下文所暗含的價值判斷進行顏色編碼。
標題語義學KatjaFlükiger
該數據可視化用于回答月球是否引起地震。該圖顯示了根據月球的相位和軌道位置而發生的地震的時間和強度。
月亮與地震艾西瓦婭·阿南德·辛格（Aishwarya Anand Singh）
可視化效果顯示了從2003年到2015年發射的衛星。該圖表示了專注于項目的機構類型以及為其提供資金的國家。左側顯示了每年的發射次數和衛星應用次數。
有線英國–由Nanosats拍攝的黎明（Valerio Pellegrini）
數據可視化不僅是一種科學形式，而且還是一種藝術形式。其目的是幫助任何領域的企業快速理解復雜數據，并開始根據該數據做出決策。為了使您的圖表高效且易于閱讀，這一切都與了解您的數據和受眾有關。這樣，您就可以選擇正確的圖表類型，并使用可視化技術來發揮自己的優勢。
文章來源：站酷 作者：ZZiUP
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
大屏可視化界面設計可謂是當今行業、企業發展的見證，生動直觀地再現了行業、企業的全貌。不僅作為展示，方便了解、監督；同時可以作為一個有效的管理平臺，帶來效益。大屏界面面向范圍廣，協同性好，易于被采用。下面幾個大屏的界面設計，沉穩的背景上，加上亮色作為點綴和強調。既不失其風格，又富有靈動性。
接下來為大家分享精美的大屏 UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
大數據可視化界面設計賞析（一）
大數據可視化界面設計賞析（二）
大數據可視化界面設計賞析（五）
大屏可視化界面設計可謂是當今行業、企業發展的見證，生動直觀地再現了行業、企業的全貌。不僅作為展示，方便了解、監督；同時可以作為一個有效的管理平臺，帶來效益。大屏界面面向范圍廣，協同性好，易于被采用。下面幾個大屏的界面設計，沉穩的背景上，加上亮色作為點綴和強調。既不失其風格，又富有靈動性。
接下來為大家分享精美的大屏 UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
大數據可視化界面設計賞析（一）
大數據可視化界面設計賞析（二）
大數據可視化界面設計賞析（五）
大屏可視化界面設計可謂是當今行業、企業發展的見證，生動直觀地再現了行業、企業的全貌。不僅作為展示，方便了解、監督；同時可以作為一個有效的管理平臺，帶來效益。大屏界面面向范圍廣，協同性好，易于被采用。下面幾個大屏的界面設計，沉穩的背景上，加上亮色作為點綴和強調。既不失其風格，又富有靈動性。
接下來為大家分享精美的大屏 UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
大數據可視化界面設計賞析（一）
大數據可視化界面設計賞析（二）
大數據可視化界面設計賞析（五）
大屏可視化界面設計可謂是當今行業、企業發展的見證，生動直觀地再現了行業、企業的全貌。不僅作為展示，方便了解、監督；同時可以作為一個有效的管理平臺，帶來效益。大屏界面面向范圍廣，協同性好，易于被采用。下面幾個大屏的界面設計，沉穩的背景上，加上亮色作為點綴和強調。既不失其風格，又富有靈動性。
接下來為大家分享精美的大屏 UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
（圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
大數據可視化界面設計賞析（一）
大數據可視化界面設計賞析（二）
大數據可視化界面設計賞析（五）
大屏可視化界面設計可謂是當今行業、企業發展的見證，生動直觀地再現了行業、企業的全貌。不僅作為展示，方便了解、監督；同時可以作為一個有效的管理平臺，帶來效益。大屏界面面向范圍廣，協同性好，易于被采用。下面幾個大屏的界面設計，沉穩的背景上，加上亮色作為點綴和強調。既不失其風格，又富有靈動性。
接下來為大家分享精美的大屏 UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
（圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
大數據可視化界面設計賞析（一）
大數據可視化界面設計賞析（二）
大數據可視化界面設計賞析（五）
數據可視化實踐案例幫助你思考在執行可視化設計時需要注意哪些方面以及如何讓你的用戶理解可視化圖形。
數據可視化一直處于大熱的狀態，已成為互聯網產品的基本配置。它用于各種行業，從商業智能到信息傳達，幫助用戶更好的理解數據背后的故事。
我們的大腦善于處理可視化信息，這使我們更容易理解圖表或圖形中可視化的數據，而不是表格和電子表格中列出的數據。一個偉大的數據可視化應該利用人類視覺系統的優勢來呈現數據，以便數據被吸收和理解。它應該考慮用戶對視覺處理的了解，提高并簡化用戶的數據體驗。
目前有很多工具和框架可用于構建數據可視化圖形，今天我們一起回歸可視化設計的基礎，了解是什么讓數據可視化有效？在設計數據時我們應該遵循哪些指導原則？
以下 10 個要點和實踐案例將幫助你進行思考，完成豐富、有洞察力的數據體驗。
PART 01
可視化以視覺表現形式，將信息以概要形式抽提出來，提供上下文并描述數據中的關系。雖然設計師對給定的一組數據集中的模式和關系沒有任何影響，但他可以根據用戶的需求選擇顯示哪些數據以及提供怎樣的語境。畢竟，就像其他產品一樣，如果用戶無法使用它，那么可視化就毫無意義。
為新手用戶設計的可視化產品應該是結構化的、明確的和有吸引力的。他們應該用文字直接說明受眾應該從數據中得到什么。
轉換雙親的工作時間：媽媽 VS 爸爸
另一方面，面向專家用戶的可視化產品可以顯示更精細的數據視圖，以驅動用戶探索和發現。細節和數據密度應該簡單明了。
工作來來往往：國民失業情況
PART 02
《紐約時報》網站上只有 10 - 15％ 參與可視化交互的用戶實際點擊了按鈕?！都~約時報》的圖形團隊制作了一些業內最好的可視化作品，但幾乎沒有人與這些作品互動。
這表明，在可視化設計中，我們不能依賴交互操作幫助用戶建立理解。關鍵數據不能隱藏在交互操作后面，而應該明確的展示在圖表中。
然而，怎樣在可視化中融入交互比較好呢？
設計師應該允許在圖表中整合更多數據（排除非關鍵數據），允許感興趣的用戶更深入地研究數據集。
Nathan Yau 的流動數據是在可視化中合理應用交互操作的知名案例，在可視化行業中廣泛應用。下圖是他在關于死亡原因和預期壽命的圖表應用交互操作的案例，頂部 tab 可以切換數據展示維度，點擊曲線，可以看到對應的數據。
2005 年至 2014 年的死亡率數據：死因如何因性別和種族而異
來源：https://flowingdata.com/2016/01/05/causes-of-death/
或者，交互可以用作吸引點，讓你的用戶在瀏覽圖表之前，就親自參與該項目?？纯?Quartz 這款有趣的書寫和文化作品。這件作品首先要求讀者在文化形態的分析概述之前，簡單地繪制一個圓圈 ，這個圓圈展示了有效的可視化的特征。
畫圓圈的方式說了很多關于你的故事
同樣， The Pudding 最近發布了一個交互式可視化軟件，向讀者講述有關生日悖論的知識（生日悖論，指如果一個房間里有 23 個或 23 個以上的人，那么至少有兩個人的生日相同的概率要大于 50% ）。雖然大多數非統計學家可能會發現生日悖論，這是概率論中的一個標準問題，非?？菰锴也恢庇^，但這種可視化使得它看起來有趣且易于理解。創作者融入最近的用戶互動的方式使得整個體驗非常具有關聯性。
生日悖論實驗
這兩個在可視化產品中融入交互操作的案例都很成功，因為它們使用交互帶讀者參與數據研究。
PART 03
視覺突出性，使視覺元素從周圍環境凸顯的特性，是數據可視化的強大工具。它可以用于引導用戶注意可視化中最重要的信息，以幫助防止信息過載。通過使用視覺突出一些細節并壓制其他細節，可以使我們的設計更清晰，更容易理解。
一些視覺變量 —— 顏色和大小 —— 是我們創造和控制視覺顯著性的關鍵。
色彩方案是數據可視化設計的關鍵因素。眾所周知，色彩特別易于視覺識別。我們可以使用溫暖，高飽和度的顏色來突出關鍵數據點，并應用冷色調，使用低飽和度的顏色將不太重要的信息放到背景中。
2014：最熱的年份
尺寸也非常易于營造視覺突出性。較大的元素比較小的元素更有吸引力，因此要擴大您希望用戶首先閱讀的元素，并縮小不太相關的文本和元素。
PART 04
Cleveland 和 McGill 在信息可視化方面的著名研究 —— 視覺編碼的有效性（即數據維度與視覺屬性的映射）。他們根據人們對視覺編碼的準確感知程度，對不同類型的視覺編碼的識別程度進行了排序，給出了以下（簡化的）列表：
1.位置
2.長度
3.角度
4.區域
5.顏色
這對數據可視化設計的意義在于，我們顯示定量信息的首選應該是按位置進行編碼（如經典散點圖和條形圖所示）。與基于角度（如餅圖）或基于區域（如氣泡圖）的編碼相比，基于位置的編碼有助于用戶在更短的時間內進行更準確的比較。
然而，這并不是說所有可視化都必須是條形圖或散點圖。在研究可視化數據的新方法時，牢記這些原則是個好主意。
我真正想要強調的是，顏色不應該用于編碼定量信息，而是應該用來編碼分類信息。也就是說，我們可以使用顏色來表示屬于不同類別的數據。
出生時的預期壽命
PART 05
無論你是否支持 Edward Tufte 在設計中使用極簡主義的極端方法，都需要不斷思考，如何消除圖表視覺上的混亂。通過在數據元素和非數據元素之間創建可視化對比，來讓您的數據大放異彩，就像 Nadieh Bremer 在他的獲獎作品“美國出生時間”中所做的那樣。
嬰兒潮：白天工作時間出生高峰期
刪除不起任何作用的結構元素使數據清晰（如背景、線條和邊框）。減弱必要的結構元素（如軸、網格和刻度線），否則這些元素會與數據爭奪注意力。(網格為淺灰色，最寬設為 0.5 pt，軸為黑色或灰色，最寬設為 1 pt )
PART 06
圖表中的每個數據都使用圖例標注，以便讀者理解它所代表的內容，這樣的設計對嗎？
錯。太多設計師依靠圖例來告訴用戶哪些符號或顏色代表圖表中的哪些數據。列舉圖例雖然對設計師來說很容易，但對讀者來說卻很難。它們迫使讀者在圖例和數據之間來回掃描，給讀者的記憶帶來不必要的壓力。
更好的方法是直接在圖表上標記數據。作為設計師，你的工作就是完善體驗，便于用戶閱讀。在下面的例子中，Nathan Yau 進行了去除圖例的設計，創建了一個帶有大量直接標簽的小型交互式多重顯示。
每人每日平均消費量
最好的可視化講述著引人入勝的故事。這些故事通過圖表中的趨勢、相關性或異常值展示，圖表數據周圍的元素可以進一步豐富故事內容。這些故事將原始數據轉化為有用的信息。
從表面上看，似乎數據可視化完全與數字相關，但一個偉大的數據故事是無法用語言來講述的。信息傳遞清晰的視覺層次，才能一步一步地引導讀者閱讀數據。
例如，可視化的標題，應該明確闡明一個關鍵觀點，使讀者領會。分散在數據中的微小注釋，可以通過異常值或趨勢引起讀者注意，從而為關鍵觀點提供支撐。
我在這里要說的是：幫助用戶，確切地告訴他們在數據中尋找什么！
正如上一條建議提到的，我們可以在可視化中使用注釋來豐富數據故事。有時可以添加圖形元素來使這些注釋更有意義，以便將這些信息更直接地關聯到我們的數據。
以這張來自 Susie Lu 的圖片為例?！跋募敬笃焙汀皧W斯卡季”的數據重疊賦予了原本看似隨機的高峰和低谷以意義。它們幫助觀眾理解數據的重要性，比單獨使用字幕或注釋更直接。
2015 - 2017.08 票房趨勢：強大的開場和后期的爆發
PART 09
靜態可視化通常以 JPG 和 PNG 等位圖圖像格式發布，這對移動端用戶來說是一個明顯的挑戰。許多數據可視化的美妙之處在于它們的視覺細節 —— 微小的數據點和微妙的編碼 —— 而這些細節許多在靜態格式的小屏幕上被丟失了。
例如：Accurat 工作室在諾貝爾獎上的精美復雜的作品，在印刷和高分辨率視網膜顯示器上看起來非常棒的全尺寸，卻在移動設備上幾乎難以辨認。
視覺數據
為移動體驗設計，使用像 D3.js 或 Highcharts 這樣的 JavaScript 可視化庫構建響應式可視化，嘗試為印刷、桌面和移動設備多種載體創建相同的靜態可視化設計。
PART 10
今天談到的所有最佳實踐可以歸結為一件事：在復雜性和清晰度之間找到合適的平衡，以滿足受眾的需求。
制作精美的、探索性的可視化細節總是誘人的，但這不一定是最合適的方法。在設計圖形時要考慮周到 ，讓讀者的知識和目標決定應該包含哪些數據以及包含多少數據，并整理數據以講述想要講述的故事。
文章來源：站酷 作者：TCC設計情報局
藍藍設計的小編 http://www.syprn.cn
