TOP-10任务界面的视觉技术
在任务界面中,三件事很重要:目标清晰,进步感和小胜利的节奏。下面-十个技术,可以提高参与度/完成度,并减少投诉而不会使屏幕超载。
1)进阶楼梯代替"无限"车道
这是什么:分段T1→T2→Final量表,有明显的阈值和奖励点。
为什么:大脑比连续的"进步63%"更容易理解离散的步骤。
如何绘画
3-5个细分,每个签名:"T1 100分","T2 300","Final 600"。
直接显示收到的奖项(FS/缓存/徽章图标)。
点击分裂→弹出式"给出/燃烧时"。
A/B想法:带有图标的vs干标尺的楼梯。等待:+3-5 p.p.到完整T1。
2)可以理解的单位中的"剩余多少"
这是什么:在进展旁边,我们显示出相当的努力:分数→回合→分钟。
引擎盖下的公式(大约)- "剩下120分≈ 8轮,0.5 ≈ 6-8分钟。"
规则
首先是时间,然后是回合和金钱。
计算用户的最后10-20个动作(自适应提示)的中位数。
每2-3秒更新一次,没有"跳跃"。
A/B想法:"还剩下积分"vs"还剩下几分钟。"预期:− 10-15%的早期郊游。
3)带有"每个屏幕一个目标"的步骤卡(Step Cards)
这是什么: 任务的每个步骤都是带有主要目标和按钮的独立卡"如何计算?».
卡片组成
标题:"第3步中的第2步"。
目标:1行("收集300分或150个旋转")。
进度:迷你楼梯/芯片"180/300"。
按钮"?"→列出已启用/已排除的游戏,引擎盖和示例。
Do:主要字体,视觉层次对比。
不要:用小条件和星号超载。
4)OR目标: 三个路径的视觉"叉子"
这是什么:代替文本"或/或"-三个相等的按钮路径(快速与情节竞争)。
规则
这三个路径都可以同时看到。活动突出显示。
每个按钮下方是迷你ETA:"~ 8-10分钟","1次× 20","100个旋转"。
微型文本
"选择一个方便的路径。您可以随时切换-进展将继续。"
A/B想法:禁忌vs图块按钮。等待:+4-7 p.p. participation_net。
5)领导层和任务奖励区
这是什么:将表格/网格划分为区域(Top-3 / 4-10 / 11-50 / 51+),显示每个区域的最低保证奖励。
视觉效果
区域色块;玩家位置附近-"在4-10区之前还剩下2400分。"
"保证:FS × 10"的标语就在区域,没有"搜索规则"。
好处:清除"玻璃天花板",形成现实的目标。
6)带有"呼吸窗口"的Taymbox模块"
这是什么:活动阶段的视觉计时器(15-20分钟)+"暂停无罚"卡。
屏幕的
带有"窗口晚上8点"标题的环形计时器。
结束时:软动画+选择"稍后返回"/"扩展"(如果允许)。
留言: "暂停不会中断脱衣舞。"
效果:融化Sessions/DAU,减少疲劳。
7)微动画"火花"和下载骨架
这些是什么:轻度闪光/五彩纸屑在进步和奖励中;数据位置的骨架+shimer。
盖德斯通过动作
持续时间200-350 ms,ease-out/ease-in-out曲线。
不要与主要内容重叠,而是"突出显示"。
骨架重复卡片的几何形状;shimer 1。2–1.6秒。
A/B想法:动画vs无。等待:− 8-12%的早期郊游,+CTR在"继续"。
8)上下文图拉: "如何计算?""为什么不去?"
这是什么:图标"?"在目标旁边打开一个带有公式,示例和频繁错误的迷你海德。
块模板
"我们认为":公式+1示例。
"Kaps":每分钟/天的费率(数字)。
"没有进步?"3个原因+引用排除的游戏/模式。
另外:大幅降低萨波特的滴答声。
9)颜色,对比度和肖像画(WCAG+深色主题)
基本规则
WCAG AA最低限度的文本对比(4。5:1),主要是3:1。
颜色≠唯一的意义载体:添加图标/模式。
图标:2-3基本形状(恒星是奖励,目标是步骤/任务,闪电是"火花")。
深色主题:背景#0F/12,"火花"在没有有毒RGB的情况下发光。
微型复印机
"奖励将在12小时内燃烧"-总是靠近"获取"按钮。
10)空状态,错误,标签"燃烧"
这是什么:精心的屏幕,没有数据/任务,什么时候出了问题。
空无一人
插图+"今天是自由的。你想尝试"每日菜单"吗?"
"选择→任务"按钮(导致选择)。
错误
"无法更新进度。我们重复"……+微调器≤3 s → ec"尝试更多"/"聊天"。
"通过X燃烧"状态显示在奖励卡和奖励列表中。
附加接口元素
芯片"cap达到":"200/200分/小时是限制。重置时间为00:00"。
Bage"几乎达到了":黄色指示器,≤150分到门槛。
游戏过渡:"改变游戏-进步将继续"(反绿色)。
本地化:具有不间断间隙的数字-1,000欧元,24小时时间格式,本地日名称。
微文本(可以按原样插入)
"剩下120分≈ 8轮0.5欧元(6-8分钟)。"
"你在11-50区。保证: FS × 10。高达4-10-2400分"
"Cap达到: 200分/小时。重置时间为00:00(Europe/Kyiv)"
"选择一种方式: 快速/竞争/情节-可以随时更改。"
UI实验的度量
UI对漏斗的影响:CTR"开始",participation_net,T1/T2完成。
行为:早期退出(≤5分钟),time-to-T1/T2,交换率路径,查看玩具"?"。
质量:投诉/1k,进度更新错误,latency p95。
价值:Δ ARPPU(net),Prize&Bonus/Active,Net Uplift。
A/B框架(简称)
单位:用户;sticky-assignment;分层(平台/geo/payer-flag)。
假设:楼梯vs条纹;"分钟"vs"积分";路径按钮vs禁忌;动画"火花"vs没有。
CUPED:预会议时间为协变量;≥2周窗口与D0-D2/D3-D7阶段。
任务设计师支票清单
- 楼梯T1→T2→Final奖项图标。
- 剩下的多少Block在分钟/回合中。
- 步骤卡,每个屏幕一个目标。
- OR路径-三个带有ETA的可见按钮。
- 奖项和奖项区域"保证"。
- Tymbox计时器+"呼吸窗口"。
- 微动画"火花",骨架/shimer。
- Tula"如何计算?"+原因"为什么不去"。
- 对比/图标/黑暗主题;"通过X燃烧"。
- 空洞的状态和仁慈的错误。
迷你桉例(合成)
之前:没有阈值的进度带,文本"还剩120分",隐藏的帽子,没有温暖的空白状态。
之后:带有奖项的楼梯,"8轮/6-8分钟",OR路径按钮,taymbox模块,tuls"?","cap到达",火花+骨架,奖励区域。
结果4周vs控制: participation_net+6。4 p.p., completion+10。8个百分点,早期出口− 18%,投诉/1k − 31%,Δ ARPPU(net)+1欧元。7 при Prize&Bonus/Active +€0.5.
良好的任务界面是一门视觉学科:台阶而不是"沼泽百分比",具体的线索努力,可见的奖励和柔和的动态。除此之外,可用性,清晰的玩具,时光盒和整洁的动画-任务将开始作为"小胜利的节奏"而不是漫长而无聊的进步条。