一、实验目的

本实验基于上两个实验《浏览器市场与用户画像分析-数据加工》产出的各项统计表,使用助睿Max 数据大屏制作浏览器市场行为分析大屏。

通过本实验,学生应掌握:

  • 根据业务问题设计大屏布局与图表选型

  • 将已加工的聚合表接入可视化工具

  • 生成可交互的数据大屏,并提炼业务结论

二、实验环境

本次实验使用助睿数智(Uniplore)作为一站式数据科学平台。该平台覆盖从数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能,适用于数据分析教学与企业数据加工场景。

助睿数智官网为 https://www.uniplore.com/

  • 可视化工具:助睿Max(数据大屏)

三、实验数据

本次实验无需重新处理数据,直接复用上一实验已加工完成的大屏一(市场行为分析)目标聚合数据表,围绕浏览器行业核心维度,聚焦浏览器市场格局、用户使用行为、时段使用偏好、产品竞争关系四大核心方向开展可视化分析。各模块指标、展示组件及关联数据表明细如下:

模块 子模块 指标项 组件 关联数据表 备注
数据概览 浏览器市场 总使用时长 指标卡 browser_coverage 所有用户累计使用时长(小时)
人均使用时长 指标卡 browser_coverage 总使用时长 / 覆盖用户数(小时/周)
活跃用户占比 指标卡 browser_coverage 周活跃用户数 / 覆盖用户数
重度用户占比 指标卡 browser_frequency_stats 使用时长>10小时/周的用户占比
市场格局 用户规模 用户数 柱状图 browser_coverage 展示6个浏览器用户数
使用规模 使用时长 饼图 browser_coverage 展示各浏览器使用时长占比
使用粘性 人均使用时长 柱状图 browser_coverage -
用户行为 时间趋势 周活跃趋势 折线图 browser_weekly_active 展示第1-4周各浏览器活跃用户数变化
使用习惯 使用频率分布 堆叠柱状图 browser_frequency_stats 轻/中/重度用户在各浏览器的占比
时段偏好 全天时段24小时活跃分布 折线图 browser_hourly X轴为小时,Y轴为活跃用户数,不同颜色代表不同浏览器
用户行为 周内对比 工作日vs周末使用时长 分组柱状图 daily_browser_detail 对比工作日和周末的浏览器使用时长差异
竞争关系 使用数量 浏览器使用数量分布 饼图 browser_multi_usage 展示用户使用1种/2种/3种及以上浏览器的比例

四、整体分析框架

4.1 核心业务分析问题

本次大屏搭建围绕浏览器行业运营分析的核心业务痛点设计,通过可视化图表直观解答各类业务问题,实现数据赋能业务分析,具体对应关系如下:

核心业务问题 对应分析维度
哪个浏览器用户数量最多?哪个浏览器用户使用时长最长? 市场格局分析
用户整体活跃度呈现增长还是下降趋势? 周活跃趋势分析
用户使用浏览器的活跃高峰时段是什么时候? 时段偏好分析
用户对浏览器属于重度使用还是偶尔使用? 使用频率分析
用户日常会同时使用几款浏览器产品? 浏览器使用数量分布分析
主力浏览器用户还会使用哪些竞品浏览器? 竞品重叠、竞争关系分析
用户工作日与周末的浏览器使用习惯是否存在差异? 工作日vs周末使用对比分析

4.2 大屏设计原则

本次数据大屏遵循标准化、可视化、业务化的设计思路,整体逻辑清晰、层级分明,具体设计原则如下:

  1. 叙事逻辑清晰:严格按照从上至下、从左至右的浏览顺序设计,遵循“先整体概况、后局部细节,先趋势分析、后数据拆解”的叙事逻辑,符合用户阅读习惯。

  2. 核心指标突出:在大屏顶部核心位置放置数据概览指标卡,集中展示总使用时长、人均使用时长、活跃及重度用户占比等核心关键数据,直观呈现整体业务概况。

  3. 图表适配数据:根据不同数据特性匹配对应图表类型,趋势类数据使用折线图、对比类数据使用柱状图/分组柱状图、占比分布类数据使用饼图,保证数据展示直观易懂。

  4. 视觉统一规范:为6款主流浏览器设置固定专属配色(IE蓝、Chrome红、360绿等),全程统一色系,降低视觉识别成本,提升大屏美观度。

  5. 支持交互操作:配置浏览器筛选功能,支持查看全部浏览器数据或单一浏览器细分数据,满足多维度精细化分析需求。

4.3 大屏布局草图

