寫給UI設計師看的數據可視化設計

《寫給UI設計師看的數據可視化設計》 讀書筆記 思維導圖：https://www.processon.com/view/link/64159839ce5e02117bcd2a39 · 數據可視化學習 o 數據可視化設計師技能樹 § 產品能力 § 交互能力 § 設計能力 § 數據能力 § 溝通能力 o 數據可視化設計四要素 § 1. 數據感 § 2. 設計風格 § 3. 動效設計 § 4. 3D 設計 o 建立數據可視化設計學習體系 § 1. 多看——建立自己的靈感庫 § 2. 多練——提高設計水平 § 3. 多思考——提高創造能力 · 圖形設計 o 圖形分類 § 隨時間變化圖形 · 對一段時間內數據的展示 · 1. 折線圖 o 常用於表示一個連續時間段內數據的變化趨勢，主要功能是能夠清晰地反映出數據隨時間變化的趨勢 · 2. 柱狀圖 o 用於隨時間變化而產生變量的數據統計 · 3. 堆積柱狀圖 o 可以展示兩個或多個數據的變化，以及數據之間的綜合比較情況 · 4. 面積圖 o 和折線圖相同，與折線圖唯一不同的是，其自變量數據和座標軸之間有顏色填充，這樣能更加突出數據的趨勢變化 · 5. 蠟燭圖（K線圖） o K線是圍繞開盤價、最高價、最低價、收盤價等來反映市場趨勢和價格信息的 · 6. 瀑布圖 o 可以呈現隨時間變化的數據，展示某時間段內起點到終點的數據變 o 不同於堆積柱狀圖，瀑布圖能夠重點突出數據變化的結果，以表示多個特定數據之間的變化關係 § 類別比較圖形 · 主要用於兩個或兩個以上類別數據的比較 · 1. 柱狀圖 o 不僅可以用於表示時間維度的數據變化，還可以用於類別的對比 · 2. 分組柱狀圖 o 可以在同一數軸上展示各個分類下的不同分組數據 · 3. 氣泡圖 o 可以輕鬆駕馭二維到多維的數據展示 o · 4. 平行座標圖 o 常用於克服笛卡兒座標系，但不能多維展示數據的分佈及關係。它可以用多個垂直平行座標軸來展示不同維度的數據 · 5. 多條折線圖 o 不僅可以表示數據隨時間變化的趨勢，還可以展示多組數據的對比情況 · 6. 子彈圖 o 子彈圖的數據展示類似於儀表盤，它的優勢是可以表達豐富的數據信息，並且在UI設計中佔用的空間相對較小 § 排名圖形 · 可以展示每個分類數據的排名順序，還可以直觀地展示最大數和最小數等 · 1. 有序條形圖 o 主要用於展示各個分類的數據排名 · 2. 有序柱狀圖 o 與有序條形圖一樣，有序柱狀圖也能呈現數據的排名情況 · 3. 平行座標圖 o 不僅可以用於不同類別數據的對比，也可以用於展示數據的結果排序 o 如果數據既需要展示各個維度類別的對比，又需要體現最終排名情況，那麼平行座標圖非常適合 § 佔比圖形 · 主要用於展示分類數據佔整體的比例情況 · 1. 餅圖 o 展示佔比數據 o * 在數據可視化產品中，因爲餅圖是大面積的色塊，視覺上會非常突顯，很容易搶走重要數據的風頭，所以使用時要酌情考慮 · 2. 環形圖 o 環形圖與餅圖最明顯的區別就是中間區域是空的。因爲環形圖的視覺表現不像餅圖那樣突出，在環形圖的空心區域還可以放圖標、標題、數據等，相對餅圖其利用率更高 · 3. 堆積面積圖 o 堆積面積圖是疊加數據，沒有重疊的部分，它的整體色塊面積就是數據總量，其中不同的分類數據可展示不同的佔比情況 · 4. 矩形樹圖 o 矩形樹圖是非常直觀的佔比圖形，可展示多層級結構的佔比情況。如果用不同顏色表示各個分類，則可以在大分類中不斷下鑽二級分類 o 需要注意的是，在不斷下鑽的同時要保證圖形的易讀性 · 5. 旭日圖 o 旭日圖相當於多個餅圖，能夠展示多層級的數據，同時還能夠表示各分類的關係及佔比情況 § 關聯圖形 · 展示兩個或兩個以上的數據變量之間的關係 · 1. 散點圖 o 將所有數據以點的形式展示在座標系上，點的位置由X軸和Y軸的變量數值決定。點越聚集說明數據的關聯性越強，反之關聯性越弱 · 2. 氣泡圖 o 展示多維的數據 · 3. 柱狀圖+折線圖 o 柱狀圖+折線圖可以表示關聯關係 · 4. 熱力圖 o 可以在座標軸上呈現數據的大小分佈，也可以在地圖或圖片上使用 § 分佈圖形 · 主要用於展示每個數值在數據集中出現的頻次或數量 · 1. 直方圖 o 直方圖與柱狀圖非常相似，但在數據表示上，直方圖主要展示數據的分佈情況，而柱狀圖是比較數據的大小 · 2. 箱形圖 o 箱形圖因形狀類似於箱子而得名，其能夠很好地展示一組數據的分佈情況，以及分析一組數據的最大值、最小值、平均值、四分位數 · 3. 小提琴圖 o 小提琴圖結合了箱形圖的特徵，同樣是展示數據的分佈情況 § 關係圖形 · 表示多個狀態之間的關係及數據移動的變化 · 1. 桑基圖 o 也被稱爲桑基能量平衡圖，因爲桑基圖始末端的分支寬度總和相等，可以表示數據間的關係和一種特定類型的流程圖 § 各個國家是圖形的節點，流動的線條代表流量，線條越寬表示流量數據越大。桑基圖常用於能源流向、收入支出、人員流動等數據的可視化展示 · 2. 和絃圖 o 用於表示數據間的關係 · 3. 韋恩圖 o 通過圖形與圖形的疊加，表示集合與集合之間的相交關係 o 圖形選用 § 巧用真實數據選圖形 § 從突出價值數據選圖形 § 從可讀性角度選圖形 § 3D圖形的科學運用 · 當頁面中的某個區域視覺效果薄弱時，也可以採用3D圖形的形式來豐富頁面，使之保持頁面的視覺平衡 § 直方圖與柱形圖 § 從對比性選圖形 · o 圖形設計 § 圖形視覺層級 · 第一層級：數據可視化的元素，也就是柱狀體，這是柱狀圖呈現數據的核心元素 · 第二層級：標題，重要但不是核心，明瞭即可 · 第三層級：分類標籤和副標題。分類標籤用來強調可視化元素是什麼，副標題是對圖形的備註和解釋 · 第四層級：起始線。起始線是0的刻度線，強調開始的位置 · 第五層級：刻度值。弱化刻度上的數值能夠突出圖形中的數據 · 第六層級：網格線也叫標識線，用來標識可視化元素對應的刻度值 · 第七層級：圖形背景，因爲任何元素都呈現在背景上，所以背景層級最低 § 折線圖的設計原則 · 刻度值從0開始，隨着數據的增減，刻度值也做相應的變化 · 折線的粗細要適中 · 在產品的圖形設計中，一般網格線和起始線都是一像素，折線一般用兩像素，這樣的粗細會有較好的視覺表現 § 柱狀圖的黃金法則 · 柱狀體不能太粗也不能太細，間距要有規律，這樣在視覺上纔能有好的表現 · 定義柱狀體的間距可以用5分原則設計法，即柱子之間的間距爲N，左右兩邊與柱子之間的距離就是N/2 · 在保證界面元素整體協調性的情況下，儘可能把柱子的寬度設計成N，這樣視覺上最爲協調，如果不能則一定要保證間距遵循5分原則 · 把X軸的數值做成動態變換方式，即隨着數據的增減，刻度值也隨之改變 § 餅圖的規範設計法則 · 餅圖分類過多時，一般不把文字放在圖形元素上，因爲一旦出現幾個相對較小的佔比數據，字就很容易溢出，不容易辨別指向的分類 · 餅圖的分類最好從12點鐘的位置開始，這樣較爲符合人的閱讀習慣，即從上到下、從左到右 · 任何時候，如果有“其他”這項分類，無論其佔比多少都要放在最後，因爲其數據通常是最不被關注的數據 § 突出圖形重要數據，弱化不重要數據 · 重要數據一般是業務上重點強調的數據，也可能是用戶最關注的數據，因此在設計圖形前，明白數據的主次關係是至關重要的 § 圖形用色技巧 · 1. 單色色塊圖更具易讀性 o 通過改變顏色的飽和度和明度，單色系色塊能夠很好地在視覺上表現出對比關係 o 當設計色塊圖時，由於色彩的飽和度和明度呈現遞增或遞減，色塊上的文字容易與色塊失去對比性，導致易讀性差，因此最好能給字體加描邊或投影，增強其對比性 · 2. 用色有規律 o 位置可控的圖形就需要有規律地呈現色彩 o 分組柱狀圖要慎用同色系顏色，否則不容易辨別分類。如果需要使用同色系，就一定要有規律地呈現，這樣在視覺上不容易混淆 o 類似於這樣分類過多的圖形，都需要使用有規律的顏色，只有這樣纔不會因爲用色接近而出現呈現上的混亂 · 3. 通過分類屬性配色 o 通過分類屬性配色，是迎合用戶認知的一種配色技法 § 提到天空會想到藍色，說起草坪會想到綠色，這就是人們共同的認知，而把這種認知運用到配色上，就會符合人們的心理預期 o 通過屬性的寓意配色也是一種配色方法，這種配色方法的專業名稱爲“情緒板” § 小孩的標籤是活潑可愛的，因此就會想到其對應的顏色是黃色，而提到老人會想到用灰棕色、女人使用粉色、男人使用黑色和藍色等 o 在配色時要考慮行業屬性、產品屬性、用戶屬性，因爲只有找準特徵才能把配色運用得更合理 § 圖形添加說明的重要性 · 在圖形上添加簡單的說明，來告訴用戶數據變化的原因，尤其在面對不知情的用戶時，這會解決用戶的疑惑 § 標題成就圖形 · 標題也是展示數據的一個維度，可以用於呈現數據的結論和總量等 § 簡潔，少即是多 · 簡潔的圖形往往讓人在視覺上感覺更舒適，如果圖形中呈現的數據太多，可能會導致用戶無法獲取全部信息 § 圖形的擴展性設計 · 通過對圖形進行擴展性設計可以讓用戶更容易理解數據、減少用戶認知成本或增加數據維度的展 · 1. 圖形結合圖標設計 · 2. 圖形結合形象元素設計 · 3. 圖形結合業務關鍵詞設計 · 4. 增加數據維度設計 § 圖形的營銷手段 · 通過設計可以滿足圖形的營銷手段 · 表格設計 o 排版 § 1. 文字左對齊，數字右對齊 · 針對的長短不一的名稱和大體量的數字 § 2. 弱化邊框 § 3. 去掉邊框與分割線 § 4. 強調標題 § 5. 突出重要信息 § 6. 表格擴展設計 · 單一樣式容易審美疲勞，增加一些創新元素 o 字體 § 很多數字字體不是等距設計，由於不同數字所佔寬度不一樣，這樣的設計在視覺上容易誤導用戶 o 表格與圖形結合 § 表格中的數據用圖形的形式表現，不僅能助力數據的直觀呈現，而且還能提高表格的顏值和界面的設計感 · 文案設計 o 1. 積極友好 § 不要去命令用戶，而是要尊重用戶，語氣上要友好、積極，這樣用戶在使用產品的過程中才會感到很舒服 o 2. 從用戶的需求和痛點出發 § 提示性的語言只有能滿足用戶需求或解決用戶痛點，用戶才願意配合，甚至積極完成任務，從而達到產品的目的 o 3. 渲染產品調性 § 通過給人格形象設計專屬的語言、語氣，產品的調性也會越發突出 o 4. 拉近與用戶距離 § 文字的語氣則可以營造情緒與氛圍。對於不同類型的產品，需要用不同的語氣來表達，恰當的語氣可以拉近與用戶的距離 o 5. 提高閱讀效率 § 1. 目的先行，直擊重點 · “需要再加10元商品，就可以免郵費” => "免郵費，需要再加10元商品" § 2. 文案簡潔，高效傳遞信息 · 產品中提示文案一般不要超過兩行，否則用戶就很難達到掃一眼即懂的效果 · 內容過多時，要分條目展示 o 6. 價值引導 § 價值引導一般是從產品出發，給用戶提供價值感受，從而促使用戶產生行爲操作 § 當產品希望用戶去完成某個操作時，要告知用戶這樣操作的重要性和意義，這樣用戶纔會更願意去完成 o 7. 文案表述一致性 § 提示文案的一致性能讓用戶不迷惑，清晰、明確地幫助用戶建立使用產品的認知 o 8. 文字排版規範 § 1. 數字與文字間加空格更易閱讀 § 2. 使用阿拉伯數字 § 3. 註釋文案不用空兩格 o 9. 文案標點使用規範 § 標點的合理使用是文案設計的重要組成部分，標點可以強調感情、表達語氣，助力產品的人格表現 § 當表達一件積極的事情時，可以用感嘆號強調；而當用戶操作出現失誤時，最好不要使用感嘆號，否則會給用戶一種被指責的強烈感 § 對於簡短的文案一般不需要加標點，如標題、標籤、懸停文本中的註釋、表格中的句子等 § 使用案例 · 還沒有任何收藏 o 還沒有任何收藏。（不推薦加標點） o 還沒有任何收藏哦～（強調語氣可以加標點） · 請輸入 o 請輸入。（不推薦加標點） o 請輸入（推薦不加標點） o 請輸入...（推薦加省略號） · 忘記密碼 o 忘記密碼。（標點錯誤） o 忘記密碼（推薦不加標點） o 忘記密碼？（標點正確） o 10. 英文使用規範 § 如果只是爲了滿足設計形式排版上的需要，重點不是體現單詞意思，英文單詞要大寫開頭 § 專有英文名詞，需要按官方的規範書寫 o 11. 特殊字體使用 § 在數據可視化產品設計中，爲了迎合某種設計風格，常常會使用一些特殊字體（特殊字體：非系統默認的字體） · 可視化大屏設計 o 可視化大屏設計流程 § 1.需求調研- 需求評審通過 · 1.1 產品定位 · 1.2 瞭解業務 · 1.3 用戶研究/訪談 · 1.4 需求評估 · 1.5 競品分析 § 2.數據分析-數據覈實通過 · 2.1 數據維度分析 · 2.2 提煉關鍵指標 · 2.3 歸類數據 · 2.4 可視化研究 · 2.5 圖形選用 § 3.產品設計-交互/視覺評審 · 3.1 場景分析 · 3.2 信息架構 · 3.3 故事性架構 · 3.4 交互設計 · 3.5 UI/動效設計 § 4.可行性測試-研發 · 4.1 需求匹配測試 · 4.2 數據表現測試 · 4.3 易用性測試 · 4.4 可行性測試 · 4.5 硬件載體測試 o 可視化大屏尺寸 o 可視化大屏視覺設計 o 可視化大屏佈局 § 平衡感 · 平衡的畫面會給人一種穩定感和舒適感。平衡不一定是對稱結構，而是人對視覺焦點、構圖形狀、內容主次、色彩呈現等方面的一種平衡感知，而畫面裏的重要信息被弱化、圖形元素的不統一、不合理的色彩表達，都可能會損失畫面的平衡感 § 格式塔原則 · 格式塔原則的運用能起到非常好的設計效果，其不僅可以合理地構建信息佈局、清晰有效地呈現信息內容，還可以在細節的設計上減小觀者的認知負荷 · 包括 o 接近性 § 物體之間的相對距離會影響人的感知，即會認爲臨近的物體比距離相對較遠的物體更具有關聯性，同時它們會被看作一組物體 o 相似性 § 相似性原則在界面設計中運用得非常廣泛，是梳理信息層級的重要方法 § 相似性原則講的是，形狀、大小、顏色相似的物體會被視爲屬於一個羣體 o 閉合性 § 閉合性原則就是將不完整的局部感知成一個整體 o 連續性 § 連續性原則是引導視覺遵循一致的路徑，通過共性將物體感知連成一個整體 o 包含性 § 包含性可以把信息分組、內容分離，提升頁面的層次和機構性，有助於信息的分類展示 § 黃金比例 o 在日常生活中，警告類的信息通常會用較爲突出的暖色系，比如紅色的汽車剎車燈、黃色的警告標示，其實對於產品中的預警提示也可以採用這樣的配色方案 · 色彩之美 o 用色技巧 § 色相 · 色相是顏色測量術語，用於區別不同的顏色，所謂紅色、黃色、綠色、藍色等稱呼就是色彩的色相 · 明度與飽和度 o 明度 § 明度是指色彩的明暗程度，明度最高的顏色爲白色，最低的爲黑色 § * 色彩明度的使用一般不要超過6個等級，同時要儘可能把色彩明度的跨度拉大，增強對比性 o 飽和度 § 飽和度是指色彩所具有的鮮豔強度 § 飽和度最高的顏色被稱爲純色，最低的被稱爲灰色，即無彩色 § 在配色上暗色背景的色彩明度和飽和度不宜過低，否則對比性較弱，視覺上會略顯沉悶，需要使用飽和度和明度較高的顏色，這樣在視覺上更爲突出聚焦 · 同類色 o 明度變化的同類色可以營造出和諧統一的視覺效果，但同類色的缺點是對比性差 o 如果產品的整體風格不需要太多的色相呈現，圖形設計的配色則可以使用同類色，但顏色使用要有規律，比如色彩的明度呈現遞增或遞減的視覺效果，並且要拉大明度的跨度，這樣能強調分類的對比性 o 配色案例 § 用突出的色彩強調第一名，對於類別中的“其他”次要分類數據使用視覺上較弱的顏色 § 紅色、橙色等爲暖色系，這類顏色可以使物體看起來比實際的要大，在視覺表現上較爲突出 § 藍色、藍綠色等爲冷色系，這類顏色可以使物體看起來比實際的要小，在視覺表現上有收縮感 § 明度高的顏色具有輕快感，明度低的顏色具有厚重感等 o 視覺無障礙設計 · 交互（inter-action）設計 o 交互思維 § 用戶體驗 § 用戶思維 § 交互五要素 · 1. 用戶 · 2. 行爲 · 3. 場景 · 4. 目標和行爲 · 5. 媒介 § 5W1H分析法 · What（對象） o 要做什麼產品，產品是幹什麼的 · Who（用戶） o 給什麼人用，產品的功能爲誰而設計 · Where（場景） o 用戶都會在什麼場景下使用產品 · Why（目標） o 用戶的動機和行爲是什麼，如何解決問題 · When（時間） o 瞭解產品功能的優先級，如何做需求排期 · How（驗證） o 驗證需求，測試量化設計 o 交互設計定律 § 1. 費茨定理 · 費茨定律是指從一個起始位置移動到一個最終目標的時間由兩個因素來決定，即到目標的距離（D）和目標的大小（S） § 2. 席克定律 · 席克定律是指當人面對的選擇越多時，做出決策所需要的時間也就越長 § 3. 泰斯勒定律 · 泰斯勒定律又被稱爲複雜性守恆定律，該定律認爲每一個過程都有其固有的複雜性，都存在一個臨界點，當超過臨界點時過程就不能再簡化了，只能將固有的複雜性從一個地方轉移到另一個地方 § 4. 米勒定律 · 米勒定律也稱爲7±2法則，是指在短時間內，一般人記憶信息的容量爲7加減2 · 在交互設計中常基於這一定律來設計界面的信息呈現，以確保用戶不會有信息負擔，從而提高信息的易讀性，保證用戶使用產品的體驗 o 交互設計原則 § 1. 防錯原則 · 防錯原則講的是產品不可能消除所有差錯，但是必須能及時發現並立即糾正，防止差錯形成缺陷 § 2. 美即好用效應 · 當界面設計得足夠美觀時，用戶往往會容忍一些影響較小的可用性問題 § 3. 交互直接性原則 · 高效、易用一直是交互設計所追求的，而交互直接性原則是提高產品使用效率的重要依據 § 4. 嵌入式呈現 · 在列表設計中，由於業務上的複雜性，有時候會遇到需要點擊列表詳情來查看數據結構或列表形式的情況，將頁面跳轉的交互方式修改爲“展開”子列表的嵌套展示的方式 § 5. 用戶心流 · 遊戲化設計就是通過賦予用戶使命感、成就感、獎勵等激發用戶心流體驗的，而在產品交互設計中，不打斷和指引用戶操作同樣是在保證用戶的心流體驗 o 可視化圖表交互 § 交互式圖表 · 滿足用戶兩個需求 o 1. 是給予用戶控制感，篩選出用戶感興趣的數據 o 2. 是在複雜的可視化中，要滿足用戶對不同層級數據的直觀探索。當圖表組件與交互行爲結合時，要以用戶習慣的交互方式實現，並且在視覺上做好引導，這能讓用戶清晰明瞭並且有信心控制好圖表的交互行爲 · 操作 o 1. 鼠標懸停 o 2. 點擊 § 可通過下鑽數據，直觀體現數據之間的關聯性 o 3. 拖動 § 簡單可交互 · 1. 增加交互操作 · 2. 增加視覺元素 § 交互時突出重點 · 根據用戶的交互行爲，突出用戶想看到的數據 § 移動端圖表交互 · 1. 滑動交互手勢 · 2. 縮放交互手勢 · 3. 信息分類——少即是多 · 4. 打破規範 § 聲音交互 · 聲音交互一定要用在適合的業務場景中，避免成爲工作環境中的干擾 o 產品思維 § 產品感 · 產品感是對產品的需求、功能、體驗準確判斷的一種感覺 § B端產品設計原則 · B端產品服務於組織羣體，用戶具有組織屬性，B端產品講究業務的全場景閉環服務 · 1. 穩定性 · 2. 高效性 · 3. 易用性 · 4. 美觀 o B端的UI設計首先要乾淨整潔，因爲B端產品通常都是爲了工作，經常長時間沉浸式使用，所以儘量少用過於刺激性的顏色 o 在設計產品時，應該從用戶使用產品的效率性和便捷性出發，不能讓視覺效果喧賓奪主，這也是B端產品慣用冷靜和理性的藍色的原因 § G端產品設計原則 · G端產品本身不以營利爲目的，用戶主要是機構的公職人員，其產品需求一般來源於政策導向下的業務，或者解決機構的某種問題，再或者擁抱互聯網提高業務效率等 · 1. G端產品設計稿需要與用戶確認 · 2. 在設計風格上要結合用戶的喜好，最好能添加一些體現單位或地方特色的元素 · 3. G端產品設計一般要避免簡約風格，不要出現大面積留白，頁面儘可能充實飽滿 · 4. 頁面設計要符合政府的基調，比如莊嚴、大氣、對稱，避免使用花哨的色彩 · 5. 頁面中若需要出現國徽、國旗、地圖等，要從正規渠道獲取，不可以隨意修改 · 6. 產品的交互設計要儘量簡單，有引導性，在重要的業務功能上要做好防錯機制

