可视化技巧

1.颜色

颜色的作用:色调亮度会影响可视化图表对用户的感知。

颜色的三要素

RGB颜色空间

RGB颜色空间:红色(R)绿色(G)蓝色(B)
颜色代码:#FF0000 [0-F]
颜色RGB数值:(0,0,0) [0-255]
颜色RGBA数值:(0,0,0,1)

HSV颜色空间

HSV颜色空间:色调(H)饱和度(S)亮度(V)

HCL颜色空间

保证色彩变换均匀,饱和度在色环上分布均匀

调色板:Brewer调色板:由地图学家Cynthia Brewer为制图学设计,目前广泛应用于可视化图表绘制中。
分为三种类型:定性型、分歧型、顺序型

配色原则:

①不选用同一色系:同色系会使画面看起来对比度非常弱,色彩指代感弱,色彩之间不好拉开层级。

②不选用颜色相近:邻近色会使画面感觉偏弱,没有强对比,画面层次感不足。

③不选用同色透明:同色透明会让画面非常的灰,是可视化中的大忌,切勿使用。

④多选用对比色:强对比可以拉开视觉层级,突出画面。

“631”法则

运用配色 631 法则,将配色定义为主色 60%,辅助色 30%,对比色 10%去贯穿整套界面。文字的颜色通过重要,普通,次要去分配,带有色彩倾向丰富页面视觉。

chrome color by fardos

google chrome的一个插件,包含主题色配色搜索、自定义主题色匹配配色方案、渐变配色等功能。

2.布局

1.考虑到使用者的习惯和阅读需求。通常来说,报表遵循从上到下、从左到右的原则。因此核心指标放在左上方或顶部。
2.实际布局中,不一定使用主次分布,也可以使用平均分布。
3.提高标题和文本的可读性。
4.不要重复相同业务意义的表达。

仪表盘布局类型

F布局:概要放在左侧中。随后的详情可视化数据位于右侧,用于提供更多详细信息。
Z布局:遵循自上而下的阅读模式。概要信息位于界面顶部。相关的可视化数据位于概要下方,并占据了内容区域的整个宽度。
并排布局:用于比较两项指标。这种模式允许用户从左到右扫描,反之亦然,方便比较信息。

3.交互

1.美即好用效应:当界面被设计得足够美观时,用户往往会容忍一些较为轻微、影响较小的可用性问题。
2.多尔蒂门槛:系统需要在 400ms 内对使用者的操作做出响应,这样才能够让使用者保持专注,并提高生产效率。
3.费茨定律:任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关。
4.希克定律:决策所需要花费的时间随着选择的数量和复杂性增加而增加。
5.雅各布定律:用户将大部分时间花在别人家的网站 (产品) 上,而不是你的。这意味他们希望你的网站 (产品) 跟别人的有相同的操作方法和使用模式。
6.简洁法则:为了更方便的理解这个世界,人类会将接受到的大量信息进行过滤和简化!
7.邻近性原则:彼此靠近的元素倾向于被视为一个组。
8.相似性原则:相似的元素倾向于被视为一个组。
9.连通性原则:视觉上相连的元素倾向于被感知为具有更强的相关性 (相较于不相连的元素)。
10.同域原则:如果元素处在一个具有明确边界的区域内,那么在用户的感知中,这些元素倾向于成组。
11.米勒定律:在短时记忆中,人平均只能记住7(±2)个项目。
12.奥卡姆剃刀:如无必要,勿增实体。
13.伯斯塔尔法则:接受多变,输出保守。
14.系列位置效应:用户更容易记住系列中的出现的第一项 (首因效应) 和最后一项 (近因效应)。
15.冯·雷斯托夫效应:当存在多个相似的物体时,与众不同的那个更容易被记住。
16.蔡格尼克记忆效应:人们对未完成任务的记忆比已完成的更深刻。
17.特斯勒定律:任何系统都存在固有的复杂性,无法减少;唯一的问题是谁来处理它。
18.帕累托原则:对于许多事件,大约80%的影响来自20%的原因。
19.帕金森定律:任何任务都会拖延,直到所有可用时间都用完为止。

交互路径

高效的仪表盘结构主要基于两个因素:①良好的可视化能力。②在两个故事之间导航的方式,即交互路径。

交互模式

关键指标下钻模式:该模式通常为可单击的图形,如条形图和环形图。使用数据图来驱动关键指标面板。单击某个细分数据可以显示指标的数据详情。
详情说明模式:此模式使用关键指标面板来驱动仪表盘,并通过数据图表为关键指标提供解释说明。常见说明形式有指标趋势和指标细分。
多图表构成模式:此模式为一个图表驱动另一个图表。用户可以单击某个细分数据以查看另一个关联数据图。例如,点击某个用户群体(细分)查看用户群体的浏览量(趋势)。

4.心理

锚定效应

https://www.bilibili.com/video/BV1zA411T7Ha

简单原则

指用最少的认知努力去感知视觉意义的能力。因此,这一原则也被称为优图原则。为了避免信息过载,人类在复杂形状中寻求简单性。简单的图表更适合传达数据,比视觉上复杂的图表更容易处理和记忆。设计者应采用诸如项目分类、取消使用多种颜色、简化或减少行话等办法,以减轻认知负担。

接近原则

相较于间距较远的元素,位置彼此接近的元素会被看作是一个整体的一部分,在这些不同元素之间的距离比其他元素更近时更是如此。视觉相关的元素至关重要,有利于观众浏览已知信息并尽可能轻松地加以理解。接近原则用于传达关系。设计者可以通过组织每个群体周围的空间来帮助观众构建信息并更好地感知意义。

相似原则

相似的元素在视觉上进行分组,而不管它们彼此是否位置接近。分组可以发生在视觉和听觉刺激中。人们倾向于寻求同质性。设计者可以使用相似的特征和属性(颜色、大小、形状等)来建立物体之间的联系并明确分组。

图形与背景关系原则

整体感或统一感取决于如何看待一个物体与其所在区域之间的关系。通过该原则提高可读性的方法:①模糊性:图形中物体趋向于清晰分明,而背景中的物体则模糊不清。②大小:看起来较大的图像被视为更近,是图形的一部分,而较小的图像看起来更远,是背景的一部分。③对比度:高对比度可以更易区分两种类型的物体,因此物体之间具有高对比度会更易感知图形和背景。

视觉焦点原则

通过有针对性地设置焦点来吸引受众的注意力。设计者可以使用高亮显示和来自其他图表元素中不熟悉的形状或颜色等方法来突出一个焦点。而且,不必只局限于一个焦点。然而,不同的焦点会分散观众的注意力,所以建议简单化,关注单一图像中的一个或两个焦点。

5.可视化测试

信息传达者角度
①能理解:可视化传达了我们想要传达的功能
②可解释:用户可以将可视化与正在测试的潜在现象相关联
③能影响:用户可以得出结论,并且可以感受到它带来的情感倾向。
④可操作:用户可以根据需求进行合理操作。
信息接收者角度
①您可以通过图表看到什么/此图表试图告诉您什么?
②最好的值是什么?最差的值是什么?
③是什么导致数据变成这样?现实生活中发生了什么,影响了您看到的数字?
④总体而言,这是好事还是坏事?
⑤下一周期,您有什么不同的方法来改变这些数据?这些信息将如何影响您?