成长,
有迹可循。

迅雷会员成长值规则页
体验升级

让规则易理解,让升级可预期。
围绕成长计算、获取途径与权益差异,
重新组织一次清晰的阅读体验。

本次提供的完整SVG规则页面:从会员成长概览到查看全部等级权益
Xunlei
Membership
Growth

明确规则页任务,
确定改版范围。

02

本次改版对象是迅雷 App
「会员成长值规则页面」。

题目诉求

提升页面美观性与信息可读性;清晰传递等级权益差异,增强用户完成会员成长的动力。

设计边界

尽量不增加新功能、新规则、新福利。沿用官方成长规则、权益及领取条件,优化信息组织与页面内导航。

会员中心承担身份展示与开通入口;规则页解释成长计算、等级门槛和权益差异。

当前页面 / 三层入口关系
题目中的我的一级页面,会员中心入口位于上方
01我的一级页面
用户提供的现状会员中心二级页面,包含会员卡片、等级定位与开通会员入口
02会员中心身份与服务
用户提供的现状会员成长值规则页,本次改版对象
03成长规则页本次改版

现状诊断:
阅读、成长反馈与权益比较

03
原页成长规则首屏:展示等级门槛、公式与开通类型表,部分横向内容超出移动端视口01 / 02
成长与获取规则个人缺口需换算,部分内容横向截断。
用户提供的原版SVIP等级权益截图:当前视口仅能看到S1及相邻列局部,需横向寻找其他等级03
等级权益表列超出视口,同类权益需要跨列查找。
01

信息展示未适配移动端

原页未按移动端重排,公式与表格存在横向截断;用户仍需对照开通类型与数值,理解各项计算关系。

计算关系的理解成本
02

等级门槛缺少个人成长反馈

原页提供等级门槛,却缺少个人缺口与时间解释;知道缺口后,还需找到对应的开通规则或活动途径。

升级判断与下一步选择成本
03

权益差异需要跨列查找

等级列超出当前视口,长文案混在表格中;用户需要跨列寻找同类权益,再自行判断差异。

升级价值的比较成本

借鉴熟悉的表达,
保留迅雷的会员气质。

04
用户提供的美团会员成长值参考
01 / 数值与位置

成长值、进度、门槛相邻

借鉴美团的关联方式,将首屏聚焦在当前等级至下一等级的区间。

用户提供的现状会员中心卡片与弧形等级定位,展示铜金会员标识及同品牌视觉
02 / 同品牌延续

沿用会员视觉与等级定位

沿用现状会员中心的徽记、铜金配色、面性图标与等级定位方式,保持两页之间的视觉连续。

用户体验五要素,
从目标推导到界面。

05
Five Planes抽象 → 具体
用户体验五要素:战略、范围、结构、框架、表现 从底部01 Strategy战略层,依次到02 Scope范围层、03 Structure结构层、04 Skeleton框架层和顶部05 Surface表现层。五个等面积切面表示从抽象目标到具体界面的依赖关系,编号对应右侧设计决策。 05表现层Surface 04框架层Skeleton 03结构层Structure 02范围层Scope 01战略层Strategy
01 Strategy05 Surface
05
视觉表达

延续会员视觉,统一组件语义

Aa面性图标状态标签
04
信息与操作

进度就近解释,权益同行比较

S3S4同页定位 · 按需弹窗
03
阅读顺序

按用户问题组织信息

成长概览 → 计算规则 → 获取方式 → 等级权益

02
内容边界

保留官方规则,连接已有路径

保留计算项、等级门槛、权益与限制;承接现有活动和会员开通。

01
题目目标与用户目标

看懂规则,判断升级价值并找到参与途径

围绕视觉升级、信息可读性和权益差异表达,增强会员成长动力。

沿着用户的问题,
组织页面的阅读顺序。

06
01

成长概览

累计值、近期变化、等级区间与时间参考

02

成长值计算规则

四项公式说明增加与下降

03

成长值获取与变化

按开通类型查找每日值与奖励,补充活动与非会员下降说明

04

SVIP等级权益

默认比较相邻等级,支持切换目标

主行动连接适用的获取途径

