1. 快服务体验规则

1.1 UX基本规范

1.1.1 卡片规范

如果您的快服务涉及卡片开发，您需详细了解并严格遵循下列要求：

1.1.1.1 设计规则

• 必要内容：标题区、内容区、颜色、字体、自适应规则

• 可选内容：品牌区、按钮区、小元素

设计过程中，涉及以上内容时，必须完全按照规范输出。

1.1.1.2 卡片结构

1. 组成要素

卡片包含标题区、内容区、品牌区（可选）和操作区（可选）四个部分。

2. 设计范围

（1）针对卡片的操作放在卡片右上方，由华为侧配置。设计者在设计界面时需预留出该区域，不可在附近放置可交互元素。

（2）卡片的背板由华为侧提供，开发者需保持卡片背景透明。

1.1.1.3 标题区

1. 组成要素

（1）图标：应用或快服务的图标；

（2）名称：从以下三种格式中选择：品牌名称/快服务名称/品牌名称+半角空格+半角符号“·”+半角空格+快服务名，例如：华为视频/追剧助手/华为视频 · 追剧助手。名称中不可出现运营内容。

2. 交互规范

（1）设计者可定义标题区的跳转，点击热区进入相应页面：如标题为快服务名，跳转至对应快服务页面；如标题为应用名，则进入应用首页。

（2）点击标题栏空白区域无响应。

（3）跳转时，不得出现劫持页面（包括开屏广告、首页等）。若用户进行返回操作，应让用户“从哪里来”就“回哪里去”，不得出现多次及其他页面跳转。

3. 视觉规范

（1）标题区高度为48dp。

（2）标题区最长宽度240dp。

（3）快服务icon大小为16 x 16dp，圆角大小4dp。

（4）标题字号12sp regular，字体颜色选用一级文本色（#000000，不透明度90%）。

1.1.1.4 品牌区

1. 概述

（1）品牌区用于展示品牌名称、更新状态、更新时间或责任声明。

（2）标题区与品牌区中不能同时出现品牌名称。

（3）品牌文案格式：数据来自+品牌名称，例如：数据来自华为视频。

（4）品牌区只作内容显示，不可添加任何交互。

2. 视觉规范

（1）品牌区顶部预留8dp padding保护区。

（2）品牌区距卡片底部16dp，底部如有按钮区无需预留padding。

（3）品牌区字号10sp，字体颜色选用三级文本色（#000000，不透明度38%）。

1.1.1.5 内容区

1. 概述

内容区为卡片主要内容的呈现区域，由文本、图标、图片和多媒体组成。常见样式有：纯文本样式，左文右图样式，宫格样式，列表样式等。根据业务特性也可采用特殊样式，如股票、聊天对话等。

2. 交互规范

（1）点击内容区元素，可跳转至对应的链接页面；

（2）点击热区高度最小为44dp，同个卡片内容区跳转指向不宜过多，卡片应针对同一主题提供内容，避免内容及功能堆砌；

（3）跳转时，不得出现劫持页面（包括开屏广告、首页等）。若用户进行返回操作，应让用户“从哪里来”就“回哪里去”，不得出现多次及其他页面跳转。

3. 视觉规范

（1）内容区根据实际内容的高度确定高度，内容区最小高度：44dp，内容区最大高度：426dp。

（2）内容区距离卡片边缘为16dp。

（3）内容区顶部无需预留padding保护区，底部如有按钮区无需预留padding。

1.1.1.6 按钮区

（接入智慧视觉和智慧语音时不允许使用按钮区）

1. 概述

（1）根据卡片场景和内容，提供文字按钮，按钮应为内容相关的功能操作，避免作为运营活动入口。

（2）按钮数量不超过三个，左对齐，并且从左往右，优先级依次减弱。

（3）为达到较好的视觉效果，按钮上文字字数建议不超过4个中文字符。

（4）跳转查看详细内容时，通过点击内容区跳转，避免提供“查看详情”按钮。

2. 交互规范

点击按钮可跳转到应用内界面或执行操作，如查看更多、预订等。

3. 视觉规范

（1）按钮区高度为48dp。

（2）文字按钮字号14sp medium，字体颜色#007DFF。

（3）文字按钮距离卡片左边距16dp，文字按钮间保持24dp间距。

1.1.1.7 颜色

1. 概述

（1）卡片使用颜色必须选用规范范围内颜色。

（2）根据EMUI规范，标签、图表等设计元素上，可配置以下预设颜色.

（3）同一张卡片中，彩色文本及小元素颜色总数量不允许超过3种。

2. 视觉规范

内容区文本颜色：

标签或其他色彩元素颜色：

规范功能色或习惯用色：

1.1.1.8 内容区字体

1. 概述

（1）卡片内容区使用字体必须选用规范范围内字体.

（2）请根据模版定义的字体类型来选择对应的字号，以达到清晰表达信息内容，强调重要信息，弱化次要信息的效果。

（3）设计时，中文字体使用汉仪旗黑regular（50s)/medium（60s），英文和数字使用roboto regular/medium，最终显示效果跟随华为系统。

2. 内容区字体间距

1.1.1.9 图像

1. 概述

