当前位置: 首页 >文章 > 让数据更美!5个实用的数据图表设计技巧
收藏
分享

让数据更美!5个实用的数据图表设计技巧

举报Clip设计夹Clip设计夹发布于 2022-01-04359阅读6点赞
给大家分享「图表设计技巧」...

大家好,我是Clippp,今天为大家分享的是「图表设计技巧」。图表设计的过程是将数据进行处理,并通过视觉展示的表达过程。

无论是条形图、折线图还是扇形图,都要考虑图表视觉展示层面的设计,例如图表采用什么颜色、什么样式,用户怎么与图表交互…这里介绍一些简单易学的小技巧,快速上手数据图表设计。


1) 颜色的运用

颜色的巧妙运用能为数据提供更加丰富的内涵。以最常见的红、黄、绿三种颜色为例,分别代表了需要不好、中性、好的意思。

现在越来越多的产品愿意使用品牌色作为图表的主色调,通过调整品牌色的深浅程度,做成一组同色系的色板供图表使用,其中颜色越深代表数值越大,颜色越浅代表数值越小。

如果觉得红黄绿这些颜色太普通,还可以考虑使用蓝色和橙色这类互补色作为调色板。

蓝橙色的搭配相较于红绿色更具有活力,用蓝色表示正值,橙色表示负值,对用户来说也容易理解。

对于颜色的运用,最重要的是考虑可访问性,不仅是图表本身颜色的对比,还要考虑图表与背景色之间也要具有足够高的对比度。


2) 线条和纹理

除了使用不同的颜色,还可以在图表中添加线条或者纹理效果来构建多种多样的图表样式。

▲选择一个基础色,在基础色的基础上添加点、横线、竖线、斜线、网格等多种填充样式,构成一套颜色统一但内容差异化的柱状图系统。

▲线条也可以添加不同的纹理效果。由多种不同颜色的实线组成的折线图往往很难让用户快速理解其中的意思,我们可以为折线添加各种样式的虚线,来提高图表的可用性。


3) 响应性设计

如果要在手机上展示图表信息,需要考虑手机屏幕的尺寸对于图表的适配性。例如PC端屏幕宽度更大,更适合展示多个竖向的柱状图。

同样一组图表如果放到手机端展示,采用横向的条形图会更合适且合理。

▲手机屏幕宽度小,如果PC端的图表直接照搬过来,在一屏上只能显示几个图表,而且还需要用户左右滑动来查看更多图表。

这样的照搬不仅无法一下展示所有图表,缺少直观性和对比性,还会增加用户操作负担,显然是不可取的。

▲如果觉得在手机上使用横向的条形图成本太高,又想让用户一下看到图表的所有内容,可以考虑使用“屏幕旋转”提示,告知用户把手机横过来看图表效果会更好。


4) 标签

标签是图表重要的组成部分,标签的长度、大小都会影响图表整体的效果。

比如有的图表尺寸很小,空间有限,但是标签却很长,如果尽可能在有限的空间中将标签展示清楚,值得我们去思考。

▲在图表中并非所有内容都要始终可见,图表中的数据图就可以传达大部分的信息。如果觉得图表中展示的标签过多,可以隐藏次要的信息,通过鼠标悬浮或点击来触发这些内容。

悬停状态是隐藏次要数据同时避免图表在视觉上看着太复杂的解决方法。在悬停时透露更多信息是渐进式披露的重要用途,用户可以在需要时进行交互,并且默认情况下不会造成页面混乱。

另外设计图表的时候,要做到提前规划标签导航,确定长标签的展示方式,考虑怎么放置不会让图表显得太臃肿。


5) 排版和层级结构

现在有很多仪表盘设计得很简约、很现代,这类仪表盘使用超大字号的加粗字体展示几项最重要的信息,既突出重点,又让整个页面有层次和对比。

▲类似的排版能够吸引用户的注意力,通过前期研究确定几个用户最关心的内容,然后将这些内容重点展示,起到强调作用。




本文原创,未经作者允许不可转载!

更多内容,欢迎关注作者微信公众号: Clip设计夹!


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户107,461人)

音频测试一下了
距离开班仅剩5天3人已报名
【2月】8天打造4套热门产品界面设计
距离开班仅剩15天93人已报名
【2月福利】打造4套热门产品界面设计
距离开班仅剩15天166人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:400-862-9191工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课
积分

恭喜你,领取成功

开课时间:

新人免费领取免费¥99

扫码开通训练营权限

打开微信“扫一扫”功能
扫码上方二维码

免费学习71000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了77,068
并提交了527份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
恭喜!签到成功,获得 10 个虎课币
上上签 ·21August.2018
尽管眼下十分艰难,可日后这段经历说不定就会开花结果
— 唐代文学家 韩愈
训练营坚持完成打卡任务 报名费全额返更多>>
直播公开课学员好评率95%以上更多>>
登录虎课网,每天免费学课程全站 71000+ 视频会员教程 | 每日可免费学 1