请查收~阿里巴巴设计师带来的数据大屏可视化设计的保姆级教程

2021-04-12 12:11

一直以来, GMV是每年电商大促最牵动人心的数字。其实在这背后,同时有大量的消费者在发起咨询、纠纷和投诉。今天,Alibaba Design 将从可视化视角的五个维度: 项目分析、 大屏环境考察、 设计流程、 验收注意事项和 标准化,同大家分享一些基础体验心得,谈一谈如何做 数据大屏的可视化设计

01项目分析

动手做可视化之前,需要对项目有一个基础的了解。建议包括:业务背景、目的、产品、投放位置、适配、用户、行为路径、画像、数据来源、结构、数据极值、产出时效、质量等,再结合业务诉求和产品目标制定设计目标。

02

大屏环境考察

对大屏所处环境的调研,对整个设计流程至关重要。建议关注: 设备、 大屏位置、 用户角色及 座位分布

1. 设备

大屏硬件设备是设计展示的必要前提,目前市场较常用的有:LED屏、拼接屏。在明确场地使用拼接屏后,我总结了下拼接屏的优缺点及分辨率。其中设计最重要关注为屏缝问题(0.3cm)。

2. 用户分布

通过调研了解,还原场地人员分布情况,确定核心用户。老板主要关注核心指标、用户声音;数仓、开发、技术、PM、产品同学关注大屏稳定性和显示情况,业务主要关注大屏数据的准确性。

3. 座位

用户所在区域的最佳可视范围,决定座位的合理布局。从而给到安排座位同学合理的布局建议。

03

计流程

设计大屏往往是服务于业务诉求,通过设计的手段来帮助用户达成目标。Alibaba Design 为你总结了大屏设计流程的 9个关键点

1. 内容分析

当可视化工作量庞大时,建议从项目优先级进行,从最重要、最不重要、不确定性排序。

2. 故事线

大屏展示的内容动线是用户第一感知,给用户讲述一个怎样的故事,需结合业务诉求来划分。通用结构为先总后细。即先体现核心链路(讲什么故事),再描述细节。

3. 布局框架

4. 选择图表

图表是整个大屏视觉高光呈现点,可以帮助用户更快更直观的表达数据信息。通常包括基础图表和混合图表。基础图表包括:比较类、占比类、区间类、关联类、趋势类、时间类、地图类等。混合图表是指多个基础图表相互关联形态。以下总结了2种图表分别使用流程:

A. 基础图表

  • 确定内容:明确要用图表传达的核心信息。例:体现2020、2019基于时间趋势的求助量对比。
  • 判断关系:判断数据之间比较类型。例:折线图。
  • 选择类型:选择对应含义的图表。例:折线图。

B. 混合图表

  • 确定诉求:体现信息在多个图表里交互联动关系。例:体现多个问题在2020、2021的客诉量走势对比及相对应的用户声音。
  • 选择类型:选择对应含义的图表。
  • 制定方案:结合业务诉求、同技术制定交互方案。

5. 定义风格

定义视觉风格 – 情绪板(Mood Board)指一系列图像、文字、样品的拼贴,是常用的表达设计定义和方向的设计方法论。方法是通过调研原生关键词 – 脑爆衍生关键词 – 搜索图片样式 – 提取情绪板 – 分析视觉风格。

6. 动效

对用户而言,大屏动效能便于用户理解,减少认知成本;增强代入感,提升用户体验。动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类,用于突出产品核心功能和特点。界面信息按照一定的规律呈现,引导用户的视觉流向。

例:突显从“量的发起”到“智能承载”到“人工接起”的数据流向。

注:3D动效在大屏使用越来越常见,但过于3D炫酷震撼也会失去可视化大屏的初衷 – 数据信息的传递。因此建议使用3D同学要围绕信息的传递,突出信息重点来使用。

7. 颜色

美国学者诺阿·伊林斯基在《数据可视化之美》中,总结可视化审美的标准有四大要素 – 新颖、充实、高效和美观。可视化大屏如何通过颜色,既要美观又要突出重点。总结有以下几点:

  • 配色易辨识与区分: 采用色调、明度差异较大的颜色进行搭配组合。
  • 冷暖色、互补色对比: 在数据图表里,多采用冷暖色、互补色能产生强烈对比,突出重点信息。

