写给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，大屏也做了深入的分析和研究，值得推荐的一本书。

思路清晰，讲解清楚，没有晦涩难懂的理论，特别实用！