本次大屏布局参考标准可视化大屏版式设计,整体分区规整、模块独立,各分析模块分区排布,兼顾美观性与实用性,具体布局参考官方示范草图及成品展示效果。

五、实验步骤

登录助睿在线实验平台后,点击平台左侧菜单栏“数据大屏”选项,即可进入助睿数据大屏可视化子平台。该平台是低代码可视化搭建工具,无需编程,通过拖拽式操作即可制作专业数据大屏,适用于业务监控、数据展览、趋势分析等多种场景,具备丰富组件库、多数据源适配、自定义样式、蓝图高级等核心能力,广泛应用于各行业数据分析场景。

5.1 新建空白数据大屏

  1. 进入数据大屏平台

img

  1. 点击页面“+新建”按钮,选择“新建大屏”功能;

img

  1. 在模板选择界面,选用“空白模板”,自定义大屏搭建画布;

img

  1. 在名称输入框中填写大屏名称“市场分析”,点击下一步,系统自动跳转至大屏制作界面,完成大屏初始化创建。

img

img

5.2 大屏基础样式设置

5.2.1 背景样式设置

大屏所有素材图片均通过oss-browser存储调用,本次实验所需素材链接已统一整理,可直接复用。进入大屏页面后,右侧为页面设置面板,默认画布尺寸为1920×1080,可根据展示设备灵活调整。复制指定背景图链接,粘贴至“背景图片”输入框,替换默认背景,其余页面参数保持默认即可,完成大屏整体背景设置。

img

5.2.2 顶部标题设置
  1. 在左侧组件列表中找到“媒体”分类,添加“单张图片”组件至画布,右键将组件重命名为“标题banner”;

img

img

  1. 选中组件,在右侧基础属性面板调整图片长宽、位置等参数,复制官方指定标题图片链接,替换组件默认图片资源;

img

img

img

  1. 完成设置后点击保存,可随时点击预览按钮,查看标题展示效果,确保样式合规、显示正常。

img

img

img

5.2.3 导航跳转设置

为实现多屏联动跳转,本次实验配置双大屏导航按钮,具体操作如下:

添加“单张图片”组件,重命名为“市场分析按钮背景”

img

粘贴导航背景图片链接,调整组件大小与位置

img

img

在左侧文字组件中添加“通用标题”,重命名为“市场分析”

img

匹配背景组件的尺寸与位置

img

修改标题文字、字体、字号及颜色

img

刷新数据完成文字渲染

img

点开文本样式,可以设置字体、字号、颜色和粗细img

完成效果如下

img

复制整套导航组件

img

分别重命名为“用户画像按钮背景”和“用户画像”

img

调整横坐标位置,修改文字内容与样式,区分当前页面选中状态与其他页面未选中状态;

img

img

刷新组件数据,保存并预览效果

img

最后选中所有顶部标题、导航组件,右键选择“成组”

img

命名为“顶部”,方便后期统一管理。

img

5.3 内容布局与各模块样式搭建

根据大屏布局草图及参考效果图,依次搭建各个数据模块,每个模块统一采用「区域背景图+标题背景图+通用标题+数据图表」的组合形式,保证整体版式统一。

5.3.1 浏览器用户数模块制作

添加单张图片组件作为模块区域背景,调整尺寸位置

img

粘贴对应背景链接

img

再次添加单张图片组件作为短标题背景,适配模块布局;

img

添加通用标题组件,设置标题为“浏览器用户数”,调整对齐方式、字体样式;

img

选取“基础柱状图”组件

img

重命名为“浏览器用户数柱状图”,调整图表大小位置

img

开启图例居中展示

img

微调图表边距优化展示效果

img

将该模块所有组件编组,命名为“浏览器用户数”

img

保存当前页面设置

img

预览

img

5.3.2 浏览器使用时长占比模块制作

复制“浏览器用户数”整体组件组,重命名为“浏览器使用时长”

img

拖拽至指定布局位置,刷新组件数据避免内容空白;

img

修改模块通用标题为“浏览器使用时长”,删除原有柱状图组件;

img

img

添加“多维度饼图”组件,调整大小位置

img

取消饼图外圈展示

img

开启类目标签显示

img

为6款浏览器依次配置专属色值,统一视觉规范,将饼图纳入组件组后保存设置。

img
5.3.3 浏览器人均使用时长模块制作

复制已有模块组件组,重命名为“浏览器人均使用时长”

img

调整摆放位置

img

刷新数据

img

修改模块标题内容,保留原有柱状图组件并完成重命名;

img

img

微调图表样式、边距,保证整体版式协调统一,保存模块设置。

