HarmonyOS设计：设计基础

通用设计基础

概述

HarmonyOS 是一款面向全场景智慧生活方式的分布式操作系统。在传统的单设备系统能力的基础上，HarmonyOS 提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持手机、平板、PC、智慧屏、智能穿戴、智能音箱、车机、耳机、AR/VR眼镜等多种终端设备。

对消费者而言，HarmonyOS 能够将生活场景中的各类终端进行能力整合，形成“One Super Device”，实现不同终端设备之间的极速连接、能力互助、资源共享，匹配合适的设备、提供流畅的全场景体验。

当为多种不同的设备开发应用时，需要从如下三个方面来考虑UX设计：

差异性

充分了解所要支持的设备，包括屏幕尺寸、交互方式、使用场景、用户人群等，对设备的特性进行针对性的设计。具体设计方法详见设备设计指南，如智慧屏设计指南、智能穿戴设计指南。

一致性

除了要考虑每个设备的特性外，还需要考虑不同设备的共性，并使用通用性设计方法提供既符合设备差异性，又具有跨设备一致性的设计，从而减少用户学习的难度，降低应用开发的成本。具体内容详见本设计指南的后续章节。

协同性

当考虑多个设备之间的相互协同时，需要了解设备与设备之间多种可能的协同模式，最大程度地展现 HarmonyOS 上独特的多设备无缝流转体验。具体设计方法详见分布式设计指南。

在为 HarmonyOS 的多种设备进行通用性设计和开发时，可以从如下方面进行考虑：

• 设计理念：了解 HarmonyOS 设计系统的核心理念，确保在多设备上的一致体验。

• 人因研究：了解人因研究如何为UX设计提供系统性的科学指导。

• 应用架构：了解常用的应用架构，并在应用设计中进行实践。

• 人机交互：了解多种不同的人机交互方式，以及每种交互方式设计中的注意事项。

• 视觉风格：了解基础概念、色彩、字体、图标、插画、布局等关键视觉设计的概念和规则。

• 动效：了解时长、曲线、帧率等动效基础要素，以及特征、转场、手势动效的设计方法和微动效、插画动效的设计指导。

• 声音：了解声音的设计属性以及音色、音响、频段、动态响应等关键声音元素在差异设备间的设计方法

• 多态控件：了解不同设备下多态控件的特点，以及控件的不同显示状态，确保应用正确使用控件。

• 界面用语：了解如何确保用语风格统一、清晰明了、流畅自然，给用户带来良好的阅读体验。

• 全球化：了解如何提供通用方案满足不同国家的常规需求，以及如何提供个性化方案满足某些国家的特殊需求。

• 无障碍：了解如何让视障用户正常使用智能设备，获得良好的信息无障碍体验，包括色彩、对比度和屏幕朗读器等。

• 隐私设计：了解如何保护用户的隐私，并让用户自主管控自己的信息，做到清晰可知，方便可控。

设计理念

在万物互联的时代，我们每天都会接触到很多不同形态的设备，每种设备在特定的场景下能够为我们解决一些特定的问题，表面看起来我们能够做到的事情更多了，但每种设备在使用时都是孤立的，提供的服务也都局限于特定的设备，我们的生活并没有变得更好更便捷，反而变得非常复杂。HarmonyOS 的诞生旨在解决这些问题，在纷繁复杂的世界中回归本源，建立平衡，连接万物。

混沌初开，一生二、二生三、三生万物，我们希望通过 HarmonyOS 为用户打造一个和谐的数字世界——One Harmonious Universe。

One

万物归一，回归本源。我们强调以人为本的设计，通过严谨的实验探究体验背后的人因，并将其结论融入到我们的设计当中。

HarmonyOS 系统的表现应该符合人的本质需求。结合充分的人因研究，为保障全场景多设备的舒适体验，在整个系统中，各种大小的文字都清晰易读，图标精确而清晰、色彩舒适而协调、动效流畅而生动。同时，界面元素层次清晰，能巧妙地突出界面的重要内容，并能传达元素可交互的感觉。另外，系统的表现应该是直觉的，用户在使用过程中无需思考。因此系统的操作需要符合人的本能，并且使用智能化的技术能力主动适应用户的习惯。

Harmonious

一生为二，平衡共生。万物皆有两面，虚与实、阴与阳、正与反… 二者有所不同却可以很好地融合，达至平衡。

在 HarmonyOS 中，我们希望给用户带来和谐的视觉体验。我们在物理世界中找到在数字世界中的映射，通过光影、材质等设计转化到界面设计中，给用户带来高品质的视觉享受。同时，物理世界中的体验记忆转化到虚拟世界中，熟悉的印象有助于帮助用户快速理解界面元素并完成相应的操作。

Universe

三生万物，演化自如。HarmonyOS 是面向多设备体验的操作系统，因此，给用户提供舒适便捷的多设备操作体验是 HarmonyOS 区别于其他操作系统的核心要点。

一方面，界面设计/组件设计需要拥有良好的自适应能力，可快速进行不同尺寸屏幕的开发。

另一方面，我们希望多设备的体验能在一致性与差异性中取得良好的平衡。

● 一致性：界面中的元素设计以及交互方式尽量保持一致，以便减少用户的学习成本。

● 差异性：不同类型的设备在设屏幕尺寸、交互方式、使用场景、用户人群等方面都会存在一定的差异性，为了给用户提供合适的操作体验，我们需要针对不同类型的设备进行差异化的设计。

同时，HarmonyOS 作为面向全球用户的操作系统，为了让更多的用户享受便利的科技与愉悦的体验，我们将在数字健康、全球化、无障碍等方面进行积极的探索与思考。

人因研究

人因学是研究人与系统其它要素之间交互的学科，也是一门应用相关理论、原则、数据和方法进行研究应用，以实现人的健康和整个系统效能最优化的学科。（国际人因工效学学会，International Ergonomics Association，IEA 2009）

在 HarmonyOS 中，我们通过大量的人因研究为UX设计提供了系统性的科学指导。

常用关键词：

• Human Factors，Ergonomics，Engineering Psychology

• 人因学、人类工效学、工程心理学

人因学的研究领域

主要有以下三个研究领域：

物理人因学（Physical Ergonomics）

考察与人体物理运动相关的人体解剖学、人体测量学、生理学、生物力学等特征。主要运用于操作姿势、材料搬运、重复性动作、操作性损伤、工作空间设计、安全和健康等领域。

认知人因学（Cognitive Ergonomics）

考察人与系统中其他因素交互中的心理加工，例如感知觉、记忆、学习、推理等特征。主要运用于认知负荷、决策、经验形成、人机交互、人的可靠性、工作压力和技能培训等领域。

组织人因学（Organization Ergonomics）

考察社会技术系统的优化问题，包括组织结构、政策规定和管理流程。主要运用于沟通交流、人员管理、工作设计、工作团队、社区工效、团队协作、虚拟团队工作等领域。

人因学的发展趋势

人因学起源于19世纪末期，人类从最初的实践经验中总结规律，学习如何适应机器，逐步发展到现阶段，运用先进成熟的技术科学地度量人-机-环境中的问题，达到人与机器相互适应的和谐发展局面。

注：图片素材引用自Flaticon.com

UX人因研究框架

人因研究通常会从使用者、设备、使用环境三要素对设计问题进行剖析，并开展相应的人因实验，促使设计更新迭代，达到相应的用户体验目标。

• 使用者：考虑使用者的基本人口统计特征（年龄、职业等），使用不同设备时的姿态与视角，使用设备时对认知资源的占用情况等。

• 设备：考虑设备尺寸，设备显示能力（分辨率、显示色域等），交互方式（触摸、语音等），交互时长等。

• 环境：考虑设备所处的物理环境（环境光、环境音、使用距离等），社会环境（私人或公共设备）等。

UX人因研究已有成果

已有的UX人因研究主要是从基础UX和HarmonyOS UX两个领域开展的，下文将选取典型案例进行阐述。

基础UX人因研究

已有研究主要从GUI体验、流畅体验、交互体验、多感官体验等领域开展。以GUI体验为例，主要是为了在多设备上实现清晰易读、舒适可读、简洁美观的体验目标。

HarmonyOS UX人因研究

已有研究主要从全场景UX人因和多设备UX人因等领域开展，其中多设备UX人因研究覆盖设备：手机、折叠屏、平板、PC、智慧屏、智能穿戴、耳机、VR&AR等。

后文将以“GUI体验研究”为例，阐述人因研究的研究方法与部分研究成果。

研究方法

• 在GUI领域的研究中，首先需要考虑不同设备上，用户的使用距离和视野范围，如下图所示。

• 进一步，开展人因实验，通过主观体验、行为绩效、生理数据的综合分析，得到相关结果。

研究成果示例

示例1：为了满足不同环境光中，页面视觉设计的易读舒适性，通过人因实验进行对比度水平建模，得到下图中展示的结果，并应用于“深色模式”的设计。更多针对色彩的设计，详见色彩。

示例2：为了保证智慧屏在一般室内光/暗光环境中，页面上的文字都能清晰易读，通过人因实验给出如下字号设计建议。针对多设备字号的设计，详见字体。

应用中的导航结构

应用中的导航用于引导用户在应用的各个页面进行浏览。好的导航让用户知道身处何处，去往何方，以及来自哪里。

导航的原则

导航需要遵循以下原则：

• 一致。导航操作的结果应该与用户的期望保持一致。相同或类似的场景使用用户熟悉的界面布局和控件，确保一致的导航行为，让用户无论在什么页面，都知道如何导航。例如二级界面使用左上角的返回按钮来返回界面的上一个层级。

• 清晰。导航应该提供清晰的路径。用户使用的时候，逻辑关系简单且容易理解，能够知道当前处在界面的什么位置，操作后将会跳转到什么位置，不会迷失方向。例如使用底部页签，让用户在平级页面之间进行切换。

导航要避免以下设计：

• 层级过深：导航层级建议在三层以内。对于太深的层次，会带来操作效率的问题。如果确实需要深层级设计，建议使用面包屑设计或增加一键回到首页的功能。

• 导航复杂：在侧边导航中，使用底部页签，会让操作变得复杂，建议仅使用侧边导航。

导航的分类

常用的应用导航有：

• 平级导航

• 层级导航

• 混合导航

平级导航

平级导航结构中，页面均处在同一层级。

使用场景：用于展示同等地位或同等层级的界面。例如以TAB方式组成的页面。

层级导航

层级导航结构由父页面和子页面组成。父页面可以有一个或多个子页面。每个子页面都有一个父页面。

层级导航适用于多层级的复杂结构。层级结构深的内容，用户访问的路径变长，效率降低，可以通过适当的层级穿透设计（如快捷方式）解决此问题。

使用场景：页面存在上下级关系的应用。

混合导航

在应用中，对同等地位或同等层级的页面使用平级导航结构，对具有复杂关系的页面使用层级导航结构。

使用场景：应用由几个同等级的模块组成，每个模块又有上下层级关系页面。

常用应用界面框架

常用应用界面框架有：

• 启动页

• 详情页

• 列表视图

• 网格视图

启动页

