助睿实验作业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 全面支持上述图表类型各类图表组件均提供颜色、标签、图例、提示框、动画等丰富样式自定义功能能够达到企业级界面设计标准。结合分析需求梳理用户画像大屏详细设计方案如下模块子模块指标项组件关联数据表备注数据概览用户概况覆盖用户数指标卡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展示用户数量排名前五的省份筛选器-浏览器选择下拉多选-可单选、多选或全选浏览器默认选中全部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/