VISUAL DESIGN2025MOBILE H5

运势 · 轻玄学运势专题改版

通过视觉升级、体验优化与结构重构,解决传统命理 H5 视觉杂乱、转化路径模糊、用户信任度不足的痛点,打造符合「帝王术数」专业调性、高转化的服务落地页。

  • H5
  • Landing Page
  • Conversion
  • Visual Refresh
产品
紫微命格详批
场景
移动端 H5 · 港台繁体
范围
视觉体系 · 组件 · 页面结构
结果
付费转化 +32%
改版前的紫微命格详批首屏:人物照片、四个圆形标签与表单堆叠
改版后的紫微命格首屏:书法主标题、四大场景图、命盘入口与红色「马上算」按钮
拖动滑块,对比改版前后首屏

项目背景与业务诉求

项目背景

紫微斗数作为中国传统「帝王术数」,是命理测算赛道的核心品类之一,用户群体覆盖职场迷茫者、婚恋困惑者、财富规划者等全年龄段人群。但行业内同类 H5 普遍存在视觉同质化严重、信息层级混乱、转化引导生硬、专业感缺失等问题,导致用户首屏跳出率高、付费意愿弱,无法将流量转化为实际营收。

旧版体验痛点梳理

用户调研、竞品分析与页面诊断后,明确四大核心痛点。

旧版紫微命格详批首屏 01 02 03 04

组件化设计与复用规范

围绕「紫微斗数 · 命盘」主题拆出三类组件,同一套组件复用到首屏、信息填写与报告各页。

组件拆解图:命盘式信息卡片、按钮与模块板块分层叠放
紫微命格详批书法主标题 财运、婚姻、事业、健康四大场景图

书法标题 + 四大场景首屏一眼说清「能算什么」,标题同样用在信息填写页顶部。

复用于首屏信息填写

以用户决策路径重构页面

点选模块,手机滚动到对应位置;切换改版前后,对比两版的页面结构。

改版后紫微命格详批完整长页
  1. 视觉吸引
  2. 价值传递
  3. 信任建立
  4. 转化引导

旧版:模块平铺,没有清晰的决策主线

改版效果与数据价值

以改版前为基准 100,悬停查看说明。

悬停或点选任一指标查看说明

  1. 痛点诊断
  2. 目标拆解
  3. 视觉重构
  4. 体验优化
  5. 数据验证
下一个项目

页面