超会有效 · 有适用活动官方活动中心 ↗
超会有效 · 暂无适用活动同页开通 / 续费规则 ↓
未开通超级会员现有会员开通流程 ↗
成长体系与等级选择通过弹窗按需展开。
备注与更多细则保持次级层级。

改版前后:
规则阅读与升级判断

07
原版 / Before
原版会员成长规则页
新版 / After
新版会员成长规则页:底部保留查看全部等级权益的渐变下滑引导
01

首屏聚焦相邻等级

首屏围绕个人成长值与相邻等级组织信息,全部等级按需查询。查看进度组件 ↓

02

四项公式完整展示

增加项与下降项同时呈现,规则名称和计算关系保留。查看计算规则 ↓

03

同类权益同行比较

固定当前等级,对比目标等级;同类权益在同一行阅读。查看权益表格 ↓

升级与降级,距离和时间同时可见。

08
01 / 年费超级会员积累与升级
年费超级会员原稿组件:2600成长值,昨日增加25,S3到S4门槛,缺口1000,预计40天升级

累计值与昨日变化分开;门槛、缺口和时间相邻。
“获取更多成长值”承接适用的获取途径。

02 / 非会员保留与下降
非会员原稿组件:2590成长值,昨日下降10,按每日下降10点预计80天降至S2

保留累计值并显示下降趋势;按 S3 下限 1,800 点预估降级。
非会员示例的主要操作连接现有开通流程。

完整呈现
成长值计算规则

09
官方计算关系

成长值 = 开通/续费成长值 + 每日成长值 + 活动成长值 − 非会员下降成长值

四项面性图标完整呈现开通续费、每日、活动及非会员下降成长值
图形辅助识别

规则名称保留明确文字,统一面性图标降低视觉噪声。

下降项直接可见

VIP过期后,成长值在非会员期每日下降10点;仅未开通超级会员不满足这一条件。

框架升级:
信息分组、表格对齐与操作就近。

10
原版 / Before以规则展示为主
会员成长值规则
全部等级门槛
S1S2S3S4S5S6S7S8S9S10
开通超级会员立即开通
成长值计算规则
开通 / 续费成长值
SVIP 等级权益

框架示意 · 根据原版规则页归纳

新版 / After四个主模块 · 获取与变化分组
01成长概览全部等级 ↗
当前成长值近期变化
升级缺口 · 时间参考获取更多成长值
02完整计算公式
开通 / 续费+每日+活动-下降
03a开通 / 续费规则
03b活动与下降
+ 活动奖励- 非会员下降
04SVIP 等级权益切换对比等级 ↗

框架示意 · 全部等级通过次级入口按需展开

获取更多成长值:
三种状态的操作路径

11
01

超会有效 · 暂无适用活动

获取更多成长值
同页定位开通 / 续费成长值

滚动至目标模块,并短暂提示已到达。

查找对应开通类型的每日值与奖励,随后继续阅读原页面。

02

超会有效 · 有适用活动

获取更多成长值
既有页面承接官方活动中心

查找可参与的成长值活动。

参与资格、奖励与有效时间,以当期官方活动规则为准。

03

未开通超级会员

开通超级会员
沿用现有业务流程会员开通功能

选择现有会员产品,进入既有开通流程。

未开通超级会员不等同于非会员;下降规则依据实际VIP身份判断。

保持当前阅读上下文

同页定位到获取规则。

在已确认原型中点击“获取更多成长值”,页面滚动到开通 / 续费成长值模块,并给予短暂到达提示。

获取更多成长值开通 / 续费成长值

已实现的本地原型。打开后点击首屏按钮体验定位;目标模块随后正常滚动。

用户提供的新稿中的开通与续费规则模块
目标模块 / 开通与续费成长值

升级以后,
多了什么一眼可见。

13

当前 S3 作为固定参照

权益S3 / 当前S4 / 下一级变化

云盘空间

10 TB
12 TB

增加 2TB

云盘下载

2 TB/月
6 TB/月

增加 4TB/月

转存文件数

7 万个
10 万个

增加 3万个

云盘回收站

50 天
60 天

延长 10天

云盘空间 表示存储容量。

云盘下载 表示月度高速下载免费流量。

七项权益,
共用一组比较结构。

14

SVIP等级权益

权益S3 当前S4 下一级

