虽然三维图形带来的立体感很强，但用在可视化设计中，很容易出现问题。

一方面，三维图形具有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。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

转载请注明：学UI网》数据之美：地理空间数据可视化II

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.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。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.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。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司