百度APP跨越屏幕的体验-不止于响应式

在移动互联网高速演进的背景下，设备形态日益多样化——屏幕尺寸、比例、折叠方式、系统能力层出不穷。面对快速迭代的市场环境，在大屏设备新的红海中，百度APP面临新的挑战：

设备形态持续扩张，传统适配模式逐渐失效

随着用户内容消费与生产场景不断丰富，使用设备逐渐从手机延展至大屏与多形态终端。屏幕比例差异扩大，交互方式更加多样，布局结构、信息密度与操作路径都面临新的要求。

在这一趋势下，原有以单端为核心的适配方式难以支撑跨尺寸、跨形态的持续扩展，整体方案缺乏弹性与前瞻性。

多端并行建设，定制成本快速上升

在多终端生态布局过程中，不同形态设备往往采用相对独立的设计与适配策略。当多个终端形态同步推进重构与升级时，设计与开发资源投入呈叠加式增长，协同成本持续提高。

缺乏统一适配策略与复用机制，使重复设计、重复验证与重复沟通成为常态，多端建设逐渐从“能力扩展”演变为“成本放大器”。

缺乏系统化治理机制，体验稳定性受到挑战

当设备形态不断增加，如果没有长期维护机制与标准化检查流程，多端适配往往依赖人工记忆与临时补救。漏适配与规范不一致问题容易反复出现。

问题持续累积，最终影响跨端体验的一致性与产品整体稳定性。

百度 APP 需要在手机、Pad、折叠屏等多端提供一致且高质量的体验，提升多端体验的同时解决分端适配的高成本与体验割裂问题。

我们启动了百度 APP 的多端适配体系化建设。从行业趋势、产品诉求与设计驱动视角切入，以「统一标准 + 响应式架构 + 体系化提效 + 定制化体验」为核心策略，提升大屏适配浏览的体验助力数据增长、实现设计研发降本增效。

一、驱动多端适配立项，完善多端覆盖机制

二、建立多端适配通用标准

三、驱动多端适配提效

四、定制化设计提升体验

一、驱动多端适配立项，完善多端覆盖机制

多端适配不是某个项目的专项优化，而是一项牵动全局的系统工程，目标是让多端适配成为长期能力。如果缺乏统一方向与机制保障，再好的设计方案也难以持续。因此我们优先做的，不是出更多适配稿，而是完成三件事：

第一，统一方向，抓最核心的价值点

与产品与研发达成共识，将“响应式布局”确立为多端建设的底层原则。适配不再依赖单端定制，而是围绕屏宽变化建立弹性能力。

第二，建立流程机制，构建可持续的多端覆盖流程

将多端覆盖纳入需求流程的默认项，让适配成为必经环节，而非临时补救。通过机制约束，保证长期稳定执行。

第三，拉齐设计基线

推动横向业务统一适配标准与布局逻辑，减少重复劳动，同时保证体验一致。当方向、流程与协同关系被明确，多端适配才真正具备持续推进的基础。

二、建立多端适配通用标准

目标是让适配工作从“经验判断”变为“规则驱动”。

在机制之上，我们需要一个清晰的技术与设计标准。首要解决的问题在多设备中，百度APPUI界面布局变体收敛。结合大屏适配原则，针对屏幕多样化系统性研究和梳理，升级了设备判断逻辑，从获取设备类型升级成判断页面容器宽度；

通过三段式划分，所有页面只需围绕屏宽变化进行响应3种UI布局变化，而无需为每种设备单独定制设计。适配从“多套稿件”转变为“同一套布局的不同响应状态”。

三、驱动多端适配提效

1.通过沉淀通用适配模型，按相同规则覆盖同类型页面提效

结合大屏应用连续及体验增值的原则：应用在横竖屏切换、折叠与展开过程中保持正常运行，浏览不间断；屏幕变大后，获得更多内容，更加沉浸，多任务并行的用户体验增值。

在梳理大量业务场景后，我们通过聚类分析，提炼抽取页面适配规则，本质上可以归纳为4种稳定模式，而非无数个独立案例。

包括：

2.将多端能力嵌入设计系统与工具链，形成规模化提效能力。

当断点标准与适配模型建立之后，新的问题随之出现：多端能力一旦全面铺开，如果仍然依赖传统设计与开发流程，协作成本依然会迅速放大。因此需要将多端能力嵌入设计系统与工具链升级，形成规模化提效能力。

1）设计系统升级：用 Token 统一语言与实现

多端适配的长期稳定运行，必须依赖设计系统。我们首先升级了 Token 化体系，从根源解决历史遗留问题：

2）工具升级：插件提效

在设计系统升级之外，我们进一步优化设计交付链路。设计驱动自研插件升级提升设计及交付效率，通过推动2个自研 Figma 插件使大规模适配场景下的交付效率显著提升60%。当规则被嵌入工具，多端适配不再依赖个人经验，而成为可复制、可规模化的能力。

Cosmic D2C设计标注工具

• 自动检测 Token 使用规范
• 自动生成标注
• 减少人工校对与重复说明

AI响应式多端适配工具

基于OpenAI Codex工具，通过Prompt工程化训练，内嵌“手机端+百度APP多端”设计规范；首创Figma插件一键生成折叠屏/PAD端响应式布局界面，降低多端适配成本，已在各业务中并行开展可用性验证。

四、定制化设计提升体验

1. 定制化设计创新

围绕三个目标展开：提升信息承载效率、增强沉浸式体验、支持多任务并行操作，不同于手机端的单线程浏览逻辑，大屏更适合“并行消费”和“连续操作”。

因此在首页框架、图文/视频浏览、搜索场景等主要体验流程中，做重点设计：

2. 聚焦高价值场景，形成体验闭环

通过对Pad端进行重点消费场景的适配升级，带动了核心指标的提升。此次实践也验证了纯设计维度的适配与优化，也具备驱动产品数据增长的空间。

3.折叠形态：利用设备特性，而非简单拉伸

五、展望：未来与持续进化

多端适配体验升级，并不意味着跨端体验的终点。屏幕尺寸变化只是表层问题，真正的挑战在于不同设备之间的任务如何自然迁移、状态如何保持连贯，以及用户在多设备切换时是否能够实现无感衔接。

未来的跨端体验，不仅是结构布局的适配，更应关注任务与场景的连续性。从“页面适配”走向“任务连续”，将成为跨端设计升级的关键方向。