车载APP UI设计与开发

一、屏幕分区模式切换设计 模式分类与适配规则 1. 屏保模式 - 触发条件：无操作60秒后自动激活 - 显示：全屏播放屏保视频（支持16:9/21:9/全屏三种比例） 2. 原始模式 - 左侧导航区：1/2屏幕（16:9） - 右侧娱乐屏：1/2屏幕（16:9） - 适配：无需缩放，保持原始比例 3. 驾驶主驾模式 - 左侧导航区：1/2屏幕（16:9） - 右侧区域：黑屏（16:9） 4. 驾驶副驾模式 - 左侧导航区：1/3屏幕（11:9） - 右侧区域：黑屏（21:9） - 适配：导航区内容收缩显示 5. 驾驶分屏模式 - 左侧导航区：1/3屏幕（11:9） - 右侧娱乐屏：2/3屏幕（21:9） - 适配：导航区内容收缩，娱乐屏拉伸填充 6. 驻车游戏模式 - 显示：全屏娱乐屏（21:9） - 适配：内容拉伸填充整个屏幕 交互效果要求 - 切换动画：支持平滑缩放/平移过渡（例如分屏模式切换时，导航区尺寸渐变调整） - 素材适配：视频/图片需预先准备16:9（1/2屏）、21:9（2/3屏）、全屏三种比例版本 二、菜单栏交互设计 1. 位置与唤出方式 - 固定于屏幕底部，默认隐藏 - 交互：从底部向上滑动呼出，向下滑动收起 2. 功能布局 - 模式切换快捷键：独立图标按钮（如🚗/🎮/🖥️） - 其他功能入口：音量控制、设置等（建议采用简洁图标）