助睿实验作业6-1：浏览器用户画像分析-大屏静态布局制作

目录

一、实验目的

二、实验环境

三、实验数据

四、整体分析框架

4.1 业务问题

4.2 大屏设计方案

4.3 项目整体说明

五、实验步骤

5.1 前期准备：图层管理（切换大屏）

5.2 添加【省份分布—基础平面地图】

​编辑​编辑 5.3 添加【核心指标—数字翻牌器（4个）】

5.4 添加【省份TOP排行—轮播列表】

​编辑​编辑 5.5 添加【性别分布—基础饼图】

​编辑 5.6 添加【年龄分布—基础柱图】

​编辑 5.7 添加【学历分布—水平基础柱图（条形图）】

5.8 添加【职业分布—基础柱图】

5.9 添加【收入分布—水平基础柱图】

5.10 添加【居住地类型—轮播饼图】

​编辑 5.11 添加【浏览器筛选器—下拉多选】

5.12 保存与预览

六、问题与解决

七、实验总结

一、实验目的

本实验依托前期实验处理完成的用户画像统计表（user_profile_stats），完成浏览器用户画像分析大屏的静态布局搭建。

通过本次实验，需掌握以下内容：

1. 结合用户画像分析需求，科学规划大屏的信息架构与展示逻辑；

2. 明晰各类图表在用户画像分析场景中的适用范围与分析作用；

3. 将数据统计结果转化为直观易懂、可支撑业务决策的用户分析结论；

4. 立足数据产品视角，探索大屏面向不同使用人群的价值传递方式。

二、实验环境

实验平台：助睿在线实验平台 https://lab.guilian.cn/

本次实验采用助睿数智（Uniplore）一站式数据科学平台。该平台具备数据接入、ETL 处理、机器学习建模、可视化展示等全流程零代码能力，可应用于数据分析教学以及企业数据处理工作。

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

可视化工具：助睿 Max（数据大屏）

助睿 Max 属于低代码数据可视化平台，支持拖拽式搭建、多类图表组件、地图可视化、交互筛选、低代码开发等功能，适用于业务监控、用户洞察、营销战报等各类场景。

助睿 Max 核心优势：

• 组件丰富：涵盖主流图表与交互控件，可满足企业级可视化应用需求
• 图层管理：支持图层堆叠、锁定、隐藏、排序操作，轻松实现复杂页面布局
• 低代码操作：依托拖拽搭建搭配蓝图编辑器，无需专业编程即可完成大屏布局与数据交互配置
• 工业级数据处理能力：可实时接入并渲染海量数据，千万级数据点实现秒级响应，适配企业正式生产环境
• 支持数字孪生：兼容 3D 场景、GIS 地图、实时物联数据接入，可快速搭建数字孪生可视化系统

三、实验数据

本次实验沿用前序环节处理完成的 user_profile_stats 数据表。该表以浏览器为统计维度，汇总统计用户各项人口属性分布情况，具体包含：

基础属性：性别、年龄、学历、职业、收入

地域属性：居住地类型（城市 / 城郊 / 乡村）、所属省份

统计维度：按照浏览器名称分组，可开展整体分析以及不同浏览器间的对比分析

四、整体分析框架

4.1 业务问题

正式搭建大屏前，首先明确大屏的服务对象与分析目标。

用户画像大屏的核心作用并非单纯展示统计数据，而是解答产品用户群体相关问题，将零散的人口属性数据转化为具备落地价值的人群认知。

4.2 大屏设计方案

助睿 Max 全面支持上述图表类型，各类图表组件均提供颜色、标签、图例、提示框、动画等丰富样式自定义功能，能够达到企业级界面设计标准。

结合分析需求，梳理用户画像大屏详细设计方案如下：

4.3 项目整体说明

本项目包含市场分析与用户画像两大可视化大屏，可通过页面顶部导航按钮进行切换。市场分析大屏已在上一实验中完成制作，本次实验仅完成用户画像大屏的搭建。

正式布局前，需将上一实验制作的市场分析相关图表统一隐藏，避免内容重叠、造成视觉干扰。

助睿 Max 配备完善的图层管理功能：在大屏编辑页面右侧「图层」面板中，可查看全部组件的堆叠顺序，支持拖拽调整图层层级、锁定组件防止误编辑、隐藏组件临时关闭展示。

本次操作可将原有 “市场分析” 分组整体复制并设置隐藏，将复制后的分组重命名为 “用户画像”，并正常展示该分组内的组件。通过该方式，两个大屏可保存在同一个项目文件内，依靠图层显示状态实现切换，方便统一管理。大屏点击切换的交互功能将在后续实验讲解，本次实验不作相关设置

五、实验步骤

5.1 前期准备：图层管理（切换大屏）

打开上一实验已完成的助睿Max大屏项目。

将之前的大屏组件成组并命名为"市场分析"

右键复制该分组​ → 重命名为「用户画像」。

将"市场分析"原分组隐藏（点击眼睛图标），保留"用户画像"分组可见。

