トレントギア

UIリーダーボードとミッションカード：ベストプラクティス

1）すべての理由： UIの目標

リーダーボード：即座に「誰がどこにいるのか」と次にプレーする理由を説明します。最寄りのターゲット（apの前に+Nポイント）を表示します。

ミッションカード：10〜30分間、長いルールを理解できる「行動の単位」に変えます。

2）リーダーシップ・ボード情報階層

最小列のセット：

1.安定した幅と多数の（#）を配置します。

2.プレイヤー（アバター/フレーム/タイトル、短いニックネーム）-クリック可能→プロファイル。

3.ポイント/レーティングメトリック（SP/MMR/イベントポイント）-右に揃えます。

4.賞品/ランクゾーン（レアリティアイコン/アワードレンジ）。

5.時間/ステージ（ライブ/予選/決勝）、エンドタイマー。

パターン：

行をハイライトします（付箋+「私に戻ってきてください」）。
「ターゲットへのしきい値」：スモールダイ「− 48 SP to TOP-100.」
タイ接着（同一点のための「T-10」）。

3）制御および運行

フィルター：リーグ/ディビジョン、地域、友人、「ちょうど私のプロバイダー」。

ロケーション（デフォルト）、ポイント、エントリー時間、賞品ゾーンで並べ替えます。

ペジネーションと無限スクロール：

デスクトップ-ペジネーション+「自分自身へ」、モバイル-無限のスクロールが、「開始/自分自身へ」と。
ジャンプ・ツー・ランク：即時遷移のためのランク入力フィールド（スケール・ボードで重要）。

4）ライブアップデート（ツイッチなし）

差分更新：実際に移動した行のみを変更します。

ライン動きのアニメーション：120-200 ms、 easing-out；ジャンプはしない。

Anti-flicker： 1-2秒ごとにバッチが更新されます（これ以上頻繁には更新されません）。

楽観的なアップデート：ポイントをローカルに追加し「、同期」をマークします……。

5） UIリーダーボードでの完全性と安全性

ルールの説明：ボタン「メガネはどのようにカウントされますか？」タイトルの横にあります。

反いじめ：ニックネームの一部をマスク（オプション）、有毒な名前についての苦情-1クリック。

疑わしいアカウントのマーカー： 他の人から隠されています。プレーヤー-「あなたのポイントがチェックされます。」

ディビジョン分離：強いものがスターターと混合しないように、視覚的に異なるリーグバッジ。

6）ミッションカードの解剖図（一見デザイン）

タイトル（≤ 40-50文字）、ミッションタイプアイコン。

短い説明（何をすべきか、どこで、いくら）。

数/パーセンテージ+時間の推定値を持つ進捗バー（≈ 20-25分）。

難易度（1-3ポイント）と報酬の希少性（色/顔）。

報酬：トークン/化粧品（小さなミニチュア）、「通貨」サブテキストなし。

用語：ソフトカラー（最後の10％でオレンジ/赤）で期限切れまでのタイマー。

CTA：「Start「/」Continue「/」Pick up」-1つのメインボタン。

セカンダリ：「ミッションを変更する」（許可されている場合）、「もっと」（モーダルール）。

7）ミッションカードの状態

ロック： 灰色、プロンプトで「レベル7の後に開きます「；CTA="何が必要ですか？».

利用できる：タイプごとの色；CTA=「Start」。

進行中：progress bar active、 CTA=「Continue」。

完了：グリーンチェック；CTA=「Pick up」（効果≤ 1秒）。

期限切れ： 淡い；CTA=「隠す「/」シーズンNで繰り返す「

保留時（正直チェック）：イエローダイ「結果チェック1-3分」。

8）視覚言語およびアクセシビリティ

希少色：Common（ニュートラル）、Rare（ブルー）、Epic（バイオレット）、Legendary（ゴールド）、Mythic（レインボーアクセント）。

意味の色：成功/進捗-緑、警告-琥珀、締め切り-赤。

コントラスト≥ 4。5：1、フォント≥モバイルで14-16 px。

重要なのは、色（アイコン/パターン）だけではありません。

