UI领导板和任务卡：最佳实践

1）为什么要这样： UI的目标

领导板：立即解释"谁在哪里"以及为什么要继续比赛；显示最近的目标（+N点到apa）。

任务卡：把长规则变成一个可以理解的"行动单位"10-30分钟。

---

2）领导层信息层次结构

最小列集：

1.具有稳定宽度和较大数字的位置（#）。

2.玩家（化身/框架/标题,简要说明）-点击→配置文件。

3.分数/等级度量（SP/MMR/活动分数）-对齐右侧。

4.奖项/等级区域（稀有图标/奖项范围）。

5.时间/阶段（live/qualifier/finals），结束计时器。

模式是：

• 突出显示您的线条（sticky row+"回到我身边"）。
• "目标阈值"：小标题"− 48 SP到TOP-100"。
• 平局（"T-10"为相同积分）。

---

3）控制和导航

过滤器：联盟/分区，地区，朋友，"只有我的提供者"。

排序：按地点（按地点），点数，入场时间，奖品区。

分裂vs无限滚动：

• desktop-分区+"到自己"，mobile-无限滚动，但"到开始/到自己"。
• 跳到等级：即时跳跃的等级输入字段（对于比例板很重要）。

---

4）实时更新（没有"dörganya"）

Diff更新：我们只更改实际移动的行。

线移动动画：120-200 ms，easing-out；没有跳跃。

反液体：每1-2秒进行一次战斗更新（不常见）。

乐观更新： 在本地添加眼镜和"同步"……

---

5）UI领导层的诚实与安全

规则解释："如何计算眼镜？"按钮?"在标题旁边。

反欺凌：掩盖尼克的一部分（选项），抱怨有毒的名字-1个点击。

可疑帐户标记： 隐藏于他人；玩家-"检查你的积分。"

部门划分：在视觉上不同的联赛徽章，这样强者就不会与首发混合。

---

6）任务卡解剖学（单光泽设计）

标题（≤ 40-50个字符），任务类型的图标。

简短的描述（做什么，在哪里，多少）。

进度栏与数字/百分比+时间估计（≈ 20-25分钟）。

难度（1-3点）和奖励的稀有性（颜色/面部）。

奖项：代币/化妆品（小缩影），没有"金钱"潜台词。

截止日期：软色到期前计时器（奥兰治/红色在最后10%）。

CTA："开始"/"继续"/"接送"-一个主要按钮。

中学："更改任务"（如果允许），"阅读更多"（规则调制解调器）。

---

7）任务卡的状况

锁定： 灰色，提示"在第7层之后打开"；CTA="需要什么？».

可用：颜色按类型；CTA="开始"。

进步：进步栏活动,CTA="继续"。

完成：绿色支票；CTA="拾取"（效果≤ 1秒）。

Expired：苍白；CTA="隐藏"/"在N季重复"。

保持（诚实检查）：黄色标记"1-3分钟结果检查"。

---

8）视觉语言和可用性

稀有颜色：Common（中性），Rare（蓝色），Epic（紫罗兰），Legendary（黄金），Mythic（彩虹口音）。

语义颜色：成功/进展为绿色，警告为琥珀色，截止日期为红色。

对比≥ 4。5：1，字体≥移动上的14-16 px。

一切都很重要-不仅仅是颜色（图标/模式）。

经济的VFX： 0。6–1.2 c，没有控制重迭。

适应：地图表→ （2个平板电脑栏、1个电话栏）；固定标题。

---

9）下载状态、空白和错误

表和卡的骨架（3-5行/标题）。

Empty state：有用的文本+"获取启动任务"。

网络错误：可以理解，带有"重复"；离线-我们显示缓存和标记"最新更新：14：02"。

---

10）性能

列表虚拟化（300多行）。

图标为精灵/洛蒂（不需要SVG动物园）。

Debounce过滤器/搜索（300-500毫秒）。

用于板/任务的客户端缓存和ETag。

---

11） UI任务中的诚实内容和反欺凌行为

简短的"它如何工作"：一个运球的机会，pity-logic，kaps，没有营销星云。

反农场模式：庆祝"多样性"-随着供应商/利率的变化，进展会更快。

Kuldowns到"Change Mission（更改任务）"按钮,并在可以再次使用时提示。

---

12）真正重要的度量

任务卡CTR，开始率，完成率，Median TTC。

Equip Rate/Duration用于通过任务获得的化妆品。

Leaderboard Engagement：点击到"到自己","转到配置文件",可见度时间。

VFX/通知上的 Complaint/Mute Rate。

参与任务/锦标赛的Stickiness（DAU/MAU）和D7/D30 uplift。

Gini by SP：在相似的游戏时间下进步均匀。

---

13） A/B想法

1.进度栏格式：数字+视觉vs仅视觉。

2.时间评估：显示/不显示；对起步的影响。

3.CTA扭曲：一个大对两个相等的按钮。

4.默认排序：按奖品区域排序。

5.截止日期突出显示阈值：T-10% vs T-20%时间。

6.领导层中的"到自己"：按钮vs始终是固定字符串。

---

14）JSON电路示例（内容→ UI）

任务卡

json
{
"id": "m.s4.provider."diversity"，"title"："打开三个提供商"，"summary"："在30分钟内与3个不同的提供商一起玩"，"difficulty"："medium"，"est_time_min"： 25"，"progress"：{"current"：2，"target"：3}，"rewards"：{"tokens"。：10、cosmetic_drop"：{"rarity"："rare"、"p"：0。1}}"，"expires_at"："2025-10-26T18： 00： 00Z"，"state"："in_progress"，"cta"：{"label"：继续"，"deeplink"："app：//open/lobby？tab=providers"}
}

领导者行

json
{
"rank": 124,  "user": {"id": "u_59211", "name": "SeaFox", "avatar_frame": "legendary.wave"},  "score": 18420,  "league": "Gold I",  "prize_band": "Top 100",  "delta_to_next": 47,  "is_me": false,  "stage": "qualifier",  "ends_at": "2025-10-24T21:00:00Z"
}

---

15）微鸦片（简明扼要）

任务开始了-"我们走！剩下≈ 20分钟"。

分级进步是"另外1个获得奖项的提供者"。

截止日期是"10％的时间，每次运行都会有时间"。

诚实检查-"我们检查结果（最多3分钟）-保留奖项。"

---

16）发行前的支票清单

• 表格可读性为320 px；有"自己"和粘性头条。
• 任务卡"一目了然"：目标，时间，奖励，CTA。
• 没有闪光灯的真实时间更新；diff补丁和batch频率。
• "如何工作"屏幕：眼镜/帽子/稀有度公式。
• 噪声控制：VFX/min限制，夜间"安静模式"。
• 可用性：对比度,不仅仅是颜色,键盘导航。
• Anti-Abuse：kuldowns "Change Mission"，可变性的突出显示。
• 制定了度量和A/B计划；点击和同步日志。

---

强大的领导层UI和任务卡是即时可读性，柔和的动态，诚实的透明度和可控制的噪音。给玩家最接近的目标，可理解的进步和整洁的VFX，保持更新稳定，规则清晰。然后，棋盘成为比赛的引擎，任务卡成为方便的"动作单元"，系统地增强了参与和保留。