2024 · multi-screen · meizu flyme auto

多屏界面层级与 任务承接规则设计

让不同屏幕承接合适的信息、操作与任务边界。

role内容框架组主导
collab系统组与内容框架组共 8 人双线协作
status适配规则已落地执行
项目立意
01 / COVERAGE
不同尺寸与长连屏

越来越多的业务进入全屏或半屏状态。

02 / CORE ISSUE
能放什么、谁先显示

屏幕形态决定任务边界,规则必须在界面之前。

03 / TARGET
从"同一套"转向"分工"

让不同屏幕各自承接最合适的内容、操作和界面关系。

MY CONTRIBUTION

我做了什么?

在 8 人双线协作中,我主导内容框架组的媒体与模数化业务规则制定,同时承担全组产出的体系化整合,以及对外跨部门的宣讲与复用推进。

CONTRIBUTION / 01
深度业务分析
与任务架构拆解

在分工前对全量 30+ 应用进行结构化拆解,基于各应用属性精准指派负责人,确保适配规则既能覆盖通用场景,又能兼容空调、相机、DVR、支付中心、Flymelink 等特殊业务需求。

CONTRIBUTION / 02
应用侧全场景
适配标准统筹

完成了占比最重的 "媒体与模数化业务" 规则制定(在线音乐、全民 K 歌、图库、浏览器、OTA、主题美化、应用列表、场景助手、应用商店、智能家居等),同时对其他成员负责的布局类、公共控件类进行逻辑审计,并对全组产出进行体系化整合。

CONTRIBUTION / 03
跨部门协作
与内容共创

开发和视觉团队保持沟通,了解两方适配基线与差异点,消除认知壁垒,提高适配规则的准确性与合理性,让规则落地时不被工程侧推翻、也不被视觉侧架空。

CONTRIBUTION / 04
项目结果汇报
与宣讲

与系统负责人共同主持了面向研发端和产品端的全量宣讲,复用于红旗、奔驰等 6+ 个合作项目,大幅降低了二次适配研发成本

ENGINEERING & LAYOUT ARCHITECTURE

先定义约束,再定义界面

查阅各种资料,基于常见车机尺寸分布归类屏幕类型——不同品牌不同车型接入时,如果不是等比尺寸,开发就要做单独处理,成本极高。所以第一步不是画页面,而是先把"屏幕能承载什么任务"说清楚。

W H W/H ≥ 2.67 宽横屏 适合多任务并行与区域分工 1.78 ≤ W/H ≤ 2.67 横屏 主任务优先的信息组织 1.0 ≤ W/H ≤ 1.78 方横屏 最常见的车机主屏区间 信息收敛与主次层级控制 W/H < 1.0 竖屏 单任务聚焦
我没有从页面开始,而是先从 设备比例 建立适配边界。屏幕形态不是视觉差异,而是 任务承载能力 的差异。
FROM BUSINESS BREAKDOWN TO RULE SEDIMENTATION

从业务拆解,
规则沉淀

纵览车机业务的典型页面,由点及面将适配范围归纳到系统框架 / 公共控件 / 应用模块三层。我主导了公共控件与应用模块的规则制定,并在分工前率先完成了对 30+ 应用的结构化拆解。

01

系统框架

Team · 2 人负责
Dock 栏与状态栏 小窗 · 控制中心 桌面插件 · 桌面
02

公共控件

Team · 1 人负责
侧边 & 顶部导航栏 标题栏 & 工具栏 & 搜索栏 弹窗
03

应用模块

我主导 · 带 3 人
左右 & 上下布局 固定 & 不固定比例宫格卡片 可横滑卡片 左右撑满的列表 多行小列表

分工前先完成 30+ 应用的全量结构化拆解——基于业务属性定义分组边界,精准指派负责人,确保通用场景有覆盖、特殊业务有专人。

30+
应用 · 结构化拆解与分配

基于各应用的业务特殊性界面模式分为三组,确保适配规则既能覆盖通用场景,又能兼容差异化的特殊需求。

