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

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

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

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

在多终端生态布局过程中，不同形态设备往往采用相对独立的设计与适配策略。当多个终端形态同步推进重构与升级时，设计与开发资源投入呈叠加式增长，协同成本持续提高。缺乏统一适配策略与复用机制，使重复设计、重复验证与重复沟通成为常态，多端建设逐渐从“能力扩展”演变为“成本放大器”。

当设备形态不断增加，如果没有长期维护机制与标准化检查流程，多端适配往往依赖人工记忆与临时补救。漏适配与规范不一致问题容易反复出现。问题持续累积，最终影响跨端体验的一致性与产品整体稳定性。

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

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

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

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

三、驱动多端适配提效

四、定制化设计提升体验

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

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

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

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

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

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

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

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

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

包括：

结合四种通用的适配规则，与研发共识建立统一适配规则、删格系统，将页面中常用的信息流、双列卡、宫格、横滑卡、列表、金刚位等，建立8种通用模块能力，实现“一次开发，多端自动适配”。减少重新设计成本。

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

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

过去不同业务存在编码不一致问题，难以复用。通过统一 Token 规则，将不同业务与不同场景拉齐为同一套设计语言。设计系统从“堆积资产”转向“结构化能力”，降低设计与研发的理解与维护成本。

在 Figma 中建立可调用的 Token 组件库，同时与研发共建命名规范与代码映射规则。设计变量与代码变量实现映射，减少人工标注与反复联调，让适配真正具备工程级效率，设计交付链路，由12步 缩减至 5步。

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

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

响应式规则解决了“多端覆盖”的问题，但大屏与折叠形态真正的价值，不只是适配成功，而是实现体验升级。因此，在统一规则基础上，我们针对高频核心场景进行定制化设计，让大屏能力真正转化为体验增益。

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

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

强化视频消费体验，定制影视频道及转码页设计，升级沉浸式设计与转码页形成闭环，保证体验统一。针对影视频道通过动态，运营模块推荐强化内容吸引力及频道氛围，视频剧集分栏布局强化筛选效率，打造沉浸播放提升浏览播放时长。大屏不再只是“放大版手机”，而成为更适合内容消费的形态。

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

折叠设备处于展开与合拢之间时，天然具备“分区交互”的能力。因此我们基于屏宽区间匹配适配规则，并针对悬停等特殊状态，探索上下分区交互逻辑。

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

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