轉載請注明：學UI網》B端產品-BI分析工具
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
1.柱狀圖
適用場景：它的適用場合是二維數據集（每個數據點包括兩個值x和y），但只有一個維度需要比較。
優勢：柱狀圖利用柱子的高度，反映數據的差異。肉眼對高度差異很敏感，辨識效果非常好。
劣勢：柱狀圖的局限在于只適用中小規模的數據集。
2.折線圖
適用場景: 折線圖適合二維的大數據集，尤其是那些趨勢比單個數據點更重要的場合。它還適合多個二維數據集的比較。
優勢：容易反應出數據變化的趨勢。
3.餅圖
適用場景：適用簡單的占比圖，在不要求數據精細的情況下可以適用。
劣勢：餅圖是一種應該避免使用的圖表，因為肉眼對面積大小不敏感。
4.漏斗圖
適用場景：漏斗圖適用于業務流程比較規范、周期長、環節多的流程分析，通過漏斗各環節業務數據的比較，能夠直觀地發現和說明問題所在。
優勢:能夠直觀地發現和說明問題所在。在網站分析中，通常用于轉化率比較，它不僅能展示用戶從進入網站到實現購買的最終轉化率，還可以展示每個步驟的轉化率。
劣勢:單一漏斗圖無法評價網站某個關鍵流程中各步驟轉化率的好壞。
5.地圖
適用場景：適用于有空間位置的數據集。
優劣勢：特殊狀況下使用。
6.雷達圖
適用場景：雷達圖適用于多維數據（四維以上），且每個維度必須可以排序。但是，它有一個局限，就是數據點最多6個，否則無法辨別，因此適用場合有限。
劣勢：需要注意的時候，用戶不熟悉雷達圖，解讀有困難。使用時盡量加上說明，減輕解讀負擔。
數據可視化使用小貼士
餅圖順序不當
（最好的做法是將份額最大的那部分放在12點方向，順時針放置第二大份額的部分，以此類推。）
2.在線狀圖中使用虛線
（虛線會讓人分心，用實線搭配合適的顏色更容易區分。）
3.數據被遮蓋
（確保數據不會因為設計而丟失或被覆蓋。例如在面積圖中使用透明效果來確保用戶可以看到全部數據。）
4. 耗費用戶更多的精力
（通過輔助的圖形元素來使數據更易于理解，比如在散點圖中增加趨勢線。）
5.柱狀過寬或過窄
（經過調研，柱子的間隔最好調整為寬的1/2。）
6．數據對比困難
（選擇合適的圖表，讓數據對比更明顯直接。上圖的數據作用是為了比較，顯然，柱狀圖比餅圖在視覺上更易于比較。）
7.錯誤呈現數據
（確保任何呈現都是準確的，比如，上圖氣泡圖的面積大小應該跟數值一樣。）
8.不要過分設計
（清楚標明各個圖形表示的數據，避免用與主要數據不相關的顏色，形狀干擾視覺。）
9. 數據沒有很好歸類，沒有重點區分
（將同類數據歸類，簡化色彩，幫助用戶更快理解數據。上圖的第一張沒有屬于同類型手機中不同系統進行顏色上的歸類，從而減少了比較的作用。下圖就通過藍色系很好的把iPhone,Android,WP版歸為一類，很好的與iPad版，其他比較。）
10.誤導用戶的圖表
（要客觀反映真實數據，縱坐標不能被截斷，否則視覺感受和實際數據相差很大。左圖的數據起始點被截斷從50開始。）
信息可視化案例
信息可視化囊括了數據可視化，信息圖形，知識可視化，科學可視化，以及視覺設計方面的所有發展與進步。下面是信息可視化的案例分享。
(上圖為關系網——基于60000封電子郵件存檔數據，用不同顏色深度的線條呈現了地址簿中用戶和個體之間的關系，比如回復、發送、抄送。)
（上圖通過數據化的比較，用變形的柱狀圖等圖形，形象的展示了不同國家老師的收入水平，社會包括學生和公眾對其的尊重度。）
如何制作信息可視化？
第一步：確定表意正確明確信息圖表達內容，確定最主要的表現內容。
第二步：優化展現形式內容正確還不夠，還要易懂。我們需要在這個步驟里尋找信息圖最優表現形式，讓讀者 一目了然，降低理解難度。
第三步：探索視覺風格在探索視覺風格時要注意抓大放小，先定下來最主要模塊的風格，再做延展。
第四步：完善細節視覺風格確定后，可根據需要添加、完善細節。
第五步：風格延展“一致”的視覺設定有助于用戶理解，也能更好的提升品牌形象。所以主風格確定后，我們需要把它延展到其它有需要的頁面上。
以上是分享了數據可視化和信息可視化相關內容，不過信息可視化和數據可視化是兩個容易混淆的概念，基于數據生成的數據可視化和信息可視化這兩者在現實應用中非常接近，并且有時能夠互相替換使用。但是這兩者其實是不同的，數據可視化是指那些用程序生成的圖形圖像，這個程序可以被應用到很多不同的數據上。信息可視化是指為某一數據定制的圖形圖像，它往往是設計者手工定制的，只能應用在那個數據中。信息可視化的代表特征：具體化的，自解釋性的和獨立的。為了滿足這些特征，這個圖是需要手工定制的。 并沒有任何一個可視化程序能夠基于任一數據生成這樣具體化的圖片并在上面標注所有的解釋性文字。
數據可視化則是普適的，比如平行坐標圖并不因為數據的不同而改變自己的可視化設計?？梢暬膹姶蟮钠者m性能夠使用戶快速應用某種可視化技術在一些新的數據上，并且通過可視化結果圖像理解新數據，與針對已知特定數據進行信息可視化設計繪制相比，用戶更像是通過對數據進行可視化的應用來學習和挖掘數據，而普適性的數據可視化技術本身并沒有解釋數據的功能。
（感謝數據平臺組同仁們對此文章的貢獻，感謝魏茜璐的視覺配圖。）
文章來源：京東設計中心
轉載請注明：學UI網》數據可視化與信息可視化淺談！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
從人類誕生之日起，便有了信息的呈現形式，并伴隨著人類發展足跡不斷變遷。如今出現的任何信息可視化類型，并非一夜之前突現的新物種，幾乎都是從過去經典的表達式中發展而來。
17000 年前
如果你問最早的信息圖表設計師是誰，很多學者認為是遠古時代的洞穴人，他們是最早用圖像描繪成日常生活比如戰斗，野生動物、死亡和慶?；顒拥鹊?。
法國發現的洞穴繪畫遺址-拉斯科壁畫，距今約17000年
公元前 3000 年
古埃及象形文字，作為那時的正式書寫系統，開始使用符號來代表字母和概念，可追溯到公元前3000年。
公元前 550 年
希臘哲學家阿那克西曼德創造了第一個出版的世界地圖，這可以說是最早的可視化地圖了。
公元 950 年
歐洲人畫出了基于時間變化的折線圖，用于展示太陽，月亮等行星的位置變化趨勢，開始出現如今的數據圖表的雛形。
17 世紀
統計圖形之父威廉·普萊費爾，發明了我們今天經常使用的折線圖和條形圖，也被認為創建了面積和餅圖。普萊費爾是蘇格蘭工程師和政治經濟學家，并在1786年出版了商業和政治地圖集。
智能時代
隨著時代的發展，智能時代AR、VR 技術的興起，我們開始看多更多新穎的的數據可視化形式。
1992-2010年內世界小型武器和彈藥的進出口貿易數據展示
“里約+20”地球峰會期間的Twitter話題匯集成一顆顆大樹
如今隨著科學技術的發展，已經沉淀出豐富且經典耐用的信息可視化表達。無論在傳統的紙質媒體，還是如今手機、電腦，電視等各類終端的電子媒體都得以大放異彩。目前，各大可視化工具中有非常詳盡的圖表類型介紹，比如 Excel2010 的版本里面，提供了 10 類共 53 個圖表。AntV 平臺則提供了 15 類近 200 個數據圖表，現在我們就來普及一下基本知識。
目前主流的可視化平臺把常用圖表分成九大類（來自 AntV ），分別是：比較、分布、關聯、占比、區間、流程、趨勢、時間、地圖。
1. 比較
顯示值與值之間的不同和相似之處。使用圖形的長度、寬度、位置、面積、角度和顏色來比較數值的大小，通常用于展示不同分類間的數值對比，不同時間點的數據對比。
典型圖表：柱狀圖、條形圖、直方圖、K 線圖、矩形樹圖等
2. 分布
顯示頻率，數據分散在一個區間或分組。使用圖形的位置、大小、顏色的漸變程度來表現數據的分布，通常用于展示連續數據上數值的分布情況。
典型圖表：散點圖、氣泡圖、熱力圖、箱型圖
3. 占比
顯示同一維度上占比關系
典型圖表：餅圖、環形圖、堆疊面積圖、堆疊柱狀圖
4. 關聯
顯示數據之間相互關系。 使用圖形的嵌套和位置表示數據之間的關系，通常用于表示數據之間的前后順序、父子關系以及相關性。
典型圖表：和弦圖、?；鶊D（我有點讀不懂）
5. 區間
顯示同一維度上值的上限和下限之間的差異。 使用圖形的大小和位置表示數值的上限和下限，通常用于表示數據在某一個分類（時間點）上的最大值和最小值。
典型圖表：儀表盤、堆疊圖
6. 流程
顯示流程流轉和流程流量。一般流程都會呈現出多個環節，每個環節之間會有相應的流量關系，這類圖形可以很好的表示這些關系。
典型圖表：漏斗圖、?；鶊D
7. 趨勢
分析數據的變化趨勢。使用圖形的位置表現出數據在連續區域上的分布，通常展示數據在連續區域上的大小變化的規律。
典型圖表：折線圖、K 線圖、堆疊面積圖
8. 時間（個人認為時間可以放在各大類型中作為一個維度）
顯示以時間為特定維度的數據。使用圖形的位置表現出數據在時間上的分布，通常用于表現數據在時間維度上的趨勢和變化。
9. 地圖
顯示地理區域上的數據。使用地圖作為背景，通過圖形的位置來表現數據的地理位置，通常來展示數據在不同地理區域上的分布情況。
典型圖表：地圖
1) 柱狀圖
條形圖
展示多個分類的數據變化和同類別各變量之間的比較情況。使用垂直或水平的柱子顯示類別之間的數值比較。其中一個軸表示需要對比的分類維度，另一個軸代表相應的數值。
優點：對比分類數據。
缺點：分類過多則無法展示數據特點。
# 相似圖表
堆積柱狀圖：比較同類別各變量和不同類別變量總和差異。
百分比堆積柱狀圖：適合展示同類別的每個變量的比例。
2) 條形圖（也可歸到柱狀圖大類中）
類似柱狀圖，只不過兩根軸對調了一下。
優點：類別名稱過長，將有大量空白位置標示每個類別的名稱。
缺點：分類過多則無法展示數據特點 。
#相似圖表
堆積條形圖：比較同類別各變量和不同類別變量總和差異。
百分比堆積條形圖：適合展示同類別的每個變量的比例。
雙向柱狀圖：比較同類別的正反向數值差異。
3) 折線圖
折線圖
堆積面積圖
展示數據隨時間或有序類別的波動情況的趨勢變化。
優點：有序的類別，比如時間。
缺點：無序的類別無法展示數據特點。
# 相似圖表
面積圖：用面積展示數值大小，展示數量隨時間變化的趨勢。
堆積面積圖：同類別各變量和不同類別變量總和差異。
百分比堆積面積圖：比較同類別的各個變量的比例差異。
4) 散點圖（以及氣泡圖）
散點圖
氣泡圖
用于發現各變量之間的關系。
優點：存在大量數據點，結果更精準，比如回歸分析。
缺點：數據量小的時候會比較混亂。
# 相似圖表
氣泡圖：用氣泡代替散點圖的數值點，面積大小代表數值大小。
5) 餅圖
餅圖
玫瑰圖
餅圖可以很好地幫助用戶快速了解數據的占比分配。
優點：了解數據的分布情況。
缺點：分類過多，則扇形越小，無法展現圖表。
# 相似圖表
環形圖：挖空的餅圖，中間區域可以展現數據或者文本信息。
玫瑰餅圖：對比不同類別的數值大小。
旭日圖：展示父子層級的不同類別數據的占比。
6) 詞云
詞云
7) 箱型圖
箱型圖
以上只是部分常用圖表樣式，更多詳細的圖標樣式及其介紹，可前往阿里數據可視化平臺 AntV 學習。
數據圖表如此繁雜多樣，到底該如何靈活運用呢？
數據圖表專家 Andrew abela 設計了一張匯總圖，從全局出發，幫助我們快速確定圖表樣式
Andrew abela 繪制的圖表選擇指南被廣泛運用
這其實為我們提供了一種快速選擇數據圖表類型的思考流程，四步走：
1.分析數據源
2.確定展示的類型
3.選擇的變量類型及數量
4.選擇對應的數據圖表
介紹這些基本知識是遠遠不夠的，網絡上有非常多的平臺、工具和團隊可以供我們深入學習和研究數據可視化設計，以下列舉了我平時經常光顧的學習資源。
1. 了解數據可視化設計的歷史淵源（完整版）：
數據可視化圖表發展史：http://www.datavis.ca/milestones/index.php?group=Pre-1600&mid=ms9
2. 各類可視化圖表的概念及用法（超詳細）：
螞蟻金服可視化解決方案 AntV：https://antv.alipay.com/zh-cn/index.html
圖表示例：https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
圖表用法：https://antv.alipay.com/zh-cn/vis/chart/index.html
3. 前端可視化圖表庫（前端可直接調用）：
ECharts：http://echarts.baidu.com/index.html
AntV：https://antv.alipay.com/index.html
Google Chat：https://google-developers.appspot.com/chart/
4.數據分析工具：
Google Analytics: https://analytics.google.com
百度統計：https://#baidu.com/
5.運用可視化工具搭建自己的可視化圖表（可以建立自己的可視化圖表）：
BDP個人版：https://me.bdp.cn/home.html
平時還可以使用 Excel 或 Numbers 整理和輸出可視化圖表
除了學習鞏固數據相關的基礎知識以外，更需要在日常工作學習中培養習慣，養成數據化的思維方式。
好了，文章就介紹到這里，大家一起學來吧。
預告：下一篇系列文章著重介紹可視化設計的具體方法，譬如從色彩、布局、交互等方面如何設計數據圖表，歡迎持續關注。
作者：又彬
轉載請注明：學UI網》數據可視化設計淺析與研究（一）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖表的基本構成（來源網易 UEDC）
標題一般居中或居左對齊，但是布局時，需要綜合考慮副標題、圖例甚至篩選器控件等元素的位置。
坐標軸包括 X 坐標軸和 Y 坐標軸，有時還會出現次坐標軸。
1. X 軸刻度方向的改變，如果維度過多，則橫向刻度的展示范圍會非常有限，為了展示更多內容，通常會用其他替代圖表（比如橫向柱狀圖），不能替代的情況下，可以考慮將標注文案進行傾斜（不鼓勵）。
2. 數據類刻度值盡量轉化為千位分隔符（如 K，M，B），保持簡潔，以節省空間。坐標軸上的最大值取值要恰當，保證圖表占據 2/3 以上，畫面更飽滿。
3. 還需考慮坐標軸上的極值。
坐標軸
離散型數據包括橫向排列和縱向排列，連續型數據包括連續圖例。
1. 所有圖表類型的排列方式要統一，所以要考慮整體的圖表空間是適合橫向排列，還是縱向排列。
2. 所有形式總長度超過內容區換行或換列。
3. 雙軸圖包含了 2 種圖表類型，不同類型的圖例樣式要有所區分。
4. 連續型數據通過漸變色來展示數據大小的變化，具體漸變顏色定義在下文中有詳細介紹。
圖例
背景柵格主要用來幫助用戶快速讀取數據值，方便參考和對比。背景柵格一般有網格線、虛線、點陣、斑馬紋等。在設計柵格時，應該盡可能減少對數據的干擾，在合適的場景下，甚至可以去掉背景柵格。
柵格
用戶在查看某一項數據指標時，給出明確的反饋和提示。數據詳情多時，還會通過浮窗的形式展現。此時該狀態下數據可以突出顯示，可以變化顏色、增加背景元素（線/面）、或者增加動態變化等。
數據圖表的字體一般采用無襯線體，另外需要考慮字體的辨識度，防止在顯示上產生歧義。多數情況下，數據圖表會運行在不同分辨率的大小屏中，所以在文字排版上。
做到以上幾條，我們在設計圖表時就可以避免掉絕大多數的坑，不過畢竟圖表類型這么多，在實際場景中也會遇到各種情況?？傊羞@么幾條總的原則
1. 保持數據圖表簡潔、清晰、易讀
2. 強調用戶關注的數據，幫助用戶快速聚焦
3. 弱化次要元素，如柵格、圖例等
4. 刪除不必要的元素，陰影效果、酷炫動畫
5. 合理布局圖表的間距、留白等
6. 充分考慮頁面的適配效果
7. 最好使用真實的數據進行設計排版
考慮到圖表顏色在設計中至關重要，我把它單獨分出來討論。由于數據的復雜性和趨勢變化，配色方案需要考慮非常多的因素，比如可辨識度、舒適性，還需要考慮特殊人群（色盲色弱人士等）對顏色的可讀性等等。在配色過程中我們需要區分背景色和圖表配色。
背景色一般分為深色、淺色、彩色。在很多 LED 大屏上展現數據時，多采用深色背景，比如即將到來的天貓雙十一活動，官方數據展示基本上會用深藍色作為背景，這樣可以減少屏幕拖尾，觀看時也不會過于刺眼。深色背景中的圖表配色一般不會采用太多的色彩，且圖表也不會設計得過于復雜。
中小屏幕的背景選擇性更大，中小屏幕背景色選擇范圍就比較廣，淺色、彩色、深色均可以做出很好的設計。在 Web 端，大多數場景下，我們會采用淺色甚至白色作為背景，淺色背景更適合展示大量的數據信息，而且識別度更高。
圖表配色最關鍵的一點，就是要有辨識度。
我們可以通過明度上的變化增加辨識度，也可以采用大跨度的不同色相來增加辨識度，另外這兩者也可以有機結合，常用于色彩較多的圖表中。
明度變化
當我們需要使用單一色相配色時，勢必要用明度差來進行設計，明度的跨度也要盡可能大才能更清晰。我們可以通過在灰度模式下配色的辨識度來判斷明度差是或否合適。
（Google Material Colors 中的 Light Blue 色卡）
需要注意的是，采用單一色相的配色種類不宜太多，建議不超過 6 種。一旦種類過多，色彩之間的明度差異勢必會變小，因而影響辨識度。
色相跨度變化
通過色相跨度來增加顏色辨識度也是我們常用的方式。
色環
需要的顏色較少時，我們盡量避免使用相近的色相，比如同類色和相近色。盡量選擇對比色或互補色，這樣可以使不同屬性數據在圖表中展示更加清晰。
美國大選圖
所需顏色較多時，建議最多不超過 12 種色相。
通常情況下人在不連續的區域內可以分辨 6?12 種不同色相。過多的顏色對傳達數據是沒有作用的，反而會讓人產生迷惑。
01. 色環提取
可以采用色環中同一明度下的不同色調作為圖表顏色。前面提到的單色相內取色，也可以在這個色環中進行采集，此外 Google Material Colors 是一個不錯的色板，可以結合使用。
02. 借鑒自然界中的色彩
自然界中有非常豐富的漸變色彩，而且被大家所熟知，這些色彩更容易給人們帶來愉悅感。
自然界中的色彩
在借鑒過程中，我們需要注意，比如天空經常會出現紅、藍、紫的漸變色，但這顏色的明度會有其規律，通常是淺黃到深紫，但絕對不會出現淺紫到深黃色。還有一些自然界其他的經驗配色，比如淺綠色到紫藍色，淺黃色到深綠色，橙棕色到冷灰色。
03. 漸變與明度疊加取色
在正常漸變色的基礎上疊加一層只有明度變化的灰色漸變，形成既有明度差異也有色相跨度變化的配色。
漸變與明度疊加取色
漸變色應用案例
好了，配色部分就探討到這里。除了以上關鍵內容以外，我們平時還需要注意數據圖表的適配效果、交互細節、以及動畫設計方面的問題，由于篇幅的關系暫不展開，以后有機會進一步探討。
我們在參與此類項目設計時，通常會通過以下的流程去思考：
1. 為誰設計，用戶想要什么
2. 明確設計目標和價值
3. 明確數據指標
4. 選擇最合適的數據圖表
5. 規劃設計，輸出方案
前三步更多會由產品經理、運營人員去思考并輸出結果，最后兩步則由我們設計師來完成，這兩步也正是這兩篇系列文章的主題所在。
在學習過程中，我們每個人可有不同的思考方式和側重點，以我個人的角度出發：能夠讀懂常見的數據可視化圖表，并從圖表中能獲取到關鍵信息。當有一堆數據擺在面前，能根據業務目標選擇合適的數據展示類型，并運用設計手段完整的表達給用戶。有了這些沉淀，我就能更好的和產品、運營打交道，更多的關注鏈路上游的信息，從而進一步提升設計的產出質量。
歡迎交流、批評和指正。
作者：又彬
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
明亮鮮艷的顏色就像是把所有的字母都大寫想要強調一樣，你的聽眾感覺你在對他們大聲推銷。而當有很多人在大喊大叫時，通常是很難集中注意力聽他在說什么。單調的顏色，反而能很好地用于數據可視化，因為它們可以讓你的讀者理解你的數據，而不至于被數據淹沒。
當你想要強調數據時，可以使用更亮的顏色。比如你的公司與競爭對手相比較時，或者你可以在現有顏色基礎上加深顏色。
多彩的顏色效果就像把文字全部大寫一樣
盡管它們很受歡迎，但餅圖并不是一種可視化數據的有效方法。 為什么？ 因為你的大腦很難確定每塊餡餅的相對大小
Stephen Few詳細介紹了這個問題 鏈接在：
https://www.perceptualedge.com/articles/visual_business_intelligence/save_the_pies_for_dessert.pdf
多使用條形圖， 它能使受眾更容易理解和比較數據的相對大小。
Tip：按降序或升序對數據進行排序，能更輕松地比較數據。
餅圖不是可視化數據的有效方式， 請嘗試使用條形圖。
正如“數據界的達芬奇”Edward Tufte 所說，圖表上的每一點信息都應該有存在的理由。
把不重要的東西減到最少或者去掉。這包括減弱或移除圖形線，改變軸線、圖形線的顏色，以及用淺灰色描繪電子表格行。使得“數據比率”可以達到一個很高的水平，聽眾會更容易明白其中的數據情況。
Tip: 如果有人評價你的圖表華而不實，你只需要優化數據比率就好了。
隱藏或減弱非數據項能使數據脫穎而出
有些時候，排版可以提升視覺效果，增加額外的情感和洞察力。但數據可視化不包括在內。堅持使用簡單的無襯線字體(通常是Excel等程序中的默認字體)。無襯線字體即是那些文字邊緣沒有小腳的字體。
不用使用手寫體，以及其他會分散數據可視化注意力的字體
表格間距賦予所有的數字相同的寬度，使它們排列時能彼此對齊，使比較更容易。大多數流行字體都內置了表格。不確定字體是否正確?就看小數點(或任何數字)是否對齊就行。
使用一個表格數字字體，這樣每個數字間都保持對齊(像右邊的那個)，比較起來更容易
添加的細節(和數字)越多，大腦處理的時間就越長。想想你想要用你的數據傳達什么，以及最有效的方式是什么。
每一個額外的數字都需要大腦去理解
一個很好的經驗法則是，如果你不能高效理解，你的讀者或聽眾可能也難理解。因此，堅持使用基礎圖形:直方圖、條形圖、維恩圖、散點圖和線形圖。
譯者注：關于這些數據圖的區別以及使用方法，我這里就不作展開說了，有興趣的可以自己去網上翻翻。每種圖形都用它的特點和使用場景，還蠻有意思的。以下是我在網上搜集的圖形示例：
直方圖
條形圖
維恩圖
散點圖
線形圖
作者：Becca Selah
譯者：彩云Sky
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
原文地址：站酷
作者：UXBoy
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
宜家的設計為銷售負責。比如設計一個杯子，宜家的設計師需要考慮如何更多的賣出杯子。沒錯，銷售更多的產品是設計師的KPI。在這樣的目標導向下，設計師很容易去思考幾個問題。
眾所周知，宜家的產品是場景化的，總能讓人感受到設計師們的熱情、心血和心機。設計為銷售負責，售出更多的產品確實可以作為設計有效性的驗證方式之一，但銷售量卻不能作為設計的量化標準。
這兩者之間有很微妙的差異。我們引入一個概念叫做“數據趨勢的正向反饋”來解釋這個問題。“數據趨勢的正向反饋”，它具備允許波動，且不為一個具象的數值服務的特征。類似下圖示：
設計為銷售負責，我們可以理解為，衡量好設計的其中一個維度標準就是銷售“數據趨勢的正向反饋”，值得注意，不是銷售量的某個單一的KPI值。因為達成某個銷售量的KPI值有很多手段，設計策略、產品策略、運營策略和營銷策略等等方式都可能完成，如果用銷售量去衡量設計，會讓設計變得不夠純碎。但是，用“數據趨勢的正向反饋”來衡量設計是否有效，用戶是否認同卻是可行的。而且，“數據趨勢的正向反饋”意味銷售量是持續增長的，哪怕有波動，哪怕有快慢，長期看能夠持續增長代表用戶是健康的。設計價值是為產品帶來健康用戶，或者說是保障產品的健康度。產品健康度一般看幾個值。
用戶跳出率
用戶跳出率指只訪問了入口頁面就離開的訪問量與所產生總訪問量的百分比。通?；ヂ摼W的平均跳出率大致是73%，如果你的產品跳出率超過這個值，說明用戶質量不高。
平均訪問時長
平均訪問時長指用戶在一次訪問中，平均使用產品的時間。互聯網的平均訪問時長大致是2分40秒。
平均訪問頁數
平均訪問頁數=瀏覽量（PV）/訪問次數。互聯網的平均訪問頁數大致是2頁。
除此之外，產品還會從營收的角度看用戶支付金額、ARPU值和轉化率等等。營收指標對與設計來說，就是需要參考的趨勢數據了。了解了這些原理，怎么做呢？我們用首頁改版為例，首先按上述要求定義用戶健康度指標。假設首頁承載電商內容，根據電商特性在基礎指標之上，增加一個用戶在首頁的停留時長指標，這個指標衡量用戶是否能在首頁逛起來。
依據這些指標，就可以搭建針對于當前項目的用戶健康度指標，在設計過程中通過對指標和指標用戶的數據分析和對指標用戶的訪談綜合得出項目的核心問題及解決思路。通過線上驗證設計方案觀測數據模型的趨勢變化，以獲得最優的設計。設計在保障產品用戶健康度上，是一個持續迭代的過程。
產品沒有最健康，只有更健康。
作者：ZA大人
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
http://www.syprn.cnhttp://www.syprn.cnhttp://www.syprn.cnhttp://www.syprn.cn/dp.htmlhttp://www.syprn.cnhttp://www.syprn.cn/web.htmlhttp://www.syprn.cn/Design.htmlhttp://www.syprn.cn/Design.htmlhttp://www.syprn.cn
一年一度的年底復盤總結大會即將開啟，期間閑聊時被問：作為設計師，日常工作中如何體現設計價值？你們平時做的那些不是業務需求嗎？如何體現設計價值呢？直白一點：你們設計一年都沒產出?。。?！我開始反思：如果平時做的業務需求不能體現設計價值，那么什么體現我的價值呢？設計價值到底用什么來衡量？
1、如何理解設計價值
2、設計師價值分層
3、設計價值案例體現
4、設計價值具體表現方向
很多招聘上都寫著會插畫會動效的加分，很多職場人沒面試或沒應聘上理解是不會某個技能，因此抱怨設計要學的太多了...但是注意「加分」這個詞的前提是滿足必要條件之后才去考慮的，如果公司有大量的剪輯和插畫需求，自然會招插畫師和剪輯師（我上家公司有專門的插畫師和視頻剪輯人員），所以不妨反省自己是否滿足必要條件。
前幾年大家或許可以憑借這些差異化優勢拿到不錯的薪水，但是寒冬之下公司更多的思考著如何活下去，更看中設計能給產品發展帶來什么價值
商業設計本質上服務于業務，公司需要用戶參與盈利，所以每個季度或每個月分發每個部門業務目標，項目團隊根據當前部門任務制定相應的項目目標，然后再一層層分發到設計，總結他們的關系如下：
因此判斷設計價值的關鍵是：是否真正地幫助業務解決問題，助力業務目標達成。換言之，設計價值就是設計師通過設計思維/策略/方法，幫助業務創造的那部分價值。
根據設計價值，市場上衍生出各種設計師頭銜，被劃分為更靠近產品的UXD（User Experience Design)、以及在UXD基礎上提升出與業務更密切的UGD（User Growth Design)，最后就是更偏純視覺的VD（Visual design)。
相信大家和我一樣，在公司對設計師的要求再也不是單純界面輸出了，雖然職稱頭銜沒變，但是公司對我們的要求越來越高了，那說明你正在向體驗型設計師或用戶增長型設計師發展。今天看了我的文章，打開格局，未來的路也會越走越寬
設計師的價值可以分為五層：
基礎價值（設計協同）：重要且緊急，設計師立身之本
二級機制（優化負向）：自驅解決負向問題，量化優化結果
三級價值（增長爆破）：洞察增長爆破點，自驅推動增長
四級價值（L型賦能）：垂直擊穿，經驗沉淀，實現L型賦能
五級價值（業務領軍）：人人都是業務方，拓展設計師在行業和生態影響力
今天主要聊聊前三種，我相信很多人最初選設計師這個職業認為設計不用對接太多人，做好自己的事情就OK，緊接著慢慢的在無止盡的改稿消耗了激情，開始喊出設計沒前途想轉行不好找工作等等，但是正真玩明白設計的人往往笑而不語
不知其然，表象復刻。設計協同最基本要求就是在拿到需求后高效又完美地實現落地。也就是我們剛剛入行時日常工作中所做的事情：產品給到原型、設計開始執行、接著進入研發、再接著走查等等，甚至很多人都沒玩明白設計系統有哪些，各個設備的的規范區別...
做好這個階段是設計師基本素養，需要良好的專業能力，良好的溝通能力，并參與到產品的探索與構思中來。
我之前在小紅書分享了很多關于設計優化內容，優化前VS優化后。以用戶體驗為核心，不同場景不同設計。相較于基礎價值而言，負向優化開始逐漸融入業務當中，慢慢了解整個業務流程，很多小伙伴往往提出優化方案后被認定為優先級不高，就是沒有針對當前業務主要功能提出優化
這個階段在設計師晉升中非常關鍵，領導非?？粗卦O計是否主導項目優化，我目前公司晉升標準是設計師除業務需求外，一年至少需要2次設計主導項目推動。這個過程比做業務需求復雜的多，因為當你沒有足夠資源協助優化時，需要設計自己前期調研、設計問卷、找數據、寫產品文檔、畫原型圖、標注交互規則...整個過程由你主導。
當然這個階段的設計師會比上一個階段更能體現設計價值，并對產品產生一定的影響力。我們要把格局打開不要局限于設計本身，不是說忽略設計，是基于日常設計界面去考慮設計的意義，給產品和業務帶來的影響。能在以用戶為中心的基礎上，尋找機會點，推動業務的增長，所以這個階段的設計也被稱為UGD（User GrowthDesign）
這時候對設計的要求更高，比如需要具備用戶洞察力，數據分析能力等，從這些維度出發，去熟悉業務、分析業務，尋找設計機會點，制定設計策略，從而推動業務。這個階段的設計師，也是市場最需要并且很稀缺的。
通過一個案例我們一起討論設計價值體現，首先看一下業務目標，設計目標是由它推導而來，這個推導的過程并不是直觀可見的，需要我們進行用戶調研、問卷調查、數據分析等等一系列方式去推導，最后總結歸納出可行設計目標。推導過程是整個設計過程中最重要的環節，為了讓大家理解，我在網上查了很多案例
一般業務目標是決策人開會共同決定的，它只是某個階段大的方向，基本可以套進下面這個公式
以我目前工作正在執行的項目為例，可以組合其中一部分作為業務目標，例如：
Q4：通過提升中介版位的曝光率引導中介入駐（上傳社區資料），來增加社區內容的豐富度
阿里《五導家設計法》中對業務目標和設計目標的定義是：
1、業務目標：用［某策略］給目標用戶帶來［某價值］，以實現［某變現方式］
2、設計目標：用［某設計策略］給目標用戶帶來［某價值］，以助力［某變現方式］
這個剛開始理解會比較困難，因為很多項目其實只有一個總體的目標并不會細化到這樣的顆粒度。于是我去網上查了一些設計師的分析部分內容，整理組織一下發現大致的信息是這樣的：
由業務方提出一個需求，這個需求背后往往伴隨著一個業務指標，設計師則需要將定量指標拆解為有設計執行指向的目標。上圖中簡化XX功能的操作路徑，就需要拉出整個操作過程中的數據，觀察同級功能及子級功能有什么影響，用戶是在哪一步流失的，有什么優化途徑...，可以看出短短幾個字背后的工作遠遠比想象的多
這次設計改版也是伴隨著業務的發展而來的，為了做出貼近業務目標的設計，項目前期對產品的定位及業務底層邏輯做了深刻的理解，思考我們為什么要做這個產品？用戶通過我們產品得到什么？為了方便理解，我從項目背景開始說起
項目背景：隨著平臺買賣租賃業務迅猛發展，用戶對于房屋周邊關注度越來越高，單個房屋詳情無法滿足用戶對整個房屋周邊的了解，所以推出社區找房平臺。產品主要定位是提供小區內真實有效的房屋信息，幫助用戶省時省力的篩選出優質房源
問題：由于第三方合作平臺房屋資料更新不及時，導致C端用戶（買賣租賃）去線下看房時發現已賣已租，漸漸地對平臺產生不信任，最后很大可能棄用。
解決：為了改善這一現狀，平臺引入「社區專家」這一概念，并通過提升中介版位的曝光引導中介入駐，入駐則需上傳該小區戶型圖/平面圖/內景圖等 。也就是說中介入駐后被稱為社區專家，在APP端曝光量增加，吸引C端用戶點擊互動，從而提升房屋成交量的可能性（也就是業績）
這樣一來，我們就明確了現階段為什么要做這件事：中介通過上傳房屋信息獲得一定的曝光量；而買賣租賃用戶通過房屋信息省力省心找到符合自己預期的房源。
產品最終服務于用戶，不同產品面對的不同人群的需求是不一樣的，所以前期深入了解了用戶，明白用戶訴求，這樣能更好的聚焦設計策略，將產品的核心價值及服務價值傳遞給用戶，從而提升用戶使用體驗
接著對此次需求目標用戶（中介）進行了調研分析，當前我們的中介用戶特征具體表現為：年齡在45歲以下的用戶人群占73%左右，整體年齡不大，對互聯網接受度較高，工作業績直接與房屋成交金額掛鉤
社區專家入駐流程簡單的看就是上傳社區信息圖片，然而其實是一個系統化決策的過程，整條關鍵路徑從了解入駐優勢（信息獲?。┑皆趺瓷蟼鳎ㄉ蟼鲌D片）再到上傳成功（入駐成功）經歷了幾個關鍵節點，開始呈現一個漏斗狀的情形，轉化率越來越低。
因此在產品設計之前，我們對用戶決策的關鍵路徑進行了相應的梳理：主要為入駐前、入駐中、入駐后幾個階段，同時圍繞著每個環節去強化用戶內心感知，挖掘設計上的機會點
在這幾個階段我們主要解決的問題可以歸納以下幾點
1、入駐前：如何讓中介快速找到入駐入口，明確入駐優勢
2、入駐中：如何讓用戶入駐更順暢
3、入駐后：如何提升用戶入駐后效果感知，為再次入駐做推動
到此產品整體的設計思路已經很明確了，如果前期我們沒有對業務進行宏觀層面的拆解和分析，設計后期可能找不準設計的發力點，從而導致設計沒有貼合實際業務場景
圍繞著這些背景，經過多次溝通最終設計和產品同學達成了一致，本次主要設計目標為
1、提升用戶信息閱讀效率
2、提升用戶入駐決策效率
3、提升用戶入駐后效果感知
在明確了設計目標之后，最后一部分是設計落地了，正確的設計始終圍繞著產品策略來執行的，并通過深耕的設計解決方案來為用戶打造優質的服務體驗，那么我們將從以下幾個維度來進行視覺方案的設計
(1）以傳達信息內容為主
說到權益設計師視覺常常會體現榮譽感，就會聯想到黑金權益對比，但是不管是什么樣的視覺表現，最終的結果都是以清晰傳達信息內容為主，讓用戶看的明白這個是干什么的，對他有什么好處
如果用戶看不明白，即使信息有效觸達，最終會以為是廣告不明所以的關閉
當然這中間也不僅僅是設計的問題，產品給的交互原型稿就有問題，整個圖就沒讓人明白這個是基礎權益和置頂權益的對比。設計拿到原型搞后要提前溝通，在交互原型不確定的情況下不要開始設計，這個在《設計如何提升工作中話語權》有提到過，等交互評審多方達成一致后開始著手設計，這樣才會事半功倍
(2）利益點的展示
關于用戶入駐的利益點運營角度肯定是展示越多越好，但是產品為了減少用戶跳出率，期望查看任務是在當前頁面用彈框承載。由于彈框承載信息有限，我們盡量想在電腦一屏內展示完當前任務及主要利益點，所以在用戶能看明白的前提下不能無限增加利益點
(3）挽留彈框優化
無論什么類型的彈框，必須要做到文案簡潔。不要讓用戶看半天還沒明白你要說的是什么，然后才沒辦法也無所謂的點了確定或取消，當然大部分這種情況，他們都會點擊取消，或者右上角的關閉鍵。
而一般彈框按鈕，右邊是主操作按鈕，也就是引導用戶操作下一步的按鈕，這次優化前按鈕文案不好理解，確定操作與用戶本身理解有歧義，易造成誤操作
(1）統一入駐后的視覺效果
中介入駐前后狀態分為：入駐前、入駐中（審核中、未通過、已通過）、入駐后（免費續期）。其中入駐中未通過使用警示色紅色，為了強化中介入駐后的視覺效果也采用了紅色，這與入駐成功的綠色不符。
在視覺上用色混淆，那么后續紅色是表示警示的同時還可表示強調？那么下圖中「1筆成交」用紅色是成功了還是未成功？為了避免這個問題，入駐后視覺效果統一為綠色，在后續色彩感知上更清晰明確，無論是設計師還是用戶都不會混淆
(2）優化入駐路徑
主要按照流程最短，操作最少方向去優化，1.0版本完成整套任務流程：免費入駐 → 入駐成功 → 做任務 → 免費置頂。當1.0第一版設計稿灰度上線后，產品預期是與中介達成共贏的結果，但是灰度數據結果顯示中介用戶入駐率低
在優化前我建立了一個用戶調研群收集用戶反饋，與部分用戶電話1V1，發現有很大潛力去提升。比如與用戶溝通時，用戶說不知道入駐成功后還需要做任務；做完一個任務置頂后怎么還需要做任務；再做任務有什么作用等等
①免費入駐 → 入駐成功過程產生疑問，即入駐成功有權益還是做任務有權益？有什么不同？
②置頂一詞有歧義，他們理解置頂是整個流程完成，而產品放理解置頂是前端頁面的置頂
(3）任務彈框關閉方式
通常來說為了方便用戶關閉彈框，點擊蒙層或點擊關閉都可任務。入駐任務彈框是中介進入后強制彈出，1.0版本用戶點擊蒙層也可關閉，在2.0版本時候新增上傳社區格局圖，需要填寫篩選格局信息，關閉篩選框最常見方式點擊篩選框其它區域，由于任務本來是彈框展示區域有限，點擊蒙層是大多數人選擇，這時候可能上傳一半就打斷了，體驗非常不好。
處理方式：增加關閉按鈕點擊區域，彈框只能點關閉按鈕關閉，點擊蒙層不能關閉
買賣租賃用戶與中介的互動率在一定程度上影響著中介留存以及再次入駐意向，入駐后中介用戶在APP展示上至關重要。
由于品牌色是飽和度比較高的橙色，所以前期整個頁面的可點擊區域基本以品牌色為主，每次強調都是在原視覺上更強。當專家版位的視覺強調用橙色，視覺上可能無法凸顯；
用其輔助色藍色時，存在2個問題，①藍色輔助色視覺感比較重（新建案品牌色不能隨意修改），作為按鈕時更像是一個主按鈕；②后續設計可能與其他業務線用色混淆，用戶也可能分不清2個業務之間的關系
設計側如何解決呢？
面對這樣的僵局再做優化，就一定需要轉換思路了。跳出純頁面設計的層面去看轉化，我們到底設計什么？此時需要重新梳理模塊內容，明確產品訴求是想突出什么，結合產品訴求重新梳理內容優先級，以視覺維度重新輸出設計優化。
這一個階段就是證明之前所說內容是對的，證明你的設計正確性與有效性，并對后續的優化做準備
從入駐前中后期及APP展示在10月18號優化上線后，中介入駐成功率明顯上升，從而影響著社區入駐率也明顯上升，APP端互動按鈕點擊率也極大提升。整體來說這次改版非常成功，后續在響應式詳情頁上也會做相應的專家版位優化，社區專家曝光率最大化，同時也提升C端用戶找房效率
上面說了這么多，以上五步簡單來說：
為了什么做 (問題在哪) → 要怎么做 (如何解決) → 如何才算做好了 (評估體系) → 做好了嗎 (“定性、定量”在過程中的合作方式和態度) → 還需要優化嗎 (驗證復盤，再次出發)
上面說了這么多其實想說明設計價值的本身不是局限的，它不僅僅是大多數人看到的可感知的界面，它還包含對外增值和對內成本兩種類型：
對外增值是指價值的增加，用戶、營收、知名度等，這些都是對外增值的部分，也就是我上面從設計維度改版產品；對內成本是指成本的控制，資源、效率、投產比等，這些都是對內成本的部分
而這兩部分又可以被分為有形和無形
對外增值的有形價值，一般是指用戶行為數據、業務盈利數據這些，是能被直觀看見的。
如果一個決策是由你主導推進的，且因為這個決策引起了數據的上升，這個決策就是唯一變量，它能直接證明你的價值；
但是設計不是萬能的，大多情況下設計只能通過“影響/實現局部用戶價值”間接助力變現，我們只需關注可以通過設計手段參與、干預和落實的部分即可，這個就是我上面內容項目復盤總結的內容
當然，直接證明并不一定比間接證明更有價值。更重要的是，你要情境合理、邏輯自洽。
通常我們需要關注的指標有新增（新用戶數，日周月）、傳播（傳播周期）、活躍用戶數（DAU、MAU）、留存率以及流失率，還有aarrr的海盜指標-獲取、激活、留存、傳播、收入，這里不展開講了大家可以去搜索一下。這些數據在改版以及做新功能的時候我們經常會用到。
對外增值的無形價值是什么呢？比如公司周年慶，設計組會承擔全部的舞美設計，但是這個結果沒辦法用數據來衡量的。但是整個過程是設計全程跟進支持，使得客戶好評高于往年，甚至還在行業內有一定的傳播和討論，這些都是對外增值的無形價值。
也就是說除了直觀的數據目標，我們還可以從定義抽象的目標，抽象的目標也可以衡量。
設計組件規范可以最大化的保證設計的一致性、提升開發的效率以及方便產品的迭代優化，我們就使用了這樣的公式：組件開發時間*使用次數-投入的時間成本，以此估算出組件庫帶來的工時縮減。當然組件庫只是對內成本價值的一種，對內價值包含很多，比如設計原則提煉、設計語言統一等，這些在多個設計合作時事半功倍
大家常被到的問題：市面上開源的組件這么完善，設計師為什么花費那么多時間重新做組件？其實它存在2個問題
3.1、業務屬性不符
雖然網上存在很多第三方組件比如Ant Design、TDesign等等，研發使用這些確實提升效率，但由于設計語言不同（公司不同業務屬性不同），市面上的組件不一定與自家產品屬性貼合，需要我們結合產品愿景以及業務規劃進行重新設計。
3.2、業務特性不貼合
我們見到的很多組件只是基礎組件，可以保證基礎設計一致性，但由于業務領域的獨特性和多樣性，在一些專業的場景中有著強烈的業務屬性，需要我們對一些基礎組件進行組合，進行更專業的沉淀，這樣在實際使用的時候會更加高效。例如高級篩選、不同的場景彈框等。
推動產研設流程優化，比如我之前寫的《設計師如何提升話語權》就是我今年上半年發現了協作流程的不合理，反復溝通推動了流程的優化。這件事讓整個團隊有了更高效的合作，就屬于對內成本的無形價值。
項目復盤對于我們設計師的能力成長的作用是巨大的。它之所是最快的學習方式，因為它在是實踐中的反饋，這種直觀的經驗沉淀最終會融入自己解決問題的知識體系架構，而這將進一步反輔自己的職業成長。
復盤可以讓我們站在第三方角度，重新對項目流程進行全面的回顧與總結。結合不同的反饋，客觀的了解當前設計在整個業務目標中的價值，這是對我們設計量化最佳途徑。
和大家再說遠一點，工作可能常遇到的場景，設計優化推不動，無法進行下去。得到反饋是：優先級不高，后續有時間再優化...這個其實在大中小廠都有這個情況，屬于設計價值的第二層體驗優化，它優先級高不高，取決于這個問題是否足夠致命。
比如說這個問題是核心功能，但根本不可用，這些就是致命問題；如果核心功能可用，只是沒那么好用，也許對于你這個產品來說，就沒有那么致命。所以與其想著怎樣優化體驗，不如看看是不是還有什么可以帶來增長的方式，比如擴充下一類用戶，或者更多的生態、品類等等
另外有個例子是關于一個朋友的，這個朋友工作很拼，在懷孕的時候周末都不休息，她當時負責2個業務中的一個很差。她調研了相關用戶，把用戶做畫像分層，也找出了可以帶來增長的方式，但是發給當時的合作方，他和他leader都是想混混日子的類型，就應付了一下，也沒有往上匯報。在當時，級別差兩級去溝通就很費勁了，這家公司在績效期，也不強制要求給合作方評價，所以問題得不到解決，這些辛苦卻換不來的成長
最后朋友就離開了，但她的性格閑不下來，而是找了一份挑戰更大的工作。在之后的幾份工作中，一路得到賞識和重用，充分發揮了能力。HR告訴她主管的評價是，沒有做不好的事，就算不帶設計團隊，也可以轉行帶別的團隊甚至創業。
他現在的公司，上下級也要互相打評價。所以身為主管，本身也要真的能力強，不然會被下屬挑戰，所以大家的話語權，就靠自己的能力和人品，簡單明了，行就上，不行就下。團隊的同學都說在她來了之后，他們有干勁多了。他們之前也很積極提方案，但總是被說優先級不高，其實是沒有找準更值得做的項目。
所以建議是，首先看看是否是自己的問題，如果在和他人充分溝通后，明確問題確實不在自己身上，那你改變不了環境，就改變自己?；蛘吣惚旧硭诘墓就玫闹皇遣块T不好，那就換個部門，找個級別相對弱化，專注于能力本身和項目本身的公司，成長會非?？?。
作者：貝賢設計筆記
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：姜正
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
下圖是我們優秀的技術人員利用模版直接布局出來的頁面，也可以理解為需求頁面，接下里就需要我根據頁面的內容重新定義風格設計。
當我看到這個頁面，首先要知道他是干什么的？功能是什么？是純數據展示還是監測預警？通過這些了解基本就能知道有沒有交互行為，有交互和沒交互在數據可視化的設計思路上會有很多不同，還有功能不一樣設計方向也會不一樣。
其次要分析出主次數據與總分數據，還要剖析目前圖表運用的合理性和大屏的設計比例尺寸等等，最終可以通過分析對頁面有個合理的布局展示。
通過分析對頁面重新布局，如下圖：
數據可視化頁面設計，如果頁面中有一個非常搶眼的主視覺圖，那么一般對其他的元素不會過度的設計，如果都是搶視覺的元素整個頁面太“花枝招展”了。
上圖左右兩邊的圖表只是簡單的呈現出來，這樣整體視覺上更有呼吸感，有張力，如果每個圖表都加上邊框，頁面就會顯得局促，常見的3D地理城市，主視覺為3D模型，輔助元素一般都不過度修飾。
既然是“首都國際機場”那么用3D地球來展示最佳不過了，3D地球無疑是一個重磅視覺元素，飛機圍繞地球往返飛行形成光線，這樣看上去頁面會有很多線條。
設計講究“你中有我，我中有你”所以這個頁面可以設定為以“線條”主題，盡可能的用纖細的效果設計其他元素，例如頁面中纖細的條形圖、柱狀圖、環形圖這樣的設計就能體現出元素間的關聯性，整體能達到一種視覺平衡和諧。
注：在思考用3D地球來設計時，我是提前跟開發溝通過，知道可以落地實現，然后才著手開始設計，所以工作中有拿不準的設計，要即時跟開發溝通。
但不是說所有產品標題都應該用斜體漸變色，要根據產品而定，例如政府類產品更多是要體現莊嚴的氛圍，中規中矩的形式就更為合適。
天氣溫度、空氣質量、時間是一定要加上的，原因是飛機在戶外飛行肯定會關注天氣，而對于北京機場來說關注空氣質量也尤為重要，再說說時間，既然是機場實時數據，那么當下的時間對比實時數據就非常有意義，所以時間要體現出來。
上面圖表雖然可以表達清楚全部數據，但圖表包含航班總數量，這樣的展現方式視覺上表現弱，同時不能夠直觀表達總量里面包含延誤航班和取消航班。
改版后從“出港量”“進港量”兩個維度出發，合并同類項：
出港量包含：出港延誤航班、出港取消航班
進港量包含：進港延誤航班、進港取消航班
用大字號重點突出進出總航班量，然后在下面分別羅列延誤航班數量、取消航班數量，這樣數據之間的關系表達就很清晰，一看就明白，同時兩個維度各個數據也可以互相比較。
用色說明：
延誤航班用黃色，黃色情緒映射為等待，延誤即等待；
取消航班用紅色，紅色情緒映射為停止，取消即停止。
上圖環形圖其實用的并不恰當，環形圖更適合總量的各個百分比呈現，標題“今日前五延誤進港機場”其實想表現前五名城市的延誤進港排名，排名用條形圖最為直觀。
但從頁面的整體看一下，已經有兩處用到了條形圖，柱狀圖，如果這里還是條形圖，那么頁面看起來會很單調，圖表也沒有表現的多樣性，所以現在設計要體現圖表的多樣性也能夠有排名的直觀呈現。
修改后依舊采用環形圖，把排名由高到低用注釋的形式呈現，倆者都能兼顧，這樣的設計思考方式就是設計思維，設計師既要考慮視覺，也要考慮功能目的，善于在兩者之間找到平衡。
上圖左右兩個標題唯一的區別就是一個是“進”字，一個是“出”字，這兩個字如果不仔細看很難一眼出左右的區別，所以我們在設計標題的時候，一定要提煉關鍵詞，把可以作為明顯區別的關鍵詞置前。
調整后的標題把重點區別的關鍵詞置前，觀者能夠快速識別。
此圖表數據體現是延誤航班數據，所以標題的關鍵詞應該是“延誤”，延誤放在標題中間沒能起到快速識別數據類型作用。
再者就是圖表上的數據格式錯誤，航班數量不該有小數點，因為航班數都是整數呈現。
調整后關鍵詞置前“延誤進出港機場-今日前五”用橫杠隔開“今日前五”能夠過度信息，更直觀。
原圖上進出港途中詳情是上下分開的：
開始想用進出港切換的方式呈現，就是一個大地球，一個小的縮略圖，可以點擊切換，也可以自動輪播大小切。
后考慮到此產品是沒有任何交互操作的，這里設計交互行為是不合理的，所以要換一種形式。
調整后讓兩個數據都呈現在地球上，用兩種不同光線顏色表示進出港班次。
青色：北京擴散的方向代表出港
藍色：聚焦北京的方向代表進港
如果細心查看頁面會發現，所有關于進港的都是青色，例如進港總航班量、進港人數、即將進港航班；同樣關于出港的都是藍色，目的就是要建立觀者顏色對數據類型的認知。
3D地球技法教程：
3D地球動畫效果，純用C4D軟件完成：
下面我們一一介紹：
首先找一張世界地圖，這里稱為“球皮”，ps調整色調，滿意為止。
把球皮放入材質，表面的凹凸效果用置換和凹凸。
小飛機動畫用的是對齊曲線動畫，打關鍵幀轉一圈，記得勾選切線，不然飛機會橫的飛。
國家之間樣條生成用的是插件 LON—LAT Connection，這一步很關鍵，插件使用很簡單就是選擇：洲-國家-城市～洲-國家-城市，tab切換有設置可以設置樣條曲線的高度弧度等。
上面教程說的很籠統，有基礎的同學肯定會明白，接下來我們來看如何開發落地。
3D地球效果開發落地：
首先我們要知道一個網站Echartsj 里面有個3D路徑圖，看下圖：
上圖兩個地球路徑圖組件，都可以實現我們的效果，只需要我們把色調調整好的“球皮”給到開發人員，替換組件里面的圖片即可，組件生成的地球原理是一樣的，也是由一張圖包裹成球，地球數據光線顏色可更改，把色值給開發人員即可。
1、數據可視化設計，首先了解功能，分析數據之間的關系
2、構思主題，圍繞主題設計其他元素，特殊效果跟開發溝通
3、分析數據，合理選用圖表，對圖表能靈活運用
4、不要忽視文案的設計，提取關鍵詞
5、加強技法，了解數據可視化設計網站
數據可視化大屏設計，對視覺表現、數據的合理呈現有一定的要求，這兩點都是由設計師為主導，所以設計前根據產品定義風格，了解數據之間的關系非常重要，切記不要太依賴原型圖。
作者：吳星辰
轉載請注明：學UI網》數據可視化大屏設計經驗分享【高級篇】
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn