HarmonyOS 多端设计规范落地：手机、平板、穿戴与电脑的一致体验

多端一致不是把手机页面复制到平板、手表和电脑上。真正的一致，是用户在不同设备上能完成同一个核心任务，同时界面密度、输入方式、反馈节奏和信息层级都符合设备特点。
本文不讲抽象设计口号，而是把多端设计规范拆成可落地的工程方案：任务模型统一、设备画像分层、布局令牌沉淀、组件变体收敛、交互反馈一致、验收清单可复用。

读完后你可以得到一套迁移思路：

1. 先定义跨设备共用的任务，不急着改 UI。
2. 用设备画像决定信息密度和操作入口。
3. 用设计令牌和组件变体减少重复页面。
4. 用验收表检查手机、平板、穿戴和电脑是否真的一致。

一、先统一任务，再讨论页面长什么样

多端设计最常见的偏差，是从屏幕尺寸开始，而不是从用户任务开始。以运动路线应用为例，同一个“查看路线”任务在不同设备上的目标不同：

设备	用户当下目标	适合展示
手机	快速查看路线、开始导航	路线卡片、地图、主按钮
平板	对比多条路线、查看细节	分栏、筛选、地图详情
穿戴	行进中看方向和距离	极简指标、震动反馈
电脑	整理路线、导入导出、管理资料	表格、拖拽、快捷操作

如果任务没统一，后面组件再规范也会散。建议每个跨端页面先写清楚“同一个任务是什么，各端删减什么”。

二、资料与版本边界：本文写设计规范工程化

本文示例面向 HarmonyOS NEXT / ArkTS / ArkUI 工程，重点在多端设计规范如何变成代码：设备画像、断点策略、设计令牌、组件变体、文案反馈、验收矩阵。具体折叠屏、平板、穿戴、鸿蒙电脑能力，需要结合官方多设备设计资料和真实设备验证。

规范层级	本文覆盖	项目中需要补充
任务层	同一任务在多端的目标映射	业务流程和用户研究
设备层	手机、平板、穿戴、电脑画像	真实设备能力和系统差异
视觉层	间距、字号、圆角、密度令牌	品牌视觉规范
组件层	组件变体与展示策略	团队组件库实现
验收层	多端一致性检查	设计评审和真机测试

三、设备画像：别只用宽度判断设备

设备画像要包含屏幕、输入方式、使用时长和任务密度。手表屏幕小，但用户也不会长时间阅读；电脑屏幕大，但用户更依赖键鼠效率。

export type HarmonyDeviceRole = 'phone' | 'tablet' | 'wearable' | 'pc';
export type InteractionMode = 'touch' | 'watchGlance' | 'mouseKeyboard';

export interface DeviceProfile {
  role: HarmonyDeviceRole;
  widthVp: number;
  heightVp: number;
  interaction: InteractionMode;
  taskDensity: 'low' | 'medium' | 'high';
}

export function resolveDeviceProfile(role: HarmonyDeviceRole, widthVp: number, heightVp: number): DeviceProfile {
  if (role === 'wearable') {
    return { role, widthVp, heightVp, interaction: 'watchGlance', taskDensity: 'low' };
  }
  if (role === 'pc') {
    return { role, widthVp, heightVp, interaction: 'mouseKeyboard', taskDensity: 'high' };
  }
  if (role === 'tablet') {
    return { role, widthVp, heightVp, interaction: 'touch', taskDensity: 'high' };
  }
  return { role, widthVp, heightVp, interaction: 'touch', taskDensity: 'medium' };
}

这段代码的边界是“识别设备使用语境”。它不直接控制组件样式，而是为布局、文案和操作入口提供决策输入。

四、设计令牌：间距和字号要可被代码消费

多端规范不能只停留在设计稿。间距、字号、圆角和阴影要沉淀成令牌，页面不要到处写魔法数字。

export interface DesignTokens {
  pagePadding: number;
  cardRadius: number;
  titleSize: number;
  bodySize: number;
  controlHeight: number;
}

export function resolveDesignTokens(profile: DeviceProfile): DesignTokens {
  if (profile.role === 'wearable') {
    return { pagePadding: 10, cardRadius: 18, titleSize: 18, bodySize: 12, controlHeight: 40 };
  }
  if (profile.role === 'pc') {
    return { pagePadding: 32, cardRadius: 16, titleSize: 24, bodySize: 14, controlHeight: 36 };
  }
  if (profile.role === 'tablet') {
    return { pagePadding: 28, cardRadius: 20, titleSize: 26, bodySize: 16, controlHeight: 44 };
  }
  return { pagePadding: 20, cardRadius: 18, titleSize: 22, bodySize: 15, controlHeight: 48 };
}

令牌层解决的是“规范可执行”。设计侧修改圆角或字号时，研发不需要搜索几十个页面；组件只消费 DesignTokens。

五、任务卡片变体：同一业务，不同密度

同一条路线、订单或消息，在不同设备上展示的信息量应不同。穿戴只保留关键指标，电脑可以展示更多操作。

export interface RouteTaskViewModel {
  title: string;
  distanceKm: number;
  durationMinute: number;
  difficulty: string;
  coverUrl: string;
  actionText: string;
}

export interface RouteCardVariant {
  showCover: boolean;
  showDifficulty: boolean;
  showSecondaryAction: boolean;
  maxTitleLines: number;
}