针对内容型应用，应用首页内容的获取需要花费一定的时间，此时可以使用启动页缓解页面加载内容的等待感。启动页可以展示应用的品牌形象或者广告。

• 仅针对内容型应用使用启动页。内容型应用在启动时，需要花一定的时间获取内容，因此需要使用启动页，减少用户的等待感。没有网络加载内容的应用，不需要使用启动页。

• 避免让用户等待过长时间。用户总是希望第一时间看到应用内容，因此在页面加载完成后，需要及时呈现内容。

• 从后台加载应用时，不应该显示启动页。当应用被切换到后台后，再从后台加载回来时，不应该再次显示启动页。应用需要保留应用的状态，以便从后台恢复，方便用户继续浏览。

详情页

详情页用于展示应用的详细描述和操作。

列表视图

列表视图通常用于文字和数据内容的展示。

• 列表应该按照一定的逻辑排序，便于用户浏览和操作。例如：按字母顺序排序、按时间排序。

• 列表应该是同类项的集合，应该对外呈现一致的布局样式。常见的是单行列表、双行列表和三行列表。

• 列表显示的内容要主次分明，用户一眼就能关注到重要的信息和操作。

网格视图

网格视图通常用于图片和视频内容的展示。

• 网格视图显示同等重要的项目，具有统一的布局。

• 网格视图以图像为主组织内容。例如图库中用网格视图展示图片。

• 网格视图可以辅以文字和操作。例如应用市场中使用网格展示应用程序图标、简单描述和下载按钮。

• 网格视图应该考虑响应式布局。在横竖屏切换时，网格视图应该能够调整网格的数量以适应页面的宽度变化。

人机交互

在全场景的数字体验中，越来越多类型的智能终端设备分布在用户的日常生活中，可交互的用户界面广泛存在于智能手机、平板、PC、智能穿戴、电视、车机、虚拟现实（VR）和增强现实（AR）等设备上。应用可能在多种设备上运行或在单一设备上被用户通过多种输入方式操控，这需要其用户界面能够自动识别和支持不同的输入方式，以便用户以习惯的、舒适的方法与其进行交互。

在全场景的人机交互方面，HarmonyOS 的核心思想是“根据用户的状态，提供符合当前状态的交互方式，保证用户交互体验的一致性”。例如，当应用运行在触屏设备上时，用户可以通过手指长按打开上下文菜单；当应用运行在 PC 上时，用户则可以通过单击鼠标右键打开该菜单。

典型的输入方式包括但不限于触屏上手指/手写笔等直接交互、鼠标/触摸板/键盘/表冠/遥控器/车机摇杆/旋钮/手柄/隔空手势等间接交互、以及语音交互。

基于触控的交互

很多设备都拥有支持多点触控的屏幕，允许用户使用手指和/或手写笔进行交互。它们与屏幕的接触状态、数量以及运动行为被识别成触控手势和操作，可以支持多种交互功能和体验（例如点击、滑动、缩放、旋转）。在多数情况下，应将触控交互作为用户首要的交互方式。以下内容描述了 HarmonyOS 所支持的核心手势。

基础手势

敲击

适用于支持指关节手势的机型。

基于光标的交互

当用户使用指向设备（鼠标、触摸板、AR/VR手柄、隔空手势等）与应用程序进行间接交互时，光标指向的对象和光标本身应提供适当的视觉反馈以表达对象的可交互性和到达的准确性。同时，应考虑利用光标支持精细化操作和悬浮状态的特性（相比手指触摸），以提升应用生产力、简化交互任务和增强信息展示。

本节规范主要适用于使用鼠标和触摸板来操作平面光标的场景，但基本的设计原则可推广至AR/VR手柄和隔空手势等空间交互场景。

光标形态

光标形态的设计遵循以下三个原则：

功能表达

当光标悬浮在特定界面对象或区域上时，可使用系统定义的标准的光标样式集合来表达其交互状态。

应用也可根据其自身具体场景自定义光标的形态。

简单性

为保证全局交互体验的一致性，应优先使用系统已定义的光标样式集合。如无必要，请勿增加新的光标样式。

对于自定义的光标样式，应尽可能简洁直观地表达在当前界面状态下用户可进行的操作和所需精度，不应在视觉上过分吸引用户的注意力。

自动隐藏和显现

对于以触摸交互为主的终端设备，如果光标在一段时间内没有移动或用户使用了触摸交互，则自动隐藏光标保证界面的干净整洁。

悬浮对象的形态

当光标进入并悬浮在界面元素上时，界面元素可通过适当的视觉和行为反馈来使其对用户聚焦和提高指向的准确率。

界面元素需要响应光标悬停的动作，以清晰表达该元素的可交互性

在光标范式下，用户是通过将光标移动到界面元素上，然后执行对应的操作。这种情况下，需要界面元素在光标悬停的时候就反馈出其是否可交互，避免用户点击后才发现该元素不可交互而产生挫败感。

在表达界面元素的可交互性时，应考虑以下设计原则：

1. 显著性：在悬浮态下，与普通状态和其周围的界面元素相比，拥有清晰的功能可见性。
2. 微妙性：视觉上不应过于强调或与普通状态具有较大差别，避免干扰用户注意力。
3. 一致性：同类型控件的可交互性表达（视觉和动效上）应具有一致性。从平板/PC向电视、AR/VR使用场景扩展时，不同设备间控件的悬浮态也应具备一定程度的表达一致性。

在悬浮态下，界面元素要表达其可交互的热区

图形界面中可能存在很多界面元素其视觉可见部分和实际可（触控）交互的热区相差很大。在此类场景下，光标悬停时准确表达可交互的热区有利于用户感知元素有效的触发区域，并进而提高交互的效率。

界面元素的悬浮态效果类型

HarmonyOS 具有2种默认的界面元素的悬浮态效果：浮起和背板高亮。

1. 浮起：当光标进入对象时，对象放大；离开时，对象尺寸恢复。尺寸变化过程中辅以过渡动画使体验流畅。浮起的效果一般适用于可见部分和实际热区大小接近、有背景填充、且在布局上与其它元素不相邻的控件，典型的控件类型包括强调按钮、导航点、勾选等。
2. 背板高亮：当光标进入对象时，对象底部叠加颜色色块。整体上，背板高亮的效果根据控件类型可分为两类：

• 对于视觉可见部分和实际可交互热区范围相差很大的控件，浅色的圆角矩形叠加于内容底层以高效表达其热区。此类控件通常无背景填充，典型的类型包括文本按钮、工具栏、Tab栏等。

• 对于有明显边界的容器类控件，比如列表、卡片、菜单等，当光标进入控件时，仅改变控件背板颜色以表达其可交互性。

展示附加信息

当光标移动到界面元素上时，在以下场景中，可考虑通过显示附加信息来提升光标体验。

1. 受限内容预览：例如在邮件、日历、备忘录等应用中，当光标悬停在内容列表/网格上时，可以通过悬浮窗显示更多的内容详情，方便用户进行快速预览和选择。
2. 精确位置显示：例如在截图、设计、办公应用中，当光标悬停在某些对象上时展示位置、尺寸等数值，便于用户进行精细控制。
3. 控件功能提示：如果一个界面元素其功能的自我解释性较差，则可通过文本提示进行告知。

应谨慎使用悬停展示附加信息的功能。在使用时，展示的附加信息必须是必要的或能明显提升用户体验的。在使用展示附加信息的方案之前，应优先考虑界面的清晰性、简洁性和表达性，以便用户无论是使用光标输入方式还是在直接用手指触摸交互，都可以很容易且舒适地使用应用。

精细化操作

光标交互区别于手指触摸交互的一个重要方面是光标支持精细化操作，设计师可考虑如何利用这一特性配合特定的光标形态来简化交互任务和提升生产力。

光标移动

应优化光标移动的显控比以提升其指向的速度和准确性。用户在使用光标指向目标时，可分为弹道加速和减速修正两个阶段。以鼠标为例，在弹道加速阶段，当焦点离目标较远时，用户快速移动鼠标以缩短光标与目标之间的距离，此时速度的重要性优于精度控制；在减速修正阶段，当光标离目标较近时，用户降低鼠标的移动速度，更为仔细的瞄准目标，此时精度控制重要性优于速度。

基于焦点的交互

当用户使用键盘、电视遥控器、车机摇杆/旋钮等非指向性输入方式与应用程序进行间接交互时，基于焦点的导航和交互是重要的输入手段。

本节描述了基于焦点交互的通用设计规范，针对各输入方式的细化的焦点交互方法请参考各输入方式的具体章节。

基本原则

内置支持

控件原生支持走焦操作，设计师和开发者可以针对具体的应用场景对是否获焦、焦点顺序进行调整。

提供初始

初始焦点的位置需明确、突出，让用户有效地识别该位置，以便顺利开始走焦操作。

焦点的默认位置与界面层级与内容相关，确认默认焦点的规则如下：

1. 层级优先，最顶层的界面优先。
2. 核心操作优先，根据应用提供的服务决定默认操作。
3. 内容优先，遵循从上至下从左至右的方向规则。
4. 不要在未加载完毕的区域显示默认焦点。

可遍历

为完成所有交互任务，焦点需要能够遍历所有可获得焦点的界面元素，以保证功能的完整性。

按区域获得焦点提高走焦效率

在由多种控件组成的可划分明显区域的界面中，可精简 Tab stop 的数量以提升走焦效率。

Tab stop 与普通焦点的异同（以键盘操作为例）：

• Tab stop：可以用 Tab 键获得焦点的控制元素，一般情况下，一个区域的首项为该区域的 Tab stop。

• 普通焦点：不在 Tab 走焦序列之中，但在区域内可以通过方向键移动获得焦点。

另一个典型的需要考虑区域获焦的场景是在车机上通过旋钮和摇杆/方向键的配合使用来快速移动焦点。例如使用摇杆/方向键来切换页面、层级和区块，使用旋钮切换每个可点击的元素。

应根据输入方式的支持情况决定是否开启按区域走焦，如无Tab键或其等价键支持，则不能开启区域间快速移动操作，此时，只能在单个焦点间遍历（Tab stop 数量与可获得焦点元素数量相同）。

走焦顺序

依据用户界面的形态和输入方式的不同，走焦场景可基本分为三类：绝对顺序走焦、相对方向走焦、和插入符走焦。

绝对顺序走焦

存在一个确定的走焦顺序，所有可获焦元素都会按照在屏幕上显示的顺序或指定的顺序进入走焦顺序中。例如：当使用键盘时，Tab键选择下一个焦点，Shift+Tab键选择上一个焦点。

在设计应用时，可按照功能分区、视觉呈现等规则重新组织焦点顺序。

基本规则：

• 用户只能按照给定的焦点顺序移动焦点。

• 提供两种操作次序：正序和反序（例如键盘上的Tab和Shift+Tab，车机旋钮的右旋和左旋）。

• 一般来说，焦点列表首尾相连。

相对方向走焦

按照可获焦元素的分布方向关系进行走焦，存在多种不同路径的走焦顺序。

用户输入方向信息，系统通过某种算法计算出在相应的视觉方向上应获得焦点的元素，并使其获焦。典型场景为使用遥控器上的方向键与电视交互。

共用底层导航机制：

