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

交互中图表设计注意点

作者: 日暮山主人 | 来源:发表于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.强调
对于以选的数据元素也要考虑优先级,明确哪些数据是需要重点突出的进行标识。

相关文章

  • 交互中图表设计注意点

    图表设计的过程实则是将数据进行可视化表达的过程,而数据可视化的目的,是要对数据进行可视化处理,以使得能够明确地、有...

  • UI中图表设计的注意点

    产品角度(考虑图表设计是否符合产品特色、风格、形象)、用户角度(考虑用户是否能轻松获取和理解图表呈现的相关数据)、...

  • 关于图表的整理

    图表有几个要素: 图表类型 图表颜色 字体大小以及颜色 绘制图表的注意点 图表设计原则 一. 图表类型 比较常用的...

  • Django-ORM介绍

    一、前言 二、使用Django进行数据库开发的注意点 MVT设计模式中的Model,专门负责和数据库交互对应(mo...

  • 测试小计

    测试用例注意点 测试用例的设计中涉及到表格,图表等多数据展示时,一定要产品给出数据展示的顺序。如果产品没有给出的话...

  • Numbers入门 --- 第五章 图表对象(二 --- 交互式

    交互式图表 在 交互式图表 标签页中,只有 3 个对象,一个 文本对象 ,一个拥有多列数据的 表格对象 和一个 交...

  • Material Design设计语言-数据可视化(四)行为

    行为 图表提供交互模式,使用户可以控制显示的数据。这些交互模式使用户可以专注于图表的特定值或范围。 以下推荐的交互...

  • 浅析交互设计,人机交互,用户体验设计三者的异同

    关键词:交互设计,人机交互,用户体验设计 在学习和生活中,我们经常会遇到三个名词:“交互设计”,“人机交互”,“用...

  • 交互设计领域,如何理解设计“语言”

    Jon Kolko在《交互设计沉思录》中这样解释交互设计:“交互设计是人与产品、服务或系统之间的一系列对话……交互...

  • lesson 6 | Mobile

    ios设计 新手设计指南 注意事项 工作流程 有个设计iphone music player app交互的例子 简...

网友评论

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

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