@QF · 特定业务
强布局依赖
具有独立交互体系,页面形态差异大
蓝牙电话 多屏管控 相机 DVR 支付中心 Flymelink Parking
@XY · 特定业务
高度专属 · 需深入垂类研究
业务形态单一但业务逻辑高度特殊
空调 座椅
@LZ · 通用模式
宫格 · 列表 · 播放器类
界面模式共通,规则可跨业务复用
在线音乐 全民 K 歌 图库 用户手册 Flymelink 浏览器 OTA 主题美化 应用列表 场景助手 应用商店 智能家居
8+

8 条原子适配规则——查阅资料整理的基础框架

与屏幕比例分类一样,这 8 条规则来自对业界自适应设计资料的整理,是整个项目的方法论基础,在实际业务压测中持续被引用和验证。

R 01

压缩

排列不变,尺寸跟随区域变窄或变矮。

R 02

延展

控件不变,增加更多单元,可能去除滑动。

R 03

缩放

相对位置和大小不变,整体等比缩放。

R 04

拆行

延展方向不变,减少排列列数或行数。

R 05

拉伸

排列不变,尺寸跟随区域变宽或变高。

R 06

隐藏

减少显示部分单元,可能增加滑动操作。

R 07

重组

依据区域特征调整布局、排列与尺寸。

R 08

重定位

改变容器排列方式,同步调整单元尺寸。

METHOD IN PRACTICE · MUSIC AS EXAMPLE

以单一业务为切口,
方法可以复用

在线音乐 / K 歌为样本,我主导了从拆解到成文的完整流程——目标不是把所有页面都画一遍,而是用一个业务把方法跑通,让其余业务可以快速套用。

PROCESS · 以音乐/K歌为例的单业务规则归类
以音乐/K歌为例:收集典型页面 → 尝试适配总结规则 → 收集类似表现模块 → 归纳模块规则成文

以音乐为例,沿 4 步路径系统整理了歌曲列表、宫格模块、Banner、播放器等核心页面的适配规律;同样的方法在 K 歌、布局类、宫格卡片类业务中完整复用

OUTPUT · 归纳后以规范文档形式输出的结果
最终交付的规范文档:覆盖资讯流 / 布局类 / 宫格卡片 / 播放器等多个模块
200+ 页面收敛为可直接执行的模块化规则
供设计与开发双侧查阅。
规则收敛与聚焦:规范化文档输出结果展示
ERGONOMIC ZONING · LONG-CONNECTED SCREEN

长连屏不是更大的屏,
双人任务空间

适配规则需考虑到用户"手臂半径"阈值。当屏幕距离大于 1m,司机物理上几乎无法触及,视线偏移角度过大,就需要分区

黄金交互区 (手臂伸展即触达) 视线偏移安全区 (< 2s) 中立协作区 共同决策 副驾专属领地 > 1m 50CM 约 70CM DRIVER
← 主驾区 副驾区 →
黄金交互区
≤ 50CM · 即触达

手臂自然伸展可达,承载主驾高频操作与任务入口。

视线偏移安全区
≈ 70CM · < 2s

视线偏移低于 2 秒可接受的阅读与确认范围。

中立协作区
中段 · 共同决策

主副驾共视共用的协作面板,不属于任一方独占。

副驾专属领地
> 1m · 主驾禁触

主驾物理不可达,副驾独立操作,系统需强制分区。

IMMERSIVE FULLSCREEN · 2 CHARACTERS

长连屏沉浸场景 10

部分应用可消除主副驾间"虚拟分区线",利用连屏超宽比例营造强氛围感。原先系统仅情景模式有全屏形态,极易退出,我负责定义新全屏框架,把所有沉浸场景归成两类性格:系统级强氛围应用级强功能

A · 应用级扩展
扩展全屏 "强功能,高协作"

默认分区运行,业务协同或沉浸需求成立时由页面内显式入口扩展。音乐、K 歌、视频、电影 —— 用户明确触发。

