• 随着互联网数据时代的不断发展，数据可视化也成为承载信息的重要工具。尤其应用于B端设计师和企业服务设计当中，由此掌握数据可视化的方法就变得更为重要。

一、为何要做星图？ 动力使然

•            
• 作为一个设计师，你是否还在花大量时间从0-1设计图表？
• 是否纠结于颜色搭配而不知如何选择？
  
• 是否也遇到过精心设计的图表，上线时因无法达到满意的还原度而就此放弃？
• 
  面对这些问题，不得不要求我们将更多沉淀的设计资产，用组件库代码化的方式呈现出来，去提升设计与开发协作效率，让设计为业务赋能。
• 于是我们与TEG数据产品研发部一拍即合，跨业务共建，保证规范化输出的同时，提升品质感。于是继星火BI之后，星图应运而生。
•           

星图来了                  

（ 星图-图表库 ）

• 只是一个图表库？还能做什么？用一张图高速你答案
• 如果你追求数据品质，它是官方设计精美的图表～
• 如果你要结合动态数据，它完美连接星火BI制作数据大屏、各种报表
• 如果这些都无法满足你对图表的创意，它还可以自定义组件让更多人应用你的设计！   

（ 数据可视化资源 ）

2.这个数据可视化体系，解决什么问题？

• 星图—是58数据可视化的资源库，包括与图表库社区，wcharts图表规范。  
•     

图表库是面向全网的图表开放社区，所有图表组件均由开发者自助开发、共享，社区中的组件支持在星火SaaS产品中一键使用，也可满足有图表诉求的用户本地使用，打通图表开发与应用闭环。

Wcharts 则是我们中台设计组匠心打磨，在数据可视化方面的探索成果。

（ Whcarts logo)        

( Wharts logo )  

（图表库）    

3.简单来说，Wcharts 是58UXD设计的一套专业美观的数据图表规范。它有以下几个特征：

3-1 简洁、清新的设计语言

• 我们为图表构建了新的样式，这是最直观的变化之一。我们希望它能更加优化且简单，在功能和样式上做了很好的做融合。对图表数据元素进行拆解，重组，归纳后，使用了微投影、微动效的设计手法，加大图表之间留白，提升空间感。
• 与Matix的设计理论一样，Wcharts同样也是依据分子理论，图表的底层是由基础小构建构成。
• 划分为标题、轴线、图表、试例、解释说明。并通过删格系统和组件化理念规范元素，形成统一的控件规范。

3-2 统一的图表视觉与布局规范

运用删格系统进行布局设计，图表在各个分辨率下可完美适配。

（ 星图图表规范）

3-3 完善的科学配色

一个精心设计的可视化配色能充分发挥人脑对色彩与生俱来的高效处理能力，帮助读者更快更好地从可视化中获取有意义的信息。

3-3-1 在色彩选择上 ，更重视以下几点         

1.色相使用：使用色环取色发，尽量做到均匀分布，因为色相具有辨识度最重要的因素之一。            

2.明度使用：在无法避免取唯一色域的情况下，尽量保障相邻颜色之间的明度具有一定差异性。

3.顺序使用：明暗交替式分布，确保类似堆叠柱状图等环境下，两两颜色之间的辨识度；

无障碍设计：检验确保视障人群在看图时的也能有更好的阅读体验；推荐一个小工具帮助设计师快速检验红绿色盲人群在阅读数据时的效果。 Color Oracle 是一款适用于 Windows、Mac 和 Linux 的免费色盲模拟器。它通过实时向您展示常见色觉障碍人士会看到的内容，从而消除了为色盲设计的猜测。

（ 星图颜色规范 ）

3-4 友好的图表使用建议

3-4-1 锁定目标用户群体

用户在图表时，首先要明确5W1H设计原则。图表给谁用，谁来查看数据、使用背景、如何使用、怎样使用等。这些都离不开对核心目标群体的研究。尤其B端管理者，要选定简易的图表，让管理人员能够快速看到所需的对比信息，及报错。

3-4-2 根据数据信息进行选择

如百分比占比类比较，建议使用饼图类型。多数据信息比较常选用折线图/曲线图。同时需要注意数据信息过多时，建议去掉图表视觉投影，从而达到视觉降噪的效果。

与此同时，需要注重数据信息的墨水比。所谓墨水比，是用于墨水比=数据的墨水量（显示数据）/总墨水量（非数据墨水，图表中的辅助图形如网格背景等），减少非墨水的设计强度，保证墨水占比多，让数据呈现更有效的信息。

3-4-3 响应式的布局

能保证重点信息不丢失的同时轻松胜任各种尺寸、多种设备。

3-4-4 复制代码

最关键的是可以一键复制代码，本地使用，从而免去了设计的和开发的走查之苦。

( Wharts )

3-3-5 数据大屏图表制作效果

• 对于大屏也是数据可视化呈现的重要载体。目前星图也可输出数据大屏。并对接政府项目进行使用。

（To G数据大屏）

三、关于未来 任重道远

• 目前星图为V1.0版本，还有很多不足与需要改进的地方。
• 在功能上下一个版本支持PC、移动、数据大屏三端图表切换；黑白主题界面一键切换等功能。

Powered by Froala Editor