雖然三維圖形帶來的立體感很強，但用在可視化設計中，很容易出現問題。

一方面，三維圖形具有X、Y和Z坐標，容易造成圖表間的遮擋關系，遮擋會掩蓋一部分的數據，讓精準比較數據信息變得困難。

另外，透視使對象看起來像是位于三維空間中，但在數據可視化中，它會造成錯誤的層次結構：前景圖形看起來很大，背景圖形很小，數據關系被不必要地扭曲。

設計要點：

三維圖形很有吸引力但可能會遮擋重要的數據信息，并扭曲數據間的比例關系；

如果沒有絕對需要盡可能使用二維圖形樣式。

2.數據太多

在設計中，很多人總想在一張圖表中盡可能多地展現內容，把各種數據信息聚合在一起。

這樣的想法本身沒什么錯誤，但重要的前提是要有清晰的認知，明確知道到底要展示哪些數據。

如果可視化中包含太多數據，信息的展現會變得不堪重負甚至難以理解，這樣的話包含的數據再多也沒有任何意義。

設計要點：

避免數據可視化的信息過載，如果一張圖表中包含的信息過多，反而會讓用戶混亂；

3.省略基線

一組數據往往各不相同，數據差值的大小也不確定。為了使可視化效果看著更舒服，有的設計師通過改變坐標軸比例來展示數據關系。

最常見的例子就是讓Y軸代表的數據不是從0開始，借此夸大數據之間的差異，讓數據的變化更加明顯。

設計要點：

圖表的美感再怎么重要，也要服務于精準的數據表現；

4.選擇錯誤的可視化方法

每個數據可視化方法都有自己的特點。例如餅圖適合用來比較一個整體中的不同部分，但不適合用來比較幾組不同的數據。

通過餅圖的比例劃分，雖然可以直觀地顯示三家企業的收益，但使用條形圖會讓這三家企業之間的差異更加明顯。

如果目的是為了顯示一段時間內的收入，那么折線圖會是比條形圖更好的選擇。

設計要點：

5.混淆關聯

數據可視化更高的價值在于探索和發現不同數據間的相關性，通過比較幾組不同的數據關系，找出其中的關聯性，從而得到一個更有根據的驗證結果。

顯示相關性最常用的方法是將幾組不同的數據疊加在同一個圖表上，但當疊加的數據數量過多時，圖表會變得難以識別。

另外一旦強行關聯幾種相似的數據，有可能造成結果的混亂。一個有意思的例子是冰激凌銷量的增加與暴力犯罪的激增有關，因為這兩者都是因為氣候變化造成的結果。

設計要點：

透過數據間的關聯性發現事物本質是有意義的，但要考慮數據間的關聯是否有依據、是否合理；

6.放大有利數據

數據的增長或下降和時間是不可分割的。放大時間范圍是很多公司經營中投機取巧的方法。

比如只在圖表上向用戶展示業績增長的4-6月份(上圖)，這樣看起來公司業績增長幅度特別大，但如果將X軸的時間縮小到一整年(下圖)，才會發現公司真實的經營狀況，4-6月份的業績增長僅僅代表了公司業績持續下跌中的小幅上漲。

設計要點：

避免放大的可視化效果與數據整體不一致；

7.避開常見的視覺聯想

視覺元素影響用戶的心理，圖標、色彩和字體都具有影響觀者感知的作用。

下圖的可視化描述了美國各個地區宗教信徒占所有居民的百分比，但使用的顏色與地圖的設計元素(藍色的水、綠色的植被和棕色的土地)太過相似。

▲ 分析數據可視化很耗費精力。在看到這樣的圖表時，我們第一時間聯想到的應該是國家的地形情況，可能很難在這個熟悉的認知下去重新理解這個圖表代表的其他含義。

設計要點：

8.過分糾結于數據可視化

數據可視化將難以表現的數字關系賦予了易于理解的形式。最理想的方式是可以通過可視化清晰、簡潔地傳達數據關系。

但是并不是所有的數據都需要使用可視化來表現，有時候一個簡單的數據搭配一個流行的顏色就足以說明問題。

設計要點：

數據可視化是一種交流工具。像其他所有工具一樣，有時它是合適的，有時可能另一種工具更適合。

為回饋一直以來關注和支持Clip設計夾的讀者，將免費贈送3本《寫給UI設計師看的數據可視化設計》書籍給大家，幫助大家更好地學習數據可視化設計。

參與方式：詳見原文。

作者：Clippp

轉載請注明：學UI網》數據可視化設計常出現的錯誤，你一定要避免！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

轉載請注明：學UI網》數據之美：地理空間數據可視化II

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