B · 系统级原生
原生全屏 "强氛围,低交互"

不提供半屏态,通常用于系统级特殊模式或 P 挡限定。情景模式、智驾 SR、宠物模式、露营/休憩空间。

取色播放器A取色播放器
星陨音乐播放器A星陨音乐播放器
AI 音乐播放器AAI 音乐播放器
K 歌沉浸AK 歌沉浸
看电影A看电影
A取色播放器
A星陨音乐播放器
AAI 音乐播放器
AK 歌沉浸
A看电影
智驾 SRB智驾 SR
休憩空间B休憩空间
露营空间B露营空间
宠物模式B宠物模式
主题A主题
B智驾 SR
B休憩空间
B露营空间
B宠物模式
A主题
32:10 · HOVER TO PAUSE 10 个典型场景 · 覆盖 A / B 两类全屏性格
FULLSCREEN RULE FRAMEWORK

屏幕形态规则定义

定义各边界情况,和开发保持紧密沟通,明确业务与公共分工。最终输出可复用的 全屏接入、共存、退出 三位一体规则体系。

3
扩展入口形态

嵌入业务,不悬浮:纯 Icon · 纯文字 · Icon + 文字,根据页面空间与操作频次选择。

2 类全屏的"性格"

系统级强制 vs 应用级扩展

系统级 · 类型一
打开即全屏,无半屏态
"强氛围,低交互"

仅在 P 挡时才能打开的特殊应用或页面,不建议在行车过程中打开。

小憩 · 宠物 · 露营 · 洗车模式 · OTA 霸屏 · 展车视频 · 惊喜系统
应用级 · 类型二
点击按钮从半屏扩展至全屏
"强功能,高协作"

默认半屏分区运行,有主副驾协作沉浸视图需求时,业务在页内加扩展按钮。

音乐 · K 歌 · 视频 · 爱奇艺 · 地图
⚠ 关键约束

同一应用不可双尺寸共存——框架不建议全屏应用 A 上点击跳转到应用内的半屏二级页。必须二选一:要么重新评估全屏的功能完整度、做层级下钻的删减,要么业务自行把页面改成弹窗或整页全屏

应用分级
无限制应用
Q 音 / USB / 蓝牙音乐
主题全屏预览壁纸
全屏行泊停 SR / 地图全屏
仅 P 档应用
全屏小憩 / 宠物 / 露营 / 洗车模式
全屏隐身模式 (关灯&屏)
OTA 霸屏更新
展车模式宣传 App
惊喜系统视频播放
娱乐限制应用
K 歌全屏播放器
爱奇艺等视频
行车时主驾运行此应用受限;副驾半屏、后排屏运行不受限。
6+
扩展动画场景

梳理及走查全部扩展动画:进入、退出、堆叠、回退路径等。

显性回退

全屏上临时打开应用,
通过 Smartbar 返回

侧滑可退,但不能成为唯一主路径。通过显性入口帮助用户快速回到之前的全屏。

↺ 回到全屏
路由原则

哪里打开,← 到哪里

退出方式不论——侧滑、标题栏返回、按钮退出——都直接回到扩展前的半屏页面;分身应用绑屏主题美化仅主驾K 歌单 APK 多 activity 记忆展开侧。

Y
同应用
抢占
单 APK
多 activity
应用
分身
性能边界

完全被覆盖时
音画解耦

长连屏全屏 + 两个半屏覆盖时,视频全屏、K 歌全屏、小憩背景滚动动画全部暂停;音乐无需界面依赖,保持正常播放

全屏 A
半屏 B
半屏 C
弹窗框架

非安全哪边点哪边出,
安全类仅主驾

非安全弹窗:主副驾都有触发按钮时,哪边点击哪边弹;安全驾驶弹窗:只在主驾侧弹出。屏幕两侧边缘内滑或点蒙层空白可自动关闭。

上下文感知
· 动态重写
冲突解决

