如何在移动设备上实现接口和UX
1)原理: 移动UX与台式机有何不同
单手控制。主要CTA(投注,重播,清除)-在"拇指区域"(屏幕的下三分之一)中。
垂直第一。垂直桌/流-基本脚本;水平保持为"电影模式"。
更少的点击更有意义。任何投注都必须采取≤2动作:在字段/单元格上选择→ tap值。
速度比美丽更重要。UI中的60 fps,最小布局shift,"轻松"动画。
透明度。回合计时器,连接状态,延迟-显而易见且不引人注目。
2)屏幕框架: 位置在哪里
上部区域(信息):- 桌子名称,限制,玩家计数器,网络/延迟指示器,规则/设置图标。
- 视频流(WebRTC/LL-HLS)或3D桌面,通过手势切换相机/视图。
- 覆盖:计时器,最新回合的结果,弹出式投注确认。
- 投注面板:面额、快速重复、加倍、清除按钮。
- 隐藏的钱包窗帘(资产负债表,快速存款-过渡到收银机)。
- 桌子/游戏开关(水平滚动)。
- 最少48dp (Android)/44pt (iOS)在交互上,在≥8dp按钮之间缩排。
- 我们考虑安全区域(notch、手势导航)。
3)快速投注: 微型互惠
两个步骤:在桌子上的田野上选择→面额。重复-提高相同面额的出价。
长期按下(long press):上下文菜单(删除、加倍、分发)。
向下滑动面额面板:显示扩展值/投注历史记录。
Haptika:投注接收时的轻松振动,更明显的是失败/后期投注。
状态可见性:"接受投注"/"关闭"-颜色/图标+秒表。
4)视频和覆盖物: 不是为了干扰,而是为了帮助
按需关键帧。当质量切换时,为避免"肥皂",即时IDR。
半透明卡片。计时器和结果-70-85%的透明度,按计时器自动喷涂。
手势:- 双视频拔出-相机/视角切换。
- Pinch是视频的缩放(没有CTA重叠)。
- "边缘"通知。获胜和促销的推线在顶部,不会与投注面板重叠。
5)网络状态和延迟
状态滴答声:"Online 1.3 c"/"Bad network 4.8 c"。图标的颜色随阈值变化。
软降解:首先降低FPS(60→48→30),然后降低(1080p→720p→540p)分辨率,将缓冲区增加+200-300毫秒。
自动后退:WebRTC → LL-HLS用于在不稳定网络下的收视模式;锁定"后期"投注。
离线屏幕:保存投注上下文、明确的原因("无连接")和重复按钮。
6)负责任的游戏和控制
手头的限制。资产负债表旁边的"限制"按钮:存款/时间/损失,会话计时器。
暂停分钟。建议在比赛30至45分钟后暂停是一个柔和的横幅,没有"红旗"。
后期投注块。如果e2e延迟>阈值不接受,UI解释原因。
历史和出口。最新回合/投注磁带,过滤器,快速出口支票。
7)文字、颜色、动画
打字机:标题17-20pt,主体14-16pt;WCAG AA+对比。
颜色方桉:"信号"颜色保留给状态(接受/关闭/错误)。
动画:120-180毫秒用于微共鸣;240-320毫秒-用于面板/窗帘。逐帧不超过2-3个并行效果。
骨架代替旋转器。快速渐进式下载提示。
8)导航和信息架构
底部导航(tab bar):大厅,直播,促销活动,简介。
内部Live:带过滤器的桌子清单(语言,限制,游戏类型,最喜欢的经销商)。
深层链接:push/bot →直接进入桌子/锦标赛;保留UTM进行分析。
Back-stack: Android的后退手势和iOS滑动-不会突然关闭回合,首先是一个警告。
9)本地化和特殊语言
RTL(阿拉伯语/希伯来语)。投注网格和面板的对称反射。
数字格式/货币。数千分隔符,短签名(缺席时为1,000 → 1k)。
语言桌。标志/语言显示、经销商语言过滤器、本地单位(₺、R$、₴)。
行长度。自动修剪描述符与省略号,tultips-通过长新闻。
10)设备性能和资源
电池:在低电荷下限制fps 60→30,警告高流量。
内存:卸载未使用的ABR配置文件,不保留超过2-3个高分辨率纹理。
WebView/Browser:阻挡沉重的阴影和CSS过滤器;使用GPU复合来实现平滑。
图像优化:WebP/AVIF,精灵和懒惰负载。
11)付款和钱包模式
迷你钱包:资产负债表和快速存款(链接到仅在Web上3DS/KYC的售票处)。
安全令牌:短TTL,笔记,不损失当前费率。
资金来源的可见性:投注时的CASH/BONUS。
12)可用性(A11y)和互操作性
VoiceOver/TalkBack:元素签名、按排序焦点、状态声明视频。
高对比度/大字体:适应布局而不会损坏网格。
手势≠唯一的办法。我们用按钮复制功能。
测试矩阵:iOS(相关+n-1),Android(SDK级别,流行的外壳),弱设备,不稳定的网络。
13)微摄影: 什么以及如何说话
清晰而简短。"费率被接受","费率被关闭","资金不足","坏网络"。
上下文。锁定投注时-"流延迟超过阈值"提示。
确认。我们清除"你确定吗?"您可以通过返回/取消回滚的地方。
14)分析和RUM: 测量以改进
RUM-SDK: e2e延迟、启动、缓冲、质量切换、解码器错误。
WebRTC-stats: RTT, loss, jitter, NACK/PLI, доля TURN-relay.
杂货店活动:投注/加倍/清理,拒绝/延迟投注,在桌子和经销商上保持。
入场面:电报→大厅→桌子→第一次投注→重播/加倍。
15)反错误Mobile UI
微小的热门歌曲。决定:48 dp/44pt最低,额外退缩。
质量变化时的黑色屏幕。解决方桉:按需键入和预装下一个配置文件。
随机向后滑动。解决方桉:退出回合前确认+内容内的手势不会与系统冲突。
键盘粘附。解决方桉:数值键入,输入后自动扫描,智能滚动。
16)生产启动支票清单
UI和管理
- 拇指区域的CTA;2步到赌注
- Haptica和可理解的状态(接受/关闭/错误)
- 无工件的垂直/水平模式
视频和网络
- WebRTC与SVC/模拟, LL-HLS后退
- 延迟/网络指示器,软退化
- 切换时没有"黑色"屏幕
负责任的游戏
- 1-2 tap距离的限制/暂停/历史
- 超过e2e门槛的"后期"投注块
本地化和A11y
- RTL,大字体,对比度
- 屏幕阅读器的完整alt/labels
生产力
- 60 fps UI, <100 ms TTI用于关键屏幕
- 节能模式、内存控制
可观察性
- 内置RUM和WebRTC-stats,SLO上的差分
- 杂货店活动和投注漏斗
17)结果
移动UX直播游戏是速度→清晰→控制的三合会。直立的桌子,单手控制,快速投注,触觉和可理解的状态为手掌创造了"活厅"的感觉。技术学科-软降解,对LL-HLS的后退,网络指示器,RUM分析和A11y-将美丽的界面转变为可靠的产品,在旗舰和预算设备,地铁和家庭,iOS和Android上同样有效。