1 实验目的

本实验基于之前实验加工完成的用户画像统计表（user_profile_stats），完成浏览器用户画像分析大屏的静态布局设计。

通过本实验，学生应掌握：

• 根据用户画像分析需求，合理设计大屏的信息结构与叙事逻辑

• 理解不同图表类型在用户画像分析中的适用场景与分析价值

• 将数据结果转化为可直观理解、可支撑决策的用户洞察

• 站在“数据产品”角度，思考大屏如何向不同受众传递价值

2 实验环境

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

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

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

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

助睿Max核心优势：

• 组件丰富：覆盖所有常见图表和交互控件，满足企业级可视化需求

• 图层管理：支持图层堆叠、锁定、隐藏、排序，复杂布局轻松实现

• 低代码操作：拖拽式搭建 + 蓝图器，无需复杂编程即可完成大屏布局与数据交互配置

• 工业级数据处理能力：支持海量数据实时接入与渲染，千万级数据点秒级响应，满足企业级生产环境要求

• 支持数字孪生：支持3D场景、GIS地图、实时物联数据接入，可快速构建数字孪生可视化系统

3 实验数据

本实验使用上一阶段加工完成的 user_profile_stats 表，该表按浏览器维度，统计了用户在各人口属性上的分布，包括：

• 基本信息：性别、年龄、学历、职业、收入

• 地域信息：居住地类型（城市/城郊/乡村）、省份

• 维度：按浏览器名称分组，支持整体分析与分浏览器对比

4 整体分析框架

4.1 业务问题

在开始搭建大屏之前，先明确：这张大屏要帮助谁、看懂什么？

业务问题	对应的分析维度
目标用户是谁？（年龄、性别、职业）	明确核心目标人群，指导产品设计与营销沟通
用户的教育与收入水平如何？	影响产品复杂度设计、定价策略与商业化路径
用户分布在哪里？	指导区域市场投放与本地化运营
不同浏览器的用户画像是否存在差异？	识别差异化人群特征，制定针对性竞争策略

用户画像大屏的核心价值不是“罗列统计数字”，而是回答“谁在用我们的产品”，并将抽象的人口属性转化为可行动的人群认知。

4.2 大屏设计方案

分析目标	推荐图表	为什么
展示男女比例、城市/城郊/乡村占比	饼图 / 环形图	直观反映部分与整体的关系，适合占比类指标
对比各年龄段、各学历、各职业的用户数量	柱状图 / 条形图	便于横向比较不同类别的数量差异，条形图尤其适合类别较多的场景
展示省份分布	中国地图	空间信息的最佳载体，一眼看出热点区域与空白区域
展示关键数值（总用户、平均年龄等）	指标卡 / 翻牌器	突出核心结论，视觉聚焦，适合大屏“第一眼信息”
支持查看不同浏览器的用户画像差异	筛选器（如下拉多选）	提供交互能力，让大屏从“静态展示”变为“可探索的分析工具”

助睿Max支持以上所有图表类型，且每个图表组件都有丰富的样式自定义选项（颜色、标签、图例、提示框、动画等），满足企业级UI要求。

最终整理用户画像大屏的具体方案如下：

模块	子模块	指标项	组件	关联数据表	备注
数据概览	用户概况	覆盖用户数	指标卡	user_profile_stats	满足筛选条件的用户总数
		性别比例	指标卡	user_profile_stats	用户年龄均值
		本科以上占比	指标卡	user_profile_stats	学历本科及以上的用户比例
		中高收入占比	指标卡	user_profile_stats	月收入>5k的用户比例
基本信息		性别分布	饼图	user_profile_stats	男/女用户占比
		年龄分布	柱状图	user_profile_stats	按年龄段统计用户数
		学历分布	条形图	user_profile_stats	按学历层次统计用户数
		职业分布	柱状图	user_profile_stats	按职业类别统计用户数
		收入分布	柱状图	user_profile_stats	按收入段统计用户数
地域分布		城市 vs 乡镇分布	饼图	user_profile_stats	城市/城郊/乡村用户占比
		用户省份分布	中国地图	user_profile_stats	展示各省份用户数量分布
		省份用户数TOP5	轮播列表	user_profile_stats	展示用户数量top5省份
