实验 5-2：浏览器市场分析 - 大屏静态布局制作 实验报告

一、实验基本信息

实验名称：浏览器市场分析 - 大屏静态布局制作

实验平台：助睿在线实验平台

实验工具：Uniplore 助睿 Max 数据大屏可视化平台

前置数据：实验 5-1 加工完成的浏览器市场行为分析各类统计数据表

实验人员：

实验日期：

二、实验目的

1. 结合业务需求完成数据大屏整体规划，掌握大屏布局设计、图表选型的基本原则与方法。
2. 熟练使用助睿 Max 可视化平台，运用图片、文字、指标卡、各类图表组件完成大屏静态页面搭建。
3. 掌握组件拖拽、样式美化、分组管理、导航跳转、素材配置等大屏基础操作。
4. 匹配不同业务指标选择对应图表类型，理解数据特征与图表类型的适配逻辑。
5. 完成浏览器市场分析大屏全区域布局与样式美化，为后续数据接入、交互开发奠定基础。

三、实验环境与实验数据

3.1 实验环境

本次实验依托 Uniplore 一站式大数据平台开展，使用内置的助睿 Max 数据大屏模块。该平台支持拖拽式零代码大屏开发，内置海量图表、媒体、文字、交互组件，支持自定义背景、样式、导航、配色，可快速制作业务监控、数据分析类可视化大屏，适配教学实训与企业可视化场景。

3.2 实验数据

复用实验 5-1 ETL 加工输出的市场分析类数据表，各指标、图表与数据源对应关系如下表：

表格

功能模块	分析维度	展示指标	图表 / 组件	关联数据表
数据概览	核心指标	总使用时长、人均使用时长、活跃用户占比、重度用户占比	数据翻牌器（指标卡）	browser_coverage、browser_frequency_stats
市场格局	用户规模	各浏览器用户数量	基础柱状图	browser_coverage
市场格局	使用规模	各浏览器使用时长占比	多维度饼图	browser_coverage
市场格局	使用粘性	各浏览器人均使用时长	基础柱状图	browser_coverage
时间趋势	周活跃趋势	四周浏览器活跃用户变化	折线图	browser_weekly_active
使用习惯	使用频率	轻 / 中 / 重度用户分布	堆叠柱状图	browser_frequency_stats
时段偏好	24 小时活跃	全天各时段活跃用户数	区域图	browser_hourly
时段偏好	周内对比	工作日 / 周末使用时长对比	分组柱状图	daily_browser_detail
竞争关系	浏览器使用数量	多浏览器使用用户占比	基础饼图	browser_multi_usage

四、整体分析框架

4.1 核心业务问题

本次大屏围绕浏览器市场行为展开可视化分析，通过图表直观解答以下业务问题：

1. 各大浏览器的用户体量、使用时长排名，判断市场头部产品。
2. 浏览器用户活跃度的周度变化趋势，判断产品运营状态。
3. 用户全天、工作日 / 周末的使用时段偏好，区分办公与娱乐场景。
4. 用户使用行为轻重度分布，划分核心用户与边缘用户。
5. 用户多浏览器混用情况，分析用户忠诚度与竞品竞争格局。

4.2 大屏设计原则

1. 叙事逻辑：遵循从上到下、从整体到局部、从趋势到细节的浏览顺序。顶部放置标题、导航、核心指标，中部放置市场格局、趋势分析，底部放置使用习惯与竞争分析。
2. 重点突出：顶部核心指标区使用指标卡展示关键数据，视觉优先级最高。
3. 图表适配：趋势类数据使用折线图、区域图；对比类数据使用柱状图、分组柱状图；占比类数据使用饼图。
4. 色彩规范：为 6 款浏览器配置固定识别色，全大屏配色统一、风格协调。
5. 交互预留：设置导航按钮，支持多页面大屏跳转，预留筛选交互功能。

4.3 大屏布局规划

整体采用标准 1920×1080 大屏分辨率，布局分区：