案例:

8. 字体

一般大屏设计与开发优先选择系统默认字体,数字推荐DIN,特殊字体虽然也可通过字体包形式嵌入开发程序中,考虑到实现成本尽量不使用。

字号大小需要根据真实场地来选择,方法是:用户最佳可视距离 – 现场字号测试 – 用户调研 – 输出规范。四个步骤来验证。

9. 搭建

目前市面第三方开发工具有:Datav、Vshow、腾讯云图、百度智能云等。选择Datav(阿里云出品的拖拽式可视化工具)搭建,所见即所得,并规范大屏编辑权限:设计与开发,便于技术同学调试。

视觉呈现(由于敏感性,数据已隐藏):

04

验收注意事项

可视化设计是一个任重道远的事情,大屏更是一个长期跟进的过程。很多细节在验收环节中才能发现到。以下从硬件效果和外在环境两个方面来分享。

1. 硬件效果(1) 显示

不同设备的显示效果存在偏差,需要结合实际场景微调线上效果。建议对饱和度进行微调。

(2) 渐变色差

渐变对于线上视觉呈现很不友好,在模块底色使用渐变的案例中,暗色渐变区域基本无法看清,且模块区分不明显。在此建议增描边或纯色。

(3) 屏缝

上面提到拼接屏最大的设计问题是屏缝问题(0.3cm)。在布局前建议使用辅助线来辅助布局,规避信息在屏缝里。

(4) 字体

如果遇到大屏字体丢失,通常原因是投屏电脑没有安装完整字体包。建议做好大屏视觉后,将所用到字体包导入到投屏电脑,并在电脑浏览器中设置默认字体。

(5) 字符数

在交付设计方案时,建议对大屏显示的数据字符极值标注,便于开发同学设定字符数及后续走查。

(6) 分辨率

不能以大屏分辨率定义设计稿尺寸。举例实战案例中,拼接屏分辨率为13440(1920*7)*3240(1080*3),当设计稿选择13440px时,图片基本无法加载。

实战建议:

  • 当大屏为单电脑分辨率时,设计稿可保持一致。例:1920*1080、1920*1200。
  • 当大屏为超大分辨率时,使用等比例缩小分辨率。但需要现场测试大屏展示为正常。例:13440*3240,作图尺寸为4480*1080。

(7) APNG

大屏常用的动效格式通常gif、apng。在此推荐使用apng。原因是gif格式有个致命弱点,对透明通道的支持非常有限,输出结果会很差,会有锯齿或白边情况。而apng格式在目前主流的所有浏览器上都可以完美支持,且完美支持透明通道。

制作流程:

  • 使用AE等软件制作动画,输出png序列帧。
  • 导入“png序列帧”到iSparta(apng图片转换器)中,设置路径并输出。

(注:序列帧的名称应是统一连贯性,且帧数不宜过多以免apng生成失败)

2. 外在环境(1) 灯光

目前市场,灯泡光线最常见的有白、暖黄,大屏投放的场地,需考虑灯光的属性,不同色温会对大屏的投放造成视觉偏差。建议微调明度来改善。

(2) 装饰

场地通常会有一些装饰物、氛围背景。需要考虑到大屏不受周边氛围、装饰物影响。例:现场考察背景氛围复杂干扰大屏信息;吊牌太高遮挡大屏视线。

05

标准化

工作中遇到了大量的可视化诉求,通过将可视化衡量标准化,可以更好的验证做的好与坏。流程规范和组件化,可以更好的为项目提效。

1. 规范流程化

通用的设计大屏的流程,建议可将方法文档沉淀(例:语雀),或同产品、PM同步设计流程。

2. 样式组件化

在不同业务有相同诉求时,可将通用样式组件化。设计可提炼的有:字符数、轮播秒数、Tab样式、氛围图、动效等,最终横向复用多个业务。

赋能案例:

3. 衡量标准化

