应用UX体验建议
========

#### 背景及目的

本章节从影响用户体验的各个维度定义了相应的UX质量建议，规定了HarmonyOS NEXT应用需达到的UX基础体验建议，以保证应用良好的交互体验。

#### 适用范围

本章节制定了应用的UX体验建议，适用于应用软件的设计、开发及测试。详见：[应用UX体验建议](https://developer.huawei.com/consumer/cn/doc/design-guides/ux-guidelines-overview-0000001760867048)

<table><tbody><tr><td class="cellrowborder" valign="top" width="15.879999999999999%"><p><strong>标准类型</strong></p></td><td class="cellrowborder" valign="top" width="11.21%"><p><strong>分类</strong></p></td><td class="cellrowborder" valign="top" width="21.38%"><p><strong>场景</strong></p></td><td class="cellrowborder" valign="top" width="11.360000000000001%"><p><strong>应用形态适用性</strong></p></td><td class="cellrowborder" valign="top" width="40.17%"><p><strong>说明</strong></p></td></tr><tr><td class="cellrowborder" rowspan="28" valign="top" width="15.879999999999999%"><p>通用应用UX体验建议</p></td><td class="cellrowborder" rowspan="21" valign="top" width="11.21%"><p>基础体验</p></td><td class="cellrowborder" valign="top" width="21.38%"><p>系统返回</p></td><td class="cellrowborder" valign="top" width="11.360000000000001%"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top" width="40.17%"><p>所有界面响应系统返回操作，全屏界面提供返回/关闭/取消按钮</p></td></tr><tr><td class="cellrowborder" valign="top"><p>布局基础要求</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用支持在不同屏幕尺寸的设备上良好显示</p></td></tr><tr><td class="cellrowborder" valign="top"><p>挖孔区适配</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>界面布局适配摄像头的挖孔区域</p></td></tr><tr><td class="cellrowborder" valign="top"><p>避免与系统手势冲突</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用自定义手势与系统手势无冲突</p></td></tr><tr><td class="cellrowborder" valign="top"><p>典型手势时长设计</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用使用的典型手势时长合理</p></td></tr><tr><td class="cellrowborder" valign="top"><p>点击热区</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>点击热区不得小于40vp×40vp</p></td></tr><tr><td class="cellrowborder" valign="top"><p>色彩对比度</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用使用的色彩满足最小对比度要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>字体大小</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用的文字大小满足最小字号要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>应用图标</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用图标具备前景图层和背景图层，图标尺寸与可见区域尺寸满足要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>界面图标</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用的界面图标大小满足最小尺寸要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>图标清晰度</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用的图标清晰度</p></td></tr><tr><td class="cellrowborder" valign="top"><p>层级转场</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>层级转场采用左右位移的运动方式</p></td></tr><tr><td class="cellrowborder" valign="top"><p>新建转场</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>新建转场采用上下位移的运动方式</p></td></tr><tr><td class="cellrowborder" valign="top"><p>编辑转场</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>编辑转场采用淡入淡出的过渡方式</p></td></tr><tr><td class="cellrowborder" valign="top"><p>搜索转场</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>搜索转场采用共享元素的转场方式</p></td></tr><tr><td class="cellrowborder" valign="top"><p>动效无缺失</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>存在转场动效过渡检查</p></td></tr><tr><td class="cellrowborder" valign="top"><p>转场动效时长下限</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>全屏页面的转场动效时长满足要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>启动页填充</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用</p></td><td class="cellrowborder" valign="top"><p>应用启动页填充满足要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>启动页动效时长</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用</p></td><td class="cellrowborder" valign="top"><p>应用启动页动效时长满足要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>滑动过界反馈动效一致性</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>界面滑动到边界位置存在反馈动效</p></td></tr><tr><td class="cellrowborder" valign="top"><p>离手减速动效一致性</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>离手减速动效检查</p></td></tr><tr><td class="cellrowborder" rowspan="7" valign="top"><p>系统特性</p></td><td class="cellrowborder" valign="top"><p>底部导航条适配</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>界面布局适配底部导航条</p></td></tr><tr><td class="cellrowborder" valign="top"><p>通知</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用通知设计需遵循通知规范</p></td></tr><tr><td class="cellrowborder" valign="top"><p>实况窗</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用</p></td><td class="cellrowborder" valign="top"><p>实况窗通知样式需符合设计规范</p></td></tr><tr><td class="cellrowborder" valign="top"><p>多窗适配</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>悬浮窗适配-应用支持以悬浮窗模式运行</p></td></tr><tr><td class="cellrowborder" valign="top"><p>多窗适配</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>分屏适配-应用支持上下分屏和左右分屏</p></td></tr><tr><td class="cellrowborder" valign="top"><p>深色模式</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用适配深色模式显示，深色模式下显示正常</p></td></tr><tr><td class="cellrowborder" valign="top"><p>状态栏</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用需要对状态栏进行适配显示</p></td></tr><tr><td class="cellrowborder" rowspan="34" valign="top" width="15.879999999999999%"><p>大屏应用UX体验建议</p></td><td class="cellrowborder" rowspan="2" valign="top" width="11.21%"><p>功能完整</p></td><td class="cellrowborder" valign="top" width="21.38%"><p>横竖屏适配</p></td><td class="cellrowborder" valign="top" width="11.360000000000001%"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top" width="40.17%"><p>横竖屏适配检查</p></td></tr><tr><td class="cellrowborder" valign="top"><p>多窗适配</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>多窗适配检查</p></td></tr><tr><td class="cellrowborder" rowspan="15" valign="top"><p>鼠标、触控板和键盘交互</p></td><td class="cellrowborder" valign="top"><p>可交互控件响应光标悬浮</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>当光标悬浮在应用的可交互控件上，控件或者光标需要提供对应的视觉反馈</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持目标单选</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>对于界面中支持选中态的目标，可使用鼠标或触控板对其进行选择</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持多目标框选</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>当需要选择多个目标时，可通过框选操作进行选择</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持多目标连选</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>当需要选择多个目标时，可通过键盘热键+鼠标/触控板进行多目标连选</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持多目标点选</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>当应用内支持目标多选时，可通过键盘热键+鼠标/触控板进行目标点选</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持目标点击</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>对于应用界面中可点击的控件，通过光标进行点击，触发对应功能</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持滑动页面内容</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>当显示的内容超出应用窗口，可通过滑动页面浏览未显示的内容</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持文本选择</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>在文本内容区域，可对文本进行多选操作</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持旋转</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>对于界面中支持旋转的目标，可使用鼠标或触控板对其进行旋转</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持缩放</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>对于界面中支持缩放的目标，可使用鼠标或触控板对其进行缩放</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持拖移</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>对于界面中支持拖移的目标，可使用鼠标或触控板对其进行拖移</p></td></tr><tr><td class="cellrowborder" valign="top"><p>显示上下文菜单</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>对于界面中支持显示上下文菜单的目标，可使用鼠标或触控板打开上下文菜单</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持使用外接键盘输文字</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用支持使用外接键盘键入文本</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持全键盘操作</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用中的主要任务流支持键盘的焦点导航</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持常用功能的通用快捷键</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>支持常用功能的通用快捷键</p></td></tr><tr><td class="cellrowborder" rowspan="12" valign="top"><p>布局合理美观</p></td><td class="cellrowborder" valign="top"><p>布局基础要求(大屏)</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>折叠屏在各个形态下显示正常</p></td></tr><tr><td class="cellrowborder" valign="top"><p>图标文字大小适中</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>折叠屏图标文字大小符合要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>弹出框大小适中</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>折叠屏展开态弹出框高度符合要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>宫格图片信息量适中</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>宫格图片控件占比符合要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>广告图信息量适中</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>广告图控件占比符合要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>上下图文信息量适中</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>上下图文信息量符合要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>单行文本</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>单行文本字数检查</p></td></tr><tr><td class="cellrowborder" valign="top"><p>边距适中</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用左右边距符合要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>效率型布局</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>效率型应用应使用分栏布局</p></td></tr><tr><td class="cellrowborder" valign="top"><p>浏览型布局</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>浏览型应用应使用宫格/瀑布流等布局</p></td></tr><tr><td class="cellrowborder" valign="top"><p>布局创新</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>折叠屏应在布局视觉提升的创新</p></td></tr><tr><td class="cellrowborder" valign="top"><p>侧边导航栏</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用窗口宽度≥840vp时底部导航栏切换为侧边导航栏</p></td></tr><tr><td class="cellrowborder" rowspan="5" valign="top"><p>交互易用</p></td><td class="cellrowborder" valign="top"><p>按钮易点击</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>按钮应避开难交互区域</p></td></tr><tr><td class="cellrowborder" valign="top"><p>键盘易操作</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>键盘按键应避开难交互区域</p></td></tr><tr><td class="cellrowborder" valign="top"><p>弹框易操作</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>弹出框位置易操作</p></td></tr><tr><td class="cellrowborder" valign="top"><p>临时悬浮窗</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用内启动临时的需要跨应用或跨实例跳转的任务应使用临时悬浮窗</p></td></tr><tr><td class="cellrowborder" valign="top"><p>临时双窗</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用内启动的临时的辅助任务应使用临时双窗</p></td></tr><tr><td class="cellrowborder" rowspan="4" valign="top" width="15.879999999999999%"><p>折叠屏应用UX体验建议</p></td><td class="cellrowborder" rowspan="4" valign="top" width="11.21%"><p>基础体验</p></td><td class="cellrowborder" valign="top" width="21.38%"><p>开合连续性</p></td><td class="cellrowborder" valign="top" width="11.360000000000001%"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top" width="40.17%"><p>应用在开合过程中体验连续</p></td></tr><tr><td class="cellrowborder" valign="top"><p>开合流畅</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用在开合过程中动效流畅</p></td></tr><tr><td class="cellrowborder" valign="top"><p>悬停适配</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用在悬停态时布局满足要求</p></td></tr><tr><td class="cellrowborder" valign="top"><p>折痕避让</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用在悬停态时应避开折痕</p></td></tr><tr><td class="cellrowborder" rowspan="5" valign="top" width="15.879999999999999%"><p>2in1应用UX体验建议</p></td><td class="cellrowborder" rowspan="5" valign="top" width="11.21%"><p>窗口响应式</p></td><td class="cellrowborder" valign="top" width="21.38%"><p>支持窗口化运行</p></td><td class="cellrowborder" valign="top" width="11.360000000000001%"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top" width="40.17%"><p>应用支持窗口化运行</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持窗口形态转换</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用支持通过窗口控制器转换窗口形态</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持窗口尺寸调节</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用支持在可调范围内任意调节窗口大小</p></td></tr><tr><td class="cellrowborder" valign="top"><p>支持分屏和比例调节</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用支持分屏和比例调节</p></td></tr><tr><td class="cellrowborder" valign="top"><p>窗口内容状态保持</p></td><td class="cellrowborder" valign="top"><p>鸿蒙应用，鸿蒙元服务</p></td><td class="cellrowborder" valign="top"><p>应用窗口在调节时内容保持</p></td></tr></tbody></table>