標準圓環圖

圖表中間空心的部分用來展示數據的總數，用圓環的弧長和顏色表示不同數據的占比，圖表旁邊有圖例用來解釋說明。

布爾圓環圖

布爾圓環圖就像是給圓環圖做了布爾運算，只表示正負兩個值。

比如想重點突出完成率，就使用綠色圓環來表示68%的完成率，圓環其他部分為灰色，同理想重點突出反彈率，就使用紅色圓環來表示83%的反彈率，圓環其他部分為灰色。

圓環中心部分用來顯示相關數值的百分比和標簽。此外布爾圓環圖不需要額外添加圖例。

標簽圓環圖

圓環圖交互狀態分析 

懸停狀態

在標準圓環圖中，鼠標懸停在圓環圖上時，跳出分段名稱+百分比+數量值的彈窗。在標簽圓環圖中，懸停的圓環部分突出顯示，其余部分淡出處理。

點選狀態

圖表段可以是交互式的，點擊對應的分段時，右側的圖例也會同步高亮顯示。

焦點狀態

焦點狀態和上面提到的懸停狀態類似，唯一的區別在于，焦點狀態選中分段后有一個放大+描邊的圓環效果，突出展示數據。

空狀態

當沒有可用的數據時，應該在圖表上表明這一點，并給出提示引導用戶去點擊。

錯誤狀態

圓環圖使用指南 

使用分類顏色

保持圓環圖每部分顏色都使用醒目的顏色且具有對比性。在圓環圖中不建議使用同色系顏色來顯示數據，同色系顏色常用在直方圖中。

最多使用五個分段

當圓環圖包含多個數據分段時，圖標會變得難以理解，為保證圖標的清晰，盡可能將分段控制在 2-3 段，不要超過5段。如果數據過多，可以考慮使用柱狀圖、條形圖等其他形式的圖表。

保證數據準確

圓環圖的所有分段加起來的數值應該始終為 100%，沒有有多段數據占比過小，可以一起匯總到“其他”分段中。

按順序排列數據

圓環圖的份分段應從12點位置開始按最大值排序，然后按順時針方向依次按大小排列每個數值。右側的圖例頁應該從上到下保持一致的排序。

不要將時間分段

最后 

以上就是圓環圖的基本介紹，在之后的分享中，會為大家介紹折線圖、面積圖、條形圖、直方圖等一系列數據可視化圖表文章~

如果大家想看更多「數據可視化圖表」系列內容，記得及時關注接下來的文章~

最后給大家分享一份最新的iPhone13樣機模型源文件，有PSD、Figma和Sketch三種格式可以選擇，特別適合用來包裝作品集。

領取方式：關注公眾號，后臺回復【13樣機】獲取源文件

慢慢來比較快，希望對你有幫助！

作者：Clippp

轉載請注明：學UI網》數據可視化圖表設計指南：圓環圖

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

展示二：

展示三：

展示四：

展示五：

業務背景

以我們 CCO 體驗設計團隊為例，主要服務阿里體系的消費者、商家、經濟體等業務領域。隨著業務不斷擴大、用戶角色多、體驗復雜、設計師人力有限、定制化需求不斷增加，設計面臨嚴峻挑戰。

1、業務多：30多個產品應用

2、角色多：覆蓋消費者、客服小二、服務管理、業務運營、中臺管理、客戶  6大類用戶群體。

3、體驗復雜：設計師需兼顧用戶和客戶兩個視角。

從組織上，85% 設計師縱向支撐業務，15% 設計師橫向做標準化，反哺業務設計師。標準化實質解決的問題是保障基礎體驗一致性。

標準化怎么做

核心通過頁面梳理、抽象、分發、衡量，保障基礎體驗一致性。

案例實戰

以數據可視化場景為例，講述如何做標準化。

1、業務現狀

共有11個應用，涉及89個頁面。

2、問題

體驗不一致：各個工作臺頁面架構、組件、樣式野蠻生長，缺少規范導致體驗不統一。

低效：部分場景缺失，組件重復建設，大量定制；溝通協同內耗大，成本高。

3、策略

體驗統一：框架、組件、樣式。

提效：代碼化、工具、交付機制。

4、體驗統一

包括框架、組件、樣式。

框架

(1) 現有頁面收集

(2) 用戶場景分析

(3) 頁面歸類

結合用戶看數內容（例：概覽、分析、詳情）和交互形態（例：平鋪、下鉆），對頁面進行歸類。

(4) 確定典型布局

通過統計高頻復用形態，確定典型布局。

組件

(1) 頁面結構分析