筛选器		浏览器选择	下拉多选	-	支持选择单个、多个或全部浏览器，默认全部

4.3 参考图

4.4 项目整体说明

本次大屏项目包含“市场分析”和“用户画像”两个大屏，通过顶部导航按钮切换。市场分析大屏已在上一个实验中完成，本次实验只制作用户画像大屏。因此，在开始布局前，需要先将上一个实验已制作的市场分析图表全部隐藏，避免与当前用户画像内容重叠干扰。

助睿Max的图层管理功能：在大屏界面右侧“图层”面板中，可以查看所有组件的堆叠顺序，支持拖拽调整图层上下关系、锁定组件防止误操作、隐藏组件临时不显示。本次实验中，我们可以将市场分析大屏的组件所在的“市场分析”组整体复制、隐藏，复制的组重命名为“用户画像”，用户画像大屏的组件正常显示。这样两个大屏可以共存于同一个大屏文件中，通过图层可见性切换，便于统一管理。两个大屏的点击切换交互将在后续实验中专门讲解，本次暂不涉及。

5 各模块设计思路与步骤

5.1 用户省份分布（中国地图）

设计思路：

分析省份分布，是为了识别区域市场的“热点”与“空白”：

• 哪些省份用户最多？

• 这些省份是否连片（如沿海高活跃带）？

• 哪些省份是“灯下黑”？

这些信息直接指导区域运营资源的投放优先级，以及本地化推广的策略选择。同时，省份分布也是向投资人展示市场覆盖范围的直观方式。

布局位置：

在大屏布局中，我们把省份分布地图放在最醒目的主视觉位置（通常是大屏的中上部或右侧核心区）。因为地图的空间表现力最强，能够一眼传递“用户从哪来”的直观印象，适合作为大屏的视觉焦点。

图表选择理由：

省份分布必须用地图组件来展示。 地理空间数据的核心信息是“邻近关系”和“空间聚集模式”——柱状图可以告诉你广东用户最多，但它回答不了“华东地区整体表现如何”这类问题。地图保留了省份之间的实际位置关系，观众可以一眼发现热点区域和空白区域。所以地图在这个场景下是不可替代的。

助睿Max地图能力：

助睿Max的“基础平面地图”组件支持多种子图层：区域热力层（按省份颜色深浅）、散点层（城市级别标记）、飞线层（展示流向关系）、迁徙层（动态流动效果）。本实验使用区域热力层即可满足需求，也可以根据实际数据复杂度叠加多个图层，实现更丰富的地理洞察。对于需要数字孪生的场景，助睿Max还支持三维地图、倾斜摄影模型、实时物联数据叠加，可直接构建智慧城市、工业仿真等数字孪生应用。

实验步骤：

（1）根据参考图布局，添加“基础平面地图”组件，设置好大小、位置后，添加“区域热力层”子组件

（2）点击“区域热力层”进入子组件配置页面，可根据自身需求配置颜色渐变、边界线宽、高亮样式等属性。助睿Max的地图组件支持自定义地图样式（如深色模式、清新模式），可匹配大屏整体风格。

5.2 核心指标

设计思路：

分析用户画像，需要一个快速获取整体印象的概览区。 在大屏布局中，核心指标卡通常放置在地图的上方、下方或左侧，与地图形成“数据总览+空间分布”的呼应关系。决策者关心四个问题：

• 用户规模有多大？

• 用户偏年轻还是成熟？

• 用户的教育水平如何？

• 有没有消费潜力？

因此，我们在主视觉区域设计了4个核心指标：

业务问题	对应指标
用户规模有多大？	用户总数
用户偏年轻还是成熟？	平均年龄
用户的教育水平如何？	本科及以上用户占比
有没有消费潜力？	中高收入用户（月收入≥5k）占比

这4个指标覆盖了用户的“规模、年龄、教育、收入”四个层面，足以快速勾勒出用户群的基本轮廓。

图表选择理由：