全屏 + 车设半屏共存:
先退全屏,释放车模资源

当上层全屏存在时再打开车辆设置半屏,问题已不是"盖不盖得住"——车设与 3D 桌面共用同一套车模资源,会导致车设无车模可用。因此我制定了策略:一旦触发此类半屏,全屏先退出回半屏释放底层车模空间,再展开车设。

全屏 A
+
车设半屏
全屏退出回半屏
车设正常展开

车模资源释放 → 车设界面正常渲染

FRAMEWORK IN PRACTICE · 3 CASES

规则定义之后,
好不好用看落地

音乐K 歌主题美化 三个典型全屏应用为样本,把上方 bento 里的框架级规则 转化为具体业务交互——每一条都能追溯到"哪条规则在落地"。

音乐全屏播放器界面操作示意 A · 应用级扩展
CASE 01 · MUSIC PLAYER

音乐全屏播放器

只在封面模式开独立入口,保留歌词页沉浸感

  • 封面模式独立入口:全屏扩展按钮只放在封面模式下,歌词页保留沉浸感,不拆散歌词的视觉连续性。
  • 全屏 = 二模式平铺:在半屏三模式(封面 / 歌词 / 列表)的基础上两两拼接——列表 + 封面、封面 + 歌词,变成两屏并排的二模式平铺。
  • 10 秒自动沉浸:无操作 10 秒后进入更沉浸的模式——只保留歌词与 MV 背景,其他控件淡出。K 歌同理。
  • 语音模态打通:语音指令可直接打开 / 进入音乐全屏,无需手动找到扩展入口。
K 歌全屏操作示意 A · 娱乐限制
CASE 02 · KARAOKE

K 歌全屏播放器

主副驾分侧独立操作,互不干扰

  • 10 秒自动沉浸:无操作 10 秒后进入歌词 + MV 沉浸模式,与音乐保持体验一致性。
  • 点歌台两套方案:方案 A——在播放器内点"选歌",直接在播放器框内展开首页的选歌页;方案 B——点"选歌"打开一个独立的选歌集合页,集合各种选歌方式。最终选型交由业务决策。
  • 车速硬阈值:车速 ≥ 15 km/h 时主驾无法打开,副驾无法扩展到主驾,已打开状态直接退出。
  • 返回对应侧:退出全屏回到展开时所在的半屏侧,主副驾独立记忆,不跨侧弹跳。
主题美化全屏壁纸详情 B · 主驾专属
CASE 03 · WALLPAPER & THEME

主题美化详情页

从两个方案的取舍,到一个决策

  • 方案一探索:半屏详情页——在半屏状态下预览壁纸。但壁纸本身是全屏比例的,放进半屏后整个画面变得细长;为此我加入了座舱背景、把壁纸嵌套在车模框架里展示。
  • 关键约束出现:后来得知壁纸是全车多屏统一应用的——多屏同时显示时壁纸会缩小、细节看不清;且每适配一辆车型,视觉团队都需要重新出图,人力成本较高。
  • 方案二:全屏详情页——壁纸比例与全屏一致,视觉效果最完整;多屏使用时不会出现拼缝压缩问题;也避免了车模素材的维护负担。
  • 最终决策:放弃半屏 + 座舱背景方案,采用全屏详情页,主驾侧专属,退出后回到主驾半屏。
PROJECT CONCLUSION

多屏的核心问题不在适配,
在任务的接入、共存与退出

四层规则,从物理比例一直管到安全仲裁。屏幕越多,规则越要先于界面。

01
承载层

从"按尺寸拉伸页面"
到"按屏幕能力分配任务"

屏幕形态不再只是大小差异,而是决定什么任务适合进入、信息该收敛到什么程度。

02
接入层

从单点全屏特例,
到系统级全屏接入规则

全屏被重新定义为有门槛、有回退、有共存关系的系统能力

03
系统层

从界面适配,
到安全、资源与性能
一起仲裁

系统必须明确决定 谁优先、谁保留、谁退出