上手即用的B端图表资源~

Original CE青年 CE青年Youthce 2022-10-22

收录于合集

Hello，大家好，前两天我在去逛 figma 社区的时候，意外发现了一个宝藏的图表资源《Charts 图表组件》

这个资源，在整个 figma 当中共有 3.6k 的一个复制量，200+ 的点赞量，最最最重要的是这个头像似乎非常熟悉，她正是来自我们交流群三群的同学，因此可以给大家安利一波这个图表资源

🔗链接：https://www.figma.com/community/file/1106923560008546853

这个资源不仅有中文版本，也被国外的设计师搬运成了英文版本，并且复制点赞量也超高（感觉快要超过原作者）

首先这个图表资源会分为 基础图表与图表组件 两个部分组件

在基础图表当中，主要是包含有：折线图、阶梯图、面积图、柱形图、瀑布图、折柱混合图等 22个图表

下方选取了一些图表截图，方便大家进行查看

在图表组件当中，主要包含有：面积图组件、柱形图组件、环形图组件、子弹图组件、指标卡组件

当然也了解了一下范云云做这个组件的背景，其实主要是，因为公司最近在准备的一个数据分析项目，为了能够在工作当中快速产出，就在工作之余的时间制作了这个组件，后来觉得可以分享出来，就发在 figma 社区当中

整体的制作思路：

1. 根据图表的基本规范，做了常用的柱形、条形、折线、面积、环形5类图表；

2. 图表的自适应（这是重点），考虑到应用到实际页面中，布局大小会有变化，所以我做了自适应，方便拖拽快速布局；另外，拿柱形图举例，数据多少业务中会有不同，删除一根柱子或者增加一个，也可以自适应；

3. 基于业务，对图表内容进行补充，后续增加了玉玦图、子弹图、水波图等；

4. 在有了这些基础图表之后，我补充了5种图表组件（图表+指标+辅助信息），且根据栅格大小做了不同尺寸

其实做这个图表的目的就是：在实际业务可以中快速套用，并且能够应对数据量的变化

下面是 figma 的资源链接，也可以直接去 figma 搜索《Charts 图表组件》感兴趣的同学可以去点赞、支持一波

🔗链接：https://www.figma.com/community/file/1106923560008546853

如果对于图表感兴趣，想要了解更多关于B端设计相关知识的同学，就赶快来参加我们的B端交互设计训练营吧！扫码下方右侧二维码，备注：课程