1. 无论输入方式是键盘、遥控器，或触摸板、摇杆等其他方向操作模拟设备，基本操作逻辑都保持一致。
2. 不同的导航策略将影响用户在按下方向键时下一个焦点的选择。

基于方向和距离优先的判断方法：

1. 收到用户按键输入
2. 将当前焦点边缘向该方向扩展
3. 第一个可投射至该扩展区域的即是目标焦点位置
4. 此时如果有多个候选焦点，选投影距离最短的那个
5. 如果仍有多个候选焦点，按照从上到下/从左到右的规则进行筛选

在绝对顺序走焦中嵌入相对方向走焦区域

此类导航设计主要有两个目的：

1. 提升操作效率。绝对顺序走焦可遍历所有可交互控件，在元素较多的情况下效率不高。
2. 使走焦顺序更具有逻辑性。按照功能组织分区，将逻辑顺序与视觉分区进行匹配，用户更容易学习。

优化策略1：

在相对方向区域内支持方向键导航，如上图所示，使用右键将焦点从B移至C，使用左键将C移至B；方向键只能在当前层级内使用，不能用于跳出区域，如：焦点位于C时，按右键无响应。

优化策略2：

为每个区域指定一个默认Tab次序，使用Tab键能快速在区域间跳转，如：将A的TabIndex设置为1,B的TabIndex设置为2,D的TabIndex设置为3，则按Tab键的走焦顺序为A->B->D，可以不再遍历所有焦点，而在每个区域内可以使用方向键进行遍历，提供了一个效率更高的融合走焦方式。

插入符走焦

针对文本处理的操作，以插入符为操作指引，通过方向键移动、选择，常见于文本处理类、表格应用或控件之中，通常用来配合支持一些常见的文本操作类快捷键。

其它注意事项

对于支持触控交互或光标交互的系统，焦点仅在系统检测到用户正在使用特定的输入方式进行走焦操作时显示，避免视觉上的干扰。

在走焦操作状态下，如果检测到用户将输入方式切换为触控交互或光标交互，界面上的焦点视觉元素应自动隐藏。

鼠标

鼠标是一种典型的基于光标的、具备像素级精度的指向型输入方式，最为适用于对用户交互具有较高精度要求的生产力应用和高密度UI的场景。

一般地，鼠标由左键、右键和滚轮键组成，这些按键的交互应遵循业界标准的规范功能和用户的既有使用习惯。鼠标也可以通过和不同的键盘按键进行结合，提供额外的快捷操作体验。系统级一致的鼠标交互包括：

操作	预期行为
移动	移动光标，光标在不同元素界面上呈现和表达悬浮态样式，参考基于光标的交互
左键点击	选择或启动一个项目的主功能（例如点击按钮启动应用或执行命令）
右键点击	展示上下文菜单（对应于触屏上长按）
滑动滚轮	沿上下方向或左右方向滑动或移动页面内容
左键按下并移动	拖拽对象或在一定区域内选择对象
按住Ctrl键同时滚动鼠标滚轮	缩放对象

鼠标与触摸交互的关系

在很多场景下，应用程序需要同时支持触屏交互和鼠标交互。

手指触摸交互通过对界面对象执行的物理世界真实的手势（例如滑动、旋转等）来模拟直接在屏幕上操作这些UI对象的能力。而鼠标受限于其间接交互的性质和仅有一个指针响应位置的特点，在一些交互任务上并不适合将手指触摸和鼠标按下操作完全对等。

1. 在一般的选择或启动对象上，鼠标左键点击可以直接等同于触屏上手指点击。
2. 在其它场景下，应优化应用以适配鼠标的交互习惯以提高生产力和用户体验的一致性。例如，上下文菜单应通过右键单击来快速触发，而非模拟触屏上手指长按的左键长按；

拖拽对象时，允许鼠标左键按下即可拖拽，而无需长按才能触发拖拽状态；

尽量通过滚轮来控制页面的滑动和切换，而非左键按下后沿一定方向移动鼠标（这对用户来说是一个效率低下且难以控制的行为）。

关于更加详细的具体场景下触摸交互和鼠标交互的对应和转换关系，请参考交互事件归一。

关于光标和界面对象的悬浮态表现，请参考基于光标的交互。

触控板

触控板同时具备多指触控手势输入（触屏）和精细化指向型输入（鼠标）的特性，使得触控板既适合用于基于触摸交互优化的用户界面，也适合用于对指点精度有较高要求的生产力应用。

在为你的应用设计或适配触控板交互时，触控板交互应满足用户手眼分离状态下（眼睛看着屏幕，手在触控板上盲操作）的使用习惯，应遵循以下原则：

1. 触控板应该能起到取代鼠标的作用。
2. 应用在触屏上的手势操作功能可通过在触摸板上相应的手势来实现。

操作	预期行为
单指轻触后移动	移动光标，光标在不同元素界面上呈现和表达悬浮态样式，参考基于光标的交互
单指单击	选择或启动一个项目的主功能（例如点击按钮启动应用或执行命令）
双指单击	展示上下文菜单（对应于触屏上长按和鼠标右键点击）
双指轻触后移动	沿某一方向滑动或移动页面内容（对应触屏上单指滑动操作）
单指按下并移动	拖拽对象或在一定区域内选择对象
双指远离和捏合	缩放对象
双指旋转	旋转对象
多指手势	系统导航

关于更加详细的具体场景下触摸交互和触控板交互的对应和转换关系，请参考交互事件归一。

关于光标和界面对象的悬浮态表现，请参考基于光标的交互。

键盘

键盘是一种重要的生产力输入方式，优秀的键盘使用体验应允许用户快速准确地进行文本输入、双手无需离开键盘即可在系统和应用内进行导航、访问所有的功能、以及支持无障碍体验。

走焦导航

焦点导航和交互方式、焦点划分和走焦顺序等设计原则请参考基于焦点的交互。

基础和标准快捷键

应结合应用场景提供必要的快捷键支持（例如：按键导航相关、剪切/复制/粘贴等），基础设计原则为：

1. 以传统PC为兼容对象，根据设备情况和应用场景进行裁剪。传统PC有最庞大的用户基础，用户习惯难以改变。但同时应移除过于复杂、频率较低、或缺乏设备使用场景的快捷键组合。
2. 新增快捷键支持。针对华为特有应用或功能（例如：分屏、多终端等）增加直接入口。
3. 以融合PC为目标为触屏手势操作添加快捷键支持，提高生产力（例如：打开通知栏、控制中心、显示/隐藏Dock等）。

类型	操作描述	快捷键
全局快捷键	系统功能	Home/显示桌面	LOGO+D / LOGO+H
Back/上一级	ESC / LOGO+Backspace
Recent/切换任务窗口	LOGO+Tab / Alt+Tab
通知中心	LOGO+N
锁屏	LOGO+L
搜索	LOGO+S / Ctrl+F
切换语言/输入法	LOGO+Space
截屏	LOGO+Shift+S
智慧分屏	LOGO+X
全屏/多窗口切换	LOGO+W
键盘走焦	将焦点移至下一个/上一个可获焦控件	Tab / Shift+Tab
按照指定方向移动焦点/光标	上/下/左/右
切换当前选择的复选框、单选按钮、开关控件的状态	Space
激活获焦的按钮/菜单项等	Enter
常见操作	剪切选中内容至剪贴板	Ctrl+X
复制选中内容至剪贴板	Ctrl+C
粘贴剪贴板内容至当前位置	Ctrl+V
撤销最后一次操作	Ctrl+Z
在当前焦点控件/窗口内选择所有项目	Ctrl+A
选中项的上下文菜单/激活多选	LOGO+Shift+C
进阶操作	格式相关	加粗	Ctrl+B
下划线	Ctrl+U
斜体	Ctrl+I
系统功能	关闭当前焦点窗口	Alt+F4 / Ctrl+W
搜索	Ctrl+F
弹出当前选中对象的上下文菜单	Shift+F10 / Menu
打印	Ctrl+P
Web浏览器	选择并聚焦地址栏	Ctrl+L / Alt+D
刷新	Fn+F5 / Ctrl+R
Tab类操作	新建Tab	Ctrl+T
关闭当前Tab	Ctrl+W
常用操作	重做最后一次操作	Ctrl+Y
特殊粘贴	Ctrl+Shift+V
高阶操作	系统功能	新建文件夹	Ctrl+Shift+N
应用菜单	LOGO
登出当前用户	Ctrl+Shift+Q
任务管理器	LOGO+Esc
重命名选中对象	F2 / Enter
文本编辑	删除光标左侧的词组	Ctrl+Backspace
去往行首	Home / Fn+←
去往行末	End / Fn+→
去往文档之首	Ctrl+Home / Ctrl+↑
去往文档之末	Ctrl+End / Ctrl+↓
前一词	Ctrl+←
后一词	Ctrl+→
前一行	↑
后一行	↓
去往下一个结果	F3 / Ctrl+G
去往上一个结果	Shift+F3 / Shift+Ctrl+G
资源管理器	去往地址栏	Ctrl+L / Alt+D
去往历史中前一个位置	Alt+←
去往历史中后一个位置	Alt+→
去往起始页（由用户或应用定义）	Alt+Home
Web浏览器	给Url添加www.+.com	Ctrl+Enter
将当前页加入书签	Ctrl+D
选择并聚焦搜索栏	Ctrl+E / Ctrl+K
刷新（忽略缓存）	Ctrl+F5 / Ctrl+Shift+R
Tab类操作	去往下一个Tab	Ctrl+Tab
去往前一个Tab	Ctrl+Shift+Tab
去往第n个Tab	Ctrl+n (n为Tab位置，最大为9)
重新打开之前关闭的Tab	Ctrl+Shift+T
窗口类操作	关闭当前应用的所有窗口	Alt+Shift+F4 或 Ctrl+Shift+W
退出当前窗口的应用	Ctrl+Q
打开Dock中的应用	LOGO+# (#是程序在Dock栏中的位置，最大为9)
控件与Widget	弹出当前控件的工具提示	Shift+F1
显示与当前控件/窗口相关的帮助	Shift+F1
将焦点移至下一个/上一个窗格	Ctrl+F6 / Alt+F6
将焦点移至窗口的菜单栏	F10 / Alt
在选中的Widget内选择/移动至第一个/最后一个项目	Home/End
可访问性	允许用户使用快捷键时一次输入一个按键	连按Shift键5次
停止/减慢当按键被按下时重复字符的速度	按住右侧Shift键8秒

自定义快捷键

在一些场景下，用户可能更习惯于通过键盘来访问系统和应用功能，例如在生产力软件中通过键盘快捷键来提高使用效率，部分残障人士也更偏好使用键盘来进行交互。因此，请确保应用中核心功能支持仅通过键盘操作即可访问。