export function resolveRouteCardVariant(profile: DeviceProfile): RouteCardVariant {
  if (profile.role === 'wearable') {
    return { showCover: false, showDifficulty: false, showSecondaryAction: false, maxTitleLines: 1 };
  }
  if (profile.role === 'pc' || profile.role === 'tablet') {
    return { showCover: true, showDifficulty: true, showSecondaryAction: true, maxTitleLines: 2 };
  }
  return { showCover: true, showDifficulty: true, showSecondaryAction: false, maxTitleLines: 2 };
}

这段代码让组件变体基于设备画像生成，而不是每个页面手写 if。它预防的是多端页面长期分叉，最后每端维护一套独立组件。

六、操作入口：主任务一致，辅助操作按设备展开

多端一致性要求主任务一致，比如“开始导航”“保存”“提交”。辅助操作可以根据设备能力变化。

export type TaskActionId = 'primaryStart' | 'favorite' | 'share' | 'export' | 'openInNewWindow';

export interface TaskAction {
  id: TaskActionId;
  label: string;
  placement: 'primaryButton' | 'moreMenu' | 'toolbar' | 'hidden';
}

export function resolveTaskActions(profile: DeviceProfile): TaskAction[] {
  const actions: TaskAction[] = [
    { id: 'primaryStart', label: '开始', placement: 'primaryButton' },
    { id: 'favorite', label: '收藏', placement: 'moreMenu' },
    { id: 'share', label: '分享', placement: 'moreMenu' }
  ];

  if (profile.role === 'pc') {
    actions.push({ id: 'export', label: '导出', placement: 'toolbar' });
    actions.push({ id: 'openInNewWindow', label: '新窗口打开', placement: 'toolbar' });
  }
  if (profile.role === 'wearable') {
    return actions.filter(action => action.id === 'primaryStart');
  }
  return actions;
}

操作入口的原则是：主按钮不丢，辅助操作不挤。穿戴端少即是多，电脑端则要把效率操作摆出来。

七、反馈文案：同一个状态，不同表达长度

错误提示也要多端适配。穿戴端不适合长句，电脑端可以提供更完整的处理建议。

export type TaskErrorCode = 'networkWeak' | 'permissionDenied' | 'contentExpired';

export function resolveDeviceErrorText(profile: DeviceProfile, code: TaskErrorCode): string {
  if (profile.role === 'wearable') {
    const shortTexts: Record<TaskErrorCode, string> = {
      networkWeak: '网络弱',
      permissionDenied: '无权限',
      contentExpired: '已过期'
    };
    return shortTexts[code];
  }

  const fullTexts: Record<TaskErrorCode, string> = {
    networkWeak: '当前网络较弱，请移动到信号更好的位置后重试',
    permissionDenied: '当前账号无权访问该内容，请确认登录状态或联系管理员',
    contentExpired: '内容已过期，请返回上一页重新获取最新内容'
  };
  return fullTexts[code];
}

这段逻辑保证状态一致，但表达方式适配设备。用户在手表上只需要快速知道原因，在电脑上则需要明确的下一步。

八、多端规范问题排查表

现象	优先怀疑	检查方式	修复方向
平板页面像放大手机	没有任务密度和分栏策略	检查 DeviceProfile.taskDensity	增加分栏、筛选、详情并排
手表信息太多	组件变体未按穿戴裁剪	查看 RouteCardVariant	隐藏封面和辅助操作
电脑端效率低	辅助操作全藏在更多菜单	查看 resolveTaskActions	把导出、新窗口放到工具栏
设计稿和代码不一致	样式没有令牌化	搜索页面魔法数字	用 DesignTokens 管理间距字号
同一错误多端文案冲突	文案散落在页面	检查错误码映射	用统一错误码生成设备文案
组件分叉越来越多	每端独立写组件	对比组件变体数量	用 profile + variant 收敛

排查多端问题时，不要先争论“哪个设计稿好看”。先看任务是否一致，再看设备画像和组件变体是否正确。

九、多端上线前验收表

验收项	通过标准
任务一致	手机、平板、穿戴、电脑都能完成核心任务
信息密度	穿戴最简，手机聚焦，平板和电脑展开
操作入口	主操作始终可见，辅助操作按设备展开
视觉令牌	字号、间距、圆角来自统一令牌
组件变体	同一组件通过 variant 适配，不复制多套
反馈文案	同一错误码在各端含义一致
真机材料	至少保留四端关键页面截图或录屏

验收时建议让设计、研发、测试一起看同一张任务表。只看单端截图，很容易忽略跨端连续体验。

十、多端设计相关官方资料

1. 华为开发者文档：多设备应用开发最佳实践
   https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-ide
2. 华为开发者文档：ArkUI 响应式布局
   https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development
3. 华为开发者文档：Stage 模型应用开发
   https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/stage-model-development-overview
4. 华为开发者文档：HarmonyOS 设计指南
   https://developer.huawei.com/consumer/cn/design/

十一、让多端一致变成团队资产

多端设计规范真正落地后，团队得到的不是几张适配后的页面，而是一套能复用的资产：任务模型让业务目标一致，设备画像让判断有依据，设计令牌让视觉可维护，组件变体让研发不重复造轮子，验收矩阵让发布前检查有抓手。
以后新增折叠屏、车机或更多设备时，不需要重新推翻页面，只需要补充设备画像和变体策略。这才是 HarmonyOS 多端体验能持续演进的关键。

落地时可以按下面顺序推进，避免一开始就陷入全量重构：

推进阶段	交付物
任务梳理	核心任务表、各端删减规则
设备画像	DeviceProfile 和断点策略
视觉沉淀	间距、字号、圆角、控件高度令牌
组件收敛	业务组件 variant 和动作入口映射
多端验收	手机、平板、穿戴、电脑截图或录屏