后续所有组件在"用户画像"分组中搭建，两个大屏共存于同一文件。

5.2 添加【省份分布—基础平面地图】

按参考图布局添加「基础平面地图」组件，调整大小与位置

选中地图，添加「区域热力层」子组件。

进入"区域热力层"配置页，设置颜色渐变、边界线宽、高亮样式等，匹配大屏整体深色/浅色风格。

5.3 添加【核心指标—数字翻牌器（4个）】

点击数字翻牌器，并修改标题、颜色、字号等参数

每个翻牌器标题处添加「单张图片」组件作为背景，并设置背景图。

将“翻牌器”组件与“单张图片”组件成组并复制

分别设置标题（如总用户数、平均年龄、本科及以上占比、中高收入用户占比）及数值样式。按参考图添加 4 个「数字翻牌器」组件，纵向排列于地图上方/下方/左侧。

5.4 添加【省份TOP排行—轮播列表】

添加「单张图片」组件作为排行榜区域背景，设置背景图。

添加「通用标题」组件，输入标题（如"省份用户数 TOP5"），调整样式。

添加「轮播列表」组件，设置行高、列宽、字体、交替行背景色等样式。

5.5 添加【性别分布—基础饼图】

添加「单张图片」组件作为区域背景，并配置标题。

添加「基础饼图」组件，调整大小与位置。

按需微调内/外半径、标签位置、引导线样式。

5.6 添加【年龄分布—基础柱图】

添加「单张图片」组件作为区域背景，并配置标题。

添加「基础柱图」组件，调整大小与位置。

5.7 添加【学历分布—水平基础柱图（条形图）】

添加「单张图片」组件作为区域背景，并配置标题。

添加「水平基础柱图」组件并调整大小与位置。

5.8 添加【职业分布—基础柱图】

添加「单张图片」组件作为区域背景，并配置标题。添加「基础柱图」组件（适合学生/IT/白领等短类别名称对比）。

5.9 添加【收入分布—水平基础柱图】

添加「单张图片」组件作为区域背景，并配置标题。

添加「水平基础柱图」组件。

5.10 添加【居住地类型—轮播饼图】

添加「单张图片」组件作为区域背景，并配置标题。

添加「轮播饼图」组件（城市/城郊/乡村三类别结构占比，带高亮轮播动画）。

5.11 添加【浏览器筛选器—下拉多选】

在大屏顶部右侧添加「下拉选择/下拉多选」组件（位于"交互"组件分类），重命名为「浏览器筛选」，调整位置与大小。

在右侧属性面板配置选项值为各浏览器名称（Chrome、IE、360 等），设默认值为「全部浏览器 / 全选」。

暂不绑定数据联动（留待后续实验通过蓝图编辑器完成）。

5.12 保存与预览

点击「保存」。

点击「预览 / 一键全屏预览」

六、问题与解决

问题 1：原有市场分析组件与新建用户画像组件同屏显示，页面布局混乱

问题原因：未对历史大屏组件进行分组隐藏，两个板块组件在同一图层叠加展示，相互干扰。

解决方法：将原有组件编组命名为 “市场分析” 并隐藏，复制分组后重命名为 “用户画像” 并设为可见，新组件统一在该分组内搭建。

问题 2：图表组件样式、大小、位置不协调，整体排版杂乱

问题原因：未统一组件尺寸、配色与间距，背景图、标题和图表搭配缺乏规范。

解决方法：参照参考图统一调整各组件大小、位置，规范标题字体、颜色，为不同模块统一设置背景图，优化整体视觉布局。

七、实验总结

本次实验围绕浏览器用户画像分析大屏开展静态布局设计，依托助睿数智（Uniplore）平台及助睿 Max 可视化工具，以user_profile_stats用户画像统计表为数据源，完成了整体页面规划、组件搭配、图层管理与交互筛选配置等全部任务。

实验期间，我系统掌握了饼图、柱状图、地图、指标卡、筛选器等常用可视化组件的应用场景，理解了不同图表在用户画像分析中的作用与优势；熟练运用图层分组、隐藏、锁定、排序等功能，解决了多板块内容共存、布局干扰、误操作等问题。同时站在数据产品视角，梳理了完整的业务分析框架，学会结合业务问题设计大屏模块，把人口属性、地域分布等原始数据，转化为可指导产品优化、市场投放、差异化运营的用户洞察。

通过本次实验，我不仅提升了低代码数据大屏的搭建能力，也建立起 “业务为先、逻辑为王” 的数据可视化思维。本次仅完成静态布局与基础筛选功能，后续我也将继续学习大屏交互切换、进阶配置等内容，进一步完善项目。

正文中关于实验平台的相关说明信息：

• 平台全称：助睿数智（Uniplore）一站式数据科学实验平台
• 平台定位：覆盖数据接入、ETL处理、机器学习建模到可视化分析的全链路Agentic零代码数据智能
• 产品官网：https://www.uniplore.com/
• 实验平台地址：https://lab.guilian.cn/