1. 对菜单中的功能提供键盘快捷键访问支持：键盘快捷键经常和应用内菜单中的功能关联出现，应允许用户通过键盘快捷键访问这些功能。例如图库应用中照片列表支持通过快捷键进行全选、删除、复制、分享等操作。
2. 对应用中其它核心功能提供键盘快捷键访问支持：应用中某些常用的功能没有对应的菜单项，也需要相应的快捷键支持，这类功能往往和控件上的直接操作对应。例如在聊天页面中，应将Enter键与发送按钮的单击操作相关联，允许用户在文本框输入消息内容后可以通过按Enter键来直接发送内容。
3. 与系统标准快捷键相兼容：在所有应用中，对于标准功能，快捷键的设计应与系统标准快捷键的定义一致。另一方面，在应用内尽量避免对标准快捷键的功能进行重新定义，否则将对用户的使用造成混淆。

手写笔

在触屏上，手写笔是手指精细化操作的延伸，是一种像素级精度的指点设备。手写笔提供了一种直接的、自然的方式来进行数字内容书写、绘图和标注。目前手写笔分有无物理按键两种笔型，支持系统级一致的交互：

有物理按键

操作	预期行为
按住功能键画S型	截长屏
按住功能键圈画封闭性图形	局部截图
按住功能键单击屏幕	在熄屏状态下用笔点击屏幕，可快速打开备忘录书写
按住功能键长按屏幕	智慧识屏，长按可识别屏幕内容
按住功能键画直线	按住手写笔的功能键，屏幕中间画横线可直接进入分屏功能

无物理按键

操作	预期行为
用笔点击屏幕	在熄屏状态下用笔点击屏幕，可快速打开备忘录书写（需系统默认开启双击亮屏功能，后才可执行该功能。）

手绘套件开放

Pencil Engine：将手写效果能力以插件化方式集成，为应用开发者创造更多的手写应用场景。支持多种笔刷（圆珠笔、钢笔、铅笔、马克笔）选择、多色调色版；能设置笔刷颜色、粗细、撤销、恢复、擦除、套索等笔迹编辑能力。应用利用多笔刷可满足用户日常所有的笔记和绘图、涂鸦等需求，能达到较好的文字书写体验。

隔空手势

隔空手势（非接触手势）是一种人与设备交互的新方式，用户可以在无需手持或接触设备的情况下与设备进行便捷的交互。随着技术的发展，隔空手势在手机、平板、车机、电视、音箱、AR/VR等设备上都有一定的应用。通常情况下，快捷手势通常是符合用户直觉、文化习惯或者容易操作的动作。

设计原则

巧用隐喻建立联系

利用手势本身的含义，将于功能与有相近含义的手势建立联系，进行隐喻，从而让用户更容易接受与记忆。

基于原有交互习惯进行延伸

基于用户已有的交互习惯进行延伸，能降低用户的进入难度，用户在使用新的交互方式时自然而然会产生亲切感；将会减少用户的学习、记忆成本。

尊重各国文化，避免手势禁忌

应避免不同地域的手势禁忌问题，手势功能应与人们理解的更一致，从而让用户更容易接受。

设计疲劳度低的手势

避免太长时间、太精细的操作；另外在长时间交互时，长时间的悬停，会使疲劳度增高，手势疲劳度从小到大依次是：手掌<小臂<大臂。

常用隔空手势

快捷手势对应的功能一般也为用户常用的高频功能，在 HarmonyOS 中主要有以下几种：

交互事件归一

本章节描述了在多种交互任务或场景下，应用在触屏上和其它常用的输入方式（例如鼠标、触摸板、键盘）上分别对应的正确的交互规则。设计师和开发者应保证在当前输入方式下应用能够以正确的、符合用户习惯的交互规则进行响应。

打开/切换对象

应用场景

用户通过点击某个元素触发功能、访问新页面、或改变自身状态。

一般地，触屏手指的按下/抬起行为对应于光标的按下/抬起行为。

在一些特殊场景，可能会存在使用鼠标/触摸板双击打开对象的交互方案，例如电脑模式下打开桌面应用或文件。此类情况需由应用单独特殊处理，且同一功能不能同时支持单击和双击两种交互方式。

显示菜单

应用场景

某个元素上显示弹出菜单或快捷方式菜单。

输入方式	交互行为
触屏	单指长按
鼠标	右键单击（与PC一致）/ 左键长按（保留触屏习惯）
触摸板	双指轻单击/重单击（与PC一致）/ 单指重长按（保留触屏习惯）
键盘	/

这里的菜单指的是广义的菜单，即用于展示用户可执行的操作的临时性弹出窗口。

凡是在触屏上通过长按显示的菜单，都需要支持鼠标右键单击和触摸板双指单击的触发方式。

选择对象

应用场景

用户在触屏上通过长按操作进入多选，一般用于列表或宫格界面。

输入方式	交互行为
触屏	单指长按
鼠标	右键单击、左键长按（保留触屏习惯）
触摸板	双指轻单击/重单击、单指重长按（保留触屏习惯）
键盘	Ctrl键+光标点击

使用鼠标和触摸板选中某个项目时可以同时显示上下文菜单（可选）。

滑动对象

场景1：连续滚动列表和页面

输入方式	交互行为
触屏	手指接触屏幕后滑动
鼠标	滚轮向上滚动，页面向上滚动。滚轮向下滚动，页面向下滚动。滚轮每滚动1个刻痕，页面相应滚动一段距离，默认为64vp，应用也可自行设定。
触摸板	触摸板上双指滑动行为与触屏上单指滑动行为一致。双指向上滑动，页面向下滚动。双指向下滑动，页面向上滚动。双指滑动时，页面进行精细、连续的滚动；当双指离开触摸板时，页面根据离手速度继续进行减速滑动直到停止。若列表是横向列表，则双指向左滑动，页面向右滚动；双指向右滑动，页面向左滚动。
键盘	当列表项处于获焦状态时，按向下方向键焦点移动到下方列表项上。若下方列表项在当前页面显示不全或无显示，则其在获焦的同时列表向下滚动使其恰好能够被显示完整。向上移动焦点时，交互逻辑相同，仅方向相反。

场景2：横向/竖向切换页面/对象

每次操作仅滚动一项。

输入方式	交互行为
触屏	手指接触屏幕后沿左右/上下方向滑动一次
鼠标	滚轮向上滚动1个刻痕，切换到上一项。滚轮向下滚动1个刻痕，切换到下一项。典型场景：小视频播放，禁止出现上下两个视频卡在中间的情况。
触摸板	触摸板上双指滑动行为与触屏上单指滑动行为一致。竖向分布：双指向上滑动1次（从手指接触到离开触摸板为1次滑动操作），切换到下一项。双指向下滑动1次，切换到上一项。典型场景：小视频播放横向分布：双指向左滑动1次，切换到右一项。双指向右滑动1次，切换到左一项。典型场景：浏览图片时切换图片，banner上卡片切换、桌面导航。
键盘	/

场景3：调节滑动条

输入方式	交互行为
触屏	手指接触滑动条后沿其分布方向左右/上下滑动
鼠标	光标移动到滑动条上后：对于间续滑块：滚轮每滚动1个刻痕，滑动条数值变化为其一个增量。对于连续滑块：滚轮每滚动1个刻痕，滑动条数值变化为a，a由应用根据具体场景设定。鼠标滚轮滚动可控制横向和竖向的滑动条。
触摸板	触摸板上双指滑动行为与触屏上单指滑动行为一致，光标移动到滑动条上后：对于竖向滑动条：双指上滑，滑动条数值增加。双指下滑，滑动条数值减小对于横向滑动条：双指右滑，滑动条数值增加。双指左滑，滑动条数值减小优化双指在触摸板上的滑动距离和滑动条数值变化的比值（显控比），以使用户能够轻松、快速、准确地调节到目标数值。
键盘	/

场景4：调节滑动选择器

输入方式	交互行为
触屏	手指接触picker后上下滑动
鼠标	光标移动到 picker上后：滚轮每向上滚动1个刻痕，picker滚动1项，上方项替代当前项。滚轮每向下滚动1个刻痕，picker滚动1项，下方项替代当前项。
触摸板	触摸板上双指滑动行为与触屏上单指滑动行为一致，光标移动到滑动条上后：双指上滑，列表滚动，下方项替代上方项。双指下滑，列表滚动，上方项替代下方项。优化双指在触摸板上的滑动距离和picker滚动行为之间的关系，以使用户能够轻松、快速、准确地调节到目标数值。
键盘	/

当滑动条/picker嵌套在可滑动页面和列表中时，两者都可用鼠标和触摸板进行滑动，在使用光标指向型设备时应保证两者的兼容性。

这种情况下：

• 每次光标位置移动后，根据光标的位置决定响应的控件。

• 如果进行滑动操作前，指针位于滑动条/picker 上，则滑动条/picker 进行调节，列表不滚动。

• 如果进行滑动操作前，光标位于列表上，则列表进行滑动，而滑动条/picker 不响应，即使在列表滑动过程中光标进入 滑动条/picker 的有效范围内。

• 在某次滑动后，如果光标位置在屏幕上发生变化，则重新进行判断。

场景5：自定义滑动

其它更多自定义触摸滑动行为，比如在视频播放界面调节音量/亮度、滑动返回等。在操作不冲突的前提下，鼠标和触摸板应也应支持相应的交互。

输入方式	交互行为
触屏	手指接触屏幕后沿某一方向滑动
鼠标	支持手指竖向滑动对应的交互。光标移动到对象上后：鼠标滚轮上滑，对应触屏上手指上滑操作。鼠标滚轮下滑，对应触屏上手指下滑操作。典型场景：视频播放时调节音量和亮度等。
触摸板	触摸板上双指滑动行为与触屏上单指滑动行为一致，支持手指横向和竖向滑动对应的交互。光标移动到对象上后：触摸板双指上滑，对应触屏上手指上滑操作。触摸板双指下滑，对应触屏上手指下滑操作。典型场景：视频播放时调节音量和亮度，滑动返回等。
键盘	/

应优化鼠标滚轮滚动次数/双指在触摸板上的滑动距离和对象行为之间的关系，以使用户能够轻松、快速、准确地控制对象

刷新页面

应用场景

用户在触屏上通过手指滑动对列表/页面进行下拉刷新。

输入方式	交互行为
触屏	手指接触屏幕下拉一定距离后松手。
鼠标	当列表到达顶部时，再次滚动鼠标滚轮可能会引发下拉刷新。引发刷新的条件为：鼠标滚轮连续滚动次数 ≥N 且任意两次滚动事件之间的事件间隔均 ＜T，此时发出指令列表开始刷新。在一次刷新过程结束前，列表不响应从第 N+1 次开始的的滚轮滚动事件。直到列表回弹至原顶部位置，可以开始下次下拉刷新。
触摸板	触摸板上双指滑动行为与触屏上单指滑动行为一致。当列表到达顶部时，双指向下滑动会继续拉动列表并显示loading转圈动画，当手指离开触摸板时，若下拉小于规定距离，松手后直接回弹；若下拉超过规定距离，触发刷新动画和应用刷新事件。
键盘	Ctrl+R

缩放对象

应用场景

查看图片时调整图片大小。