核心指标通常用指标卡（数字翻牌器）来呈现。 指标卡的优势是：数字大而醒目，标题简洁，没有任何冗余的图表元素，观众的目光会直接落在数值上。这就是我们选择指标卡的原因——在信息层级中，最重要的数字必须最先被看到。

助睿Max翻牌器能力：

助睿Max的“数字翻牌器”组件支持动态数值变化动画、千分位分隔符、小数位数控制、前后缀自定义（如“万人”、“%”、“¥”），以及背景、边框、字体阴影等样式，使核心指标更加突出。同时，其工业级数据处理能力确保了即使底层数据达到千万级，翻牌器的数值更新依然流畅无延迟。

实验步骤：

（1）根据参考图，添加4个“数字翻牌器”纵向排列，设置标题和数值样式

（2）每个“数字翻牌器”的标题，使用“单张图片”组件设置背景，背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/practice/browser-analysis/mbg.png

5.3 用户数TOP5省份排行榜

设计思路：

地图虽然展示了全国分布，但观众很难精确读出每个省份的具体数值。排行榜以列表形式直接给出用户数最高的几个省份及其数值，与地图形成互补：

• 地图看趋势和空间关系，排行榜看具体排名和数值。

• 帮助运营团队快速定位核心区域，优先在这些省份加大投放或开展线下活动。

• 观察TOP省份排名变化，识别新兴增长区域。

图表选择理由：

排行榜通常用表格或横向条形图来展示。表格的优点是信息密度高、精确，适合展示排名、省份名称、用户数三列信息，这里，我们采用表格形式，简洁明了。

助睿Max表格组件：

助睿Max提供了多种列表组件：轮播列表、折叠指标表格、键值表格、进度条表格。其中轮播列表支持各行各列的样式和内容的自定义配置，支持列表内容的超链接配置，同时支持图片格式的列表内容，能够使用轮播动画的方式，将数据信息以列表的形式清晰地展示在可视化应用上。本实验选择轮播列表，既美观又节省空间。

实验步骤：

（1）根据参考图，添加“单张图片”组件，作为排行榜区域背景，背景图链接：https://gzu-edu-quality-max-studio.oss-cn-chengdu.aliyuncs.com/enrollment-data/top-list-bg.png

（2）添加“通用标题”组件，调整好样式

（3）添加“轮播列表”组件，调整好样式（行高、列宽、字体、交替行背景色等）

5.4 性别分布

设计思路：

了解浏览器用户的性别构成，是认识用户画像的第一步。不同性别的用户在使用浏览器的内容和偏好上存在显著差异——男性用户通常对科技、财经、体育等内容关注度更高，而女性用户则更偏娱乐、育儿、时尚等。这种内容偏好差异直接影响广告投放策略和信息流推荐逻辑。

基于上述信息，我们着重分析本浏览器用户的性别分布：

• 男女比例如何？ 当前用户群是男性居多、女性居多，还是接近均衡？

• 内容推荐依据：根据性别比例，可以推测用户可能更偏好哪些内容，指导运营团队调整推荐策略。

• 异常监控：观察性别比例是否出现异常波动（如某月从7:3突变为5:5），这可能是市场或产品策略变化的信号。

图表选择理由：

性别分布用饼图来展示，因为性别只有两三个类别（男、女、未知）。饼图的扇形角度能被大脑瞬间识别为比例关系——看到半圆就知道50%，看到三分之一就知道33%，这种直觉反应是柱状图做不到的。所以我们用饼图，让观众不需要阅读数值就能感知男女比例。

助睿Max饼图家族：

助睿Max支持多种饼图：基础款饼图、基础饼图、标注对比图、目标占比图、多维度饼图、指标占比图、指标对比饼图、单值百分比饼图、轮播饼图。这里只有男、女、未知三个类别，使用基础饼图即可。同时，饼图支持内圈半径、外圈半径、标签位置、引导线等精细调节。

实验步骤：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）添加“基础饼图”组件，调整大小和位置

5.5 年龄段分布

设计思路：

