作者：BYMD
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
常使用數據可視化的APP大致分為這幾類：「天氣類」「生理健康類」「財務記賬類」「數據分析類」「運動健身類」等。下面為大家介紹一些代表性的APP。
「天氣類」
「墨跡天氣」和「天氣通」根據城市實景和當下天氣對實時景觀圖進行模糊處理，增強產品的關聯性和代入感。
「生理健康類」
Clue會根據不同階段的心情做可視化，比如易孕期會用一些生理圖形提醒用戶你的狀態(tài)。這或許會給我們做自己的產品帶來一些思考。
你今天真好看是一款人工智能測膚美妝的應用，會使用各圖表闡明你的膚質水平。
「財務記賬類」
記賬類APP和理財類APP幾乎囊括了所有圖表樣式，折線圖、餅狀圖、條形圖都不在話下。
「專業(yè)數據分析類」
移動端設備的高速發(fā)展，使專業(yè)的數據分析平臺不再局限于PC端展示，于是移動端的數據分析軟件也應運而生。以下為友盟和神策商店圖。
「運動健身類」
移動設備在消費市場得到很大的變化——從手機到可穿戴設備。移動設備越來越實惠，實現了前所未有的大面積普及。
大家對步數、飲食、體重等數據也更加看重。市面上做的比較好的APP有：keep、薄荷健康、小米運動等。
同事給我推薦了一個應用—garmin connect(佳明)，它的界面繽紛、數據豐富、但是卻不會讓人感受到焦躁，這里面包含了一些設計原理。
介紹這么多數據可視化為主的APP，相信大家對數據可視化已經有了初步的感受。想要做好數據可視化應該怎么著手呢？以下結合實際案例進行說明。
在上篇文章我們了解到，顏色是有溫度和進退性的，不同的配色帶來不同的體驗。因此，可視化設計也需要考慮到配色對數據的影響。
「深色底」
深色底圖表通常為了營造一種氛圍和感覺，展示出的數據信息一般不會特別繁雜，數據選用亮度較高的色彩，這樣數據信息容易從深色中跳出來。
「淺色底」
如果需要清晰展示大量的數據，建議選用淺色底，淺色底上識別度相對較高。但需要注意的是：如果數據信息量太小，淺色底上會顯得頁面太空，這會讓用戶覺得你的平臺沒有內容或者熱度。當然，有經驗的設計師可以通過圖形質感、顏色等優(yōu)化。
下面就以小米運動為例：我們對2個頁面的閱讀效率進行比較。在以數據分析為主、有大量數據的頁面中，淺色底的頁面可讀性更高，閱讀效率也更高。
「彩色底」
有時為了讓頁面更加生動，我們將數據信息展示在大面積色塊上。商務金融類APP可采用用藍色、綠色系作為底色。運動類APP可選用的色彩自由度更高，偏活力的色彩，如橙色、黃色、橘色等都可以。
「圖片底」
圖片底：為了讓數據更有可信度和關聯度，在一些天氣類APP中經常會使用這種方式，圖片內容與數據信息產生關聯，提升可讀性。
每種圖表都會對應它適合的數據類型。作為設計師一定要了解它們之間的對應關系，使得設計有理有據。
「折線圖」
顯示為一組由單個線條連接的點；用于表示在一段連續(xù)時間內發(fā)生的大量數據波動，有單折線圖和多折線圖之分。
「曲線圖」
顯示為光滑的曲線；如果數據是連貫的，且點與點之間的數據具有分析價值，用曲線圖比用折線圖合適。
「餅圖&環(huán)形圖」
環(huán)形圖可以理解為空心的餅狀圖。常用于顯示部分相對總體的百分比。還可用來顯示進度加載等。
「條形圖&柱狀圖」
條形圖可以理解為橫著的柱狀圖。常用于展示同屬性的數據、可以對比其數值。
「熱度圖 / 熱力圖」
常用于地理位置分布統計，進而可以分析景區(qū)、站點、高速等的人流分布狀況。另外APP界面的點擊熱力圖可以清晰展示哪個功能被點擊的次數最多，給我們帶來體驗優(yōu)化的依據。
「雷達圖」
在比較多個類別程度和查看整體情況很適合，既可以查看自身整體情況，也可以對比多個方面的數據。這是一種展示效果不錯的數據表達方式，在展示整體綜合信息上很直觀。
「儀表盤」
儀表盤設計最初來源于工業(yè)設計的車輛控制臺，由于其專業(yè)、科技感的內核，現在多被一些強調科技、專業(yè)的產品所借鑒、例如網絡監(jiān)控、金融信用等。
了解基本的圖表類型后，接下來的重點是圖表的界面設計。移動設備的屏幕較之PC端小，用戶每次可接收的數據信息量小，所以如何有效運用圖表的設計是我們需要掌握的一項很重要的部分。
「單個數據」
頁面中就展示一個比較重要的數據，如何設計？圓形是一個不錯的選擇，因為它可以在頁面中形成視覺中心。不管是餅狀圖，還是環(huán)形圖，或是擁有視覺中心的雷達圖，都會讓頁面上呈現一個視覺重點。
上圖的案例，為了讓頁面更加豐富，采用重色將界面撐滿，求得視覺上的飽滿。
「多組數據」
手機屏幕空間有限，多組數據在展示的時候一定要盡量讓主次數據的圖表類型不一致。曲線圖、餅圖、環(huán)形圖、柱狀圖等基礎圖表，交替使用，這樣使得整個頁面層次清晰，內容豐富。最常見的錯誤就是設計師沒有對信息區(qū)分層級，所有的內容看起來都一樣重要。
當設計師面對幾大模塊展示大量的數據信息時，建議每個模塊單獨采用一種圖表類型，各個模塊的圖表類型均不同，這樣會減輕用戶對數據展示的疲勞度。
動效可以提升產品趣味性，尤其在展示大量數據信息時，使用動效能緩解閱讀壓力。數據圖表中常見的動效有以下幾種：
「動態(tài)呈現數據」
「導航切換」
「功能動態(tài)切換（點擊按鈕切換形態(tài)）」
「屏幕橫縱向切換數據」
寫在最后：希望我們都能好好把握數據可視化，把握數據時代，真正讓數據驅動業(yè)務，驅動發(fā)展。不過我們也不要為了使自己的設計看起來炫酷而加上各種發(fā)光漸變，過分的動效導致加載無能，因為完美的方案不是沒什么可以加，而是沒什么可以減。
作者：一個辛普森
轉載請注明：學UI網》用戶體驗大小事—數據可視化設計五點論
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖表的定義：可直觀展示統計信息的屬性，對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀、形象地可視化的手段。
英文叫法：Chart。
用戶對圖形的敏感程度遠遠大于文字，所以產品就需要把數據信息可視化，用簡單的圖形表示出更多的信息量，而圖表是數據可視化中最常用的表現形式。
接下來我們來介紹圖表的具體構成及元素解析。
圖表是由：標題、圖例、刻度軸、數據展示、網格線、提示信息、水位線、時間軸組成，每一個元素都有他存在的意義。在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內容即可。
3.1 標題
顧名思義，標題就是圖表的名字，標題是必不可少的元素。標題的內容一定要言簡意賅，不要太長，能兩個字寫清楚絕對不用三個字。
標題的常用位置有 3 個：左上角、頂部居中、底部居中。
一般情況下，標題字號 / 色值要突出一些，用戶第一眼看到 chart 的時候，要清晰的看到這個圖表是做什么的。
特殊情況下，如果需要對標題有額外解釋的話，兩種展現形式：
3.2 圖例
3.2.1 圖例的組成
顏色、名稱、數值、單位。
3.2.2 圖例的展現形式
圓形、開關、矩形、鼓包線、實線、虛線。
3.2.3 圖例的位置
從左至右、從上至下。
3.2.4 圖例的作用
3.2.5 圖例的顏色選擇
同一組圖例中，不要出現相近的顏色，否則在圖表顯示中分不清彼此。
產品使用中，要規(guī)范圖例顏色使用，一般分為兩種：
3.2.6 圖例過多時如何展示
3.2.7 共用圖例
如果多個 chart 的圖例一樣，可進行合并，減少冗余圖例。
3.2.8 圖例省略
如果 chart 中只有一個圖例的話，可省略。
3.2.9 圖例名稱限制
根據不同使用場景，為了更好的展示效果，要給圖例名稱設置一個最大值，超過最大值后省略展示。
3.3 坐標軸
坐標軸分為 X 軸和 Y 軸，常規(guī)情況下為 1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到2X+Y 或 X+2Y。
3.3.1 刻度值代表的意義
3.3.2 坐標軸使用規(guī)則
是否帶單位：
對齊方式（常用，但非必須）：
刻度值過多時如何顯示：
刻度值的選用一定要是同一個規(guī)律，禁止同距離的刻度值代表不同數據。
刻度點的樣式使用規(guī)則：刻度的線朝外。
3.4 數據展示
數據的展示是 chart 中最為明顯的地方，可以說如果只顯示一個元素的話，就是他了。
數據展示的使用規(guī)則：
3.5 網格線
3.5.1 網格線的作用
呼應坐標軸，美觀度。
3.5.2 網格線的使用規(guī)則
3.5.3 使用場景
橫、縱、橫縱結合、無網格線。
3.6 提示信息
通常情況下，提示信息用來標識出 chart 中重要點的數據信息，需要注意的是：重要信息盡量簡化，信息量不要太大，言簡意賅就好。
3.7 水位線
根據不同產品的使用場景，有的時候會用到閾值，當達到某個閾值后，就會觸發(fā)某種聯動。這個時候就需要有個水位線了，它起到警示的作用。
形式有兩種，實線和虛線，顏色的選取則取決于產品的警告級別。
水位線可以是一個，也可以是多個，視情況而定。
3.8 時間軸
時間軸可以靈活地調節(jié)刻度值的上下限，從而更精確的看到自己想看的數據。
時間軸的功能及限制不是很復雜，所以就不過多解釋了，需要用的話就用。
4.1 折線圖 line
4.1.1 定義
折線圖可以顯示隨時間（根據常用比例設置）而變化的連續(xù)數據，因此非常適用于顯示在相等時間間隔下數據的趨勢。
折線圖是通過線條的波動來表示數據的波動，主要體現的是數據隨著時間的推移而變動的圖表。
4.1.2 使用場景
常用于觀察一段時間內數據波動的浮動變化，比如：一天內內存的使用情況。
4.1.3 使用建議
4.2 面積圖 area
4.2.1 定義
面積圖和折線圖比較類似，區(qū)別在于面積圖把數據區(qū)域做了個面積劃分，讓數據的顯示更加清晰。
4.2.2 使用場景
面積圖展示盡量不要超過 3 個圖例，否則數據多的情況下，數據的展示會特別亂，影響觀看。
4.2.3 使用建議
4.3 柱狀圖 bar
4.3.1 定義
柱形圖，又稱長條圖、柱狀統計圖。用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常用于較小的數據集分析。
4.3.2 使用場景
4.3.3 使用建議
4.4 餅圖 pie
4.4.1 定義
餅圖僅排列在工作表的一列或一行中的數據，它是有一個總和數據，方面查看每個類別分別占總數據的百分比的一種圖表。
4.4.2 使用場景
4.4.3 使用建議
4.5 環(huán)形圖
4.5.1 定義
環(huán)形圖是由兩個不同大小的圓疊在一起，切割中心部分得到的一種圖形。
4.5.2 使用場景
4.5.3 使用建議
4.6 堆疊面積圖
4.6.1 定義
堆疊面積圖是把數據面積按順序逐步堆疊起來的一種圖形。
4.6.2 使用場景
常用于不同資源中流量 / 容量的使用。
4.6.3 使用建議
4.7 堆疊柱狀圖
4.7.1 定義
堆疊柱狀圖是把數據柱狀圖按順序逐步堆疊起來的一種圖形。
4.7.2 使用場景
常用于不同維度下相同幾個指標的展示。
4.7.3 使用建議
4.8 非常用圖表
上面介紹了常用的圖表的使用建議，但是圖表類型遠遠不止于此，還有很多非常用的圖表類型，這次我先給大家列出來，如果大家感興趣的話，我后面再寫一期冷門圖表的使用建議：
雷達圖，散點圖，K線圖，盒須圖，熱力圖，旭日圖，?；鶊D，樹圖，漏斗圖，儀表盤。
5.1 echartsecharts
https://echarts.apache.org/zh/index.html
5.2 highcharts
https://www.highcharts.com.cn/
5.3 antv
https://antv-g2.gitee.io/zh/examples/gallery
總結
Chart 是數據可視化必修課中最重要的模塊之一，不可忽略。只有了解每個 chart 的定義及使用場景，才能在產品中用到最合適的那一個。
作者：Luckgg
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
表格是一種數據可視化的一種形式，可以查看和處理大量數據，它主要承載了數據的收集、整理、組織、展示、對比和歸納。
2.1 易讀性
表格的層級一定要劃分的非常清晰，層級分明。你要讓用戶更關注的是數據本身，而不是花里胡哨的樣式。
2.2 可尋性
列表以易于瀏覽的邏輯排序，提供合適的搜尋組件幫助用戶快速查找信息。
2.3 高效性
表格要用最短的時間告訴用戶想要得到的信息。
2.4 靈活性
可以讓用戶根據自己的習慣及興趣自定義自己的表格展示，比如排序、篩選、調整表頭順序等功能。
外部區(qū)域：標題、操作區(qū)、篩選區(qū)；
內部區(qū)域：表頭、表體、表尾。
介紹完表格的構成，我們再來把每一個元素拆解出來詳細介紹。
4.1 標題
標題是整個表格內容概述的名稱，此名稱盡量簡潔明了，不要太長，能兩個字寫清楚絕對不用三個字。
如果標題名稱難以理解的話，可以加二級提示，有兩種常用樣式：tooltips（常用）、二級提示語。
標題的位置一般在左上角。
4.2 操作區(qū)
對表格內容的增刪改等操作的區(qū)域。
使用建議：
4.2.1 有且只有一個主操作
特殊情況下可以沒有主操作，但不能有兩個主操作。
4.2.2 樣式統一
同一個產品中，操作區(qū)樣式規(guī)范要保持一致。
4.2.3 操作的優(yōu)先級
根據使用的優(yōu)先級，把常用的操作放到一級展示，不常用的收到二級展示。
4.2.4 不同操作狀態(tài)區(qū)分要明確
不是所有的操作都是可以直接用的，比如有的操作在沒有選擇內容的時候是 Disable 狀態(tài)，那這時候就要和其他可操作的有明顯的樣式區(qū)別，否則容易讓用戶分不清可不可以操作。
4.2.5 刷新按鈕
有很多同學對這個操作是不是有些疑惑？有人覺得瀏覽器都有刷新功能啊，干嘛還要多此一舉再加個刷新。其實這個刷新功能還是很有必要的，這個刷新只針對于列表內的內容。
在有的后臺管理界面中，因為數據量很大，如果每次刷新都用瀏覽器自帶刷新的話，他會重新加載整個頁面的內容，很不好用。很多情況下，用戶只想重新加載一下列表的內容，那這個刷新就很好用啦。
同時刷新后要有即時反饋，告訴用你他點完操作后目前處于哪個階段中。
4.2.6 導出功能
此功能可以把列表內容導出為你想要的格式（一般為 word / pdf）。
數據量較大的列表中，導出功能可以很方便的把自己過濾的內容下載到本地進行其他需求的查看。
導出內容的范圍是哪些一定要事先想好，一般下載內容的范圍以下幾種：
4.2.7 導入功能
既然可以導出，就有導入。導入報表對文檔會有要求，一般都是固定格式的文檔，而且文檔與列表中的字段都可以一一對應上，才可以完美導入。導入功能中 word 和 excel 是最常用的格式。需要注意的是，導入文檔后最好有二次確認提示，告訴用戶上傳了哪些內容，同時該內容是否與現有的列表字段有沖突。
4.2.8 自定義內容
自定義分兩種：
如果表格內容比較多的情況下，這兩個功能是很有必要的，如果內容少，則可忽略這兩個功能。
那怎么區(qū)分內容的多與少呢？
我的理解：常用分辨率下，一屏可顯示完整內容的話為內容少；反之則內容多。
4.3 Tab（標簽切換）
可以快速切換不同維度下的表格內容。
使用建議：
4.4 篩選區(qū)
篩選區(qū)是對表格數據的主觀再處理，用戶根據篩選功能可以得到更精準的信息。
4.4.1 搜索功能：
4.4.1.1 模糊搜索 or 精準搜索
搜索首先要確定哪幾個字段可以被搜索到，名稱？編號？等等…
模糊搜索使用的頻率居多，畢竟有時候用戶不一定可以精準的記住想要搜索的準確信息。不過也不是絕對的，兩者皆可選擇，根據產品選擇即可。
4.4.1.2 單字段搜索
輸入單字段進行搜索，比較常用的方式之一。
4.4.1.3 多字段組合搜索
可以輸入多個字段進行組合搜索（取并集），一般交互方式為回車完成書寫。此方式比單字段搜索更加精準，數據量過大的時候優(yōu)勢就很明顯了。
4.4.1.4 切換類別搜索
可以設置幾個常用的類別來快速切換搜索的維度，方便用戶使用。
4.4.1.5 多類別組合搜索
多類別組合搜索適合更加復雜的列表內容，并且類別名稱會展示出來，可以比較清晰的看到用戶用的哪種類別名進行搜索的。
4.4.2 篩選的樣式
輸入框、下拉選擇、日期選擇器、單選、多選。
4.5 表頭
每一列列表的小標題，是對整列內容的描述。
表頭區(qū)域比較常用的幾個功能：排序、過濾、進一步解釋/說明、拖拽排序、拖拽增加 / 縮小列寬。
4.6 表體
表體承載了表格的主要內容，它的內容形式有很多：文本、icon、進度條、標簽等等。表體樣式分為兩種：斑馬線和線條分割。
使用建議：
4.7 表尾
表尾主要是展示表格的統計信息、分頁、跳轉頁面等。每頁顯示條數常規(guī)情況下默認為 10/頁，最多 200/頁，再多的話加載速度會變慢，影響使用體驗。
5.1 彈窗
5.2 抽屜
抽屜現在使用的頻率也是蠻高的，它的好處很明顯：在當前頁面彈出個抽屜，可展示的內容區(qū)域比彈窗多了很多，同時如果區(qū)域不夠用的話，還可以增加 Tab 來展示更多信息。而且不同資源的抽屜切換也比較方便。
缺點就是：并不能完全讓用戶的聚焦于某個信息的詳情，存在一定程度的信息干擾。
5.3 跳轉頁面
直接跳轉個新頁面作為詳情，好處就是可以展示更多的內容信息以及可以讓用戶更聚焦于當前內容。
缺點就是：新開頁面這種操作本身就比較重，如果在當前頁面可解決的事情，切記不要讓用戶新開頁面。
5.4 嵌套
嵌套就是上面提到的二級列表，它一般用于一級列表的內容補充，并且內容不宜過多。
在最后
在數據可視化中，表格是最常見的一種，它的知識點有很多，本篇文章只是到目前為止我的一些認知，如果有漏掉的知識點歡迎指教，我們都是學生，都要學習。
作者：Luckgg
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
那么我們還是老規(guī)矩，想要了解一個事物首先需要知道的是它的定義
較為籠統的來說數據可視化是一種由圖形、圖像、數字等元素組成的語言用于解釋、呈現目標數據之間的關系。從這個定義上來看，數據可視化從外觀層面來說是與圖形、圖像這些視覺元素密不可分，這也是數據可視化最為明顯的特征
而結合我們實際的生活與工作來說，數據可視化是一種以圖形符號為主要表現形式，將不可見的、抽象的、復雜的、枯燥的、專業(yè)的、不直觀的數據內容，有趣的、淺顯的傳遞給用戶的有效手段。用戶可以通過這樣的手段在數據完成自己的目標（例如對選定范圍內的數據進行分析發(fā)現數據的周期與規(guī)律、迅速找到自己目標節(jié)點中的關鍵數值、對比幾組數據以了解當下研究對象的情況等）這也是數據可視化最為明顯的價值
關于可視化的發(fā)展史上可追溯至1950年，當時人們利用計算機創(chuàng)建出了首批圖形圖表，可以說是數據可視化圖表最為早期的雛形，而在50-60年代的可視化中又以查爾斯·約瑟夫·米納德的《1812－1813對俄戰(zhàn)爭中法軍人力持續(xù)損失示意圖》為代表
該圖描繪了拿破侖的軍隊自離開波蘭到俄羅斯邊界后軍力損失的狀況，也是后世分析拿破侖對俄戰(zhàn)爭的重要數據分析資料，后來這種帶狀圖被稱為“?；鶊D”用來解釋能量的流動
而可視化真正被提到一個應用理論的高度是到了1987年布魯斯·麥考梅克和馬克沁·布朗所編寫的美國國家科學基金會報告《Visualization in Scientific Computing》（科學計算之中的可視化），其意在強調了基于計算機的可視化技術方法的必要性，此時的概念已經與現在我們所接觸的工作中的數據可視化是非常接近
到了90年代初人們發(fā)起了一個稱為“信息可視化”的研究領域旨在為許多應用領域（科學、商業(yè)、行政、財務、數字媒體）之中對于抽象的異質性數據集的分析工作提供支持，與前面提到的“科學可視化”交叉形成了現在耳熟能詳的“數據可視化”，此時這個詞匯才慢慢的被更多的專業(yè)領域的人所接受，并在之后互聯網的不斷發(fā)展中擴充著自己的分支
目前大量開始使用視覺可視化的原因其實非常簡單大致的原因可以分為需要處理的數據量太大了和人腦不夠用了
據不完全統計IBM公司每天有2.5億字節(jié)數據的吞吐量，麻省理工學院的研究科學家Andrew McAfee和Erik Brynjolfsson教授指出，如今在互聯網上傳遞的數據量比過去20年的總和還多，而且根據IDC預測，到2025年將有163萬億GB的數據
這是非常驚人的，而這么多需求的數據量單憑人腦的計算能力和處理能力來說是完全無法與之匹配的，研究表明人腦很難同時處理5組以上的抽象數據，所以這種單線程的處理方式就決定了需要借助外力
而對于用戶尤其是決策層的用戶來說在現實的工作場景中經常需要同時處理超過5組以上的數據并需要對其建立精準的分析模型以便于做出最準確的決策所以基于這樣的需求，數據可視化設計氤氳而生
基于數據可視化的需求來看，數據可視化的優(yōu)勢是顯而易見的，可以概括為兩點認知減負和傳遞賦能
認知減負是使用者在使用數據可視化工具時候的最直觀感受，當所面對的龐大的、復雜的枯燥海量數據集變成了圖像化、通俗化、形象化的視覺符號時我們會本能的放下對于面對再面對冰冷數據時候的抗拒和戒備，這是因為人對于一目了然更加接近自己熟悉的有趣事物的時候會更為親切和愿意去主動理解
而且被處理過、規(guī)劃過的簡潔直觀表現形式能更為直接的讓使用者看到數據與數據之間的關聯，進而分析出其潛在關系，在人對數據的認知這個環(huán)節(jié)上降低了識別成本和分析成本
傳遞賦能上圖像傳遞更接近人類最本能的獲ju取信息的方式，比起文字來說圖像更像是一個解密的步驟，通過解開文字描述這重“密碼”將最本質的信息進行呈現，而且對比文字，圖像所能夠承載的信息其實更為廣泛，而且人類讀圖的效率要遠遠高于閱讀文字
無論是一個約定俗成的語義符號形象還是符合語境的配色都能夠起到比文字直白表述更為強烈的深入人心效果，并且圖解的形式并不受限于語言的障礙，極大的降低了溝通成本
基于用戶的使用目標來說，使用數據可視化其實就像是一個偵探用“蛛網圖”輔助自己梳理思緒進行破案的過程：將一些有關的，但是較為零散信息數據用一根根線索線穿插起來，形成體系化的聯系，方便使用者迅速把握各個節(jié)點之間的關系進行推導
所以說我們在設計數據可視化的時候并不是對我們拿到的數據的無腦映射，而是要基于用戶的目標經過一定的處理和優(yōu)化后才能進行呈現，隨時記住我們是給用戶在打輔助，所以我們每一步的設計一定要基于用戶的思考
用戶的期望是能夠高效、清晰、簡潔地完成數據的對比、關鍵節(jié)點的查詢、每組數據之間的分析等一系列交互，提升自己的工作效率，降低自己的學習和使用成本
數據可視化的應用領域較為廣泛涉及醫(yī)療、統計、管理、金融、娛樂、人工智能等一系列領域，在UI的設計中我們最常接觸到的包括：PC后臺的數據概覽、數據可視化大屏、游戲UI、后臺實時監(jiān)控等。
當我們大致了解了數據可視化的歷史、使用原因、優(yōu)勢、用戶目標、應用領域后下面就要切入我們設計師最為關心的話題：我們在設計中的任務
數據可視化作為一門跨領域的學科，本身對于從業(yè)者而言就有著一定的綜合素質要求，但由于國內教育并沒有垂直教學學科所以在現在的階段從業(yè)人員一部分由純視覺設計專業(yè)的同學組成另一部分由純工科類型的專業(yè)的同學組成
于是這就導致了非視覺設計師在進行設計時，會將全副精力放在強數據的準確性、合理性上，從而讓視覺的易讀性上有一定的損失，表現形式也較為單一枯燥，視覺感官較差，反觀視覺設計師通常會將數據可視化在視覺表現形式上過度用力，雖然營造了很好的視覺體驗，但是從其實用度、可用性上來說會大打折扣
于是設計的難點很多時候就會集中在平衡視覺與實用之間的關系
通過以上分析，不難看出設計的主要目標，而面對這句較為抽象的“把握設計與實用之間的平衡”其實無外乎也就是拆解到功能和視覺這兩個方面
從功能上來說，我的目標是提升用戶的數據閱讀效率、讓用戶能夠迅速Touch到目標信息，提升交互效率，一切都是以結果為導向，以解決用戶問題為導向，一定記住人們不愿意接受未處理過的數據
而從視覺上來說，我們的目標是處理好在視覺上各個模塊之間的統一、透氣關系，同時將數據進行可視化的同時盡量提升感官上的審美體驗與傳達上的有趣
以上會作為后文中我們每一步設計的指導和檢驗和理性的方式，從實際操作的維度上來說二者也并不是五十比五十的分配，遵循的原則是：體驗一定要讓位于功能，所以在視覺的層面發(fā)揮的空間其實需要比較克制
了解了數據可視化的設計難點，明確了數據可視化的設計目標，那么我下面進入我們最重點的環(huán)節(jié)：可視化頁面案例制作，由于數據可視化的形式較多，這次我們以工作中經常接觸得到的PC頁面數據概覽頁為例
同樣的細化到數據概覽這個分支項目我們同樣需要明確了解其基礎定義和性質，嚴格意義上來說數據概覽部分屬于Dashboard design（儀表盤設計）的一種，其主要的目的和功能可分為分析和操作兩塊
所以從綜合的角度來說數據概覽部分可以理解為：1.其他模塊的摘要視圖，并顯示來自應用程序各個部分的關鍵信息，從這點上來說建議此模塊可以在其余模塊設計完后再進行設計，如此有利于設計師從一個全局的視角切入進行設計，理解上也會更加透徹，否則很可能會陷入在你設計其他模塊的時候不斷地返回對其進行修改的怪圈
2.他也是核心功能、常用功能的快速操作助手和快捷頁面跳轉(有點類似于導航)，交互功能的排布和關鍵信息的顯示其共同的要求點是顯而易見的，即明確各個模塊之間的層級，做好順序、優(yōu)先級排布這就需要你對業(yè)務目標有一定的了解，記住對業(yè)務目標不了解你的設計將毫無意義
你可以通過查詢一些內部資料、報告、也可以詢問產品經理等相關負責人，還可以通過用戶調研得出，這里不展開說，具體可以去參考我的另一篇關于用戶畫像的文章，在動手之前你需要搞清楚：各模塊之間優(yōu)先級如何、你需要在一張單獨的圖表內展示多少變量、想展示一段時間內的值還是項目和項目之間嗨是組與組之間、每段變量中有多少關鍵數據需要展示等問題
如下圖所示，在工作中我們經常接到需求的時候是面對一堆冗雜的數據集，組成了若干個模塊，但是正如上文所說我們并不能對其進行無腦的可視化映射，所以首先要做的就是要對各個模塊進行優(yōu)先級的梳理排序
明確了各個模塊的優(yōu)先級排布之后我們開始對每一個單獨模塊進行可視化轉化，即哪一個部分分別用什么類型的可視化形式表現，這一步非常類似于土地使用規(guī)劃，當你在將土地劃分完后，為每一塊土地定義其使用類型
想準確的將圖表與所要表現的數據進行對應現需要了解圖表本身所包含的基本元素
在這些元素中正常情況下一定在圖表中的有：標題、時間范圍、圖形主體，經常出現的有：坐標系、圖例、提示信息，有時候會有的有：切換選項和值域
知道了這些重要的基礎信息了，那么在面對這么多圖表的時候我們該如何正確的選擇來進行使用呢
其實和之前說的一樣：基于目的來進行思考，所謂的基于目的來進行思考也就是要明確你所確立的數據指標需要分析的維度，而日常使用的數據需要分析的維度無外乎：比較、構成、分布聯系
比較類圖表應該是大家最為熟悉的范疇，第一時間能夠想到的就是柱狀圖，這也是運用最為廣泛的圖表之一，經常出現在PC端之中，用于描述分類數據之間的對比，描述的數據可以是地區(qū)、品類甚至一個時間周期，但由于其擴展能力有限，所以一般不建議項目超過12條
條形圖與柱狀圖類似，看上去只是交換了X軸與Y軸，功能和承載數據種類較為類似，但不同的是，條形所能承載的項目數量相對于柱狀圖而言更多，由于其優(yōu)良的縱向延展性一般用于手機端較多，而且從上到下的閱讀方式符合人眼閱讀習慣，所以也會經常用于排行榜的設計中
分組條形圖是條形圖的衍生之一用于比較多個變量在不同區(qū)域之間的數量關系，比如當想比較同樣一款衣服和鞋子在四個門店中的一個季度的營業(yè)額時就可以使用分組條形圖
雙向條形圖表適合比較兩組以上的分類數據比較，和分組條形圖較為類似，但是由于自身外觀特征更適合用于比較兩組意義相反的數據，也正是如此，雙向條形圖的組內二級分類數量一般不要超過3條最好
折線圖與前者最大的不同就在于在坐標軸中加入了連續(xù)類別這個概念，數據基于時間等因素變得動態(tài)了起來，注重變化趨勢的展現
面積圖是折線圖的延伸，除了表示變化趨勢之外還能比較所選范圍內積累的值
玫瑰圖應該算是可視化圖表中的“網紅”，因為我們從小學的課本中就知道它還有一個別稱叫“南丁格爾玫瑰圖”它是一種圓形的直方圖，使用半徑長短表示數值大小，其特點就在于因為其獨特的外觀可以將數值之間的差距在視覺層面進行放大，和將坐標軸范圍縮小來提升視覺上數值的碾壓是一個道理，發(fā)布會吹水最愛，但是要注意的是這不是一個表示占比構成的圖，因為玫瑰圖的每一份角度是一樣的，一定要和餅狀圖等圖區(qū)分開來，它用來表示的還是數值與數值之間的大小
雷達圖經常用于分析一些多維的性能數據、評分數據，經常打游戲的朋友應該不陌生，有多少五邊形選手可以扣個1，每一項指標越接近圓心說明狀態(tài)越差，越向外說明越佳
子彈圖用于比較當前數值與目標之間的關系，比如看當前業(yè)績是否達標，也可以通過標記劃分區(qū)域來進行更好的評估
漏斗圖適用于業(yè)務流程比較規(guī)范、周期長、環(huán)節(jié)多的單流程單項分析，一定要有清晰的環(huán)節(jié)，比如監(jiān)控買家從瀏覽到最后下單的數量統計以求得轉化率，不適合無邏輯、無流程的分類對比
構成類圖表整體上來說主要用于觀察部分和整體的占比關系，最經典的莫過于餅狀圖，這個不用多說，通過每一份半圓角度所占整個圓的大小來表示部分和整體的關系，但是由于其所占面積較大，經常會讓視覺過于集中，影響注意力
相對于餅狀圖而言，環(huán)狀圖十分有效的避免的干擾視覺的問題，其本質是將餅圖中間掏空，功能與餅圖基本一致，但是視覺上做到了輕量化，目前在日常設計中較為常用
旭日圖相當于前面二者的結合，適用于展示多層級數據的占比關系，距離圓心越近代表層級越高，下一層級的總和構成上一層級，存在一定的父子層級關系
堆疊面積圖出了可以表達趨勢外，其優(yōu)勢在于能夠表達總量和分量的構成關系，堆疊面積圖上的最大的面積代表了所有的數據量的總和，是一個整體。各個疊起來的面積表示各個數據量的大小
堆疊柱狀圖的優(yōu)勢在于它既可以表達一級分類的比較，同時還能看出二級分類在各其一級分類中的占比，但是缺點在于二級分類并不是按照同一基準線對齊的，相比于堆疊面積圖更為常用
瀑布圖用表達兩個數值之間的變化過程，過程值為正的時候，向上加，過程值為負的時候向下減
分布聯系類地圖在這兩年在國人的心中其實已經非常熟悉了，因為疫情今年的地圖可視化的應用經常出現在我們的生活中，地圖可以結合不同的表達方式：
可以結合散點、可以結合動畫、還可以結合引導線以及熱力圖的方式，圖的形式使用視具體的業(yè)務需求來定
最后就是氣泡圖，這是在查看分布關系中最為經典的視覺模型，用氣泡的面積大小表示數量，結合輔助線可以更好地觀察分布情況
當我們對每種圖表的功能和使用范圍有了一個較為明確的認知之后，下面我們就可以對我們之前所規(guī)劃好的優(yōu)先級的模塊進行可視化形式（圖表）的匹配了
進行匹配過后，我們將對布局進行重構，整體重構需要遵循的原則是
從首屏曝光更多內容來說主要是因為基于分析類的數據概覽工作場景和Analytical dashboard自身特征決定的，用戶希望能夠通過僅僅一屏的的大小進行對各類信息的情況有基本的把控達到一眼全局的目的，其主要注意力都會放在首屏，所以我們需要盡可能的在首屏安排更多的信息
當然首屏內容也并不是越多越好，一般建議也盡量不要超過7組模塊，而在層級明確這塊兒主要是根據人眼閱讀習慣所產生的優(yōu)先級排布：正常情況下都是左上為優(yōu)先級最高，而右下優(yōu)先級較低，這是無數經典的眼動測試和設計總結產生的最常用結論，就不展開敘述了，所以當我們按照優(yōu)先級、首屏曝光更多內容的原則進行處理后會得到如上圖的布局
這主要是視覺層面的問題，統一透氣的要求在首頁概覽中可以依靠柵格系統來來解決，它可以有效的幫助頁面布局的對其保持頁面布局一致性，為頁面建立基礎布局框架，將頁面中的所有元素都捆綁在一個體系之中，同時還能有效解決適配問題
完成了大規(guī)劃之后，下面我們開始對一個一個的模塊進行拆解同樣的以目標指導設計，邊設計邊驗證
和大規(guī)劃一樣，單獨到每一個圖表同樣要時刻注意層級的梳理，銷售渠道部分很明確應該是運用一個折線圖的形式，由于業(yè)務目標上來說更關注銷售額而不是銷售額和訂單數的比較，所以我們選用了一個帶有切換選項的折線圖形式
但是我們會很容易發(fā)現的在讀圖時會出現較大的視覺干擾，并沒有能夠很好地突出重點信息，視覺層級不清晰、混亂
于是我們對沒有重點的視覺層級進行梳理，像之前劃分模塊那樣，對視覺元素進行高、中、低的P0、P1、P2的設定，提升易讀性
P0：層級最高的自然是重點信息突出部分，所以我們需要在其之上做加法，給予內容異形懸停樣式進行具體強調，配合投影加強視覺效果，有效傳遞用戶，拉開與別的元素的層級，同時數據部分用特殊字體并適當加大字號進行設計，方便用戶第一時間能夠看到所要強調的數據具體值
P1: 其次就是主體圖形部分，這是用戶需要看到的重要部分，在使用場景中會長時間盯視，所以采用更低的明度與更高的飽和色顏色確保易讀性，但是也不致于會讓用戶太晃眼產生視覺疲勞，最后考慮到該模塊所處位置屬于頁面中較為核心的地帶，給予一定的顏色透明度漸變裝飾，在強化主體圖形的同時不致于太顯單薄
P2：前兩者都是一定程度的做加法，那么層級最低的元素比那需要開始做減法，此時軸線、刻度、切換選項等元素需要弱化視覺層級，降低透明度，尤其是背后的刻度線與背景的明度對比大概控制在1.6:1上較為合適
銷售總額、訂單數、渠道數同屬于一個數據統計的范疇，最忌諱的就是把以上提供的三個信息給做平，讓用戶抓不住重點，面對這樣的情況還是一樣，確立需要突出的重點信息給予特殊文字和大小的設計，選擇合適的主體圖形
但在這里需要注意的是由于在這個模塊中P0是金額數、訂單數、渠道數這些重要值，所以可視化圖形需要適當為其讓步，不要放在閱讀中心位置，按照P1來進行處理，而訂單數、轉換率這樣的標題就成了P2需要適當降低透明度和文字大小，不干擾主要信息的表達
說到統一，最先想到的一定是色彩，無非也就是需要處理好對立統一關系，而這其中統一的比例又要大于對立，配色上盡量選用同類色系，不宜太過花哨，尤其是對于B端而言，建議在可能的情況下不要超過5種，而且主色、輔助色，對比色的比例建議控制在6:3:1的比例（但不絕對），既能做到有所區(qū)別又不致于過于絢麗干擾視覺
你的主色不一定要遷就你的品牌色，但是一定要是如上文說的盡量低明度高飽和，以適應于長時間的注視
顏色過后就是字體，字體字體的使用需要極為謹慎，如果可以盡量只出現一種字體（但不要超過三種），并且只采用基礎字體，正常情況下都是將其作為一個需要被降噪了的視覺元素來對待（比如降低透明度），在PC端中盡量也不要出現較多不同的字號，字重，造成沒有必要的視覺干擾
除了字體之外，在統一感的營造上卡片的布局結構也需要盡量保持一致，這是為了提升易用性，同一個產品內，相同布局會給予用戶相同交互、相同功能的暗示，也更容易培養(yǎng)用戶習慣，提升操作效率
呼吸感是留白的藝術，很考驗設計師的排版能力，在單獨的模塊內，元素與元素之間盡量不要用實線進行間隔，可以的話利用親密性原則通過元素間距的遠近進行布局
而柱狀圖的設計上，柱與柱之間的間距最好大于柱寬的1.5倍，這樣才顯得視覺上較為透氣，不致于太臃腫
最后就是模塊中的邊距留白部分，這點一定要重視，不然不僅你的版心會變散，還會嚴重影響你的頁面呼吸感
細節(jié)上首先要說的就是橫縱坐標軸上的文字，上面的文字一定不要過長，最好的方式是將文字進行精簡。然后橫、豎排對齊處理，如果實在不能精簡那么再進行斜排的方式
第二點就是橫縱坐標軸有的時候會因為需要展示的數據過多而過于密集影響閱讀，這個時候可以采用適當增加一個值域的劃定的方式來進行坐標間距的縮放
第三點就是，在排行榜等模塊可以適當增加一些小設計，比如金、銀、銅的設計，提升情感化元素的融入
第四點就是，盡量不要選用一些3D的酷炫效果來做可視化，因為這種效果很容易對數據進行遮擋和扭曲，不是非常適用于高效閱讀，也不適合PC頁面上的交互，而且也不利于開發(fā)，比較得不償失
當所有的模塊設計完成后，像拼高達一樣進行組裝，組裝完成后適當調整其過于干擾視覺的地方，然后進行自檢
自檢不只是從檢查你的視覺、你的模塊間的布局，更重要的是帶入使用角色來進行檢查，你可以模用戶使用中的各種需求場景，對已經制作好的頁面進行交互和閱讀，看是否能夠快速高效地完成使用目標
當然除了自己之外，你還能在有條件的情況下找專家用戶進行使用，即使記錄使用中存在的問題并及時進行調整，當初步使用大致無問題后便可以交付
1
好了以上就是在B端設計中對于數據可視化尤其是PC端數據概覽的設計探討，當然其實關于數據可視化的范圍還遠遠不止于此，感謝你能夠耐心看到最后，如果這對于你的工作有一點幫助那么備感榮幸，也很感謝留下你的交流，我們下一期見
參考：
《10 rules for better dashboard design》Taras Bakusevych
《Data Visualization-Best Practives and Foundation》Cameron Chapman
且曼B端產品設計 美芳老師 《數據可視化設計之視覺篇》
知網文庫
維基百科等
作者：核糖bro
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
雖然三維圖形帶來的立體感很強，但用在可視化設計中，很容易出現問題。
一方面，三維圖形具有X、Y和Z坐標，容易造成圖表間的遮擋關系，遮擋會掩蓋一部分的數據，讓精準比較數據信息變得困難。
另外，透視使對象看起來像是位于三維空間中，但在數據可視化中，它會造成錯誤的層次結構：前景圖形看起來很大，背景圖形很小，數據關系被不必要地扭曲。
設計要點：
三維圖形很有吸引力但可能會遮擋重要的數據信息，并扭曲數據間的比例關系；
如果沒有絕對需要盡可能使用二維圖形樣式。
在設計中，很多人總想在一張圖表中盡可能多地展現內容，把各種數據信息聚合在一起。
這樣的想法本身沒什么錯誤，但重要的前提是要有清晰的認知，明確知道到底要展示哪些數據。
如果可視化中包含太多數據，信息的展現會變得不堪重負甚至難以理解，這樣的話包含的數據再多也沒有任何意義。
設計要點：
避免數據可視化的信息過載，如果一張圖表中包含的信息過多，反而會讓用戶混亂；
一組數據往往各不相同，數據差值的大小也不確定。為了使可視化效果看著更舒服，有的設計師通過改變坐標軸比例來展示數據關系。
最常見的例子就是讓Y軸代表的數據不是從0開始，借此夸大數據之間的差異，讓數據的變化更加明顯。
設計要點：
圖表的美感再怎么重要，也要服務于精準的數據表現；
每個數據可視化方法都有自己的特點。例如餅圖適合用來比較一個整體中的不同部分，但不適合用來比較幾組不同的數據。
通過餅圖的比例劃分，雖然可以直觀地顯示三家企業(yè)的收益，但使用條形圖會讓這三家企業(yè)之間的差異更加明顯。
如果目的是為了顯示一段時間內的收入，那么折線圖會是比條形圖更好的選擇。
設計要點：
數據可視化更高的價值在于探索和發(fā)現不同數據間的相關性，通過比較幾組不同的數據關系，找出其中的關聯性，從而得到一個更有根據的驗證結果。
顯示相關性最常用的方法是將幾組不同的數據疊加在同一個圖表上，但當疊加的數據數量過多時，圖表會變得難以識別。
另外一旦強行關聯幾種相似的數據，有可能造成結果的混亂。一個有意思的例子是冰激凌銷量的增加與暴力犯罪的激增有關，因為這兩者都是因為氣候變化造成的結果。
設計要點：
透過數據間的關聯性發(fā)現事物本質是有意義的，但要考慮數據間的關聯是否有依據、是否合理；
數據的增長或下降和時間是不可分割的。放大時間范圍是很多公司經營中投機取巧的方法。
比如只在圖表上向用戶展示業(yè)績增長的4-6月份(上圖)，這樣看起來公司業(yè)績增長幅度特別大，但如果將X軸的時間縮小到一整年(下圖)，才會發(fā)現公司真實的經營狀況，4-6月份的業(yè)績增長僅僅代表了公司業(yè)績持續(xù)下跌中的小幅上漲。
設計要點：
避免放大的可視化效果與數據整體不一致；
視覺元素影響用戶的心理，圖標、色彩和字體都具有影響觀者感知的作用。
下圖的可視化描述了美國各個地區(qū)宗教信徒占所有居民的百分比，但使用的顏色與地圖的設計元素(藍色的水、綠色的植被和棕色的土地)太過相似。
▲ 分析數據可視化很耗費精力。在看到這樣的圖表時，我們第一時間聯想到的應該是國家的地形情況，可能很難在這個熟悉的認知下去重新理解這個圖表代表的其他含義。
設計要點：
數據可視化將難以表現的數字關系賦予了易于理解的形式。最理想的方式是可以通過可視化清晰、簡潔地傳達數據關系。
但是并不是所有的數據都需要使用可視化來表現，有時候一個簡單的數據搭配一個流行的顏色就足以說明問題。
設計要點：
數據可視化是一種交流工具。像其他所有工具一樣，有時它是合適的，有時可能另一種工具更適合。
為回饋一直以來關注和支持Clip設計夾的讀者，將免費贈送3本《寫給UI設計師看的數據可視化設計》書籍給大家，幫助大家更好地學習數據可視化設計。
參與方式：詳見原文。
作者：Clippp
轉載請注明：學UI網》數據可視化設計常出現的錯誤，你一定要避免！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
轉載請注明：學UI網》數據之美：地理空間數據可視化II
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
標準圓環(huán)圖
圖表中間空心的部分用來展示數據的總數，用圓環(huán)的弧長和顏色表示不同數據的占比，圖表旁邊有圖例用來解釋說明。
布爾圓環(huán)圖
布爾圓環(huán)圖就像是給圓環(huán)圖做了布爾運算，只表示正負兩個值。
比如想重點突出完成率，就使用綠色圓環(huán)來表示68%的完成率，圓環(huán)其他部分為灰色，同理想重點突出反彈率，就使用紅色圓環(huán)來表示83%的反彈率，圓環(huán)其他部分為灰色。
圓環(huán)中心部分用來顯示相關數值的百分比和標簽。此外布爾圓環(huán)圖不需要額外添加圖例。
標簽圓環(huán)圖
懸停狀態(tài)
在標準圓環(huán)圖中，鼠標懸停在圓環(huán)圖上時，跳出分段名稱+百分比+數量值的彈窗。在標簽圓環(huán)圖中，懸停的圓環(huán)部分突出顯示，其余部分淡出處理。
點選狀態(tài)
圖表段可以是交互式的，點擊對應的分段時，右側的圖例也會同步高亮顯示。
焦點狀態(tài)
焦點狀態(tài)和上面提到的懸停狀態(tài)類似，唯一的區(qū)別在于，焦點狀態(tài)選中分段后有一個放大+描邊的圓環(huán)效果，突出展示數據。
空狀態(tài)
當沒有可用的數據時，應該在圖表上表明這一點，并給出提示引導用戶去點擊。
錯誤狀態(tài)
使用分類顏色
保持圓環(huán)圖每部分顏色都使用醒目的顏色且具有對比性。在圓環(huán)圖中不建議使用同色系顏色來顯示數據，同色系顏色常用在直方圖中。
最多使用五個分段
當圓環(huán)圖包含多個數據分段時，圖標會變得難以理解，為保證圖標的清晰，盡可能將分段控制在 2-3 段，不要超過5段。如果數據過多，可以考慮使用柱狀圖、條形圖等其他形式的圖表。
保證數據準確
圓環(huán)圖的所有分段加起來的數值應該始終為 100%，沒有有多段數據占比過小，可以一起匯總到“其他”分段中。
按順序排列數據
圓環(huán)圖的份分段應從12點位置開始按最大值排序，然后按順時針方向依次按大小排列每個數值。右側的圖例頁應該從上到下保持一致的排序。
不要將時間分段
以上就是圓環(huán)圖的基本介紹，在之后的分享中，會為大家介紹折線圖、面積圖、條形圖、直方圖等一系列數據可視化圖表文章~
如果大家想看更多「數據可視化圖表」系列內容，記得及時關注接下來的文章~
最后給大家分享一份最新的iPhone13樣機模型源文件，有PSD、Figma和Sketch三種格式可以選擇，特別適合用來包裝作品集。
領取方式：關注公眾號，后臺回復【13樣機】獲取源文件
慢慢來比較快，希望對你有幫助！
作者：Clippp
轉載請注明：學UI網》數據可視化圖表設計指南：圓環(huán)圖
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
![[png 到 jpg 輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-f3034363eb.jpg)
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-3c7724dbd1.gif)
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-c455848d6a.gif)
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-80140352be.gif)
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-ef21c0f3fb.gif)
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-2f8ec163fd.gif)
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-8fc16aaa62.gif)
![[png 到 jpg 輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-c6c479369b.jpg)
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-7f26bdb32b.gif)
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-20d3386581.gif)
![[png 到 jpg 輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-2-39e8075afe.jpg)
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
業(yè)務背景
以我們 CCO 體驗設計團隊為例，主要服務阿里體系的消費者、商家、經濟體等業(yè)務領域。隨著業(yè)務不斷擴大、用戶角色多、體驗復雜、設計師人力有限、定制化需求不斷增加，設計面臨嚴峻挑戰(zhàn)。
1、業(yè)務多：30多個產品應用
2、角色多：覆蓋消費者、客服小二、服務管理、業(yè)務運營、中臺管理、客戶 6大類用戶群體。
3、體驗復雜：設計師需兼顧用戶和客戶兩個視角。
從組織上，85% 設計師縱向支撐業(yè)務，15% 設計師橫向做標準化，反哺業(yè)務設計師。標準化實質解決的問題是保障基礎體驗一致性。
標準化怎么做
核心通過頁面梳理、抽象、分發(fā)、衡量，保障基礎體驗一致性。
案例實戰(zhàn)
以數據可視化場景為例，講述如何做標準化。
1、業(yè)務現狀
共有11個應用，涉及89個頁面。
2、問題
體驗不一致：各個工作臺頁面架構、組件、樣式野蠻生長，缺少規(guī)范導致體驗不統一。
低效：部分場景缺失，組件重復建設，大量定制；溝通協同內耗大，成本高。
3、策略
體驗統一：框架、組件、樣式。
提效：代碼化、工具、交付機制。
4、體驗統一
包括框架、組件、樣式。
框架
(1) 現有頁面收集
(2) 用戶場景分析
(3) 頁面歸類
結合用戶看數內容（例：概覽、分析、詳情）和交互形態(tài)（例：平鋪、下鉆），對頁面進行歸類。
(4) 確定典型布局
通過統計高頻復用形態(tài)，確定典型布局。
組件
(1) 頁面結構分析
組件的收斂，需要先對頁面分析，確定模塊層內容。例：模塊包含頁頭、篩選、圖表、表格。
(2) 模塊層分類
橫向收集全部業(yè)務，將模塊層分類。細分模塊擴展形態(tài)，放到對應的簍子里。
(3) 模塊專項治理
接下來，需要對每一個模塊進行專項治理。比如圖表模塊，再拆再抽象成指標、圖表、單選、多選 4類場景。場景里再對主體和變體（也就是擴展形態(tài)）分類。
樣式
(1) 確定優(yōu)化內容
圍繞視覺凌亂，要做的便是完善設計語言。設計師需要結合自身技術底層，補充缺失規(guī)范。例如布局、色板、字體、動效。
(2) 確定組件范圍
通過統計高頻復用組件，確定需要梳理的組件范圍。
(3) 布局
圖例位置：線上有9種，通過從業(yè)務場景按閱讀順序劃分，最終收斂成2種。
組件高度：真實線上情況，只能看2個指標，高度規(guī)范缺失。
需要根據用戶分辨率調研，提煉典型分辨率。比如用戶是win系統，包含菜單欄、任務欄等默認高度，再減去本身頁面頁頭等默認高度，得到 3 檔。確定組件建議默認行高 240px。
軸標簽旋轉角度：現狀有順/逆時針兩種，通過分析標簽類型，結合閱讀順序、軸與標簽親密度，確定默認角度為順時針。
(4) 色板
通過場景梳理，確定不同組件使用的色板類型及缺失色板。
補充語義色板：從業(yè)務里抽象2類場景，指標和柱/餅/環(huán)場景，定義顏色。例如帶正面語義，用綠色，比如升、已到崗、正常。帶負面語義，用紅色，比如降、曠工、失敗。
(5) 字體
結合自身業(yè)務場景問題，從場景、版權、風格、識別、極值共5個維度選擇字體。
舉例場景一，縱向數據場景里，將市面上數據競品用到的字體都橫向鋪開嘗試，做排除法。比如din沒版權，蘋方非等寬字體，普惠102識別性弱。
舉例場景二，在核心數據呈現中，helvetica 品牌風格弱，普惠在1億以上極值過寬。
最終我們根據自身業(yè)務場景特征，用普惠和普惠102，運用在對應場景里。并同前端提煉規(guī)則。
(6) 動效
首先，需要確定動效價值，明確動效需要解決的問題。這里圍繞舒適度、活力、層級、反饋來講。
通過動效場景鏈路分析，確定優(yōu)化范圍。
加載動效：圍繞讓用戶認知過程更為自然。通過組件橫向梳理、抽象圖形、組合樣式的思路，輸出方案。比如這里共梳理17種組件類型，抽象成9類，包括點、線、面、餅、環(huán)、柱、文本、圖標、詞云，再進行組合產出方案。
出場動效：通過業(yè)務分析、提煉場景、優(yōu)化效果。比如這里共提煉 3類場景，有通用、監(jiān)控、輿情。圍繞過渡不自然、卡頓、缺少情感化表達來優(yōu)化效果。
瀏覽動效：通過提煉場景，來強化元素之間的層級與空間關系。比如單個組件、聯動、下鉆場景下，圍繞點擊感知弱、重點不突出、缺少懸停態(tài)來優(yōu)化效果。
沉淀速度參數：將優(yōu)化動效場景的速度參數，同前端約定規(guī)則沉淀組件庫。
5、提效
包含代碼化提效、工具提效、機制提效。
整體思路
從設計組內到技術產研的提效過程。
提效面向用戶依次是：組件設計師、業(yè)務設計師、前端、產品。
搭建目前還在進行中，這里主要從交付-工具-代碼化來分析。
交付內容
1、業(yè)務設計師：sketch/figma物料 (樣式、組件、區(qū)塊、模板、規(guī)則 )
2、業(yè)務設計師：kitchen工具（樣式、組件、區(qū)塊、模板）
3、組件工程師：組件規(guī)范/組件官網
交付機制
新需求：通過評估復用性、抽象、內審、沉淀物料。
現有業(yè)務：通過頁面梳理歸類、抽象、內審、沉淀物料。
6、衡量
從物理到行為層，包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。
總結
回歸課程，在B類業(yè)務里，服務多個產品、多用戶角色、體驗復雜的場景下，在定制化+標準化團隊陣型里，標準化實質解決的問題是保障60分基礎體驗一致性。
總結：B端體驗標準化包括物料的產出、交付以及衡量標準。
產出：包括框架、組件、樣式的收斂來梳理、抽象頁面。
交付：面向2類用戶群體，業(yè)務設計，需交付物料和工具。組件工程師，代碼化需提供組件規(guī)范，組件線上化需助力組件官網的建設。
衡量：一致性評分包括樣式、組件、框架及組件交互。
作者：CCO 設計
轉載請注明：學UI網》如何做B端體驗標準化：以數據可視化場景為例
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://sillybuy.com