Thrifty VFX： 0。6–1.2 c、制御オーバーラップなし。

アナバー：テーブル→カード（2列タブレット、1列の電話）；ヘッダーを修正しました。

9）ロード状態、ボイドおよびエラー

テーブルとカードのスケルトン（3-5行/タイル）。

空の状態：便利なテキスト+「打ち上げミッションを取得」。

ネットワークエラー：「Repeat」で理解可能。offline-キャッシュを表示して「last update： 14：02」とマークします。

10）パフォーマンス

仮想化（300+行）を一覧表示します。

スプライト/ロッティとしてのアイコン（不必要にSVG動物園ではありません）。

フィルター/検索のデバウンス（300-500 ms）。

ボード/ミッション用のクライアントキャッシュとETag。

11） UIミッションにおける正直なコンテンツと不正使用防止

短い「どのように動作するか」：ドロップチャンス、哀れなロジック、マウスガード、マーケティング星雲なし。

アンチファームパターン：note「多様性」-プロバイダ/ベットを変更すると進捗が速くなります。

「Change Mission」ボタンのクールダウンと、もう一度できるヒント。

12）本当に重要な指標

CTRミッションカード、開始率、完了率、中央値TTC。

ミッション由来化粧品の装備率/持続時間。

リーダーボードエンゲージメント：「自分に」、「プロファイルに移動」、可視時間をクリックします。

VFX/通知の苦情/ミュート率。

スティッキネス（DAU/MAU）とミッション/トーナメントに関わる人々のためのD7/D30のアップリフト。

SPによるジニ：同じようなゲームの時に進歩の均等性。

13） A/Bの考え

1.プログレスバー形式：数値+ビジュアルvsビジュアルのみ。

2.時間評価：表示/表示しない；開始に影響を与えます。

3.CTAレイアウト：1つの大きなボタンと2つの等しいボタン。

4.デフォルトのソート：賞品エリア別の場所と場所別。

5.締め切りのバックライトのしきい値：T-10％とT-20％の時間。

6.リーダーボードの「To Yourself」： vsボタンは常に固定文字列です。

14） JSONスキームの例（コンテンツ→UI）

ミッションカード

json
{
"id"： "m。 s4。提供者。diversity"、"title"："Open three providers"、"summary"："30分で3つのプロバイダで遊ぶ"、"難易度"："medium"、"est_time_min"： 25"、progress"： {"current"： 2、 target"：3}"、 rewards"：{"tokens'： 10、 cosmetic_drop"： {"rarity"、 "p" rare"、"p"：0。1}}、 "expires_at"：" 2025-10-26T18： 00： 00Z,""state"："in_progress, "cta"： {"label"： "Continue"、 "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） Microcopy（短く、明確な）

ミッションが始まりました-「行こう！≈ 20分後」。

進歩を奨励-「賞の前に1つのより多くのプロバイダー」。

締め切り-「時間の10％、あなたは一度に時間があります。」

正直チェック-「結果を確認します（最大3分）-報酬は保存されます。」

16）プレリリースのチェックリスト

320 pxで読めるテーブル；「自分に」と粘着性のあるヘッダーがあります。
ミッションカードは「一目で」明確です：目標、時間、報酬、CTA。
明滅のない実時間更新；差分パッチとバッチ周波数。
How It Works画面：point/cap/rarity数式。
ノイズコントロール：VFX制限/分、夜の静かなモード。
アクセシビリティ：コントラスト、色だけでなく、キーボードのナビゲーション。
乱用防止：クールダウン「ミッションを変更」、可変性を強調します。
メトリクスおよびA/Bプランが確立されました。ログをクリックして同期します。

リーダーボードとミッションカードの強力なUIは、瞬時の可読性、ソフトダイナミクス、正直な透明性、制御されたノイズです。プレーヤーに最も近い目標、理解できる進歩、きちんとしたVFXを与え、更新を安定した状態に保ち、ルールを明確にします。その後、ボードは競争のエンジンになり、ミッションカードは体系的にエンゲージメントと保持を高める便利な「行動の単位」になります。