星图～属于58的数据可视化资源库来了！
环铁艺术家 / 2021-06-25 15:45:10
星图～属于58的数据可视化资源库来了！
原创 环铁艺术家 58UXD 今天
01
下定决心 打造视觉可视化设计体系
1.星图来了！它是什么？
星图（含图表库和Wcharts）：提供数据可视化所需资源，含图表、报表、大屏、公共数据等，目的是降低数据可视化成本。
如果你是：数据分析师、数据开发、数据产品、运营、B端产品设计师，那可要重点看看。
图片
如果你需要做项目汇报，追求数据效果视觉呈现品质，这里有官方设计精美的图表～
如果你要结合动态数据，制作数据大屏、各种BI报表，这里可以完美连接星火BI，快速生成～
如果这些都无法满足你对图表的创意，还可以自定义组件让更多人应用你的设计！
星图并不仅仅是一个数据图表库，更是一个创意资源社区，配合星火BI，打造属于58自己的数据可视化资源库。
图片
2.为何要做？动力使然
作为一个设计师，常常苦于花费大量时间从0-1设计图表...纠结于颜色搭配而不知如何选择...而精心设计过的图表，上线时可能也会因无法达到满意的还原度而就此放弃。面对这些问题，不得不要求我们发挥自驱力去做点什么，将更多沉淀的设计资产，用组件库代码化的方式呈现出来，去提升设计与开发协作效率，让设计真正为业务赋能。
于是我们与TEG数据产品研发部一拍即合，跨业务共建，保证规范化输出的同时，提升品质感。于是继星火BI之后，星图应运而生。
3.这个数据可视化体系，解决什么问题？
星图一期包括与图表库社区，wcharts图表规范。
图片
图表库是面向全网的图表开放社区，所有图表组件均由开发者自助开发、共享，社区中的组件支持在星火SaaS产品中一键使用，也可满足有图表诉求的用户本地使用，打通图表开发与应用闭环。
图片
而Wcharts 则是我们中台设计组匠心打磨，在数据可视化方面的探索成果。
02
Wcharts 设计师与数据可视化的故事
图片
简单来说，Wcharts 是58UXD设计的一套专业美观的数据图表规范。
它有以下几个特征：
1.简洁、清新的设计语言
我们为图表构建了新的样式，这是最直观的变化之一。我们希望它能更加优化且简单，所以在功能和样式上做了更多融合。对图表数据元素进行拆解，重组，归纳后，使用了微投影、微动效的设计手法，加大图表之间留白，提升空间感。
与Matrix的设计理论一样，Wcharts同样也是依据分子理论，图表的底层是由基础组件构成。
2.统一的图表视觉与布局规范
图片
3.完善的科学配色
一个精心设计的可视化配色能充分发挥人脑对色彩与生俱来的高效处理能力，帮助读者更快更好地从可视化中获取有意义的信息。
在色彩选择上 ，更应重视以下几点:
色相使用：使用色环取色，尽量做到均匀分布，因为色相具有辨识度最重要的因素之一；
图片
明度使用：在无法避免取唯一色域的情况下，尽量保障相邻颜色之间的明度具有一定差异性。
顺序使用：明暗交替式分布，确保类似堆叠柱状图等环境下，两两颜色之间的辨识度。
无障碍设计：检验确保视障人群在看图时的也能有更好的阅读体验。推荐一个小工具帮助设计师快速检验红绿色盲人群在阅读数据时的效果。Color Oracle 是一款适用于 Windows、Mac 和 Linux 的免费色盲模拟器。它通过实时向您展示常见色觉障碍人士会看到的内容，从而消除了为色盲设计的猜测。
Color Oracle 使用视频
4.友好的图表使用建议
用户在选择图表时，首先要明确5W1H设计原则。图表给谁用，谁来查看数据、使用背景、如何使用、怎样使用等。这些都离不开对核心目标群体的研究。尤其B端项目设计者，要选定合理的图表，使用者能够快速看到所需的对比信息及数据。
同时需要注意数据信息过多时，建议去掉图表视觉投影，从而达到视觉降噪的效果。
5.响应式的布局
能保证重点信息不丢失的同时轻松胜任各种尺寸、多种设备。
6.最关键的是可以一键复制代码，本地使用，从而免去了设计的和开发的走查之苦。
图片
数据大屏图表制作效果
将自定义图表组件，应用到星火数据BI ，快速生成大屏数据项目。
下图是一个To G 的大屏项目，这个项目就为业务部门带来了可观的收入。
大屏动画
03
关于未来 任重道远
目前星图为V1.0版本，还有很多不足与需要改进的地方。
在功能上，下一个版本将支持PC、移动、数据大屏三端图表切换；暗黑模式一键切换等功能。
在项目上将会举办图表组件创作开发大赛，对数据可视化领域有兴趣的同学都可加入，让我们58的数据可视化资源库更丰富。
图片
🙋 一起聊设计 🙋♂️
高质量，学知识的设计行业群
设计行业一手资料
设计大厂最直接内推
定期大咖直播
0门槛扫码进群！
期待与更多优秀设计师一起成长🤩
图片
🙆 直播预告 🙆🏼♂️
我们邀请了动效设计专家
「孙国恩」
届时会在群内同步直播链接
长按上方二维码入群
下周四（7月1日）14:00
👇敬请关注👇
图片
图片
环铁艺术家
喜欢作者
3 人喜欢
阅读 785
分享此内容的人还喜欢
怪兽MARKET特别介绍 -- 妖怪物语 人鱼阿玛比AMABIE ！！！
怪兽MARKET特别介绍 -- 妖怪物语 人鱼阿玛比AMABIE ！！！ ...
阅读 414
怪兽MARKET
不喜欢
不看的原因
确定
内容质量低 不看此公众号
从微信朋友验证功能迭代，看交互设计对产品的价值
从微信朋友验证功能迭代，看交互设计对产品的价值 ...
阅读 575
子牧UXD
不喜欢
不看的原因
确定
内容质量低 不看此公众号
现在爆火的幻彩镭射渐变，到底有多酷！
现在爆火的幻彩镭射渐变，到底有多酷！ ...
赞 20
UI范
不喜欢
不看的原因
确定
内容质量低 不看此公众号
写下你的留言
----------------------------
本文由新墨整理并发布。转载来自互联网，若侵权则删除！
新墨5年开发经验，45名团队成员，上线已达100+产品，于北京和成都2个城市提供技术开发服务。致力于提供APP开发,小程序开发,微信开发,IOT物联网开发,电商系统开发,教育系统开发,H5开发,游戏开发,用户体验设计,课件设计
新墨官网地址：http://www.sinmore.com.cn/
新墨APP开发：http://www.sinmore.com.cn/app
新墨案例：http://www.sinmore.com.cn/case
新墨小程序开发：http://www.sinmore.com.cn/xcx
新墨物联网开发：http://www.sinmore.com.cn/iot
新墨教育系统开发：http://www.sinmore.com.cn/education
新墨商城系统开发：http://www.sinmore.com.cn/eBusiness
新墨商城区块链开发：http://www.sinmore.com.cn/blockChain
