车载端视频类应用UI走查要求

用户头像
杭州/UI设计师/154天前/458浏览
车载端视频类应用UI走查要求
一、走查前置总则
1.1 核心设计原则
1.安全第一原则
:严格区分行车/驻车双模式,车速>0km/h时强制限制全屏视频播放、自动降低界面视觉干扰,杜绝驾驶员分心;
2.车载大屏适配
:适配车载横屏比例,触控控件尺寸满足车规热区要求,拒绝手机端直接照搬UI布局;
3.极简交互原则
:减少密集文字、密集卡片,减少多级弹窗,核心操作一键直达,适配车内颠簸操作场景;
4.系统一致性原则
:字体、色彩、弹窗样式、返回按钮、加载动画与整车车载HMI系统规范保持统一;
1.2 全页面通用一票否决红线
l 行车状态下无视频播放锁止弹窗,可正常全屏播放视频
l 行车状态下界面无醒目文字提示,未告知驾驶员行车禁止观看视频
l 触控按钮尺寸过小,不符合车载最小触控热区规范,极易误触
l 弹窗、浮层遮挡整车状态栏(时间、车速、空调、警示图标)核心行车信息
l 夜间模式界面亮度过高、画面频闪,强光/夜间行车视觉刺眼
1.3 通用基础UI规范
车载端视频类应用UI走查要求(图ZMTU2NDE1NDQ=) - 观点 - 站酷设计师火腿蒸蛋原创素材 - 站酷ZCOOL
通用基础规范
收藏
 
二、分页面走查细则
2.1 首页
2.1.1 布局与内容排布
l 顶部导航栏:固定展示返回、搜索、个人中心入口,导航高度符合整车顶栏规范,不遮挡系统状态栏
l banner轮播:轮播速度放缓(3.5s/帧),禁止快速自动轮播造成视觉眩晕;支持手动滑动关闭自动轮播;行车状态下自动暂停banner轮播动画
l 内容卡片:横版卡片适配车载大屏,卡片间距统一;单屏展示卡片数量≤6个,避免信息过载;卡片封面禁止过度花哨动效
l 分类标签:顶部分类tab尺寸加大,支持粗手指触控滑动,禁止窄小tab难以点击
2.1.2 行车/驻车权限差异
l 驻车模式:首页全部内容正常展示,可正常点击进入播放页
l 行车模式:首页
封面预览视频自动静音+暂停
,禁止首页自动播放预览短视频;点击视频卡片直接弹出行车播放限制弹窗,无法进入播放页
2.1.3 常见问题判定
l 严重问题:首页自动播放视频预览、banner轮播过快眩晕、卡片排版错乱对齐不一致
l 一般问题:分类tab文字截断、卡片圆角/阴影和整车组件不统一、推荐内容文案过长
2.2 搜索页
2.2.1 搜索输入框规范
l 搜索输入框尺寸放大,适配车载触控;行车状态下
禁止唤起键盘手写输入
,仅保留语音搜索入口(车载核心要求)
l 默认展示热门搜索、历史搜索,词条字体加大,支持一键点击词条搜索,减少手动输入
l 搜索联想词:下拉联想列表行高加大,方便点击,禁止密集小字列表
2.2.2 搜索结果页规范
l 结果列表采用大图卡片模式,而非手机小列表;区分电视、电影、综艺内容标签,标签醒目易识别
l 无结果空态:搭配车载专属空态插画+简洁提示文案,文案禁止网络晦涩用语
l 行车限制:搜索结果可正常浏览,但点击视频依旧触发播放锁止弹窗
2.2.3 禁忌项
l 禁止行车状态下弹出全键盘手写输入,增加驾驶员操作分心
l 禁止搜索页弹窗广告、开屏弹窗,干扰车载使用
2.3 播放页(核心重点页面,最高安全要求)
2.3.1 行车&驻车双模式强制权限规则
驻车模式(车速=0):
完整播放功能开放,支持全屏、选集、倍速、清晰度、弹幕开关、播放暂停所有操作
行车模式(车速>0):
画面立即黑屏/覆盖安全提示遮罩,仅保留音频播放权限,视频画面强制不可见;页面醒目位置常驻「行车中请勿观看视频」提示文案
2.3.2 播放控件
l 底部播放控制栏:所有控件(播放/暂停、上一集、下一集、进度条、音量、全屏)全部加大尺寸,进度条触控区域加宽,方便行车盲操作调节
l 进度条拖拽:支持大范围拖拽,适配车内颠簸手指点击偏移问题
l 弹幕功能:行车模式弹幕自动强制关闭;默认状态弹幕建议关闭,避免画面文字过多分散注意力
l 选集弹窗:选集列表行高放大,支持左右滑动切换剧集,禁止密集小选集按钮
2.3.3 弹窗与提示规范
l 进入播放页首先检测车速,行车状态立即弹出一级提示弹窗,无绕过入口
l 广告弹窗:禁止前置开屏广告、视频片头长广告;广告弹窗必须有超大尺寸跳过按钮
l 切后台/切回前台:自动重新检测车速,实时切换播放画面权限
2.3.4 动效要求
l 播放进度切换、控件显隐动效平缓,禁止闪烁、快速弹窗动效
l 视频切换无闪屏、无亮度突变,适配车载屏幕护眼要求
2.4 个人中心
2.4.1 页面布局
l 顶部个人信息区:头像、账号、会员信息展示简洁,无过度动效装饰
l 功能菜单:历史记录、我的收藏、下载、设置、观看记录等功能采用大按钮宫格布局,适配车载触控,摒弃手机细长列表布局
l 历史观看:视频历史卡片加大,支持一键继续播放,减少操作步骤
2.4.2 设置页面
l 播放设置:日夜模式跟随整车开关、行车音频后台播放开关、弹幕总开关、默认清晰度,选项按钮加大
l 隐私/登录页面:行车状态下
禁止账号密码手动输入
,仅支持扫码登录;避免长文本输入分心
2.4.3 行车适配
l 个人中心页面行车状态可正常浏览,无权限限制;但从个人中心点击播放视频,依旧触发播放锁止规则
l 版本更新弹窗:弱提醒展示,无强制全屏弹窗,不影响整车操作
三、问题等级划分
1.致命问题(阻断上线)
:行车可播放视频、无安全遮罩、遮挡整车行车状态栏、控件尺寸严重不达标
2.严重问题(本轮必须修复)
:页面交互逻辑错误、日夜模式失效、搜索键盘未限制、播放控件失灵、动画眩晕
3.一般问题(版本内修复)
:排版对齐问题、文案错误、图标不统一、轻微色彩差异
4.优化建议(可选迭代)
:界面美观度优化、交互细节体验提升,不影响安全与基础功能
0
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】30个图标
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】礼物/活动icon
高级感金属拟物 UI设计组件库
新拟态风格 UI设计组件库
手表表盘UI系列
【新年UI图标】体育icon
新能源APP应用UIKit
【新年UI图标】钱包icon
3D卡通UI界面图标可爱插画免扣素
UI界面 组件
智能家居中心 简约 UI设计组件库
【新年UI图标】会员icon
盲盒APP UI设计
【新年UI图标】旅行icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
3D渐变流体抽象矢量UI背景图
高级表盘系列UI源文件
Security Camera UI kit
钱包ui模板
我的钱包-UI界面设计-app
UI通用设计素材1
【新年UI图标】秒杀icon
户外旅行飞机情侣假日出行
你可能喜欢
相关收藏夹
大家都在看
登录注册