输入方式	交互行为
触屏	两个手指在屏幕上向外扩展以放大内容，向内收拢以缩小内容。
鼠标	按下 Ctrl 键同时滚动鼠标滚轮，可按照光标位置放大或缩小内容。鼠标滚轮上滚，每滚动1个刻痕，以光标位置作为中心对象放大N倍。鼠标滚轮下滚，没滚动1个刻痕，对象缩小到当前大小的1/N倍
触摸板	触摸板上双指捏合行为与触屏上双指捏合行为一致，当光标移动到对象上后：触摸板双指向外扩展以放大内容。触摸板双指向内收拢以缩小内容。优化显控比，以使用户能够轻松、快速、准确地调节到目标尺寸
键盘	Ctrl+加号键：以对象的中心点使对象放大N倍。Ctrl+减号键：以对象的中心点使对象缩小到1/N倍。

旋转对象

应用场景

编辑图片时旋转图片。

输入方式	交互行为
触屏	两个手指在屏幕旋转，对象跟随旋转。
鼠标	/
触摸板	触摸板上双指旋转行为与触屏上双指旋转行为一致，当光标移动到对象上后：触摸板双顺时针旋转，对象跟手顺时针旋转。触摸板双逆时针旋转，对象跟手逆时针旋转。
键盘	/

有些场景中触屏上双指可以同时进行缩放和旋转操作（如图片/地图浏览），触摸板应同步支持。

拖拽对象

输入方式	交互行为
触屏	长按某对象后触发可拖拽状态，然后移动手指改变对象位置。
鼠标 / 触摸板	鼠标左键或触摸板单指按下即可拖拽对象（无需长按等待）。
键盘	/

视觉风格

基础概念

虚拟像素单位：vp

虚拟像素(virtual pixel)是一台设备针对应用而言所具有的虚拟尺寸（区别于屏幕硬件本身的像素单位）。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。

使用虚拟像素，使元素在不同密度的设备上具有一致的视觉体量。

字体像素单位：fp

字体像素(font pixel) 大小默认情况下与 vp 相同，即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在 vp 的基础上乘以 scale 系数，即 1 fp = 1 vp * scale

色彩

HarmonyOS 色彩系统的目标是为所有人群而设计，我们关心每个用户的体验，站在不同人群的角度思考问题，做到感同身受的体验设计。色彩本身没有好与坏、对与错。产品设计里的色彩，取决于如何正确合理地使用它们，就像我们绘画时调色盒里的颜色一样，能否绘出优秀的作品，取决于作画者如何正确地运用色彩。

品牌色

色彩能够赋予应用界面足够的生动性，并给用户提供视觉感官上的连续性。同时，合理地运用色彩可以传达关键的状态信息，给予用户即时的状态反馈以及数据可视化呈现。

HarmonyOS 采用蓝色作为系统的主色调。根据人因研究，对蓝色的接受度无论是在男性还是女性群体中，比例都是最高的。而在世界地域维度，蓝色也是最受欢迎的颜色。更重要的是，对于大多数色觉障碍人士，蓝色依然可以被辨识，这满足了 HarmonyOS 为障碍人群而设计的要求。

宇宙蓝

我们选择更为深邃广阔的宇宙蓝，无边无垠的蓝深邃如宇宙，为系统带来宇宙初开的纯净与宁静。

色值及使用场景

在色彩设计上，既保持统一的色彩语言，又根据多端不同的使用场景做了调整，带来定制化用户体验。

雪域灰

自然里面，没有绝对的黑也没有绝对的白，以带有淡蓝色相的雪域灰作为卡片界面的背景颜色来烘托界面的纯净感。

宇宙蓝与雪域灰，苍穹与大地，两者相配合，使得整个界面更加干净、和谐。

雪域灰可用于卡片界面的底色来衬托卡片层级感，或者可用于深色主题下的前景颜色，使深色场景的前景与背景对比度不会过高，减轻视觉刺激。

主题风格

HarmonyOS 设计了浅色主题、深色主题、半透明主题三种不同的主题样式，设备和应用可以选择合适的主题风格来呈现界面。例如：

• 手机建议主要以浅色主题为主，其他主题为辅。当用户有需要的时候，也可开启深色模式将浅色主题的应用界面切换为深色主题样式。

• 智慧屏的使用场景较为固定，多为室内观看，所以大屏主题风格选择了深色主题为主。

• 智能穿戴设备采用深色主题为主，可以为穿戴设备降低电量消耗。

字体

全新 HarmonyOS 字体

通过研究用户在不同场景下对多终端设备的阅读反馈，综合考量不同设备的尺寸、使用场景等因素，同时也考虑用户使用设备时因视距、视角的差异带来的字体大小和字重的不同诉求，我们为 HarmonyOS 设计了全新系统默认的字体——HarmonyOS Sans。

下载 HarmonyOS Sans

全新字体笔画设计

在保障字体体验的功能性前提下，我们在人文和现代中找到新的平衡。在短笔画时保持横平竖直，简约无装饰，撇捺弯钩长笔画中融入书法的笔势美学，带来全新的视觉感受。

优化字体灰度，提升阅读体验

在不同设备的应用场景下，字体的灰度会影响在弱光环境、小字号、远距离下的识别性。因此我们优化字体的灰度，让新字体在不同场景下具有更好的识别性和阅读体验。

统一多语言字形风格

我们重新设计了中文、拉丁文、希利尔文、希腊文、阿拉伯文的字形样式，支持100+语言，让多语言下阅读体验更加一致。

HarmonyOS 字体特性

动态字重粗细调节

HarmonyOS Sans支持可变特性，让用户选择他们喜欢的字体粗细来进行文本的显示。

支持更多字重能力

HarmonyOS Sans增加了Thin、Light、Bold、Black的字重能力，开发者可以选择需要的字重来构建界面的信息层级。

等宽与变宽数字字体

HarmonyOS Sans支持变宽和等宽两种样式。文本混排中使用系统默认的变宽数字，在阅读文本段落中能让阅读体验更加连贯。而等宽时钟数字在需要强调数值以及数据需要经常变化的表格和时钟数字的场景中使用时，可以保持数字字宽的对齐，同时更具图形化的呈现可以在界面中脱颖而出。

支持时钟字体特性

HarmonyOS Sans支持时钟字体特性，冒号格式会根据时间格式自动调整位置。

字体排版

多设备字号层级

选择合适的字号有助于定义内容的信息层级，以及达到内容的可读性。通过研究全场景设备的显示环境、用户使用时环境的差异，我们为不同设备形态定义了一套构建信息层级的字号系统。

文本对齐规则

不同的文本对齐方式可以引导用户的视觉流向。在段落文本中文本超长换行默认使用左对齐的方式，因为人的浏览视线都是从左往右移，因此大段需要阅读的文案，采用左对齐的方式排版有利于用户快速定位，保证良好的阅读体验。相对于更常见的左对齐，居中对齐可以更容易获得用户的注意力，因此在标题上、空页面的描述文本以及在插画的引导页上使用居中对齐可以更有效地抓住用户眼球。

图标

图标是操作系统与用户界面关键的视觉元素之一。图标应当具备直接识别关键信息或语义的特质，帮助用户轻松辨别图标所代表的含义。为了保证用户在不同的设备中视觉体验的一致性，在图标的设计上应当保持应用图标的元素一致，再根据不同的设备匹配对应的图标背板以适应于各种场景。除此之外，图标在颜色的使用上应当遵循 HarmonyOS 的色彩规则，满足用户阅读的舒适度以及整体界面的和谐程度。对于面状图标与线状图标的使用也应当遵循系统的设计规则，两种样式使用同一种图形结构，降低用户阅读时再次识别的成本。

设计原则

HarmonyOS系统图标追求精致简约、独特考究的设计原则，主要运用几何型塑造图形，精简线条的结构，精准把握比例关系。在造型和隐喻上增加年轻化的设计语言，使整体风格更加年轻时尚。避免尖锐直角的使用，在情感表达上给用户传递出亲近、友好的视觉体验。

图形特征

1. 描边粗细：1.5vp
2. 终点样式：圆头
3. 外圆角：4vp，内圆角：2.5vp
4. 断口宽度：1vp

命名逻辑顺序样例： ic_模块_功能_位置_颜色_状态_数字

ic_模块_功能，为必选项；位置_颜色_状态_数字，可根据实际情况选填。

注： 资源名要求全部为小写字母，长字段可以尽量用缩写，命名中不能有空格，不同字段之间以“_”分隔。

插画

比起文字，插画可以用来表达更丰富的信息，通过视觉图像满足用户情感诉求的同时，更起到增强视觉冲击力和趣味性的作用。

HarmonyOS插画是友好的、令人愉悦的，容易被理解的。包含场景型和功能型两种类型。主要使用在以下场景：帮助引导页、启动页和欢迎页。

场景型插画

浅色主题

深色主题

功能型插画

浅色主题

深色主题

在浅色主题和深色主题上都能良好显示

手和机模的组合使用

动态交互手势

• 动态插画可单独使用

• 静态插画可搭配箭头、手共同使用

布局

布局不是静态固定的，当显示环境发生变化时，如横竖屏切换、调节字体大小、应用分屏时，我们需要及时调整内容的布局方式以适应变化。了解布局的基础概念后，通过自适应布局和响应式布局就可以让你的内容更好地适配显示环境的变化。

布局基础

8vp网格系统

基于 8vp 为网格的基本单位可以对界面上元素的大小、位置、对齐方式进行更好的规划，构建更有层次感、秩序感，以及多设备上一致的布局效果。一些更小的控件（例如图标）大小也可以对齐 4vp 的网格大小。

栅格系统

栅格系统是一个多设备下通用的辅助定位系统，有 Margin，Gutter，Column 三个属性构成。其中 Column 是根据设备的水平宽度自动匹配的（规则见栅格断点系统）。通过栅格系统进行布局，可以达到多设备下布局的一致性。

栅格断点系统

根据设备的水平宽度，栅格系统定义了对应 Column 的数量关系。不同的设备根据自身屏幕水平宽度 在不同的断点范围，系统将自动匹配不同数量的栅格。

自适应布局

自适应布局是通过设定元素与外部容器的相对关系达到的。当外部容器大小、位置等发生变化时，元素即可以根据相对关系自动变化以适应外部环境的变化。

自适应拉伸

文本的显示宽度不是固定值，而是通过相对参照物的方式来确定其显示宽度。当参照物的宽度发生变化时，文本的显示宽度随之发生自适应拉伸。

自适应缩放

组件的显示大小是固比例，通过相对参照物的方式来确定其宽或高。当参照物的大小发生变化时，元素的大小随之发生自适应缩放。

自适应延伸

组件的数量不是固定的，而是通过相对参照物的方式来确定其显示数量。当参照物的宽度发生变化时，组件随之发生自适应延伸显示更多数量。

响应式布局

当基本的自适应布局无法满足多终端上屏幕的体验要求时，我们需要针对不同终端的屏幕特点进行响应式的布局。常见的响应式布局样式有：分栏布局、重复布局、挪移布局和缩进布局。

分栏布局

利用屏幕的宽度优势，将有上下级层级的界面同时左右显示。

当栅格为8column或12column时可以响应分栏布局。

重复布局

利用屏幕的宽度优势，将相同属性的组件横向并列排布。

当栅格为8column或12column时可以响应重复布局

挪移布局

利用屏幕的宽度优势，将原先的上下布局切换成左右布局。

缩进布局

