案例设计音频可视化 解析与设计

Posted 2023-04-05 野奔在山外的猫

开发平台：Unity 2020
编程平台：Visual Studio 2020
 

前言

  面向可视化方案设计中，典型的音频可视化方案 。应用领域广泛，尤其是在地质勘探、医疗器械等方面有着较为典型的应用案例。本文以 实现音乐音频可视化为案例，重点剖析音频类可视化设计的设计构思与实现。
 

Unity 可提供API说明

  在 Unity 中关联音频（Audio）的 API 对象共计13种，如下所示：

AudioChorusFilter	AudioClip	AudioConfiguration	AudioEchoFilter	AudioHighPassFilter	AudioListenner	AudioLowPassFilter
音频合唱过滤器	音频片段	音频配置	音频回声过滤器	音频高频音过滤器	音频监听器	音频低频音过滤器
AudioRenderer	AudioReverbFilter	AudioReverbZone	Audiosettings	AudioSource	AudioDistortionFilter
音频渲染器	音频混响过滤器	音频混响区（环境）	音频设置	音频播放器	音频失真过滤器

  涉及至音频相关的 UnityEngine API 主要为 AudioClip、AudioSource 共2种。其中音频资源在Unity编辑器中以 AudioClip 资源类型存在。AudioClip 记录有该音频数据的 混响鉴别、声道数目、采样频率、数据长度（时间、容量）等可读属性。AudioSource 担任播放器效果，将音频数据转换为声音由计算机硬件识别播放。
 

音频可视化 原理

---

1）获取音频源数据内容

  可视化服务对象为 音频（AudioClip），则实现可视化的初始关注焦点应在 音频内部存储的数据信息。
  参考 Unity 中文文档 - AudioClip 可了解 变量samples 可被用于获取音频数据信息。随机选择一首音乐资源导入至 AssetDatabase 中并通过 Debug.Log() 或 GUILayout.Label() 方式对音频数据识别与分析，大致可以得出以下变量在可视化开发中会被使用：

• Channels：声音频道数目
• length：音频总时长
• Samples：音频样本大小
  在采样过程中 压缩处理过的音频（AudioClip）是无法通过SetData() 获取数据。对该资源的解决方法是 设置该资源类型 LoadType 为 Decompress On Load 即可解决问题。

  疑难点：Samples样本数据类型为 int整型，为全音频内容大小。很遗憾的是对音频可视化毫无意义。不过对查询该音频段内容的数据却有相当的帮助。

  回顾音频可视化目的，是实时动态反应数据内容的变化程度。则寻找 如何实时获取音频数据信息 成为接下来的关注焦点。

---

2）获取音频播放器实时采集数据

  在工程运行过程中，AudioSource 播放 AudioClip 是通过实时即拿即解析进行。在 Unity 中文文档 - AudioSource 中给出一下方法可获取数据：

• GetOutputData()：获取当前音频输出数据
• GetSpectrumData()：获取当前音频源的频谱数据块

  焦点关注至 频谱块数据 上。百科解释是频率谱密度的简称，是频率的分布曲线。复杂振荡分解为振幅不同和频率不同的谐振荡，这些谐振荡的幅值按频率排列的图形叫做频谱。于是GetSpectrumData()无疑是当前对音频可视化上更加有用的方法。

  关于GetSpectrumData()在 Unity中文文档 中的方法描述 public void GetSpectrumData(float[] samples, int channel, FFTWindow window) ：

• samples：填充音频样本的数据（要求长度保持为2的幂数）
  通常样本数据长度建议 64/128/256/512/…/8192。切记不可超过其范围。
  要求为2的幂数原因：计算机数据读取采取二进制，为保证数据可读与读取效率最佳的必要遵循。