1. 顶部区域：背景图 + 大屏主标题 + 双导航按钮（市场分析、用户画像）；
2. 左上区域：浏览器用户数柱状图、使用时长占比饼图、人均使用时长柱状图；
3. 中上区域：核心指标概览区（4 组数据翻牌器指标卡）；
4. 中部区域：工作日 / 周末分组柱状图、24 小时活跃分布区域图；
5. 下部区域：周活跃趋势折线图、使用频率堆叠柱状图、浏览器使用数量饼图。

五、详细实验操作步骤

5.1 进入大屏模块并新建空白大屏

1. 登录助睿在线实验平台，点击左侧菜单栏数据大屏，进入助睿 Max 可视化平台。
2. 点击页面+ 新建 → 选择新建大屏，模板选择空白模板。
3. 输入大屏名称市场分析，点击下一步，进入大屏编辑画布。

5.2 大屏全局样式设置

5.2.1 页面背景设置

1. 在画布右侧页面设置中，确认分辨率为1920×1080。
2. 将背景图片链接粘贴至背景图片输入框，完成全局背景配置。

背景链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/bg-2.png

5.2.2 顶部标题 Banner 制作

1. 左侧组件栏选择媒体 → 单张图片，拖拽至画布顶部。
2. 右键组件重命名为标题 banner，在右侧属性栏配置图片链接：

https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png

1. 调整组件宽高、坐标，保存并预览效果。

5.2.3 导航按钮制作

1. 导航背景：再次拖拽「单张图片」组件，重命名为市场分析按钮背景，配置导航背景图链接：

https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png，调整位置与尺寸。

1. 导航文字：选择文字 → 通用标题，拖拽至按钮上方，命名为市场分析，修改文本内容、字体、字号、颜色，模拟选中状态样式。
2. 复制制作第二个按钮：全选导航组件复制，修改组件名称为用户画像按钮背景、用户画像，调整横坐标、文字样式（未选中状态）。
3. 全选顶部所有组件，右键成组，命名为顶部，方便统一管理。

5.3 分区内容布局与组件样式制作

所有图表区域统一规则：区域背景图 + 标题背景图 + 文字标题 + 业务图表，完成后将整套组件成组管理。

5.3.1 浏览器用户数（基础柱状图）

1. 拖拽「单张图片」作为区域背景，配置链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/area-bg.png，调整大小位置。
2. 新增「单张图片」作为短标题背景，链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-short.png。
3. 新增「通用标题」，修改文字为浏览器用户数，调整文本样式。
4. 拖拽基础柱状图组件，命名为「浏览器用户数柱状图」；开启图例居中显示，调整图表边距、柱子样式。
5. 全选本区域组件，右键成组，命名为浏览器用户数。

5.3.2 浏览器使用时长占比（多维度饼图）

1. 复制上一区域「浏览器用户数」整组组件，移动至画布对应位置，刷新数据。
2. 修改标题文字为浏览器使用时长；删除原有柱状图，新增多维度饼图。
3. 饼图样式设置：关闭外圈显示、开启类目标签；为 6 个浏览器依次配置配色：#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF。
4. 组件成组，命名为浏览器使用时长。

5.3.3 浏览器人均使用时长（基础柱状图）

1. 复制图表区域组件，移动位置，修改标题为浏览器人均使用时长。
2. 保留原有柱状图，仅修改组件名称与标题样式，微调图表布局。
3. 组件成组，命名为浏览器人均使用时长。

5.3.4 数据概览指标区（数据翻牌器）

1. 复制图表区域组件，修改组名为数据概览，更换为长标题背景图，链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-long.png，标题改为数据概览。
2. 删除原有图表组件，制作指标卡单元：
   • 拖拽「单张图片」作为图标，时长类图标链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/audio-video.png；
   • 拖拽数据翻牌器，命名为总使用时长，配置标题、字体、对齐样式。
3. 将图标 + 翻牌器成组，复制 3 组，依次修改为：人均使用时长、活跃用户占比、重度用户占比。
4. 占比类图标更换链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/degree-thesis.png，调整所有指标卡位置，完成指标区布局。

5.3.5 工作日 vs 周末使用时长（分组柱状图）

