モバイルデバイスでのインターフェイスとUXの実装方法
1)原則: モバイルUXがデスクトップとどのように異なるか
片手のコントロールだ。メインのCTA(ベット、リピート、クリア)は「、親指ゾーン」(画面の3分の1以下)にあります。
最初に垂直。垂直テーブル/ストリーム-ベースケース;水平は「ムービーモード」として維持されます。
クリック数が少ないほど意味があります。任意のベットは≤ 2つのアクションをとらなければなりません:値を選択する→フィールド/セルでタップします。
スピードは美しさよりも重要です。UIの60 fps、最小限のレイアウトシフト、「光」アニメーション。
透明性。ラウンドタイマー、接続ステータス、遅延-はっきりと控えめ。
2)スクリーンフレーム: 場所
アッパーゾーン(情報):- テーブル名、リミット、プレイヤーカウンター、ネットワーク/ディレイインジケータ、ルール/設定アイコン。
- ビデオストリーム(WebRTC/LL-HLS)または3Dテーブル、ジェスチャーでカメラ/角度を切り替えます。
- オーバーレイ:タイマー、最近のラウンドの結果、賭けのポップアップ確認。
- 賭けパネル:宗派、クイックボタン「リピート」、「ダブル」、「クリア」。
- 隠された財布のカーテン(残高、迅速な預金-レジに行く)。
- テーブル/ゲームスイッチ(横スクロール)。
- 少なくとも48dp (Android )/44pt (iOS)インタラクティブ、ボタン間のインデント≥ 8dp。
- 安全なエリア(ノッチ、ジェスチャーナビゲーション)を考慮しています。
3)速い賭け: マイクロインタラクション
2つのステップ:顔の値を選択する→テーブルのフィールドをタップします。繰り返しタップ-同じ顔の値でベットを増加させます。
ロングプレス:コンテキストメニュー(削除、二重、配布)。
分母パネルで下にスワイプ:拡張値/賭け履歴を表示します。
ハプティカ:ベットを受け入れるときの軽い振動、より顕著-拒否するとき/遅いベット。
ステータスの可視性:「Accept betts「/」Closed「-color/icon+stopwatch。
4)ビデオおよびオーバーレイ: 干渉しないように、しかし助けるため
オンデマンドキーフレーム。品質を切り替えるとき-「石鹸」を避けるためにインスタントIDR。
半透明なカード。タイマーと結果-70-85%の透明度、タイマーによる自動非表示。
ジェスチャー:- ビデオをダブルタップ-カメラ/角度を切り替えます。
- ピンチ-ビデオスケール(CTAを重ねることなく)。
- 「エッジ」通知。賞金とプロモーションのプッシュライン-上部には、賭けパネルが重複しないでください。
5)ネットワークの状態および遅れ
状態の丸薬:"オンライン1。3 c「/」悪いネットワーク4。8 c"。アイコンの色はしきい値によって変わります。
柔らかい低下:最初にFPS (60→48→30)を減らして下さい、そして決断(1080p→720p→540p)は+200-300 msによって緩衝を高めます。
自動フォールバック:不安定なネットワークを持つ観客モードのためのWebRTC→LL-HLS;「遅い」ベットをブロックします。
オフライン画面:ベットコンテキスト、理解可能な理由(「接続なし」)と「繰り返し」ボタンを保存します。
6)責任がある演劇および制御
手元の限界。残高の横にある「制限」ボタン:入金/時間/損失、セッションタイマー。
一時停止分だ。ゲームの30-45分後に推奨される一時停止は「、赤旗」なしのソフトバナーです。
レイトビッドブロック。e2e-delay> thresholds-入札が受け入れられない場合、UIはその理由を説明します。
歴史と輸出。最近のラウンド/ベットフィード、フィルター、クイックチェックエクスポート。
7)テキスト、色、アニメーション
タイポグラフィ:タイトル17-20pt、ボディ14-16pt;WCAG AA+のコントラスト。
配色:「signal」色はステータス(accepted/closed/error)に対して予約されます。
アニメーション:マイクロ相互作用のための120-180ミリ秒;240-320 ms-パネル/カーテン用。フレームバイフレーム-2-3以下のパラレルエフェクト。
スピナーの代わりにスケルトン。クイックプログレッシブローディングプロンプト。
8)ナビゲーションと情報アーキテクチャ
下のナビゲーション(タブバー):ロビー、ライブ、プロモーション、プロフィール。
Inside Live:フィルタテーブル(言語、制限、ゲームタイプ、お気に入りのディーラー)のリスト。
ディープリンク:プッシュ/ボット→テーブル/トーナメントへの直接入り口;UTMを分析用に保存します。
バックスタック:Android「バック」ジェスチャーとiOSスワイプ-ラウンドを突然閉じないでください、最初-警告。
9)ローカライズと特別な言語
RTL(アラビア語/ヘブライ語)。ミラーベットグリッドとパネル。
番号フォーマット/通貨。数千のセパレーター、短い署名(スペース不足のため1,000→1k)。
言語テーブル。フラグ/言語、ディーラー言語フィルタ、ローカルユニット(₺、 R$、₴)を表示します。
行の長さ。記述子は、楕円形、チューリップ-ロングプレスで自動カットします。
10)デバイスのパフォーマンスとリソース
電池:充満が低いときfps 60→30を、警告します高い消費について制限して下さい。
メモリ:未使用のABRプロファイルをアンロードし、2-3以上の高解像度テクスチャを保持しないでください。
WebView/browser:重い影とCSSフィルタをブロックします。滑らかさのためにGPUの合成を使用して下さい。
画像最適化:WebP/AVIF、スプライトおよび遅延負荷。
11)支払いパターンと財布パターン
ミニウォレット:残高とクイックデポジット(Web上の3DS/KYCのみでレジへのリンク)。
セキュリティトークン:短いTTL、現在の賭けを失うことなく再ログイン。
資金源の可視性:ベット時に現金/ボーナス。
12)可用性(A11y)および互換性
VoiceOver/TalkBack:要素の署名、タブ注文フォーカス、ステータス通知のビデオ。
ハイコントラスト/大きなフォント:グリッドを壊すことなくレイアウトを調整します。
ジェスチャー≠唯一の方法です。機能をボタンで複製します。
テストマトリックス:iOS(現在の+n-1)、 Android (SDKレベル、人気のあるスキン)、弱いデバイス、不安定なネットワーク。
13)マイクロコピーライティング: 何とどのように話すか
クリアとショート。「受け入れられる賭け」、「閉鎖された賭け」、「不十分な資金」、「悪いネットワーク」。
コンテキスト。入札がブロックされると「、フロー遅延がしきい値を超えます」というプロンプトが表示されます。
確認してください。「本当ですか?」を削除します?"「戻る/元に戻す」を通してロールバックすることができます。
14)分析とRUM: 改善するための測定
RUM-SDK: e2e遅延、起動、バッファ、品質スイッチ、デコーダエラー。
WebRTC統計:RTT、損失、ジッタ、NACK/PLI、 TURNリレー。
製品イベント:レート/ダブル/クリア、免除/レイトレート、テーブル、ディーラーホールド。
エントランスファネル:電報→ロビー→テーブル→ファーストベット→リピート/ダブル。
15)モバイルUIアンチバグ
小さなヒット。解決策:48dp/44pt最小、追加のインデント。
質を変えるとき黒いスクリーン。解決策:keyframe-on-demandとpreload以下のプロファイル。
ランダムな「戻る」スワイプ。解決策:コンテンツ内のラウンド+ジェスチャーを終了する前の確認は、システムジェスチャーと競合しません。
キーボードスティッキング。解決策:量のための数値キーパッド、入力後に自動非表示、スマートスクロール。
16)生産の進水のチェックリスト
UIと管理
- 親指領域のCTA;ベットする2つのステップ
- ハプティックでわかりやすいステータス(受け入れ/クローズ/エラー)
- アーティファクトのない垂直/水平モード
ビデオとネットワーク
- SVC/simulacast、 LL-HLSフォールバック付きWebRTC
- 遅延/ネットワークインジケータ、ソフト劣化
- 切り替えるとき黒いスクリーン無し
責任あるプレー
- 1-2 tapaの距離で制限/一時停止/履歴
- e2eスレッショルドを超えた場合の「遅い」ベットのブロック
ローカライズとA11y
- RTL、大きなフォント、コントラスト
- スクリーンリーダー用の完全なalt/labels
パフォーマンス
- 60 fps UI、キースクリーンのための<100 ms TTI
- 省電力モード、メモリ制御
Observability(可視性)
- 内蔵のRUMおよびWebRTC統計、SLOアラート
- 製品イベントとレートファネル
17)ボトムライン
モバイルUXライブゲームは、スピード→クラリティ→コントロールのトライアドです。縦のテーブル、片手のコントロール、クイックベット、触感、理解可能なステータスは、手のひらに「リビングルーム」の感覚を作り出します。技術的な規律-柔らかい劣化、LL-HLSのフォールバック、ネットワークインジケータ、RUM分析およびA11y-は、iOSとAndroidで、地下鉄や自宅で、フラッグシップや予算のデバイスで同様にうまく機能する信頼性の高い製品に美しいインターフェースを回します。