組件的收斂，需要先對頁面分析，確定模塊層內容。例：模塊包含頁頭、篩選、圖表、表格。

(2) 模塊層分類

橫向收集全部業務，將模塊層分類。細分模塊擴展形態，放到對應的簍子里。

(3) 模塊專項治理

接下來，需要對每一個模塊進行專項治理。比如圖表模塊，再拆再抽象成指標、圖表、單選、多選 4類場景。場景里再對主體和變體（也就是擴展形態）分類。

樣式

(1) 確定優化內容

圍繞視覺凌亂，要做的便是完善設計語言。設計師需要結合自身技術底層，補充缺失規范。例如布局、色板、字體、動效。

(2) 確定組件范圍

通過統計高頻復用組件，確定需要梳理的組件范圍。

(3) 布局

圖例位置：線上有9種，通過從業務場景按閱讀順序劃分，最終收斂成2種。

組件高度：真實線上情況，只能看2個指標，高度規范缺失。

需要根據用戶分辨率調研，提煉典型分辨率。比如用戶是win系統，包含菜單欄、任務欄等默認高度，再減去本身頁面頁頭等默認高度，得到 3 檔。確定組件建議默認行高 240px。

軸標簽旋轉角度：現狀有順/逆時針兩種，通過分析標簽類型，結合閱讀順序、軸與標簽親密度，確定默認角度為順時針。

(4) 色板

通過場景梳理，確定不同組件使用的色板類型及缺失色板。

補充語義色板：從業務里抽象2類場景，指標和柱/餅/環場景，定義顏色。例如帶正面語義，用綠色，比如升、已到崗、正常。帶負面語義，用紅色，比如降、曠工、失敗。

(5) 字體

結合自身業務場景問題，從場景、版權、風格、識別、極值共5個維度選擇字體。

舉例場景一，縱向數據場景里，將市面上數據競品用到的字體都橫向鋪開嘗試，做排除法。比如din沒版權，蘋方非等寬字體，普惠102識別性弱。

舉例場景二，在核心數據呈現中，helvetica 品牌風格弱，普惠在1億以上極值過寬。

最終我們根據自身業務場景特征，用普惠和普惠102，運用在對應場景里。并同前端提煉規則。

(6) 動效

首先，需要確定動效價值，明確動效需要解決的問題。這里圍繞舒適度、活力、層級、反饋來講。

通過動效場景鏈路分析，確定優化范圍。

加載動效：圍繞讓用戶認知過程更為自然。通過組件橫向梳理、抽象圖形、組合樣式的思路，輸出方案。比如這里共梳理17種組件類型，抽象成9類，包括點、線、面、餅、環、柱、文本、圖標、詞云，再進行組合產出方案。

出場動效：通過業務分析、提煉場景、優化效果。比如這里共提煉 3類場景，有通用、監控、輿情。圍繞過渡不自然、卡頓、缺少情感化表達來優化效果。

瀏覽動效：通過提煉場景，來強化元素之間的層級與空間關系。比如單個組件、聯動、下鉆場景下，圍繞點擊感知弱、重點不突出、缺少懸停態來優化效果。

沉淀速度參數：將優化動效場景的速度參數，同前端約定規則沉淀組件庫。

5、提效

包含代碼化提效、工具提效、機制提效。

整體思路

從設計組內到技術產研的提效過程。

提效面向用戶依次是：組件設計師、業務設計師、前端、產品。

搭建目前還在進行中，這里主要從交付-工具-代碼化來分析。

交付內容

1、業務設計師：sketch/figma物料 (樣式、組件、區塊、模板、規則 )

2、業務設計師：kitchen工具（樣式、組件、區塊、模板）

3、組件工程師：組件規范/組件官網

交付機制

新需求：通過評估復用性、抽象、內審、沉淀物料。

現有業務：通過頁面梳理歸類、抽象、內審、沉淀物料。

6、衡量

從物理到行為層，包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。

總結

回歸課程，在B類業務里，服務多個產品、多用戶角色、體驗復雜的場景下，在定制化+標準化團隊陣型里，標準化實質解決的問題是保障60分基礎體驗一致性。

總結：B端體驗標準化包括物料的產出、交付以及衡量標準。

產出：包括框架、組件、樣式的收斂來梳理、抽象頁面。

交付：面向2類用戶群體，業務設計，需交付物料和工具。組件工程師，代碼化需提供組件規范，組件線上化需助力組件官網的建設。

衡量：一致性評分包括樣式、組件、框架及組件交互。

作者：CCO 設計

轉載請注明：學UI網》如何做B端體驗標準化：以數據可視化場景為例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司