1. 复制标准图表区域组件，修改标题为工作日 vs 周末使用时长，更换长标题背景图。
2. 删除原有图表，添加分组柱状图，调整尺寸位置。
3. 设置图表系列颜色，系列 1、系列 2 分别配置对应色值，调整柱子宽度、标签样式。
4. 组件成组，命名为周内对比。

5.3.6 24 小时活跃分布（区域图）

1. 复制图表区域组件，标题修改为24 小时活跃用户数分布。
2. 替换图表为区域图，设置区域填充色#29F1FA，调整坐标轴、图例样式。
3. 组件成组，命名为24 小时活跃分布。

5.3.7 浏览器周活跃趋势（折线图）

1. 复制图表区域组件，标题修改为浏览器周活跃用户数变化。
2. 替换图表为折线图，调整线条粗细、拐点样式、图例位置，适配趋势数据展示。
3. 组件成组，命名为周活跃趋势。

5.3.8 使用频率分布（堆叠柱状图）

1. 复制图表区域组件，标题修改为使用频率分布。
2. 替换图表为垂直基本柱图（堆叠柱状图），调整堆叠样式、配色、标签。
3. 组件成组，命名为使用频率分布。

5.3.9 浏览器使用数量分布（基础饼图）

1. 复制图表区域组件，标题修改为浏览器使用数量分布。
2. 替换图表为基本饼图，调整饼图大小、标签、配色。
3. 组件成组，命名为使用数量分布。

5.4 整体调试与最终保存

1. 全画布检查所有组件位置、尺寸、样式，统一视觉风格，修正错位、拉伸问题。
2. 逐一点击保存，完成大屏静态布局制作。
3. 点击预览，查看 1920×1080 分辨率下全屏展示效果。

六、实验核心知识点

1. 大屏整体设计逻辑：数据大屏并非组件简单堆砌，需要结合业务流程规划布局，遵循视觉流线与信息层级原则，核心指标优先展示。
2. 图表选型规则
   • 对比类数据：柱状图、分组柱状图；
   • 占比类数据：饼图；
   • 趋势类数据：折线图、区域图；
   • 分层占比：堆叠柱状图。
3. 组件管理技巧：通过「复制组件、组件成组」提升制作效率，统一区域样式，便于后期修改维护。
4. 素材与样式规范：统一背景图、标题图、图标素材，固定配色体系，保证大屏视觉美观、风格统一。
5. 零代码可视化优势：助睿 Max 依托拖拽式操作，无需编程即可快速完成专业数据大屏布局，降低可视化开发门槛。

七、实验遇到的问题及解决方法

表格

出现问题	原因分析	解决办法
复制组件后图片 / 文字不显示	组件缓存未刷新	选中组件，点击「刷新数据」即可正常展示
标题背景图被拉伸变形	短标题图适配长标题区域	根据区域用途，区分使用短标题背景图和长标题背景图
图表图例、标签位置杂乱	默认样式未调整	进入图表样式设置，手动调整图例位置、边距、标签显隐
组件位置错乱、难以统一调整	零散组件过多	完成单个区域制作后及时「成组」，以组为单位移动、修改
饼图外圈多余色块，影响美观	外圈默认开启	将饼图外圈颜色透明度调为 0，隐藏外圈

八、实验总结与心得体会

本次实验完成了浏览器市场分析大屏静态布局全流程制作，从大屏新建、全局背景配置，到顶部导航、标题制作，再到各业务分区、图表组件的排版美化，完整掌握了助睿 Max 数据大屏的基础操作。

在实验过程中，我深刻理解了业务需求驱动可视化设计的思路：不同类型的数据必须搭配对应的图表，才能清晰传递信息；同时也掌握了大屏布局、色彩搭配、组件管理的实用技巧，学会利用复制、分组等功能提升制作效率。

整套大屏围绕前期 ETL 加工的数据表进行布局，实现了从原始数据清洗→指标聚合→可视化展示的完整大数据链路。本次静态布局是大屏开发的基础，后续还需要完成数据源接入、交互配置，让大屏真正实现数据动态展示。通过本次实训，我对数据可视化的应用场景、设计规范有了直观认知，提升了大数据可视化实操能力。