美叶学习
  • 最新
  • 主题

      文章主题

    • 规范指南
    • 原理法则
    • 研究方法
    • 控件
    • AIGC
    • 色彩
    • 排版
    • 无障碍
    • 亮点
    • 槽点
    • 对与错
  • 小册
  • 关于

      关于

    • 关于我们
    • 在线支持
    • 投稿
    • 成为作者
    • 寻求合作
    • 使用帮助
目录
设计漫谈
目超
  • 第1章:前言

    第1节

    小册简介

  • 第2章:目录

    第1节

    行为判定

    第2节

    移动注册

    第3节

    消息推送

    第4节

    内容层级

    第5节

    多选

    第6节

    预防犯错

    第7节

    排序

    第8节

    标准化录入

    第9节

    打断

    第10节

    视觉层级

    第11节

    进程状态

    第12节

    密码设置

    第13节

    内容归类

    第14节

    反馈

    第15节

    操作距离

    第16节

    折叠播报

    第17节

    按钮注释

    第18节

    滑屏操作

    第19节

    选择权

    第20节

    内容溢出

    第21节

    输入暗示

    第22节

    关系映射

    第23节

    返回顶部

    第24节

    位置锚定

    第25节

    分页

    第26节

    面板优化

    第27节

    输入补全

    第28节

    信息检索

    第29节

    还原

    第30节

    内容折叠

    第31节

    通知提示

    第32节

    可视化

    第33节

    对话框

    第34节

    页面直达

    第35节

    输入法

    第36节

    清空删除

    第37节

    路径指引

    第38节

    社交对话

    第39节

    评论

    第40节

    文本框标签

    第41节

    筛选

    第42节

    光标控制

    第43节

    富媒体播放

    第44节

    数值修正

    第45节

    帮助说明

    第46节

    错误状态

    第47节

    情感化

    第48节

    浏览线

    第49节

    模态叠层

    第50节

    预览

可视化
2025年12月20日

随着企业对互联网业务需求的增多,如今有越来越多的设计师,投身到B端产品设计的行列。B端产品中通常有大量数据的展示需求,于是如何借助合理的图表来展示数据关系,就变得非常亟需。

如图:百度统计使用柱形图来示意数据对比关系

常见的用于表现数据关系的图表包含:折线图,柱状图,饼图,直方图,环形图、面积图等。如果在某一分类下继续细分,又会涉及更深的子类,比如柱状图中包含有比较柱状图、堆积柱状图等。由于每一类图表中的数据,通常用来代表不同的分类构成,而图表选择恰当与否,往往会影响用户对数据关系的正确理解。


正确的选用图表

在现实的产品设计中,很多设计师在接收到数据图表的设计任务时,通常会将设计的重心放到视觉呈现上,而忽视了图表选择的合理性。很多设计师往往惊叹于别家产品设计的表现力,而想要在自家的产品中复刻相同的设计样式。要知道这些设计绚丽的图表类型,未必适合所有的产品。

如图:各类设计精美的图表样式

在现实的产品设计中,我们经常会遇到数据图表不当使用的案例,下面我们就以饼图为例加以说明。

有些产品会在多组数据中使用饼图来呈现数据对比关系。这些设计师显然对饼图的使用场景,以及优缺点,缺乏必要的理解。饼图的构成部分一定要控制在5个以内,过多的分类构成占比,将无法通过饼图得到充分的体现。但我们会在很多产品方案中,看到下面这种饼图,这显然并不恰当。

如图:通过饼图表现30多个省份的构成占比,并不能很好的通过饼图直观理解
支付¥29.90,解锁全部51篇