• channel：音频采样声道。
• window：属于FTTWindow类提供的频谱分析窗口化类型。其目的是控制音频信号，减少频段中的信号泄露。
  窗口类型越复杂，音质越高，但同时速度降低。
  从高至低：Rectangular > Triangle > Hamming > Hanning > Blackman > BlackmanHarris

  更多说明：GetSpectrumData()似乎在参数设计上不符合正常理解的out，但其目的是将采样的数据信息存储至samples创建的float[]数组。或许官方应使用out来更方便开发者理解。也或许是有不可更该内部层代码的原因。
 

音频可视化 实现

---

1）频谱数据 采样

  根据GetSpectrumData()所需的参数类型，准备以下参数：

1. public AudioSource ASource;：指定使用的 AudioSource 播放器对象。
2. public float[] SamlpesArray = new float[64];：采集频谱数据的容器。
   注意：思考选择64而不是63的原因。（见 原理 一节中的解释）。

public void SyncSpectrumData()

	this.ASource.GetSpectrumData(SamplesArray, 0, FFTWindow.Rectangular);

  这是默认对仅一个音轨的音频数据采样。根据实际 AudioClip 音轨数进行索引。以 QQ音乐 - The Almight Voilet Thunder 稻光鸣神 - HOYOMix 为例。通过Unity Preview（预览窗口）可查看该音频具备两个音频道。或通过 AudioClip 的 channels属性可知晓。其声音频道索引方式类似于数组，即声音频道一对应信号位置0，声音频道二对应信号位置1，以此类推。

---

