元服务SKILL设计规范

规范概述

本规范定义元服务SKILL卡片视觉、布局、多端适配与基础交互标准，用于指导元服务SKILL卡片的设计与开发。规范目标：在支持业务灵活自定义的前提下，保障在手机、大屏、折叠屏等不同终端，浅色/深色系统主题下界面风格统一、交互体验一致。所有尺寸单位为vp，为鸿蒙自适应像素单位。

卡片尺寸布局规范

SKILL卡片高度可根据业务内容实际情况自定义，最大高度不超过476vp。

大屏设备卡片宽度支持加宽适配，最大宽度不超过392vp；高度默认采用wrap-content自适应布局，跟随内部内容自动撑开，同时受全局高度约束，最大高度不超过476vp。

业务可在上限范围内自由设计卡片内容；内容过多时，开发者需自行做内容截断、滚动或折叠处理，禁止卡片渲染后突破476vp高度限制。

卡片基础视觉样式规范

卡片内边距固定12vp，卡片圆角固定20vp。

背景色跟随系统主题自动切换：

• Light（浅色）模式：卡片背景色 #FFFFFF。
• Dark（深色）模式：卡片默认背景色 #2E3033。

内边距、圆角为平台统一基础样式，无特殊评审通过场景不可修改；背景色建议直接使用规范色值，如需自定义背景，需保证深浅模式下可读性与对比度达标。

页面跳转交互规范

调用 openDetailPage 接口，可以半屏打开元服务详情页面。半屏弹窗保留底层卡片上下文，适合查看详情、次级操作场景，在手机、大屏、折叠屏设备均可生效。

折叠屏设备适配

SKILL卡片支持折叠屏多形态自动适配，在折叠态与展开态下自动调整布局，保证卡片完整展示、无拉伸、布局不乱。开发需验证两种形态下卡片尺寸适配性、内容排版一致性和点击区域的交互性。

折叠屏显示效果：

约束与校验规则

1. 尺寸上限为强制约束：卡片高度上限476vp、大屏宽度上限392vp，开发自测必须校验。

2. 深浅主题切换需实时响应，卡片背景色自动切换，不缓存静态主题样式。

3. 折叠屏场景需同时验证折叠/展开双状态，保证卡片不跨折痕异常裁切。