为了在宽屏上内容显示有更好的效果，在不同宽度的设备上进行不同缩进效果。

动效

概述

HarmonyOS 动效引力体系，围绕回归本源设计理念，打造自然、流畅、品质一体的操作体验。

“引力”是自然中普遍存在的一种力，作用于万物并在其中表现出丰富多样的形态。我们将其提炼转化并运用于操作系统的动效设计中。在特征动效中呈现出天体运动“力”的即视感；转场动效表现出物体在运动过程中“力”的秩序感；手势动效打造出元素运动互相影响“力”的控制感。

设计原则

在设计动效过程中，要清楚地理解动效在系统中承载的作用，动效能体现页面的流畅过渡、对象的明确提示、元素的层级关系、产品的品牌印象等。动效要始终围绕操作符合用户心理预期，物体运动符合真实世界，元素表现形态凸显产品的品牌与调性。

自然流畅

流畅性是人对加工信息难易程度的一种主观体验，它指手势触控、视觉感知、心理预期三者合一的综合体验。帧率稳定、响应及时、跟手操作是动效流畅体验的基础要求。

简洁高效

界面元素运动尽可能少且简洁，减少路径及不必要的元素，快速的完成用户的任务，体现性能的快。物体运动到动效设计上，界面元素越多用户所消耗的时间就越长，容易造成慢的体验。

快速响应

高效响应并减少过长的位移和时间。如长距离保持在350ms内，短距离保持在250ms内，较短的动画保持在150ms内完成动作，整体体现动画快速呈现。

运动一致

在动作编排时应遵循运动路径方式一致，避免不一致的运动来分散用户视觉焦点，运用适当的编排手法，引导用户聚焦操作任务。

凸显品牌

通过动效设计为产品增加亮点，它可以为产品带来惊喜的体验及凸显品牌的气质，使它赋予生命力，让产品脱颖而出。通过系统级的元素特效设计，将某一种特效属性贯穿到适合的界面中，营造品牌的氛围感，例如拖尾、融球、发光、磁吸等效果。

动效属性

任何类型的动效都包含三大基本的动效属性：时长、曲线、帧率。这些基本属性形成了动效不可缺少的基本要素。通过组合这些基本的动效属性，可以塑造产品动效的不同风格特点，例如稳重、活泼、轻盈、舒缓等。

时长

时间是产生动效的基本要素，不同类型的元素、场景适用不同的时长，过短或太长都会让用户不适。以下因素详细说明了时长应如何设计以适应不同类型的动效。

单位

动效设计的时长单位一般使用毫秒（ms）表示，1秒=1000毫秒。在帧率（FPS）60帧的环境下，1帧=16.67毫秒。

复杂程度

复杂的动画比简单的动画需要更多的时间来表达，基于图形的特点来进行动画设计。

区域范围

动效运动在一定的范围内进行，小范围内比全屏幕运动所用的时间相对更短。

曲线

曲线与时长相互配合产⽣运动的韵律感。调整曲线能使物体实现加速和减速，⽽不是以恒定的速率运动。在自然定律下，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。

没有缓和曲线的过渡看起来僵硬和机械

贝塞尔曲线

贝塞尔曲线(Bézier curve)是一种数学曲线，在动效设计中广泛使用。从曲线形态的类型上可以分为这几类：标准曲线、减速曲线、加速曲线。

标准曲线

最常用的曲线类型，开始和结束处静止，速度峰值在中段，加速阶段相对于减速阶段用时更少。

使用原则：运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律。

应用场景：图片缩放，Tab切换，Switch开关等。

减速曲线

开始处物体运动速度最快，初始即达到峰值速度，渐渐变缓，在结束处完全静止。

使用原则：适用从视线中新出现的物体，结束时通过相对较长的缓冲让人眼适应运动变化。

应用场景： 弹框出现等。

加速曲线

从静止启动，逐渐加速，在达到峰值速度时结束（出场）。

使用原则：适用原本在视线中的物体，需要消失或出场，逐渐加速符合退场行为特征。

应用场景：窗口出场、卡片删除等。

弹性曲线

弹性曲线(Spring curve)是一种物理曲线，它可以将速度值作为参数输入到曲线公式里，因此同一组参数在不同速度下可以产生差异化的曲线表现；同时弹性曲线通过刚性和阻尼等物理属性参数，产生自然的弹簧效果。

使用原则：适用于进行跟手运动的对象，或是需要表现弹簧特性的对象。

应用场景：列表上下滚动、桌面左右翻页、手势上滑退出应用等。

临界阻尼

当阻尼使对象刚好能不产生振动，又以最短时间到达稳定平衡状态的情况。

帧率

每秒钟显示的帧数即帧率（FPS）。由于人眼的特殊生理结构，所看画面帧率一般高于每秒约10~12帧，就会认为是连贯的，该现象为视觉暂留。但连贯不代表感知流畅，运动较快的动画需要更高的帧率来保障流畅度。

相同时间和位移距离情况下，不同帧率效果对比（90FPS和120FPS受浏览器播放器的限制，可能无法看出差异）

交互类动效帧率

移动设备的屏幕一般使用60赫兹刷新率，动画帧率与其保持一致能让动效呈现最好状态。与观看类动画不同，交互型动效需要更严苛的帧率稳定性，否则易造成体验上的卡顿感受。

纯动画帧率

纯动画（如操作引导动画）的帧率要求没有交互类动效那么严苛，早期迪士尼的手绘动画基本帧率是24FPS，也能满足观看流畅的程度。高帧率的动画则拥有更细腻的视觉体验，特别是针对快速类的动作，细腻度尤为明显。有些动画创作会选择8FPS，这更多的是动画风格上的需要。

风格

通过调整时长、曲线的参数，在转场、特征等动效设计上的差异来表达品牌的动效设计语言。例如较多地使用弹性动画会让产品的动效风格显得更加灵动和活泼。

特征动效

特征动效比其他动效类型有更强烈的动画视觉风格，能让用户感受到鲜明的个性，以及动画本身所传递的魅力，在传递产品设计理念中起着关键的作用。

引力特征动效

打造 “天体拟物感知”。

实例场景

将抽象特征结合视觉进行实例化，在产品相应场景上使用，增强引力特征动效感知。

开场动画

转场动效

衔接页面与页面间或元素与元素间的过渡动画称之为转场动效，帮助用户理解界面以及元素之间的逻辑关系，例如应用打开动效、日程切换动效等。在 HarmonyOS 的转场动效设计上，我们推出了一镜到底的高级转场设计手法，在提升视觉流畅性的同时也增强了动效的品质感。

层级关系

层级关系由系统架构和应用架构定义，它确定了转场动效的交互目的。不同的转场设计会传递不同的交互层级隐喻，不合理的动效编排会让用户误解，从而导致用户主观感受下降，流畅体验感较差。在设计转场动效时，首先要理解应用之间和页面元素之间的架构关系，再运用合适的设计手法完成动效设计表达。

同层级

转场后的页面或元素与当前的在同一层级上。

应用场景：编辑操作、页签切换、横竖屏转场等

上下层级

转场后的页面或元素与当前的存在上下层级关系。

应用场景：上下级页面切换、解锁操作、搜索转场等

跨层级

适用于应用之间的跳转。

应用场景：从一个应用跳转到其他应用操作

运动编排

在界面变化过程中，将各个部分元素进行分类，协调相互之间的运动方式，使整个过程自然流畅，并合理引导用户的注意力。

场景解构

转场是由交互行为引起的界面变化，分析界面元素在过程中的意义，定义其在转场中所在的类型，并将它们进行分类，元素所属的类别会影响它们使用怎样的转场方式，同时也将决定用什么类型的曲线和时长。

• 进场元素：转场中新出现的元素，一般是结果界面上的构成元素。

• 出场元素：转场中消失的元素，一般是上一界面中的构成元素。

• 持续元素：转场中持续存在的元素，可以是元素在布局上的变化，也可以是某种连续性的动画效果，整个过程无中断。

• 静止元素：转场中无任何变化的元素。

一镜到底

一镜到底是通过共享元素、容器和动势来进行转场过渡的一种编排方式，有助于提升用户操作任务的效率，增强视觉的流畅感，是转场设计中重点推荐的技法。

• 共享元素

• 共享容器

• 共享动势

共享元素

共享元素一般是转场前后持续存在的界面元素，即上文提到的持续元素，是在转场发生后希望用户关注到的焦点元素，它增强了转场的连续感。

共享容器

当一组元素在过渡时包含明确的边界，可使用容器来让转换过程有连续感。容器通过大小、高度、圆角等属性进行补间过渡转换，容器内的元素可通过淡入淡出或共享元素的手法进行过渡。

共享动势

无中间属性，无法通过补间变化来实现柔和过渡，需要提取出可用的共享转换属性，来实现前后的平滑过渡。常用的共享运动属性有位移、缩放、旋转等。

淡入淡出

淡入淡出是通过透明度变化来实现过渡转场，适用于无中间属性的组件或元素之间进行过渡变化，可参考以下手法：

单向淡入淡出

在前后层叠的场景中，只有前景元素进行淡入或淡出动作，下方元素无变化。

交叉淡入淡出

存在出场元素与进场元素的场景下，根据元素图形特点进行淡入淡出效果处理。一般进出场元素样式一致或近似，可考虑使用同时进行透明度变化的方式；视觉样式上不同类型的进出场元素，为避免交叠状态带来视觉上的混乱，可适当错开出场元素淡出和进场元素淡入的时机。

多设备编排设计

原则：符合人因，避免动效引起的不适感。

同一类型的动效下，编排方式不一样。例如手机和智慧屏上的差异，手机上使用图标到界面共享容器的方式；智慧屏上采用共享动势的方式来避免过大的位移路径给用户带来不适感

手势动效

手势动效是指手在终端屏幕或触摸板等输入设备上进行跟手操作的动效，大致分为点击、滑动、拖拽等手势，典型的实例场景有手势导航上滑、捏合照片等操作。我们主张无阻塞感的动效设计，结合运用 HarmonyOS 动效物理引擎，将自然属性运用到界面的操作中，比如摩擦力、弹性、碰撞影响等。

概述

手势动效的设计是为了用户在使用交互手势时，交互对象与用户手势建立流畅的操作反馈感，通过弹性曲线等物理模型，还原真实可行的手势操作体验。聚焦在手势操作的常用几个类型：

• 点击

• 滑动

• 翻动

• 夹捏

• 拖拽

点击

点击手势通常包含两个行为：按下（touch down）和抬起（touch up）。按下接触过程平均时长100~130ms中，这期间对象无反馈，为提升响应速度，点击手势动效设计在按下那一刻即响应动效反馈，这一可先行的触控响应机制强化了界面元素的视觉反馈，为用户理解界面状态提供了更多的线索信息。

滑动

滑动手势是指手抬起时带有方向和速度的动作。以列表样式场景为例，主要分为跟手阶段、离手瞬间、离手后阶段这三大部分，跟手阶段着重对象的跟手响应性；离手瞬间需要对象继承手速进行离手后的动画反馈，保证对象动效反馈的结果与手势动作的连贯性是滑动手势动效设计的关键。

翻动