2）采样数据 观测

  在完成帧频谱数据采集任务后，首先使用Debug.Log($"SamplesArray[0] SamplesArray[10] )检查数据收集情况。经Debug确认，数据范围大致在[0, 1]之间（此处的范围是大概范围，并非指确切范围）。确认到动态数据的变化后，就可构思如何设计明显的可视化方案。
 

后续 说明

---

◼ 关于频谱数据采样频率

  一般情况下，开发选择Update()方法进行帧数据获取。但从实际效果中，表现出频繁的滑条变化设计。对计算机性能容易产生损耗。尤其是当采样的数据容量得到提升的情况下。于是，考虑及FixedUpdate()以固定时间获取数据采样结果。即仅在同时间间隔下获取采样数据信息，该情况下数据容器中的数据变化频率得以控制，使得整体画面波动频率降低。进一步可能较为合适的是设计例如每秒获取数据。以达到可视化整体流程中对计算机低能耗的特点。

---

◼ 效果展示图

---

◼ 关于数据差值的解决方案

  每次获取的帧数据，是毫无预兆与趋势表现。忽大忽小等情况时长发生。利用这些数据时容易产生频变的违和感。所以设计一套过渡变换是一个不错的选择。在下次数据采样开始前，由上一数据点过渡至该点位数据。产生类似动画的效果是相当不错的设计，关联的Lerp()插值、例如Math.Lerp()/Vector3.Lerp()等方法可实现。
 

小结

  对任何可视化数据，首要确认是数据的可支持性。若该数据明确无法可视化，则应重心放置于其他方向的可视化。如同本文中，AudioClip 的数据无法构建可视化设计。但 AudioSource 通过播放 AudioClip 时对频谱数据的实时采样却恰好能完成音频可视化设计这一过程。当无法对其可视化时，尝试从与之关联的其他对象上探寻可视化可能性。

电商大屏 - 数据可视化设计经验分享！

点击

信息与交互设计

关注我们！

欢迎大家踊跃投稿哦！

投稿邮箱：[e-mail]

 前言 

数据可视化大屏设计大多以蓝色调为主，因为蓝色比较容易营造大屏所追求的科技感，所以在众多行业中运用最广泛。

例如公安系统、城市交通、科技公司、政企单位、制造业等众多行业。

但电商类大屏需要另一种与其他大多数行业不同的调性。

本期就来分享电商类大屏设计的案例经验，带你了解电商大屏的设计技法与思考。

 案例解析-业务指标分析 

本期的大屏案例为“北京市电商消费大数据”，主要呈现某电商平台618购物节的信息数据。

如销售总金额、区域销售排行、男女比例、年龄分布、品牌销售排行、历史销售趋势等等。

先看图，下图为最终的设计稿：

设计任何产品首先要做的就是了解业务和需求分析，本次的案例需求非常简单明了，只需做各指标数据的展示。

从需求上可以分析得出，大屏是纯数据展示类，所以不需要有交互行为。

无交互的图表设计要点

无交互的大屏展示，在图表设计上，需要按没有交互的形式设计。

例如不能因为数据过多，而隐藏一些通过交互才能看到的数据。

对于一组无法展示全的数据，可以只提炼最重要的指标数据进行展示，也可以通过动画形式，播放展示等等。

实时数据和事后数据的区别

本案例提供的是618购物节事后的数据，所以在大屏的设计上可以根据真实的数据来设计呈现。

事后数据呈现，在设计上可以根据真实的数据来定义图表，例如可以根据数据大小长度，精准的定义设计空间。

实时数据顾名思义指的就是数据在实时传输，产生了数据就要立即展示出来，从业务角度上可能要做其他的设计预案。

例如异常数据的处理，有突破性的数据是否设计动画营造一种仪式感，就像天猫双11的千亿彩蛋。

 案例解析-风格与用色 

定义视觉风格

定义大屏设计风格，首先要分析行业的属性特征，然后通过情绪板等方法定义视觉调性。

例如公安系统通常运用严谨冷静的蓝色调；能源、教育、医疗行业的主色调，一般使用能代表环保、未来、健康的绿色调。

电商、新零售行业需要烘托购物热闹的场景，所以靓丽的暖色调更为合适。

过于冰冷理性的色调，并不是电商产品所追求的调性，更不符合观者对购物场景的心理认知。

但是由于可视化大屏的面积过大，主色调不论什么颜色，背景色通常要用暗色系，以减少对观者视觉上的冲击。

深色背景能够有效烘托暖色调的可视化元素，起到对比、聚焦视觉的作用。

暖色调元素可以烘托购物特征的氛围，如红色、橙色、紫色、都是有效的色调，但如果都是暖色元素较容易视觉疲劳。

所以暖色中搭配一定比例的冷色，能够缓解视觉上的不适感。

冷暖色在大屏设计中的搭配有很多技法，下面我们来解析色彩搭配。

色彩解析

首先分析色环图，了解一下色彩知识，30度为同类色、60度为邻近色、120度对比色、180度互补色。

电商大屏冷色元素通常选用蓝色系色调，通过上图对色环的认识，来看下蓝色与色环图上的暖色都呈现什么关系。

同类色：在色环上成30度，特点是色相比较接近，如红色类的朱红、大红、玫瑰红都属同类色关系。

邻近色：在色环上成60度，邻近色的搭配会使画面和谐统一，呈现一种你中有我，我中有你的感觉。

对比色：在色环上成120度，是构成明显色彩效果的色组，视觉上会有一种蓝的更蓝，红的更红。

互补色：在色环上成180度，是对比最强的色组，两个颜色放在一起会引起强烈的对比，会给人强烈的排斥感。

大面积用色技法

从以上的色彩分析来看，电商大屏若呈现大面积的暖色调，再搭配大面积蓝色调会呈现对比色或互补色，形成强烈对比。

所以本期案例选择蓝色的邻近色，紫红色进行搭配，这样不仅能够烘托电商的属性特征。

还能在大面积使用紫红色的同时保持画面和谐统一，因为紫红色同时包含蓝色和红色两种色调。

蓝色搭配紫红色其实就是，实现了你中有我，我中有你的感觉。

下面我们对比一下，如果把本期分享的大屏案例，换成正红色体会一下感觉。

不难发现强烈对比效果会有一种不适感，所以大面积的暖色，一定要使用跟其他元素能够融入的邻近色。

小面积使用对比色的技法

如果是小面积的使用，就会有很多的可能性，例如下图阿里DataV电商类数据可视化产品的模版。

都只是在标题处使用红色烘托电商大屏的调性， 内容区并没有过多的使用红色，所以各种元素间，并没有形成强烈的对比。

但从两张图的对比来看，第二张处理的比第一张要高级一些，仔细看会发现，第二张背景色偏紫色。

红紫为邻近色，这样标题的红色和背景就形成了较为和谐的过渡，而第一张暗蓝色的背景跟标题对比强烈，略显生硬。

反面案例解析

举个反面案例，看下图最大的问题就是过度烘托了主题主题氛围，导致整个画面太过艳丽，没有细节。

更不用说数据的清晰展示了，这已经违背了大屏可视化设计，以数据信息展示为核心的设计理念。

图片来源网络(反面案例)

想象一下大屏的使用场景，这样一个艳丽的大屏挂在墙上，看多了心情会变得焦躁，同样的道理，没有人会把家里的墙大面积刷成红色一样。

大屏设计用色调烘托主题本身很好，但对于艳丽的暖色调，要适当搭配一定比例的邻近色和对比色。

这样能大大缓解观者的视觉疲劳，展示出细节，大屏看起来色彩也会更丰富有观赏性。

案例中标题和总数据为什么使用黄色？

因为黄色和蓝色、紫红色对比性更强烈，黄色跟蓝色在色环上成180度是互补色，有最强烈的对比性。

黄色与紫红色在色环上成120度是对比色，同样有强烈的对比性，同时黄色也跟暗色调的背景形成了鲜明的对比。

所以对于关键指标数据和标题，需要重点突出的元素，可以用对比强烈的色调做突出效果。

 案例解析-设计要点 

打造仪式感

设计要点要从需求出发，例如需求中有一项关键的业务指标要突出，朝阳区消费占全市75%。

所有区中朝阳的消费是No1，所以从这点考虑可以使用全区地图来展示，并且打造朝阳区第一名的仪式感。

打造惊喜感

产品设计中给观者惊喜感，无疑是好的体验，本次案例通过增加了两道光线动画，打造微妙的惊喜感。

这样的设计给大屏增添了动感，看起来更富有生机，两道光线滑向总数据指标，会有一种数据传输的感觉。

同时也像满天繁星的夜空中，划过的流星一样，给人带来一种悸动的体验。

3D图表的设计要点

3D图表有很强的视觉表现力，是突出重要指标的重要手段之一，但3D图表在数据可视化设计中，一直是有争议的存在。

有人认为由于3D的透视关系，会导致数据呈现的不客观。

其实从设计角度可以解决不客观问题，比如我们案例中的3D柱状图，由于柱形的厚度。

导致出现两条顶端线，视觉上很难分清顶端在哪里，对指向Y轴刻度数值的体现的就不明确。

这种情况就需要在柱状图上标记出数据值，这样画面不仅有了3D图表的视觉表现，同时也不影响数据的展示。

增强观者认知

增强观者对元素的认知，可以大大提高阅读效率，比如图文形式通常比文字视觉上更突出。

案例中“最受欢迎品牌”就可以加上品牌logo增强对类别的认知。

条形图通常按序排列，从大到小，或从小到大，但如果有“其他”这项分类

一般都要放到最后。

因为“其他”通常是所有分类中最不关注的数据，关注的数据都会直接展示出来。

如果“其他”分类也按有序排列，就会有格格不入的感觉。

 后语 

电商大屏通常要烘托一种热闹的场景，对配色的准确把握，大面积色调的使用需要和谐过渡，同时要善于运用对比色，突出元素。

多思考设计与业务的表现关系，善于从设计思维出发打造仪式感、惊喜感，增加产品价值。

我的出处

                  来源：互联网设计帮

版权声明