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.

---

良好的任務界面是一門視覺學科：臺階而不是「沼澤百分比」，具體的線索努力，可見的獎勵和柔和的動態。除此之外，可用性，清晰的玩具，時光盒和整潔的動畫-任務將開始作為「小勝利的節奏」而不是漫長而無聊的進步條。