浏览器用户的年龄结构，是洞察用户需求的切入点。通过分析不同年龄段的占比，我们可以推断出不同年龄段的用户对浏览器的核心诉求和消费潜力。

基于上述信息，我们着重分析本浏览器用户的年龄结构：

• 哪个年龄段最多？ 主力用户是学生群体（<18岁），还是青年职场人群（18-35岁），或是年龄更大的用户？

• 功能设计决策：如果用户偏年轻，可以加强个性化、社交分享功能；如果用户偏成熟，则需要强调稳定性、安全性和办公协同能力。

• 风险预警：如果用户年龄结构持续老化，意味着产品对新用户的吸引力可能正在下降，需要警惕品牌老化风险。

图表选择理由：

年龄分布用柱状图来呈现，因为年龄是多个有序区间（如<18、18-25、26-35、>35），柱状图能直观展示分布形态（哪段最高？趋势是上升还是下降？）。饼图处理4个以上类别时会变得难以比较，而柱状图完全没有这个问题。

助睿Max柱状图家族：

助睿Max支持多种柱状图：基础柱图、弧形柱图、水平基础柱图、水平胶囊柱图、垂直胶囊柱图、垂直基本柱图（堆叠柱状图）。这里使用基础柱图即可。

实验步骤：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）助睿Max 支持多种柱状图：基础柱图、弧形柱图、水平基础柱图、水平胶囊柱图、垂直胶囊柱图、垂直基本柱图（堆叠柱状图），这里我们使用基础柱图：

5.6 学历分布

设计思路：

浏览器用户的学历分布可以帮助我们从侧面了解用户群体的“特征画像”。不同教育背景的用户，在获取信息的习惯、对专业内容的接受度以及对新功能的探索意愿上可能存在差异。

基于上述信息，我们着重分析浏览器用户的学历结构：

• 高学历用户占比如何？ 产品是否吸引了更多拥有高等教育背景的用户？

• 产品复杂度设计：如果高学历（本科及以上）用户占比较高，说明用户群体对新功能、专业工具的接受度更高，产品可以考虑增加高级自定义设置或开发者工具。

图表选择理由：

学历分布用条形图（横向柱状图）来展示，因为学历类别名称通常较长（如“初中及以下”“高中/中专”“大专”“本科”“硕士及以上”），条形图让类别名称自然左对齐，阅读流畅度明显更好。

助睿Max条形图：

这里使用水平基础柱图，它是横向条形图，尤其适合类别名称较长的场景。

实验步骤：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）这里我们使用助睿Max 的水平基础柱图：

5.7 职业分布

设计思路：

了解浏览器用户的职业分布，可以帮助我们理解用户的“生活背景”，从而推断其典型的使用场景：

• 判断用户群体：他们可能是学生、IT从业者、企业白领，还是自由职业者？

• 场景化功能设计：学生用户多，可推出学习辅助功能；职场人士多，工作日活跃度高，可强化密码管理、云同步等办公属性功能。

• 挖掘增长机会：如果某一职业群体占比较低，也许是未来定向推广或功能拓展的机会点。

图表选择理由：

职业分布用柱状图来展示。职业类别名称一般不长（如“学生”“IT从业者”“白领”等），柱状图可以清晰地进行横向对比。

实验步骤：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）这里我们使用助睿Max的基础柱图：

5.8 收入分布

设计思路：

浏览器用户的收入数据直接服务于商业化策略。用户的收入水平是衡量其付费能力与消费意愿的核心指标之一，直接关系到产品商业化的天花板。

• 挖掘高潜用户：分析收入分布，可以帮助找到更具价值的用户群体。

• 指导变现策略：如果10k以上用户占比较高，可以考虑订阅制、云服务会员等高端增值服务。反之，如果用户收入集中在中等水平，则免费增值模式（如去广告付费）可能更合适。

图表选择理由：

收入分布用柱状图来展示。收入分段是有序变量（如<3k、3-5k、5-10k、>10k），柱状图能直观展示用户收入水平的集中趋势。

同时，在这个柱状图中展示绝对用户数，与顶部指标卡中的“中高收入用户占比”形成互补：占比给结构结论，绝对值给执行规模。