参考Antv大量项目实战经验,总结的四条可视化核心设计原则:准确、清晰、有效、美,来拆解可视化衡量指标,总结了以下描述:

  • 准确:这个产品很准确表达数据的特征信息,提供的数据准确对我有用。
  • 清晰:这个产品能一目了然的表达故事,能一目了然的了解每块内容表达的含义。
  • 有效:这个产品传递对我有用的信息并满足我的业务诉求。
  • 美:这个产品设计风格美观。

结语

以上总结的基本知识和事项,能帮助我们快速进入大屏设计及避免一些坑。但是可视化体验远远不止这些。欢迎大家提出更多意见和建议,我们一起前行。

220 thoughts on “请查收~阿里巴巴设计师带来的数据大屏可视化设计的保姆级教程

  1. I may need your help. I’ve been doing research on gate io recently, and I’ve tried a lot of different things. Later, I read your article, and I think your way of writing has given me some innovative ideas, thank you very much.

  2. Do you have a spam issue on this site; I also am a blogger, and I was curious about your situation; many of us have created
    some nice practices and we are looking to trade strategies with others, please shoot me an e-mail if
    interested.

  3. Hi excellent blog! Does running a blog similar to this require a great deal of work?
    I’ve absolutely no understanding of computer programming but I was hoping to
    start my own blog in the near future. Anyhow,
    should you have any suggestions or techniques for new blog owners
    please share. I understand this is off topic however I just
    had to ask. Kudos!

  4. We are a group of volunteers and starting
    a new scheme in our community. Your site offered us with valuable info
    to work on. You’ve done an impressive job and our entire community will be grateful to you.

  5. I got this site from my buddy who shared with me on the topic of this website
    and now this time I am browsing this site and reading very informative articles or reviews at this place.

  6. Greate pieces. Keep posting such kind of info on your site.
    Im really impressed by it.
    Hello there, You’ve done an incredible job.
    I will certainly digg it and for my part suggest to my
    friends. I’m confident they will be benefited from this site.

  7. Amazing blog! Do you have any recommendations for aspiring writers?
    I’m hoping to start my own site soon but I’m a little lost on everything.
    Would you advise starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I’m totally confused
    .. Any ideas? Cheers!

  8. Magnificent beat ! I wish to apprentice while you amend your site,
    how can i subscribe for a blog site? The account aided me a acceptable deal.

    I had been a little bit acquainted of this your broadcast offered bright clear idea

  9. Wonderful beat ! I would like to apprentice while you
    amend your website, how can i subscribe for
    a blog website? The account helped me a acceptable deal.
    I had been a little bit acquainted of this your broadcast offered bright clear idea

  10. Amazing blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple tweeks would really make my blog jump out.
    Please let me know where you got your theme.
    Cheers

  11. May I just say what a comfort to uncover an individual
    who actually knows what they are discussing online.

    You definitely understand how to bring an issue to light and
    make it important. More and more people really need to check
    this out and understand this side of the story. I was surprised you aren’t more popular given that you certainly possess
    the gift.

  12. Can I just say what a comfort to find an individual who actually understands what they’re discussing on the web.
    You definitely know how to bring a problem to light and make it important.
    More people ought to check this out and understand this
    side of your story. I can’t believe you’re not more popular since you surely possess the gift.

  13. Instalación simple y descarga gratuita, no se requieren conocimientos técnicos y no se requiere raíz.Grabacion de llamadas, Grabacion de entorno, Ubicaciones GPS, Mensajes Whatsapp y Facebook, Mensajes SMS y muchas características mas.

  14. Dive into the action at our Mexican casino site. With immersive graphics and pulse-pounding sound effects, you’ll feel like you’re in the heart of the action. casumo esto es lo que te diferencia de los demas.

  15. Win big and live the dream at our Mexican online casino. With life-changing jackpots and thrilling tournaments, fortune favors the bold. stardust la clave para una buena vida.

  16. Join the elite ranks of winners at our Mexican casino site. With exclusive rewards and VIP privileges, you’ll be treated like royalty every time you play. emu casino te da mucho.

  17. Join the fun at our Mexican online casino and discover why we’re the hottest destination for players seeking big wins and non-stop entertainment. online casino la clave para una vida lujosa.

  18. Wonderful beat ! I wish to apprentice while you amend your web site, how could i subscribe for a blog web site?
    The account aided me a acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear concept

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注