翻动通过抛滑和拖拽手势进行操作，由翻页这类场景承载。翻页是基于设定区域进行对象内容的翻动切换，离手后对象不会处于任一坐标位置上，有明显的限位属性，页在这里等同于设定区域。翻页有成功与否，未成功会停留在当前内容上；成功则显示下一页/几页的内容。为了提示性，翻页也有过界拖拽的场景

捏合

捏合手势是指双/多指合拢或分开的动作，是自然手势的重要体现，分为跟手阶段、离手瞬间、离手后阶段这三大部分，跟手阶段着重对象的跟手响应性，对象需要基于手势动作进行缩放、旋转、移动等反馈；离手瞬间需要对象继承手速进行离手后的动画反馈

拖拽

拖拽手势是指手指按下同时进行移动的动作，动效设计了对象通过拖拽行为进行状态转换的整个过程，这其中包括跟手阶段显控比设计；离手后对象运动曲线以及属性变化设计。

• 标题联动

• 左右横滑联动

• 下拉返回

标题联动

对象主内容区与标题区的联动设计，在主内容区到达顶部边界时继续进行拖拽操作，除了主内容区因过界显控比设计产生的阻尼感，上方的标题区与其产生不同阻尼感的联动设计，让过界拖拽体验更灵动并富有层次感。

卡片左右滑

卡片横向滑动可扩展更多功能，显控比设计让横向拖拽手势在一定距离后产生阻尼感，提示并引导用户进行后续操作。

下拉返回

下拉过程中加入递进的显控比设计，渐强的阻尼感让对象的拖拽手感更富有质感。离手后对象继承手速并按设定进行动画反馈。

微动效

图标微动效一般指系统的小图标动效，主要增强用户操作趣味性，强化操作提示，在适当的场景增加夸张的动态设计，有助于提升产品的趣味性与品质感，如面板开关图标微动效、底部栏图标动效。

作用

微动效设计一般用于图标和小组件上，主要增强用户操作趣味性，强化操作提示。

合理设计

基于图形视觉特点来进行动画脚本的设计，尽量不增加多余的动画细节从而过多的分散操作注意力和影响交互效率。

动画时长

简单或复杂的动画一方面是设计风格的选择，另一方面也基于图形特点的动画设计。复杂的动画比简单的需要更多时间来表现，以下是建议值：

• 简单动画：50~100ms

• 一般动画：150~300ms

• 复杂动画：350~1000ms

插画动效

具有特定的时尚插画视觉风格的动效场景，一般出现在功能的引导页，以引导教学为主，增加插画浏览体验的理解和愉悦感。可以运用多样的设计与开发方式，以权衡当前的内存与性能表现。

作用

通过动画的方式丰富视觉元素所要表达的信息，并串联前后画面，便于用户理解，也使画面表现更富有生命力。

• 引导解读功能信息

• 生动表现插画内容

• 传递品牌风格调性

设计原则

• 匹配静态视觉风格：图形、配色、肌理等视觉手法形成插画风格，动画在设计时需要考虑适合的相关类型，以免产生不和谐的突兀感。

• 符合基本运动规律：插画中会有各类元素和物件，需要考虑元素本身的特质来制作动画，保证动画效果自然且令人信服。

• 满足动画流畅帧率：观看插画动效的帧率通常不低于30FPS，有快速运动元素的可能需要更高的帧率来满足帧间距符合人眼舒适性体验。

• 关注头尾衔接循环：部分动画需要用户操作才会切换，这之前动画通过循环播放来避免停滞发生。

功能引导类

这类插画动效是为了清晰地向用户介绍功能如何使用，一般由操作动画和界面动画两大部分组成，简单明了的动画设计是这类动画的基本要求。

场景介绍类

通过动画让画面更加生动，更好地传递视觉语言，易于用户理解同时增加观看的愉悦感。

声音

概述

声音设计以提升用户听觉体验及优化信息传达方式为主要目的，在人机交互中提供反馈信息，并增强用户的感官与情感体验。

设计原则

• 自然流畅的：好的声音表现应该可以给用户提供足够的舒适与安全感受，符合客观使用场景及主观心里预期，在频繁播放和功能切换时没有突兀的响度变化和非必要的“噪音”存在。

• 通用的：声音的功能性应足够直观且易于理解，层次上足够清晰并具备设计上的可延展性，即在保有个性化功能特质作用的同时满足多场景需求，调性统一。

• 品质的：声音设计的听觉体验应符合具体产品定位及声学美学特征，各频段间的平衡处理方式和采样大小选择需针对终端硬件播放媒介做合理取舍， 最优化混音方式。

多设备场景

人因研究实验表明，生活场景噪音对终端硬件声音存在一定的掩蔽效应，即随着响度的升高而增大，且人耳对不同频率段敏感度不同，着重提升硬件音频1K-3KHz的频段响应有助于提高声音的主观辨识度。

• 移动及穿戴设备：手机、智能手表及平板等终端设备受自身音腔大小限制，低频单元反馈明显受限，且硬件性能差别导致设备间存在明显的频段响应差异，因此针对性的声音校准是必要的调试过程。

• 汽车及家居智能设备：汽车座舱和大型智能家居如智能电视等设备具有较平直的全频段反馈曲线，相较于移动穿戴设备有更丰富的低频动态响应，一般可支持多声道环绕系统，对音频设计缩混规格有一定要求。

类型及规范

以手机为核心的终端产品一般会有四种声音类型：提示类、交互类以及铃声和闹铃。每一种类型的声音都可以以不同的方式对信息和品牌标识进行传达，在听觉维度赋予其个性美感。

提示类音效

• 长度：＜3秒（00:00 ：03:00），（建议原则）。

• 提示音 ：根据系统功能性触发（必要原则）。

• 作用特征：提示音通常用于表示系统级信息、动作及事件，可以增强产品的美学和情感表现，赋予品牌个性。

范例：

• 通知提示：用于系统级通知及事件提醒，声音短促适合频繁播放。

• 成功提示：用于表现事件的达成，如下载成功、任务完成等，常用和谐的上行的音阶化织体表现。

• 失败提示：用于预警的信息传达，如电量不足，传输失败等，保证声音舒适度的同时使用不和谐的音阶符合心里预期。

交互类音效

• 长度：＜1秒（00:00 ：01:00），（建议原则）。

• 交互音 ：根据用户交互动作触发（必要原则）。

• 作用特征：交互音通常作为操作动作和状态的即时反馈，可以辅助提升产品的视觉传达效果和使用体验。

范例：

• 触屏音：常以声音合成方式对用户点击、划动等操作动作进行补充，如按键输入、音量调节等。

• 拍照音：常以真实物理或拟物化声音对用户拍摄场景进行补充，如快门、参数调节等。

铃声

• 长度：20秒左右（00:00 ：20:00），（建议原则）。

• 铃声：在来电时可循环播放的铃声 （必要原则）。

• 作用特征：铃声的声音表现通常含有较明显的产品和品牌调性，常规设计中以器乐化、旋律简洁化为主。

闹铃

• 长度：40秒左右（00:00 ：40:00），可结合设计风格类型进行调整（建议原则）。

• 闹铃 ：在闹铃时可循环播放的铃声 （必要原则）。

• 作用特征：闹铃的声音表现需要兼顾提醒功能和听觉舒适度两个层面，具有一定的音乐性，对比铃声的声音表现更加的柔和。

设计属性

音乐化

音乐主要用于在UI设计环节中增添情绪，由明确的乐音成分做功能性用途，也可与图像或动作匹配。

音乐在UI中的主要用途：

• 引起情感共鸣：音乐上的期待感是激活奖励系统的关键因素，通过不同的节奏强度和对高低频段的差异处理等方式可以与听者建立有效的情感链接。

• 表现产品调性：音乐的风格、展现形式以及特征元素通常与产品的整体定位相吻合，便于传达品牌信息。

• 叙事性功能：通常上扬的音阶具有“成功”、“达成”等积极性暗示，下降的音阶具有“紧急”、“关闭”等终止性暗示。

音效化

音效可以增强视觉化信息的表现能力，也可建立独立的用户交互反馈方式。

音效在UI中的主要用途：

• 将交互场景与特定声音关联：声音具有可被记忆的属性，将场景与声音进行搭配链接有利于降低用户记忆成本并优化操作体验。

• 表达情感及个性：在UI设计中对音效差异性有着鲜明的诉求，这种抽象的声音表现通常由拟音或合成等方式作为原始材料。

• 增强感官反馈：音效可对用户的听觉反馈层面进行补充，有利于产品使用体验的多感官效果提升。

噪音（避免）

在UI设计场景中的“噪音”通常指一类容易引起用户烦躁或干扰性的声音。

常见的引起方式：

• 电流噪音：电流声是电子元器件的不规则运动导致的被放大的电信号，在设计中主要是由不当的拾音过程导致。

• 响度问题：输出音频的响度应根据功能需求保持在合适区间，过高或过低会造成“削波”或频段细节缺失，影响最终声音品质。

• 格式问题：最终音频输出的格式和大小与声音精度和频率问题息息相关，平衡容量大小和避免失真两方面通常需要兼顾考量以最大化产品性能

声音优化

效果调试

均衡（频段均衡）

声音的简单塑形可通过均衡“EQ”实现，其对材料上的处理方式更接近合成器中的滤波器模块，主要目的是通过频段的衰减改变音色。

混响（空间感）

混响是由空间内的直达声以及大量的反射声产生，且受到空间材质的影响不易被察觉，大部分的混响效果处理都是使用特定的算法来模拟声音传播的方式，对声音本身可以增加其空间感，改变其个性，同时可以填充时间或者解决掩蔽效应。

延迟（时间反馈）

延迟效果在设计中主要起到点缀性作用，有反馈延迟和多段延迟两类，区别方式在于使用一个还是多个延迟单元，最基础的两个参数即延迟时间和反馈强度，二者分别决定每一次延迟声音时间上的间隔和声音总的延迟次数。

压缩（动态范围）

压缩效果主要的作用是改变响度的强弱从而减少或压缩音频信号的动态范围，除了声音塑形外针对单个声音材料最重要的是限制器的参数，可以一定程度上的平衡前期拾音过程中每个音频的响度。

音频格式及输出

最优化音频输出

音频文件的最终播放效果会依据不同的硬件产品和软件功能限制而产生变化，需要遵循以最小质量降低的原则进行文件大小的缩减，两者之间通常要进行一定的取舍。

常见优化声音文件大小的方式是降低采样深度和精度，也可以在文件的起始和结尾处删减掉多余的空白部分减少文件大小，在进行有损压缩的同时需要从主观听觉及客观数值两方面对声音表现进行衡量，避免出现音色变化。

格式建议

音频的最终输出格式取决于播放的硬件产品以及系统级别的限制，应优先选择系统及硬件所兼容的最佳音频格式，声音细节可以充分表现，避免压缩格式中低到高的无效转换

其他要素

音乐感受

• 声音利于记忆不过于繁杂

• 运用传统调性音乐体系

• 符合广义各年龄层审美通用化

声音质量

• 使用高保真文件或实时录音采样是保证声音高质量输出的前提条件。

• 通过各类合成技术的调试进行声音设计时需要充分考虑设备音响性能。

