UI数据可视化设计

xx科技有限公司
清晰
一个好的数据可视化界面一定是能够清晰的展 现用户所需要的信息。当用户看到界面内容时， 应该能在 5 秒内了解到它的用途，而不是花费 至少几分钟才能理解各个数据的含义。
一致性
优秀的数据可视化界面，会有一套非常严谨一 致的版面。这里的一致性需要考虑到布局，结 构和内容。还要结合整体业务。
xx科技有限公司
设计复用
图标类：定位图标、事件图标、 设备图标等； 控件类：提示框、展示框、按钮、 数据控件等； 图表类：各种图表库；
xx科技有限公司
【我们要做 全国第 一 的产品】
1、既要有超强的空间 感，又要支持多种数据 同屏呈现，可交叉分析 对比； 2、超强的视觉效果； 有高精度的模型和材质， 丰富的粒子、动效，更 加贴近现实的光影呈现； 3、互动性强，可交互 性强。
xx科技有限公司
数据可视化设计
主讲人：xx
北京北大千方科技有限公司
xx科技有限公司
目录
01
项目复盘优劣势
02
同行业产品优劣分析
03ቤተ መጻሕፍቲ ባይዱ
做更好的数据可视化设计
xx科技有限公司
01
项目复盘优劣势
通过过往项目复盘分 析整理出项目完成过 程中出现的问题，总 结的经验，让以后的 项目做出更好的效果
xx科技有限公司
存在问题
1、整体页面表现力度不够；色彩对比欠缺。
2、业务关系无关联；不清楚流程
3、先做一版效果图看；需求不明确
解决问题
原型图，草稿；需求分析最清楚业主想要的表现方式， 和最终的呈现效果。更多的细节表现；
需求分析和产品经理及时的梳理讲解业务大概流程 与关系；有些被他们忽略或没有讲到的，及时追问；
有时候用户也不知道自己想要一个什么样的东西。 这种就需要结合相似或以往类似经历来整理出大概 功能需求，再围绕展开设计一个相关联的效果图。
一个有用的数据可视化界面上的每一条信 息都应该是有意义的。这些有意义的信息 能准确传达设计师想要表达的内容。每一
条数据的背后，用户都是可以读懂的。
有意义
复杂的界面违背了数据可视化设计的初衷。 如果一个信息呈现不够简单直接，那么肯 定是在设计上出现了问题。
简单
xx科技有限公司
一、合适的图表类型
当我们拿到数据后，先提炼关键信息，明确数 据关系及主题，再选择合适的图表进行可视化。
b.小屏背景色
小屏幕背景色选择范围就比较广，浅色、彩色、深色均可以做出很好的设计。 相比之下，浅色背景更适合展示大量的数据信息，因为在浅色底上数据图表 的识别度比较高。而深色、彩色背景更适合渲染简单的数据，用于烘托气氛。
xx科技有限公司
三、动效设计
目前越来越多的可视化展示的数据都是实时的，所以动效在可视化项 目中的应用越来越广泛，动效设计肩负着承载更多信息和丰富画面效 果的重要作用。
a.信息承载 在可视化设计中经常遇到，非常多的数据信息需要展示在一个大屏幕上。 遇到这种情况，需要对信息进行合并整理或通过动画的方式，在有限的 屏幕空间里承载更多的信息，使信息更加聚合，同时使信息展示更加清 晰，突出重点。
b.画面效果 增加细节及空间感，背景动效使画面更加丰富。单个图表的出场动 画，使画面平衡而流畅。减少了图表在出现或数据变化时的生硬刻 板。
xx科技有限公司
二、配色方案
背景色的选择与可视化展示的设备相关，所以 色彩选择极其重要。
a.大屏背景色
在大屏设备中普遍用深色作为背景色，以减少屏幕拖尾，用户在视觉上也不 会觉得刺眼。更能聚焦视觉，也方便突出内容，做出一些流光、粒子等酷炫 的效果。所有图表的配色需要以深色背景为基础。保证可视化图的清晰辨识 度，色调与明度变化需要有跨度。
xx科技有限公司
02
同行业产品优劣分析
1、用户体验 2、各类设计元素与项目/功能逻辑 3、色彩使用分析 4、交互动效、交互操作
xx科技有限公司
03
做更好的数据可视化设计
用户能看懂吗？ 用户会用吗？
我设计出来的 UI，是用户希望看到的吗？ 用户会不会有疑问？
数据可视化旨在节省时间和精力，将复杂和抽象的数据以更简单的形式表示，目的是以用户能够理解的方式将关键信息传达给他们， 确保自己理解用户所需，并给他们需要的信息。（用更加直观的图表来展示信息，传达简单易懂的信息）