美文网首页
交互中图表设计注意点

交互中图表设计注意点

作者: 日暮山主人 | 来源:发表于2020-06-24 16:11 被阅读0次

    图表设计的过程实则是将数据进行可视化表达的过程,而数据可视化的目的,是要对数据进行可视化处理,以使得能够明确地、有效地传递信息。其研究的对象源头是数据,用户因为很难从散乱的数据中发现有价值的信息,所以需要设计师把这些数字从商业目的、用户动机进行有机组合,关联或定义就使数据变得触手可得,图表只是最终的表现形式。
    好的可视化设计要让数据分析变得轻松、流畅且易读、美观,提高用户工作效率,降低用户工作负担。
    将用户和数据建立对话的过程,完成一个回合的交互行为。

    组成元素


    image.png

    图表设计

    1.明确数据指标
    了解数据是怎么来的,干嘛的。主要包括:
    a.理解数据及指标
    b.分析数据
    c.提炼关键信息
    d.明确数据关系及主题

    2.为谁设计,用户想要什么信息
    同一种数据在不同用户眼中所看到的信息是一样的,因为角色、岗位的不同造成他们关注重点、立场不同。所以在图表设计时面对不同使用者所强调的信息及交互方式都是不一样的。主要包括:
    a.用户群体是谁,有什么特点?
    b.从数据中需要提炼的信息是什么?
    c.通过图表想要解决什么问题?
    d.关注的重点?

    3.明确设计目的与价值
    定义设计目标的过程需要站在用户的角度和数据的角度进行综合分析来建立。一方面需要考虑用户如何更简单的分析、理解数据,从而提高决策效率;一方面需要考虑数据本身如何更加精准、一目了然的传达给用户。

    数据(怎么来的、能干什么、谁在用、有价值吗、怎么用、分为什么维度)
    数据 精准、重点突出、自我解释 设计
    设计(设计原则、细节(X\Y\规则)、操作习惯、图标选择)
    用户 理解、分析、角色 设计
    用户(希望通过数据解决什么问题)

    4.规划设计方案,选择合适的图表
    在清楚了用户需求、有明确的设计目标后,需要对图表大概有一个清楚的认知。
    常见的图表类型涵盖绝大多是的使用场景。
    曲线图:反映时间变化趋势
    柱状图:反映分类项目之间的比较,也可以用来反映时间趋势
    条形图:反映项目之间的比较
    饼图:反映部分占主体的比例
    散点图:反映相关性或分布关系
    地图:反映区域之间的分类比较

    5.细化体验
    X坐标轴

    考虑不同屏幕或浏览器适配,x轴便签文字过于拥挤可以考虑横向排列柱状图。不建议将文字打斜放置,影响可读性。 image.png
    当标签为连续年份时,可以简写为2015、16、17.. image.png

    Y坐标轴

    当Y轴数字过长时,可以考虑灵活替换单位换算规则。如时间大于1000ms,计时单位用s,数据精确到小数点后两位。当时间小于1000ms时,计时单位用ms,数据精确到个位。 image.png
    同理:个、十百千

    数据分布规则
    避免后端传什么数据,前端就展示什么数据导致的显示效果和可读性很差。要制定明确的数据显示规则。如:数据展示和时间有关,考虑某个时间段内展示多少点才是合适的,而显示一个点由多长时间的数据聚合(点聚合区间是多少)


    image.png
    image.png
    image.png

    遵循设计原则
    图表要具备自我解释的能力。设计时应该增强和突出数据元素,减少和弱化非数据元素
    1.删除
    除非特殊场景的考虑,应尽可能的删除和数据非相关的元素:背景色、渐变色、网格线、3D效果、阴影效果
    2.弱化
    即使有必要保留非数据元素,也要弱化或隐藏他们,用淡色:坐标轴、网格辅助线、表格线
    3.组织
    把相关数据元素进行合理的组织分类,不指望把所有数据元素都放在图表内,只放关键的、重要的数据在图表内。
    4.强调
    对于以选的数据元素也要考虑优先级,明确哪些数据是需要重点突出的进行标识。

    相关文章

      网友评论

          本文标题:交互中图表设计注意点

          本文链接:https://www.haomeiwen.com/subject/suwhfktx.html