卡片通常用图文并茂的方式将信息传达给用户，使用合适的图像能够吸引用户并使其聚焦任务。图像有多种类型：内容图片（电影海报、商品、专辑封面等）、用户头像、插画装饰、地图等。注意：图像应尽量简洁并与内容强关联；避免叠加广告类型的文字图形，以确保内容的可读性。

2. 视觉规范

（1）图文类配图：多用于图文类样式中，对文本起到辅助说明的作用；可选用以下三种规格配图。

（2）二宫格配图：多用于呈现图片、视频等内容；保持图片间距8dp,固定图片比例。

（3）三宫格配图：多呈现商品、专辑、照片等内容；可选用以下三种规格配图，保持图片间距8dp，固定图片比例。

1.1.1.10 小元素

1. 提示标签1

常用于文字标签，通常放置在文字旁边，可单字或多字使用。多字使用时尽量精简，原则不超过4个字，仅可选用规范范围内颜色。

2. 提示标签2

要求同上，相比“底板+文字”强调性较弱，适合次要信息的说明。

3. 业务图标

根据业务需要使用，如机票可采用飞行图标、打车卡片采用车辆图标。

4. 评星图标

5. 运营标签

标签搭配图片运营使用，显示在右上方。

1.1.1.11 大字体

1. 概述

由于卡片会在多终端、多场景中呈现，为保证良好的适配效果，卡片需要满足以下自适应需求，使其具有自适应式布局和控件的基础响应能力。

2. 适配规则

识别系统字号大小进行匹配，字号对应变化。

3. 视觉规范

（1）卡片标题和下方按钮文字可以跟随系统文字变大。

（2）标题文字超长不可换行，超长省略；按钮文字超长可缩小字号至9sp，换一行。

（3）内容区文字字号跟随系统变大，高度随TextView适应变高。

（4）内容区大字体显示不下的文字截断显示并在末尾增加“…”。

1.1.1.12 深色模式

1. 概述

由于EMUI发布深色模式，所以卡片也需支持深色模式场景。卡片通过华为快引擎实现深色模式卡片，为了建立正确映射关系，开发者必须选用规范中的色值进行设计。

（1）不能在设计中使用底板png或jpg等资源。

（2）小元素必须用svg实现，资源颜色必须选用规范里提供的色值。

1.1.1.13 自适应规则

1. 卡片适配

卡片可能会展示在终端的多个智慧场景以及不同尺寸大小的设备上。因此需要根据媒体及设备进行布局拉伸、缩放、延伸等。

2. 卡片适配样例

卡片宽度跟随系统栅格，卡片内元素进行拉伸适配。

宫格样式卡片在不同栅格数量情况下，显示不同个数的元素。

例：手机竖屏通常为4 columns，音乐推荐卡片显示3个推荐音乐，相同卡片折叠屏上，为720dp-8 columns，音乐推荐卡片显示N+1个推荐音乐，即为4个。

1.1.2 账号绑定规范

如果您的快服务涉及账号绑定，您需详细了解并严格遵循下列要求：

1.1.2.1 华为帐号登录

适用于开发者有独立帐号体系，同时授权华为帐号登录的场景。

规范要求：

（1）登录成功后直接跳转回快服务开启页，不得出现营销页面等拦截页面。

（2）退出登录时需弹窗确认，退出后直接返回快服务开启页。

（3）退出登录页展示华为账号及头像。

1.1.2.2 第三方账号登录

适用于开发者使用自己的独立帐号体系登入场景。

规范要求：

（1）绑定成功后直接跳转回快服务开启页，不得出现营销页面等拦截页面。

（2）解除绑定时需弹窗确认，解除后直接返回快服务开启页。

（3）解除绑定页展示开发者用户账号及头像。

1.1.2.3 绑定典型页面

三方账号绑定流程页面必须具备基本元素，剩余部分可根据实际情况在满足基本元素的情况下自行定义。

1.1.2.4 页面元素要求

三方账号绑定流程页面必须满足部分要求，剩余部分可根据实际情况在满足基本规范的情况下自行定义

1.1.2.5 典型页面标注

附：智能助手账号绑定流程UX规范+高保真在线标注+切图文件

1.2 触发逻辑

如果您的快服务涉及上线智能助手情景智能，您需详细了解并严格遵循下列要求：

卡片的触发逻辑必须是与用户相关的事件触发 。

如：航班状态提醒卡片，在飞机起飞前3小时展示出发提醒卡片，在飞机落地1小时候后卡片消失；而不允许在用户没有主动关注航班的情况下，推荐打折航班信息给用户。

1.3 跳转体验

关于快服务跳转体验，您需详细了解并严格遵循下列要求：

1.进入快服务：包括从图标/卡片进入，不得出现拦截或过渡页面（包括开屏广告、首页等），必须直达快服务页面。

2.返回快服务：从快服务落地页使用系统回退键需一次返回快服务的图标/卡片，不得出现多次返回，及其他页面过渡或拦截。

1.4 性能体验

关于快服务性能体验，您需详细了解并严格遵循下列要求：

• 接口TPS(每秒请求次数)要求：要求三方接口的TPS>200（备注：可以根据业务发展需要支持水平扩容）。

• 接口时延要求：在最大TPS情况下，95%的请求时延小于150毫秒。

• 接口稳定性要求：调用成功率> 99%。