频段

• 人耳能感知到的频率范围大致在20-20KHz，但随着年龄的增长通常会逐渐衰减，在老年人群体中尤其明显。

• 声音由振动产生，也就意味着频率越高声音越高昂尖锐，相对的频率越低声音越低沉压抑。

• 在声音调试中，最重要的是要依需求保证各频段的相对平衡，即高频不过分刺耳，低频不过分浑浊。

技术制约

• 手机具有比较小的扬声器来播放铃声和音频，所以在手机等移动设备创作声音或铃声时需要关注设备的频率范围。

• 在移动设备上比较突出的频率从在500hz左右到16khz左右，比较平坦的频响曲线从250hz - 4khz左右，对于复音数较多的乐器需要慎用，对于人声需要进行齿音等处理再进行效果对比听辨

多态控件

概述

为了支持1+8+N设备，应用需要能够在不同的设备上运行，控件作为应用的基础组成部分，需要支持不同的设备，且在视觉、交互、动效等表现形式上针对设备进行必要的调整，达到最佳体验。因此，同一控件在不同的设备上会呈现出不同的形态，称为多态控件。

按钮在不同设备上的不同呈现

多态控件应该具备以下特点：

• 覆盖手机、折叠屏、平板，兼顾智慧屏、车机、智能穿戴等终端。

• 场景一致性。在对应的使用场景下，其交互、视觉、动效要保持一致，在设计上属性参数保持一致或差异化。

• 针对设备做优化。多态控件在不同的设备上的呈现应该是该设备下的最佳效果，因此在保证一致性的同时，还需要针对设备的特点进行优化。

控件的状态

• 控件的状态是一种视觉呈现，用于展示控件当前处于何种交互阶段。不同控件的相同状态应该保持一致的视觉风格，且应该清晰可见。

• 应用可能部署在不同设备上供用户使用，有些设备会支持多种输入方式。例如平板可以连接蓝牙键盘和鼠标来做文字编辑工作，此时控件需要同时满足键盘和鼠标交互，需要支持获焦态和悬停态，如果控件没有支持这两种状态，在使用键盘走焦时或鼠标悬停时，控件就无法呈现出相应的状态，给予用户正确的视觉引导。

常见的状态类型：

软件实现

控件在不同的设备下，对外表述一致，内部有不同的实现，不同的设备下有符合该设备特征的实现。

下表展示了控件与开发语言的对应关系。

操作类

控件名称	JS组件
按钮	button, input (type=button)
单选框	input (type=radio)
多选	input (type=checkbox)
滚动条	list的scrollbar属性
滑动条	slider
开关	switch
文本框	textarea
索引条	list的indexer属性
下拉按钮	select
状态按钮	toggle
滑动选择器	picker
操作块	piece
评分条	rating
工具栏	toolbar
菜单	menu
搜索框	search
文本选择	集成在textarea中
下拉刷新	refresh

导航类

控件名称	JS组件
底部页签	tab-bar
子页签	tab-bar
标题栏	暂未开放
导航点	swiper的indicator属性
步骤导航器	stepper

展示类

控件名称	JS组件
文本	text, input (type=text)
分隔器	divider
子标题	text
进度条	progress
新事件标记	badge
即时反馈	prompt.showToast
气泡提示	popup
图片	image

容器类

控件名称	JS组件
列表	list
卡片	CSS属性配置
弹出框	dialog
可滑动面板	panel

界面用语

以下原则旨在为界面用语提供统一约定与要求， 以确保用语风格统一、清晰明了、流畅自然，给用户带来良好的阅读体验。

一致

同一对象，指称一致

反例	正例
缺少姓名、电话或电子邮件的联系人。	缺少姓名、电话或电子邮件的联系人。
每位 SIM 卡联系人可保留 1 个唯一的姓名、2 个号码和 1 个 E-mail 地址。	每位 SIM 卡联系人可保留 1 个姓名、2个号码和 1 个电子邮件。

同一对象，不能有的用“E-mail 地址”，有的用“电子邮件”。

同一状态，描述一致

反例	正例
模板自动更新 仅 WLAN 下	模板自动更新 仅 WLAN 下
自动更新智能识别库 仅连接 WLAN 时	自动更新智能识别库 仅 WLAN 下

都是在连接 WLAN 状态下，不能有的用“仅 WLAN 下”，有的用“仅连接 WLAN 时”。

同一行为，提示一致

反例	正例
正在进行XXX，请稍候…	正在XXX…
正在进行XXX…

都是正在进行某行为，不能有的提醒“请稍候”，有的不提醒。

简洁

用词简短

反例	正例
最近更新时间：XXX	更新：XXX
截屏的图片 XXX张	截屏 XXX张

存在多种表达方式时，选取最简短的词语。

条理

上下呼应

反例	正例
为何搜索不到热点？1. 请检查是否设置了隐藏 SSID。2. XXX	为何搜索不到热点？1. 可能设置了隐藏 SSID。2. XXX

标题用“为何搜索不到热点”，是询问问题出现的原因，在此场景下，下文描述就应给出原因。若让用户检查是否设置了隐藏 SSID，这不是描述原因，而是给出问题解决方法，上下不呼应。

主次分明

反例	正例
现在启用免打扰期间，通知栏会出现月亮图标，允许有限打扰内容（包含闹钟）仍响铃或振动，其他来电、信息不响铃不振动。	现在启用来电、信息都将静音（允许打扰内容除外）。通知栏会出现月亮图案。

“静音”为主要信息，应在前；“月亮图标”为次要信息，应在后。

亲和

化“难”为易

反例	正例
LTE 载波聚合	LTE 载波聚合提高网络速度

复杂的信息给出说明，降低理解难度。

“礼”字当先

反例	正例
必须至少添加一个收件人。	请添加收件人。

少用强制类词语。

正向表达

反例	正例
检查测试结果是否有问题。	检查测试结果是否正常。

多从正向描述。

灵动

用词多变

反例	正例
用于标识设备，以提供数据同步、备份恢复和查找设备等服务，以及在“查找设备“锁屏界面回拨电话。	用于标识设备，旨在提供数据同步、备份恢复、查找设备等服务，以及在“查找设备“锁屏界面回拨电话。

避免出现两个“以”，显得单调。

远离平淡

反例	正例
表盘中的那一抹红色，像极了军人划在脸部的彩绘。	表盘中的那一抹红色，恰似军人划在脸部的彩绘。

广告宣传类用语，表达要有品位与个性。

契合

身份契合

反例	正例
若您是未成年人，需监护人同意才能使用本应用。	若你是未成年人，需监护人同意才能使用本应用。

对孩子用“您”不合适。

产品契合

表达要与所描述的设备特性相契合，不可将A设备特性的描述，机械地用到与之有差异的B设备。若某个功能适用范围无法区分到具体设备，则用“设备”进行广覆盖。不可在智能穿戴设备界面上出现智慧屏特性的描述，反之，亦不可在智慧屏界面上出现智能穿戴设备特性的描述

设计自检表

设计自检表详细列举出了在全场景设备设计和开发过程中应当注意的设计规则，提交审核前请再次检查各项是否符合规则要求，这将帮助应用减少用户舆情且提升用户体验的一致性。

自检表的要求范围分为“必选”与“推荐”两类。必选类一般为已总结出的较优解决方案或效果，表示相关设计需要按照此原则统一执行；推荐类指可能受应用品牌风格或业务特殊性影响，可适量做出修改。

请参考以下表格范围内提出的要求对应用进行检查。

类型	条目	说明	要求
基于焦点的交互	各设备控制焦点的方式	需保证各设备焦点导航/交互与操作行为之间的对应关系符合指南要求。	必选
提供初始焦点	初始焦点的位置需明确、突出，让用户有效地识别该位置，以便顺利开始走焦操作。	必选
可遍历	为完成所有交互任务，焦点需要能够遍历所有可获得焦点的界面元素，以保证功能的完整性。	必选
按区域获得焦点提高走焦效率	在由多种控件组成的可划分明显区域的界面中，可精简tab stop的数量以提升走焦效率。	推荐
走焦顺序	需根据场景合理采用绝对顺序走焦、相对方向走焦、和插入符走焦的策略。在符合用户预期的同时，能够高效地移动焦点。	必选
鼠标	标准操作	需保证各功能支持鼠标移动、点击、滑动滚轮等标准交互操作并符合标准定义。	必选
触控板	标准操作	需保证各功能支持触控板移动、点击、滑动等标准交互操作并符合标准定义。	必选
键盘	走焦导航	需保证走焦功能遵循“基于焦点的交互”中的基本规则。	必选
快捷键	需结合应用场景对菜单中所有的功能和其它核心功能提供必要的快捷键支持（例如按键导航相关、剪切/复制/粘贴等），对于标准功能，快捷键的设计应与系统标准快捷键的定义一致。	推荐
遥控器	走焦导航	需保证横向走焦、纵向走焦、页签与内容走焦符合指南要求。	必选
车机摇杆/旋钮/按键	车机摇杆/旋钮/按键	需保证焦点导航操作符合指南要求。	必选
统一交互事件	打开/切换对象	需保证在点击某个元素触发功能、访问新页面、或改变自身状态时，各种输入设备上的操作与指南要求一致。	必选
显示菜单	需保证在显示菜单时，各种输入设备上的操作与指南要求一致。需特别注意鼠标行为。	必选
选择对象	需保证在触发列表/宫格的选中和多选模式时，各种输入设备上的操作与指南一致。需特别注意鼠标行为。	必选
滑动对象	需保证在内容滑动操作场景下，各种输入设备上的操作和反馈效果与指南一致。需特别注意鼠标滚轮行为，以及切换页面、刷新页面和自定义滑动等场景。	必选
缩放/旋转对象	若当前页面内容支持缩放/旋转对象，考虑为其添加多输入设备的操作支持。	推荐
拖拽对象	对于拖拽操作，需支持鼠标左键或触摸板单指按下即可拖拽对象（而无需长按等待）。	必选
视觉风格	色彩	需要适配深色模式效果，保证系统切换到深色模式后，界面以深色风格呈现，并且界面内没有因未适配导致的识别性问题。	必选
字体	需要响应系统大字体模式，确保系统调节字体大小后，界面字体能响应变化大小，并且界面布局没有出现布局错乱问题。	必选
控件状态	支持常用的控件状态	确保控件不同状态下的视觉效果没有缺失。控件的常用状态有：正常态、不可用态、点击态、获焦态、激活态、悬停态。	必选
布局	自适应布局	布局标注是否逻辑合理，是否具备自适应能力。保证在不同尺寸和分辨率的设备上能够无错位/不截断/不变形地正常显示。	必选
动效	时长	需关注不同设备形态（大小尺寸）、不同位移路径（长或短）、不同复杂程度（简单或复杂）的动效时长符合时长指南要求。	必选
曲线	在设计中避免使用匀速运动曲线，不同类型动效的曲线应用符合指南要求。	必选
转场方式	建议一镜到底设计手法多用于界面转场，避免过多单一的转场方式。	推荐
手势反馈	需保证基础的点击、滑动、捏合、拖拽场景的动效符合手势动效应用指南要求。	推荐