R4.04.4capability-based layout设计

一次开发多端部署要求布局按能力而非屏幕描述

别名: 一次开发多端 · 能力选择器 · 折叠屏 · 多端部署

概念解释

鸿蒙、以及面向微信/支付宝/多家小程序的跨端框架,都把「写一份代码、部署到手机、折叠屏、平板、车机、电视、手表」当成默认发运方式。这里的布局选择不能按屏幕商品名来写——「手机布局」「平板布局」「车机页」会在折叠屏半开、车机横条、平板外接键盘时全部对不上。应当按能力来选布局:当前可用宽度、是否有指针、是否有物理键盘、是否是一瞥式表面、是否必须语音优先、是否能同时显示两个窗格。

它处理的是多端发运时布局轴怎么命名,不是运行中把一个任务流转到另一台设备。流转迁移的是会话;这里选择的是同一份代码在不同能力组合下长成哪一套界面。

机制

设备名是零售分类,能力才是布局真正依赖的输入。折叠屏展开后的宽度可以超过许多平板,车机是一条很宽但很矮的带,手表几乎没有宽度却常亮。若选择器写的是 device == phone,这些表面都会拿到错误的那一套。宽度、高宽比、指针精度、键盘存在、以及「能否并肩放两个窗格」,是正交的轴:同一宽度下,有鼠标和只有手指,主操作的密度和悬停可用性完全不同。

一次开发能成立,是因为界面被写成对这些轴的响应,而不是写成 N 套以设备命名的页面。能力在运行时还会变:折叠、外接键盘、分屏、投到车机,都是同一进程里的能力翻转。按设备名缓存的「这是平板所以用双栏」会在能力已经变了之后还继续用旧栏数。电视还多一条「远距离、方向键或遥控器」的能力,不能把触摸密度的列表直接放大投放。

边界

只有一个表面、从不投屏也不折叠的应用,按单一宽度写死的代价很小,能力轴的收益不明显。游戏、相机取景这类和传感器绑定的全屏,能力选择往往不是栏数而是「这一路传感器在不在」,不能用宽度断点去模拟。小程序宿主本身可能不暴露完整能力集(没有车机方向盘键、没有桌面多窗口),选择器再细也会被宿主裁掉。品牌营销页如果故意做成固定画布,多端部署会退化成加滚动条,这时应承认它不是按能力响应的界面,而不是假装有断点。

怎么落地

  • 用宽度、指针类型、键盘、窗格数、一瞥/远距离等能力做选择器,禁止在布局代码和设计稿文件名里写「手机版」「iPad 版」「车机版」作为条件。
  • 把折叠、分屏、外接键盘当成运行时能力变化来处理:栏数和主从结构跟着当前能力改,而不是在启动时锁死。
  • 为手表和车机单独声明最低能力(一瞥、方向键、语音),低于阈值就提供简化任务,而不是把手机页缩小。
  • 验证:同一构建分别在窄手机、展开折叠屏、横条车机模拟器和手表上打开同一任务,记录各端用的是哪套结构。任何两端宽度相近却因文件名不同而走了不同布局、或折叠中途栏数不改,都说明选择器仍在读设备名。再插上键盘,确认指针相关的悬停和密度立刻跟上。

延伸

  • 同组R4.04.1 分布式与多设备流转的交互模型 · R4.04.2 小程序与超级应用内的规范约束 · R4.04.3 与国际平台惯例的差异点 · R4.04.5 服务卡片把功能前置到桌面层 · R4.04.6 系统统一承接账号与支付改变了流程边界
  • 相邻R3.11 响应式实现与断点策略 · K1.02 屏幕尺寸与密度差异
  • 站内检索capability-based layout · multi-end deployment · foldable · breakpoint

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R4.04.4