超多案例!B 端后台类产品的图表设计思路及方法

释放双眼,带上耳机,听听看~!
为了达到清晰传达和视觉美观的目标,我们结合实际项目,进行大量探索及思考,梳理总结了一套适用于 B 端后台类产品的图表设计思路及方法。

随着大数据的兴起,数据价值的不断挖掘,图表作为数据呈现与分析的有效手段,正扮演着越来越重要的角色。我们在进行 B 端平台设计时也在思考:如何让图表清晰的传达信息,同时带来美观的视觉感受。

为了达到清晰传达和视觉美观的目标,我们结合实际项目,进行大量q g ? 2 x % , l探索及思考,梳理总结了一套适用于 B 端后台类产品的图表设计思路及方法,涵盖了曲线图、柱状图、饼{ ~ q + _ U图、雷达图、漏斗图等各类常用图表类型。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

图表视觉层级

图表能够承载大量数据信息,同时视觉元素较多,如果只是` ` I , l :凭借设计师的审美喜好进行视觉设计,没有整体信息读取考量,可能会导致重要信息未能凸显,降低用户读取效率。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

为清晰传达信息,进一步提升读取效率,我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度,将图表元素8 f w 2 – P | ) _分为三类,分别为“底层# . * p W % * d元素”、“中层元素”和“顶层元素”,并依据不同视觉强度E | Q E j分别设计三类元素。底层元素最弱,顶层元素最强。通过这种方法,梳理图表元素的前后关系,能够清晰把握元素视觉层次,保证信息传递效率。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

1. 底层元素设计

在各类图表中,我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰,最大程度突出主图形,底层元素全部使用浅灰 4 =色进行设计。我们发现,当元素与背景颜色的明度对比在 1.2:1 时,人眼较难看到元素;当对比度在 2.0:1 时,视觉强度过强,易吸引用户注意力。通过元素视觉强度的调研及视觉尝* b o ^ n F ? Q g试,最终确定元素与背景对比度在 1.6:1 左右,视觉强度偏弱但H I k f ; v l人眼能够看清的程度。以保证元素视觉不突兀,只在需要查看时可以被发现。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

2. 中层元素设计

中层元素的内容包括数据图C ( ! R 6 8 b e u形、数据线段等承载主要数据信息的元素,是图表中表达数据的关键元素。与底层元素相比,中层元素采用更低明度与更高饱和度的数据色来表现,使元素从页面中凸显出来,保证可读性。同时在样式上适当加X # ] L入渐变、描边等样式,丰富视觉层次,带来美观的视觉感受。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

3. 顶层元素设计

我们把顶层元素定义为图表高亮信息,内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突G { j D _ n z 1出,使用深灰色、强调色等强对比度样式,并辅以动画、投影等手法保证明显的视觉强调效果,保证顶层信息最有效的传达给用户。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

4. 最终效果

通过层级梳理,并绑定元素重要程度和视觉T R i F d _ X w强度的方法,设计后图表主次信息均按重要_ t Q @ ]程度进行对应8 _ } 2 N / a视觉强度的展示,让用户能够在第一时间接收到最重要的信息,提升信息读取效率。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

图表排版设计

图表排版是指各元素在图表中的尺寸及布局等{ ! i,对于 B 端后台类产品来说,不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验?我们经过大量讨论推敲,梳理出一套针对 B 端后台类产品的排版规则,力求保证用户图表的使用体验。

1. 图表尺寸

图表尺寸指图表整体长宽高。在项目中我们v * ; z发现不同尺寸的图表对数据展现效果影响巨大,例如巨量数据的图表挤在名片大小的区域例显示,这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情{ W f X z } ? = g分析”三类典型场景,并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸,针对不同尺寸优化图表的信息展示密度,以达到d 3 v J _高效读取信息的目的。

“迷你图”尺寸最小,舍弃了 Y 轴等不必要信息,利用小面积展示最关键的图表信息,并控制数据密度,保T V 6证信息高效读取。

“中号图表”尺寸受限,限制坐标轴刻度数量和数据的密度,例如曲线图数据点不高于每 4 像素 1 个数据点,Y 轴坐标刻度不超过 5 个,以确保信息密度不过载,这类图表尺寸通常用在针对某大类内容进行多方面检视时。

“大号图表”尺寸最大,不限制数据信息密度,给予最全最详细的展示,这类尺寸通常用在数据详G @ + O情页等详细分析场景中。

最后考虑到多图表混合排列时,饼图、地图等大面积填色图4 7 ] M表,相较折线图等描边型图表,视觉感受更加膨胀。我们缩小了填色类图表的实际高度,保证多种图表混合排列时,视觉感受的均衡。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