【2026年第2本完結】 即使不設計大屏 讀這本書也頗具啓發性 製作單個圖表的規範限制在書的最前部分簡述 書的末尾提供了相當多的資源網站值得收藏 用了大篇幅講動效和3D 我是用不上就粗略看過 這本書有種老手過招的感覺 倘若小白 需要一筆一劃教授一個圖表 這書顯然是不合適的

全面的科普，基礎知識+基礎技能+基礎方法論 入門很合適，當然廢話也很多 成功掃盲3D可視化設計

主要介紹數據可視化大屏的UI設計，有一些設計原則和流程很實用，其餘內容比較空泛，但“設計”本身就不是能寫出來的，需要多看多練。書裏所講的設計前需要遵守的原則和流程節點可以借鑑，而且案例講學也確實生動直觀。

這本書淺嘗擱止，前部分有不少作者的經驗只談，之後的第6、7章的話寫得比較淺。不管怎麼說開卷有益。

屬於ui科普類型的書籍，介紹了ui內部的一些分類，最後面介紹了一些工具和組件庫以及資源網站，挺有用的，建議類似我這種ui小白淺讀一下，瞭解下ui工程師這個職業會用到哪些工具，提高審美，另外還可以瞭解下與開發是如何配合工作的。

乾貨少，有些章節感覺是在湊字數

書的內容挺系統全面的，方法論、案例都有，適合產品新人學習，我自己從案例裏面也看到一些之前沒關注到的產品設計細節問題。

從信息表達層面很細緻的講解了可視化設計理念，指導如何做出更好的可視化圖表。對於動畫，3D，大屏也做了深入的分析和研究，值得推薦的一本書。

思路清晰，講解清楚，沒有晦澀難懂的理論，特別實用！