实验 5-2浏览器市场分析 - 大屏静态布局制作 实验报告一、实验基本信息实验名称浏览器市场分析 - 大屏静态布局制作实验平台助睿在线实验平台实验工具Uniplore 助睿 Max 数据大屏可视化平台前置数据实验 5-1 加工完成的浏览器市场行为分析各类统计数据表实验人员实验日期二、实验目的结合业务需求完成数据大屏整体规划掌握大屏布局设计、图表选型的基本原则与方法。熟练使用助睿 Max 可视化平台运用图片、文字、指标卡、各类图表组件完成大屏静态页面搭建。掌握组件拖拽、样式美化、分组管理、导航跳转、素材配置等大屏基础操作。匹配不同业务指标选择对应图表类型理解数据特征与图表类型的适配逻辑。完成浏览器市场分析大屏全区域布局与样式美化为后续数据接入、交互开发奠定基础。三、实验环境与实验数据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 核心业务问题本次大屏围绕浏览器市场行为展开可视化分析通过图表直观解答以下业务问题各大浏览器的用户体量、使用时长排名判断市场头部产品。浏览器用户活跃度的周度变化趋势判断产品运营状态。用户全天、工作日 / 周末的使用时段偏好区分办公与娱乐场景。用户使用行为轻重度分布划分核心用户与边缘用户。用户多浏览器混用情况分析用户忠诚度与竞品竞争格局。4.2 大屏设计原则叙事逻辑遵循从上到下、从整体到局部、从趋势到细节的浏览顺序。顶部放置标题、导航、核心指标中部放置市场格局、趋势分析底部放置使用习惯与竞争分析。重点突出顶部核心指标区使用指标卡展示关键数据视觉优先级最高。图表适配趋势类数据使用折线图、区域图对比类数据使用柱状图、分组柱状图占比类数据使用饼图。色彩规范为 6 款浏览器配置固定识别色全大屏配色统一、风格协调。交互预留设置导航按钮支持多页面大屏跳转预留筛选交互功能。4.3 大屏布局规划整体采用标准 1920×1080 大屏分辨率布局分区顶部区域背景图 大屏主标题 双导航按钮市场分析、用户画像左上区域浏览器用户数柱状图、使用时长占比饼图、人均使用时长柱状图中上区域核心指标概览区4 组数据翻牌器指标卡中部区域工作日 / 周末分组柱状图、24 小时活跃分布区域图下部区域周活跃趋势折线图、使用频率堆叠柱状图、浏览器使用数量饼图。五、详细实验操作步骤5.1 进入大屏模块并新建空白大屏登录助睿在线实验平台点击左侧菜单栏数据大屏进入助睿 Max 可视化平台。点击页面 新建 → 选择新建大屏模板选择空白模板。输入大屏名称市场分析点击下一步进入大屏编辑画布。5.2 大屏全局样式设置5.2.1 页面背景设置在画布右侧页面设置中确认分辨率为1920×1080。将背景图片链接粘贴至背景图片输入框完成全局背景配置。背景链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/bg-2.png5.2.2 顶部标题 Banner 制作左侧组件栏选择媒体 → 单张图片拖拽至画布顶部。右键组件重命名为标题 banner在右侧属性栏配置图片链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png调整组件宽高、坐标保存并预览效果。5.2.3 导航按钮制作导航背景再次拖拽「单张图片」组件重命名为市场分析按钮背景配置导航背景图链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png调整位置与尺寸。导航文字选择文字 → 通用标题拖拽至按钮上方命名为市场分析修改文本内容、字体、字号、颜色模拟选中状态样式。复制制作第二个按钮全选导航组件复制修改组件名称为用户画像按钮背景、用户画像调整横坐标、文字样式未选中状态。全选顶部所有组件右键成组命名为顶部方便统一管理。5.3 分区内容布局与组件样式制作所有图表区域统一规则区域背景图 标题背景图 文字标题 业务图表完成后将整套组件成组管理。5.3.1 浏览器用户数基础柱状图拖拽「单张图片」作为区域背景配置链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/area-bg.png调整大小位置。新增「单张图片」作为短标题背景链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-short.png。新增「通用标题」修改文字为浏览器用户数调整文本样式。拖拽基础柱状图组件命名为「浏览器用户数柱状图」开启图例居中显示调整图表边距、柱子样式。全选本区域组件右键成组命名为浏览器用户数。5.3.2 浏览器使用时长占比多维度饼图复制上一区域「浏览器用户数」整组组件移动至画布对应位置刷新数据。修改标题文字为浏览器使用时长删除原有柱状图新增多维度饼图。饼图样式设置关闭外圈显示、开启类目标签为 6 个浏览器依次配置配色#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF。组件成组命名为浏览器使用时长。5.3.3 浏览器人均使用时长基础柱状图复制图表区域组件移动位置修改标题为浏览器人均使用时长。保留原有柱状图仅修改组件名称与标题样式微调图表布局。组件成组命名为浏览器人均使用时长。5.3.4 数据概览指标区数据翻牌器复制图表区域组件修改组名为数据概览更换为长标题背景图链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-long.png标题改为数据概览。删除原有图表组件制作指标卡单元拖拽「单张图片」作为图标时长类图标链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/audio-video.png拖拽数据翻牌器命名为总使用时长配置标题、字体、对齐样式。将图标 翻牌器成组复制 3 组依次修改为人均使用时长、活跃用户占比、重度用户占比。占比类图标更换链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/degree-thesis.png调整所有指标卡位置完成指标区布局。5.3.5 工作日 vs 周末使用时长分组柱状图复制标准图表区域组件修改标题为工作日 vs 周末使用时长更换长标题背景图。删除原有图表添加分组柱状图调整尺寸位置。设置图表系列颜色系列 1、系列 2 分别配置对应色值调整柱子宽度、标签样式。组件成组命名为周内对比。5.3.6 24 小时活跃分布区域图复制图表区域组件标题修改为24 小时活跃用户数分布。替换图表为区域图设置区域填充色#29F1FA调整坐标轴、图例样式。组件成组命名为24 小时活跃分布。5.3.7 浏览器周活跃趋势折线图复制图表区域组件标题修改为浏览器周活跃用户数变化。替换图表为折线图调整线条粗细、拐点样式、图例位置适配趋势数据展示。组件成组命名为周活跃趋势。5.3.8 使用频率分布堆叠柱状图复制图表区域组件标题修改为使用频率分布。替换图表为垂直基本柱图堆叠柱状图调整堆叠样式、配色、标签。组件成组命名为使用频率分布。5.3.9 浏览器使用数量分布基础饼图复制图表区域组件标题修改为浏览器使用数量分布。替换图表为基本饼图调整饼图大小、标签、配色。组件成组命名为使用数量分布。5.4 整体调试与最终保存全画布检查所有组件位置、尺寸、样式统一视觉风格修正错位、拉伸问题。逐一点击保存完成大屏静态布局制作。点击预览查看 1920×1080 分辨率下全屏展示效果。六、实验核心知识点大屏整体设计逻辑数据大屏并非组件简单堆砌需要结合业务流程规划布局遵循视觉流线与信息层级原则核心指标优先展示。图表选型规则对比类数据柱状图、分组柱状图占比类数据饼图趋势类数据折线图、区域图分层占比堆叠柱状图。组件管理技巧通过「复制组件、组件成组」提升制作效率统一区域样式便于后期修改维护。素材与样式规范统一背景图、标题图、图标素材固定配色体系保证大屏视觉美观、风格统一。零代码可视化优势助睿 Max 依托拖拽式操作无需编程即可快速完成专业数据大屏布局降低可视化开发门槛。七、实验遇到的问题及解决方法表格出现问题原因分析解决办法复制组件后图片 / 文字不显示组件缓存未刷新选中组件点击「刷新数据」即可正常展示标题背景图被拉伸变形短标题图适配长标题区域根据区域用途区分使用短标题背景图和长标题背景图图表图例、标签位置杂乱默认样式未调整进入图表样式设置手动调整图例位置、边距、标签显隐组件位置错乱、难以统一调整零散组件过多完成单个区域制作后及时「成组」以组为单位移动、修改饼图外圈多余色块影响美观外圈默认开启将饼图外圈颜色透明度调为 0隐藏外圈八、实验总结与心得体会本次实验完成了浏览器市场分析大屏静态布局全流程制作从大屏新建、全局背景配置到顶部导航、标题制作再到各业务分区、图表组件的排版美化完整掌握了助睿 Max 数据大屏的基础操作。在实验过程中我深刻理解了业务需求驱动可视化设计的思路不同类型的数据必须搭配对应的图表才能清晰传递信息同时也掌握了大屏布局、色彩搭配、组件管理的实用技巧学会利用复制、分组等功能提升制作效率。整套大屏围绕前期 ETL 加工的数据表进行布局实现了从原始数据清洗→指标聚合→可视化展示的完整大数据链路。本次静态布局是大屏开发的基础后续还需要完成数据源接入、交互配置让大屏真正实现数据动态展示。通过本次实训我对数据可视化的应用场景、设计规范有了直观认知提升了大数据可视化实操能力。
浏览器市场分析 - 大屏静态布局制作
实验 5-2浏览器市场分析 - 大屏静态布局制作 实验报告一、实验基本信息实验名称浏览器市场分析 - 大屏静态布局制作实验平台助睿在线实验平台实验工具Uniplore 助睿 Max 数据大屏可视化平台前置数据实验 5-1 加工完成的浏览器市场行为分析各类统计数据表实验人员实验日期二、实验目的结合业务需求完成数据大屏整体规划掌握大屏布局设计、图表选型的基本原则与方法。熟练使用助睿 Max 可视化平台运用图片、文字、指标卡、各类图表组件完成大屏静态页面搭建。掌握组件拖拽、样式美化、分组管理、导航跳转、素材配置等大屏基础操作。匹配不同业务指标选择对应图表类型理解数据特征与图表类型的适配逻辑。完成浏览器市场分析大屏全区域布局与样式美化为后续数据接入、交互开发奠定基础。三、实验环境与实验数据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 核心业务问题本次大屏围绕浏览器市场行为展开可视化分析通过图表直观解答以下业务问题各大浏览器的用户体量、使用时长排名判断市场头部产品。浏览器用户活跃度的周度变化趋势判断产品运营状态。用户全天、工作日 / 周末的使用时段偏好区分办公与娱乐场景。用户使用行为轻重度分布划分核心用户与边缘用户。用户多浏览器混用情况分析用户忠诚度与竞品竞争格局。4.2 大屏设计原则叙事逻辑遵循从上到下、从整体到局部、从趋势到细节的浏览顺序。顶部放置标题、导航、核心指标中部放置市场格局、趋势分析底部放置使用习惯与竞争分析。重点突出顶部核心指标区使用指标卡展示关键数据视觉优先级最高。图表适配趋势类数据使用折线图、区域图对比类数据使用柱状图、分组柱状图占比类数据使用饼图。色彩规范为 6 款浏览器配置固定识别色全大屏配色统一、风格协调。交互预留设置导航按钮支持多页面大屏跳转预留筛选交互功能。4.3 大屏布局规划整体采用标准 1920×1080 大屏分辨率布局分区顶部区域背景图 大屏主标题 双导航按钮市场分析、用户画像左上区域浏览器用户数柱状图、使用时长占比饼图、人均使用时长柱状图中上区域核心指标概览区4 组数据翻牌器指标卡中部区域工作日 / 周末分组柱状图、24 小时活跃分布区域图下部区域周活跃趋势折线图、使用频率堆叠柱状图、浏览器使用数量饼图。五、详细实验操作步骤5.1 进入大屏模块并新建空白大屏登录助睿在线实验平台点击左侧菜单栏数据大屏进入助睿 Max 可视化平台。点击页面 新建 → 选择新建大屏模板选择空白模板。输入大屏名称市场分析点击下一步进入大屏编辑画布。5.2 大屏全局样式设置5.2.1 页面背景设置在画布右侧页面设置中确认分辨率为1920×1080。将背景图片链接粘贴至背景图片输入框完成全局背景配置。背景链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/bg-2.png5.2.2 顶部标题 Banner 制作左侧组件栏选择媒体 → 单张图片拖拽至画布顶部。右键组件重命名为标题 banner在右侧属性栏配置图片链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/banner01.png调整组件宽高、坐标保存并预览效果。5.2.3 导航按钮制作导航背景再次拖拽「单张图片」组件重命名为市场分析按钮背景配置导航背景图链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/comprehensive-data/navigation-bg-1.png调整位置与尺寸。导航文字选择文字 → 通用标题拖拽至按钮上方命名为市场分析修改文本内容、字体、字号、颜色模拟选中状态样式。复制制作第二个按钮全选导航组件复制修改组件名称为用户画像按钮背景、用户画像调整横坐标、文字样式未选中状态。全选顶部所有组件右键成组命名为顶部方便统一管理。5.3 分区内容布局与组件样式制作所有图表区域统一规则区域背景图 标题背景图 文字标题 业务图表完成后将整套组件成组管理。5.3.1 浏览器用户数基础柱状图拖拽「单张图片」作为区域背景配置链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/area-bg.png调整大小位置。新增「单张图片」作为短标题背景链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-short.png。新增「通用标题」修改文字为浏览器用户数调整文本样式。拖拽基础柱状图组件命名为「浏览器用户数柱状图」开启图例居中显示调整图表边距、柱子样式。全选本区域组件右键成组命名为浏览器用户数。5.3.2 浏览器使用时长占比多维度饼图复制上一区域「浏览器用户数」整组组件移动至画布对应位置刷新数据。修改标题文字为浏览器使用时长删除原有柱状图新增多维度饼图。饼图样式设置关闭外圈显示、开启类目标签为 6 个浏览器依次配置配色#2177FC、#3DC3DF、#FF948B、#8A79FE、#82F9A5、#97DFFF。组件成组命名为浏览器使用时长。5.3.3 浏览器人均使用时长基础柱状图复制图表区域组件移动位置修改标题为浏览器人均使用时长。保留原有柱状图仅修改组件名称与标题样式微调图表布局。组件成组命名为浏览器人均使用时长。5.3.4 数据概览指标区数据翻牌器复制图表区域组件修改组名为数据概览更换为长标题背景图链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/public-material/title-bg-long.png标题改为数据概览。删除原有图表组件制作指标卡单元拖拽「单张图片」作为图标时长类图标链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/audio-video.png拖拽数据翻牌器命名为总使用时长配置标题、字体、对齐样式。将图标 翻牌器成组复制 3 组依次修改为人均使用时长、活跃用户占比、重度用户占比。占比类图标更换链接https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/library-data/degree-thesis.png调整所有指标卡位置完成指标区布局。5.3.5 工作日 vs 周末使用时长分组柱状图复制标准图表区域组件修改标题为工作日 vs 周末使用时长更换长标题背景图。删除原有图表添加分组柱状图调整尺寸位置。设置图表系列颜色系列 1、系列 2 分别配置对应色值调整柱子宽度、标签样式。组件成组命名为周内对比。5.3.6 24 小时活跃分布区域图复制图表区域组件标题修改为24 小时活跃用户数分布。替换图表为区域图设置区域填充色#29F1FA调整坐标轴、图例样式。组件成组命名为24 小时活跃分布。5.3.7 浏览器周活跃趋势折线图复制图表区域组件标题修改为浏览器周活跃用户数变化。替换图表为折线图调整线条粗细、拐点样式、图例位置适配趋势数据展示。组件成组命名为周活跃趋势。5.3.8 使用频率分布堆叠柱状图复制图表区域组件标题修改为使用频率分布。替换图表为垂直基本柱图堆叠柱状图调整堆叠样式、配色、标签。组件成组命名为使用频率分布。5.3.9 浏览器使用数量分布基础饼图复制图表区域组件标题修改为浏览器使用数量分布。替换图表为基本饼图调整饼图大小、标签、配色。组件成组命名为使用数量分布。5.4 整体调试与最终保存全画布检查所有组件位置、尺寸、样式统一视觉风格修正错位、拉伸问题。逐一点击保存完成大屏静态布局制作。点击预览查看 1920×1080 分辨率下全屏展示效果。六、实验核心知识点大屏整体设计逻辑数据大屏并非组件简单堆砌需要结合业务流程规划布局遵循视觉流线与信息层级原则核心指标优先展示。图表选型规则对比类数据柱状图、分组柱状图占比类数据饼图趋势类数据折线图、区域图分层占比堆叠柱状图。组件管理技巧通过「复制组件、组件成组」提升制作效率统一区域样式便于后期修改维护。素材与样式规范统一背景图、标题图、图标素材固定配色体系保证大屏视觉美观、风格统一。零代码可视化优势助睿 Max 依托拖拽式操作无需编程即可快速完成专业数据大屏布局降低可视化开发门槛。七、实验遇到的问题及解决方法表格出现问题原因分析解决办法复制组件后图片 / 文字不显示组件缓存未刷新选中组件点击「刷新数据」即可正常展示标题背景图被拉伸变形短标题图适配长标题区域根据区域用途区分使用短标题背景图和长标题背景图图表图例、标签位置杂乱默认样式未调整进入图表样式设置手动调整图例位置、边距、标签显隐组件位置错乱、难以统一调整零散组件过多完成单个区域制作后及时「成组」以组为单位移动、修改饼图外圈多余色块影响美观外圈默认开启将饼图外圈颜色透明度调为 0隐藏外圈八、实验总结与心得体会本次实验完成了浏览器市场分析大屏静态布局全流程制作从大屏新建、全局背景配置到顶部导航、标题制作再到各业务分区、图表组件的排版美化完整掌握了助睿 Max 数据大屏的基础操作。在实验过程中我深刻理解了业务需求驱动可视化设计的思路不同类型的数据必须搭配对应的图表才能清晰传递信息同时也掌握了大屏布局、色彩搭配、组件管理的实用技巧学会利用复制、分组等功能提升制作效率。整套大屏围绕前期 ETL 加工的数据表进行布局实现了从原始数据清洗→指标聚合→可视化展示的完整大数据链路。本次静态布局是大屏开发的基础后续还需要完成数据源接入、交互配置让大屏真正实现数据动态展示。通过本次实训我对数据可视化的应用场景、设计规范有了直观认知提升了大数据可视化实操能力。