2. 坐标轴

坐标轴在图表中出现的频率较高,那么坐标轴常见的设计2 c 4 e ^ ` {问题有哪些q 9 – d X 2呢?

第一是横纵坐标轴的刻度出现过密情况。I s k

如果坐标轴所承载的是连续数据(连续数据指可量化的,连续不断的,在区间内可任意取值的数据,如时间、金额、人数等),设计S _ _ , p 1师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据(离散数X b S o !据指不可量化的,无关联的,不可在区间内任意取值的数据,如分类、软件版本、省份等),可采取增加坐标轴缩放功能解决。

第二个常见问题是刻度的z 9 ! l ` h { Y d说明文字过长。

如果是 X 轴(横轴)文字过长,除了在可控范) ) | X G 3围内减少刻度,还可采取文字倾斜 45~90的办法(如文字全部为中文,可用竖排代替倾斜 90),缓解信息过密看不清的情况。

j N a r 0 l 9 –果是 Y 轴(纵轴)文字过长,) B = N j 9 6 p G需联合研发一起调整数据的单位,比如把“元”调整为“百万元”。

如果不能调{ I Q 3 f J L整,那就要根据所使用的图表库有针对性调整。例如常用的 Echarts 图表、D3 图表等开源图表库,需要提前预@ ( 4 . J N估刻度文字长度并预留出来,否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是 AntV 等可自适应的图表库,则不必提前处理,图表库会自动按刻2 L z T v度长度进行整体调整。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

3. 图例

图例作为图表中不可或缺的_ G P P部分,在各类图表库中位置不尽相同,由于不同图表样式差异很大,图例的位置需整体考虑并适当布局摆放,但在同一产品或页面内,过于随意的摆放图例j M : % k,会导致页面统一性较差,同时增加用户的浏览成本。我们团队所负责的 B: D X 3 ] 8 j ( Pq 0 商业产品矩阵,作为面向用户的产品集合,产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题,我们基于业务特点,针对 B 端商业产品矩阵制定了图例布局指导原则。

我们以提升屏幕信u M Z * r :息密度为目标,分析不同场景S m v = E的页; d ~ z – } N面排布,制定了顶部和右侧两种较为宽松的指导原则,供设计* j F 8师在没有明确的更优z 0 { ^方案时选用。

当图表是左右两端对齐 E ^的类型,例如折线图、柱状图时,建议将图例放置在图表顶部。这样能结合标题等其他元素进行o 3 f C Q , h .统一排布,减少占用空间。当图表本身左右都有空余空间时,例如饼图,建议将图例放置于图表的右侧。也能够节省页面的空间。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

数据色板设计

色板作为常见的数据表达手段,能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工o * 1 D a具。我们经过大量探索尝试,梳理总结出图表色彩的两个关键V c : k ^ Y 8维度:辨识度与统一性。既需要颜色间突出强烈可清晰辨别,又需要颜色整体能形成统一风格,以达到清晰传递和美观, n + T 8 * 的目标。如何平衡辨识度与统一性,是@ ` S V } D @我们遇到的. f A @ K m 4 )难题。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

1. 辨识度

辨识度在图表中有两方面:颜色与页面底色的辨识度,各颜色之间的辨识度。@ h K u ( m g对于第一种,我们采用控制颜色的明亮程度来确保色彩辨识度,尤其对于黄色、f i E j青色等本身较亮的颜色# W f V P O = d,降低颜色的明度,确保在浅色背景下颜色可辨识。

对于第二种~ } 2 ~ + u w x也就是各颜色之间的辨识度,通过实验发现单u O ;纯的颜色色相变化,例如红色与橙色的区分,人眼不容易分辨。所以采用了色相变化+明度变化的方法,即深红色与亮橙色,深蓝色与亮紫色等,I 2 3 &这样用户能在第一眼就明确分辨,保证颜色间的辨识度) V ( 2 o $ g。最终把颜色j O c T @ z t J /映射到色彩空间的三维坐标中,运用欧几里得距离公式测算颜色间的5 2 c距离长短,来衡量各颜色间色差数值。颜色间距离越远代表色差越大,利用数据辅助衡量辨识效果。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

2. 统一性

色彩统P : 3 0 ; u ? !一性的作用在于确保图表整体风格一致,色彩搭配舒适,从J 0 ] $ H * E而带来美观、统一的视觉感受。b ! ^为达目的,我们首先提炼商业产品设计风格为明亮、强g 7 P b i J F L ?对比,其次把设计风格转化为色彩数值。经过实验,把颜色明度限制在 50%-70%,把饱和度3 { k H限制在 75%-85%,并d 8 S J # l I在区间内不断波动。这样既保证了色彩i Y K % * * Q L视觉感受的统一,各颜色间又能够有清晰的辨识度。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

3.J w 9 H b 颜色量化与工0 h D 3 ( N o

量化颜色,将色彩转化为数值,利用数值来验证设计师的「感觉」,能够保证方案合理性,f { Q Q S 6保证设计质量。但通过尝试,我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料,我们最终决定以小众的 HCL 色彩模式来衡量色彩。其` v + A中 H 表示色相、C 表示饱和度、L 表示明度。H– ) L _ t q / VCL 区别于传统的 RGB 或 HSB 模式,它能够将人眼对颜色的感知精确的量化为数值,例如黄色相比蓝色明度更高,都能如实的反馈到数值上。也由于此特性,HCL 模式在诞生距今不到 20 年间,已被一些先锋设计师用于数据可视化的呈现| q }中。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