img

5.3.4 数据概览指标区制作

复制基础模块组件组,重命名为“数据概览”

img

调整整体组件尺寸

img

替换长款标题背景图,修改模块标题

img

img

删除原有柱状图组件,添加装饰图标图片组件,配置对应图标素材链接;

img

添加数据翻牌器组件

img

分别搭建总使用时长、人均使用时长、活跃用户占比、重度用户占比四大指标卡,逐一修改标题、后缀、字体样式及对齐方式;

总使用时长配置如下

img

img

之后其他指标卡替换对应指标图标素材,微调所有指标卡位置,将各指标组件分别编组,完成数据概览区域搭建。

img

5.3.5 工作日vs周末使用时长模块制作

复制基础模块组件组,重命名为“周内对比”

img

调整布局位置、刷新数据;

img

替换长款标题背景图,修改模块标题为“工作日vs周末使用时长”;

img

删除原有图表,添加“分组柱状图”组件,调整尺寸与样式

img

自定义系列柱图颜色,完成模块样式优化并保存

img

其他样式参考:

img

img

img

img

5.3.6 24小时活跃用户数分布模块制作

复制周内对比模块组件组,重命名为“24小时活跃分布”

img

整摆放位置并刷新数据

img

修改模块标题为“24小时活跃用户数分布”

img

删除原有分组柱状图

img

添加区域图组件,参考规范色值调整图表样式,优化可视化展示效果,保存设置。

img

img

img

5.3.7 浏览器周活跃用户数变化模块制作

复制已有模块组件组,重命名并调整布局位置,修改模块标题,替换为对应趋势图表组件,微调样式参数,完成周活跃趋势可视化模块搭建。

img

5.3.8 浏览器使用频率分布模块制作

复制基础模块组件组,重命名为“使用频率分布”,调整位置与标题,将图表替换为垂直基本柱图,适配使用频率数据展示需求,优化样式后保存。

img

5.3.9 浏览器使用数量分布模块制作

复制上一模块组件组,重命名为“浏览器使用数量分布”,修改标题与布局位置,替换为基本饼图组件,调整饼图展示样式,完成竞争关系模块搭建。

img

所有模块搭建、样式调整完成后,整体保存大屏设置,预览完整大屏展示效果,完成本次静态大屏布局全部操作,后续可通过蓝图器完成数据接入与动态联动。

六、实验总结

6.1 实验收获

  1. 掌握可视化大屏搭建全流程:本次实验从零完成了数据大屏的创建、样式美化、布局排版、图表配置、组件管理等全套操作,熟练掌握了助睿Max数据大屏的拖拽式搭建方法,学会了空白大屏的初始化、素材资源配置、组件重命名、组件编组、样式微调等基础操作,具备了独立制作可视化大屏的能力。

  2. 掌握图表与业务数据的适配逻辑:深入理解了不同数据维度对应的可视化图表选型规则,明确趋势数据、占比数据、对比数据、指标数据分别适配的图表类型,能够结合浏览器市场分析的业务场景,合理搭配图表,让数据展示更贴合业务分析需求。

3.建立规范化的大屏设计思维:掌握了“先整体后局部、先趋势后细节”的大屏设计逻辑,学会统一大屏配色、版式、组件样式,注重可视化作品的美观性、逻辑性和实用性,同时了解了大屏交互设计的基础思路。

6.2 实验平台整体评价

助睿数智(Uniplore)一站式大数据智能服务平台整体适配教学实训场景,实用性与易用性极强,是适配数据分析学习的优质平台。平台采用零代码、拖拽式操作模式,无需掌握编程知识即可完成数据可视化大屏搭建,操作门槛低、上手速度快,非常适合数据分析初学者入门实训。

平台功能体系完整,覆盖数据接入、ETL处理、AI建模、可视化展示全链路功能,组件库丰富多样,包含各类常规图表、可视化素材、交互组件,能够满足多样化的数据分析与大屏制作需求。同时平台支持自定义样式、素材导入、组件编组、交互筛选等功能,兼顾基础教学与进阶实操需求。

此外,平台界面简洁清晰、功能分区明确,操作逻辑贴合用户使用习惯,组件复用、一键刷新、编组管理等功能大幅简化了大屏制作流程,有效提升了实验效率。整体稳定性良好,能够顺畅支撑教学实训、数据加工、可视化分析等各类场景,不仅可以满足课堂实验学习需求,也能贴合企业基础数据可视化的实操场景,教学实用性与落地性兼备。

Logo

一站式 AI 云服务平台

更多推荐