备注:功能权益以有效会员身份的最高额度为准。礼包内容、领取条件及兑换信息以实际页面为准。

Same Row / Same Benefit

同类信息在同一行。

云盘特权与等级福利合为一张表,减少重复表头与跨模块寻找。


比较对象始终清楚。

浅金色目标列贯穿全部权益。长文案按语义换行,原有内容与条件保留。

尼尔森:一致性与标准、美观与简洁

默认看下一等级,
也能探索更远的目标。

15

切换对比等级

当前参照 S3

选择后直接更新目标列

当前成长位置下一级最近目标
切换后 / Comparison Update

S3 与 S4

云盘空间10TB12TB
云盘下载2TB/月6TB/月

当前列保持不变,目标列同步更新。
身份标签解释成长位置,选中状态说明比较对象。

查看完整七项权益 ↑

引导完成使命后,
把空间还给内容。

16
下滑前:带成长数值的规则首页与底部引导
01 / 下滑前

完整首页与底部弱引导。

下滑后:等级权益与备注完整显示
02 / 下滑后

引导退出,继续阅读权益与细则。

成长规则首页:完整成长数值、计算与获取规则,底部提示查看全部等级权益继续下滑后的七项SVIP等级权益及备注细则
试着在此区域向下滚动
01 / 首次阅读

用弱提示说明下方内容

渐变与下滑箭头共同提示权益比较区域,不与主要操作争夺注意。

02 / 开始浏览

滚动或点击后退出引导

渐变消失、不占布局。回到顶部也不重复出现,避免持续遮挡。

03 / 按需查阅

备注与更多细则保持次级

主要规则直接可见,礼包条件与补充说明在需要时展开。

相同的信息,
使用相同的视觉语义。

17
01 / Typography
成长体系18px · 弹窗标题
等级权益与成长值区间12px · 表格正文
当前10px · 标签

393px 移动端基准 / 786px SVG画板
2倍绘制,相同语义保持字号与字重一致。

02 / Color
深棕成长概览#563D29
香槟目标与操作#FFE2AD
浅色规则阅读#F7F6F8
03 / Components
开通 / 续费
每日成长
活动成长
非会员下降
当前下一级描边 / 填充

面性图标辅助识别;标签区分状态,浅金强调目标与主要操作。

用户能否看懂规则,
并完成下一步操作?

18
01计算规则是否说清增加与下降?
给用户的任务
“请找出影响成长值的因素,并说明全部VIP身份过期后会怎样变化。”
怎样判断看懂了
能找到四项构成,知道非会员每日下降10点;没有把“未开通超级会员”直接理解成“非会员”。
02升级缺口与时间是否容易判断?
给用户的任务
“你的年费超级会员有2,600点,近期不再开通或参加活动。还差多少、多久能到S4?请指出依据。”
怎样判断看懂了
S4门槛3,600点,缺口1,000点;按每日25点预计40天,并知道会员状态需要保持不变。
03每日积累与续费奖励是否被区分?
给用户的任务
“你准备连续包月,请查清首次开通与后续续费分别有没有额外成长值。”
怎样判断看懂了
首次无额外奖励,续费奖励30点,另有每日20点;没有把30点当作每日值。
04入口是否带到正确的规则位置?
给用户的任务
“你当前是有效超级会员,暂无可参与活动。除每日积累外,请找到其他成长值获取规则。”
怎样判断操作顺畅
独立找到入口并到达开通/续费规则;知道定位已完成,没有重复点击或返回顶部寻找。
05用户是否理解升级带来的权益变化?
给用户的任务
“你目前为S3,升至S4后,存储空间与每月下载额度会怎样变化?”
怎样判断看懂了
空间10→12TB、下载2→6TB/月;能区分存储容量与月度下载流量。

每项任务,记下这四件事

是否独立完成答案是否正确停在哪一处用了多少时间

按具体的误读、寻找和操作问题修改文案、层级或入口,再请新用户完成这些任务。

规则清楚,
成长才有方向。

01

完整表达计算关系,让增加与下降同时可见。

02

就近解释升级条件与权益变化,支持价值判断。

03

根据身份连接已有获取途径,保持交互连续。

回到项目封面 ↑
最新确认的完整成长规则SVG设计
统一的七项SVIP权益表
完整成长体系弹窗