但是 HCL 作为小众色彩模式,目前设计软件鲜有支持,造成了 HCL 色彩不直观、不方便调色等的问题。为解决此问题,我们已初步完成智能C $ i配色程序,只需输入品牌色,就能自动生U ! C成图表色版,并在风格上与品牌色匹配,达到整体色彩的统一。我们也将一套调配好的色板及 HCL 实用小工具附在文末,帮助大家直观的查看和使用 HCL 模X d : 9 ^ v ~ a式颜色。

结语

数据价值就像不为人知的宝藏,隐藏在一条条枯燥晦[ G U u } 4 Y 4涩的数据背后。而图表则是开启宝藏的钥匙,是发掘数据价值的强有力武器。通过对图7 n c % F U ? U表的不断探索优化,我们希望能够最大化数据的价值。通过图表,a p m ; 2让数据最直观的展现;通过图表,让其背后的规律浮出水面被人探知;通过图表,让 B 端不再有难懂的数据。

附:色板及 HCL 工具

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

  • HCL 调色 Ske0 b Q / rtch 插件:https://github.com/petterheterjag/$ M [ ?chromatic-sketch
  • HCL 颜色生成器:htz ] W O m D Ltp://medT o ) 9ialab.github.io/iwanthue/
  • 色彩可用性检查工具:https://color.review/

欢迎关注作者的微信 g , [ } d ^ E公众号:「百度MEUX」

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

给TA打赏
共{{data.count}}人
人已打赏
教程分享

如何提升UI设计的高级感?来看高手的深入分析!

2021-1-11 17:17:08

教程分享

如何顺利通过设计评审?来看京东高手的实战经验!

2021-1-13 13:24:28

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索