实验步骤：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）这里我们使用助睿Max 的水平基础柱图：

5.9 居住地类型分布

设计思路：

用户居住地类型（城市/城郊/乡村）反映了用户所处环境的数字化程度和消费习惯差异。城市用户通常网络基础设施更好、线上消费更活跃；城郊和乡村用户可能对某些本地化服务或轻量级应用有独特需求。了解这一分布有助于制定差异化的市场策略和产品功能适配。

图表选择理由：

居住地类型只有三个类别，适合用饼图展示结构占比

助睿Max特色饼图：

为了使大屏可视化效果更丰富，这里使用助睿Max的轮播饼图组件。轮播饼图可以在饼图基础上增加轮播动画，依次高亮每个扇区并显示详细数值，在有限空间内增强了信息传达的动态效果。

实验步骤：

（1）使用“单张图片”组件设置区域背景，并设置好标题

（2）为了使大屏可视化效果更丰富，这里我们使用助睿Max 的轮播饼图：

5.10 筛选器

设计思路：

用户画像分析大屏的核心价值之一，是支持按不同浏览器进行对比分析。通过筛选器，用户可以：

• 查看全部浏览器用户的整体画像（默认视图），了解产品大盘用户特征；

• 选择单个浏览器（如 Chrome、IE、360 等），聚焦该浏览器用户的画像，回答“使用 Chrome 的用户与其他用户有什么不同？”；

• 选择多个浏览器进行对比，直观比较不同浏览器用户的年龄、职业、地域等分布差异，为产品定位和竞争策略提供数据依据。

图表选择理由：

筛选器应满足多选、可清空、支持全选/默认全选的交互需求，同时要贴合大屏整体风格。助睿Max的下拉多选组件是最常用的筛选器类型：占用空间小、选项清晰、支持搜索，适合浏览器数量不多（6个）但需要灵活选择的场景。另外也可以使用选项卡组件，但下拉框更节省空间，适合放在大屏顶部或侧边栏。

助睿Max筛选器组件：

助睿Max 提供了下拉框、下拉多选、单选框、时间选择器、选项卡等多种交互组件，均支持自定义选项、默认值、样式（边框、背景、字体颜色等），并可与多个图表联动，实现筛选后所有图表数据自动刷新。本实验使用下拉多选组件，默认选中“全部浏览器”。

实验步骤：

（1）在大屏顶部右侧合适位置，添加“下拉选择”组件（位于“交互”组件分类中），重命名为“浏览器筛选”，调整组件位置和大小

（2）在组件右侧属性面板中，调整样式如下：

6 预览与总结

最后，点击“保存”并“预览”，检查整体布局是否协调、组件是否对齐、颜色是否一致。助睿Max支持一键全屏预览：

至此，浏览器用户画像分析大屏的静态布局已全部完成。本实验充分利用了助睿Max的丰富组件、图层堆叠管理、丰富的样式配置、以及地图、翻牌器、轮播饼图等特色组件，实现了专业级的数据大屏设计。下一实验我们将进入蓝图器，为这些静态组件绑定真实数据，让大屏“活”起来。

7 收获

1. 掌握用户画像大屏整体信息架构设计逻辑，遵循总览 - 地域 - 细分属性的叙事层级搭建页面。

2. 能够根据数据类型匹配对应图表：占比用饼图、有序分段用柱状图、长类别用横向条形图、地理数据用热力地图、核心数值用指标翻牌器。

3. 熟练操作助睿 Max 图层分组、隐藏功能，实现市场分析、用户画像两套大屏共存于同一工程文件。

8 对平台的整体评价

1. 助睿数智 Uniplore 打通数据清洗、建模、可视化全链路，实验数据可无缝承接上一环节加工结果，贴合企业真实工作流。

2. 助睿 Max 拖拽式零代码操作门槛低，图表、地图、交互组件库完备，支持精细样式自定义，可制作企业级视觉效果大屏。

3. 平台性能强劲，支持千万级数据秒渲染，拓展能力强，兼容数字孪生、3D 地图等高阶可视化场景。