楼主

131111发表于 2019-10-21 15:49:47
只看该作者楼主

详解:快服务体验规则 [复制链接]

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%。


举报
楼主发表于 2019-10-21 15:52:16
只看该作者沙发

如果您的快服务涉及卡片开发,您需详细了解并严格遵循上文的相关要求!

举报
楼主发表于 2019-10-21 15:52:43
只看该作者板凳

更多关于快服务的内容,可以点击楼下链接!

举报
楼主发表于 2019-10-21 15:53:25
只看该作者地板

本帖最后由 本无所为之2019-10-21 15:54:00 编辑

关联阅读:一文解答“快应用卡片类快服务”的问题

举报
楼主发表于 2019-10-21 15:54:09
只看该作者5 #
举报
楼主发表于 2019-10-21 15:55:32
只看该作者6 #
举报
楼主发表于 2019-10-21 15:56:44
只看该作者7 #
举报
楼主发表于 2019-10-21 15:57:25
只看该作者8 #
举报
楼主发表于 2019-10-21 15:58:16
只看该作者9 #
举报
发表于 2019-10-22 15:43:37
只看该作者10 #

很详细的解释,感谢楼主!

举报

您需要登录后才可以回帖

登录注册
发表回复