!18306 UX新增文档

Merge pull request !18306 from zengyawen/master

zh-cn/design/ux-design/Readme-CN.md

+# OpenHarmony应用UX设计规范发布版
+
+- [应用UX设计](app-ux-design.md)
+- 应用架构设计
+    - [应用导航结构设计要求](app-navigation-structure-design.md)
+    - [应用页面结构设计](app-page-structure-design.md)
+- 界面布局
+    - [概述](ui-layout-overview.md)
+    - 布局基础
+        - [栅格系统](grid-system.md)
+        - [自适应布局](adaptive-layout.md)
+        - [响应式布局](responsive-layout.md)
+    - [布局基础运用案例](ui-layout-cases.md)
+- 人机交互
+    - [交互基础](human-machine-interaction-basis.md)
+    - [常见输入方式](typical-input-modes.md)
+    - [交互事件归一](unified-interaction-events.md)
+- 视觉风格
+    - [视觉基础](visual-basis.md)
+    - [色彩](visual-colors.md)
+    - [字体](visual-fonts.md)
+    - [图标](visual-icons.md)
+    - [卡片化](visual-widgets.md)
+    - [光影材质](visual-shade-shadow.md)
+- 动效
+    - [概述](animation-overview.md)
+    - [设计原则](animation-design-principles.md)
+    - [动效属性](animation-attributes.md)
+- 多态控件
+    - [概述](multimodal-component-overview.md)
+    - [底部页签](multimodal-bottom-tab.md)
+    - [子页签](multimodal-subtab.md)
+    - [标题栏](multimodal-title-bar.md)
+    - [侧边导航栏](multimodal-sidebar.md)
+    - [导航点](multimodal-swiper.md)
+    - [步骤导航器](multimodal-stepper.md)
+    - [文本](multimodal-text.md)
+    - [分隔器](multimodal-divider.md)
+    - [进度条](multimodal-progress-bar.md)
+    - [新事件标记](multimodal-badge.md)
+    - [即时反馈](multimodal-instant-tip.md)
+    - [气泡提示](multimodal-bubble.md)
+    - [数据可视化](multimodal-data-panel.md)
+    - [按钮](multimodal-button.md)
+    - [单选框](multimodal-radio-button.md)
+    - [多选](multimodal-check-box.md)
+    - [滚动条](multimodal-scrollbar.md)
+    - [滑动条](multimodal-slider.md)
+    - [开关](multimodal-toggle.md)
+    - [文本框](multimodal-text-box.md)
+    - [索引条](multimodal-index-bar.md)
+    - [下拉按钮](multimodal-drop-down-menu.md)
+    - [状态按钮](multimodal-state-button.md)
+    - [滑动选择器](multimodal-picker.md)
+    - [评分条](multimodal-rating-bar.md)
+    - [弹出框](multimodal-dialog.md)
+    - [可滑动面板](multimodal-slidable-panel.md)
+    - [菜单](multimodal-menu.md)
+    - [下拉刷新](multimodal-pull-to-refresh.md)
+    - [搜索框](multimodal-search-box.md)
+    - [勾选](multimodal-tick-box.md)
+- [设计自检表](design-checklist.md)
+- [资源](design-resources.md)
+- 设计交付
+    - [概述](design-deliverable-overview.md)
+    - [效果图](design-effect-drawings.md)
+    - [标注图](design-annotated-drawings.md)
+    - [规格说明](design-specifications.md)
+    - [切图资源](design-map-cached-drawings.md)

zh-cn/design/ux-design/adaptive-layout.md

+# 自适应布局
+
+自适应布局是通过设定元素与外部容器的相对关系实现的。当外部容器大小、位置等发生变化时，元素即可以根据相对关系自动变化以适应外部环境的变化。通常自适应布局能根据vp/px变化进行无级连续的变化。
+
+
+## 自适应拉伸
+
+某单个内容或某组内容的显示宽度不是固定值，而是通过相对参照物的方式来确定其显示宽度。当参照物的宽度发生变化时，内容或内容间距的宽度随之发生自适应拉伸。
+
+左右拉伸：例如，列表开关组合中，在窗口宽度变化时，开关控件固定宽度并相对列表的右边缘位置固定，整个组合与文本宽度均自适应变化。
+
+![拉伸能力](figures/拉伸能力.gif)
+
+均分拉伸：例如，在图标型网格中，当窗口宽度变化时，入口图标间距与图标离左右边缘间距同时均等变化。
+
+![均分能力](figures/均分能力.gif)
+
+自适应拉伸适用于文字、普通按钮、间距等展示宽度灵活，对宽高比不敏感的内容和内容组合。
+
+当可能出现的拉伸宽度不足以显示默认内容时，应根据场景选择优先保证内容完整或者优先保证其他内容的屏效，并进行截断或换行等组合适配。
+
+![拉伸注意场景](figures/拉伸注意场景.png)
+
+
+## 自适应缩放
+
+组件的显示大小是固定比例，通过相对参照物的方式来确定其宽或高。当参照物的大小发生变化时，元素的大小随之发生自适应缩放。
+
+完整缩放：例如，在宽度或高度变化时，时钟始终保证表盘完整展示并根据较短边决定宽高。
+
+![zh-cn_image_0000001568293145](figures/zh-cn_image_0000001568293145.gif)
+
+占比缩放：例如，带主体和背景的插画，画面内容根据宽度变化裁切，根据高度变化按50%比例缩放。
+
+![缩放案例](figures/缩放案例.gif)
+
+自适应缩放适用于图片、圆形按钮、banner、反应真实物体形状的图像等必须保证宽高比的内容。
+
+不推荐将所有元素同时缩放、或某内容放大过大超过屏幕50%。这将导致获取信息量不增反减，不符合用户预期。
+
+![zh-cn_image_0000001517612960](figures/zh-cn_image_0000001517612960.gif)
+
+
+## 自适应延伸
+
+组件的显示数量不是固定的，而是通过相对参照物的方式来确定其显示数量。当参照物的宽度发生变化时，组件随之发生自适应延伸显示更多数量。
+
+同功能内容延伸：例如，子页签和可滑动宫格在默认宽度下通过露出最后内容，提示右方有更多入口，在宽度变化时，可在每个元素宽度不变、保持滑动交互时显示更多数量。
+
+![延长能力](figures/延长能力.gif)
+
+不同功能内容延伸或隐藏：例如，默认处于同一排的不同音乐播放按钮优先级不同，在宽度变化时可延伸或隐藏低优先级的按钮，最大化适应不同窗口尺寸。
+
+![隐藏能力](figures/隐藏能力.gif)
+
+自适应延伸/隐藏适用于页签、操作块、推荐栏目等具有相同交互层级且有更多数据可以填充的内容。
+
+注意：需要判断因隐藏而不展示的内容对功能完整性是否有影响，并考虑通过滑动或“更多”按钮提供查看使用该内容的方式。
+
+
+## 自适应折行
+
+定义了折行能力的组件，可以根据组件容器的可用空间，体现纵向布局或者横向布局。
+
+例如，在宽度足够时，操作块位于同一行，在宽度变小时，可根据内容能显示的宽度纵向排布。
+
+![折行案例分镜](figures/折行案例分镜.png)
+
+自适应折行适用于页签、操作块、内容流等具有相同交互层级，且希望保证类型和数量完整性的内容。
+
+自适应布局对应OpenHarmony系统提供的自适应布局能力中的拉伸、均分、缩放、占比、延伸、隐藏、折行。自适应布局能力详见本文“[自适应布局](adaptive-layout.md)”。

zh-cn/design/ux-design/animation-attributes.md

+# 动效属性
+
+任何类型的动效都包含三大基本的动效属性：时长、曲线、帧率。这些基本属性形成了动效不可缺少的基本要素。通过组合这些基本的动效属性，可以塑造产品动效的不同风格特点，例如稳重、活泼、轻盈、舒缓等。
+
+
+## 时长
+
+时间是产生动效的基本要素，不同类型的元素、场景适用不同的时长，过短或太长都会让用户不适。以下因素详细说明了时长应如何设计以适应不同类型的动效。
+
+
+### 单位
+
+动效设计的时长单位一般使用毫秒（ms）表示，1秒=1000毫秒。在帧率（FPS）60帧的环境下，1帧=16.67毫秒。
+
+
+### 复杂程度
+
+复杂的动画比简单的动画需要更多的时间来表达，基于图形的特点来进行动画设计。
+
+  |![zh-cn_media_0000001517612956.gif](figures/zh-cn_media_0000001517612956.gif) |![zh-cn_media_0000001517293422.gif](figures/zh-cn_media_0000001517293422.gif) |
+| -------- | -------- |
+| **简单动画**<br/>前后状态只通过颜色动效来实现&nbsp;时长：100ms | **复杂动画**<br/>旋转动画需要合适的时间来保证&nbsp;时长：300ms | 
+
+
+### 区域范围
+
+动效运动在一定的范围内进行，小范围内比全屏幕运动所用的时间相对更短。
+
+  | ![zh-cn_media_0000001517293402.gif](figures/zh-cn_media_0000001517293402.gif) | ![zh-cn_media_0000001517133838.gif](figures/zh-cn_media_0000001517133838.gif) | ![zh-cn_media_0000001568212977.gif](figures/zh-cn_media_0000001568212977.gif) | 
+| -------- | -------- | -------- |
+| **小范围内运动**<br/>开关图标动效&nbsp;时长：150ms | **局部范围内运动**<br/>删除一条列表&nbsp;时长：200ms | **全屏范围的运动**<br/>打开一张图片&nbsp;时长：350ms | 
+
+
+## 曲线
+
+曲线与时长相互配合产⽣运动的韵律感。调整曲线能使物体实现加速和减速，⽽不是以恒定的速率运动。在自然定律下，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。
+![zh-cn_media_0000001517452992.gif](figures/zh-cn_media_0000001517452992.gif)
+
+没有缓和曲线的过渡看起来僵硬和机械。
+
+
+## 贝塞尔曲线
+
+贝塞尔曲线(Bézier curve)是一种数学曲线，在动效设计中广泛使用。从曲线形态的类型上可以分为这几类：标准曲线、减速曲线、加速曲线。
+
+
+### 标准曲线
+
+最常用的曲线类型，开始和结束处静止，速度峰值在中段，加速阶段相对于减速阶段用时更少。  使用原则：运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律。  应用场景：图片缩放，Tab切换，Switch开关等。
+![zh-cn_media_0000001517453000.gif](figures/zh-cn_media_0000001517453000.gif)
+
+cubic-bezier(0.40,0.00,0.20,1.00)
+
+
+### 标准曲线的其他类型
+
+  | ![标准曲线1](figures/标准曲线1.png) | ![标准曲线2](figures/标准曲线2.png) | 
+| -------- | -------- |
+| cubic-bezier(0.20,0.00,0.10,1.00) | cubic-bezier(0.33,&nbsp;0.00,&nbsp;0.67,&nbsp;1.00) | 
+
+
+### 减速曲线
+
+开始处物体运动速度最快，初始即达到峰值速度，渐渐变缓，在结束处完全静止。  使用原则：适用从视线中新出现的物体，结束时通过相对较长的缓冲让人眼适应运动变化。  应用场景： 弹框出现等。
+
+cubic-bezier(0.00, 0.00, 0.40, 1.00)
+
+
+### 减速曲线的其他类型
+
+  | ![减速曲线1](figures/减速曲线1.png) | ![减速曲线2](figures/减速曲线2.png) | 
+| -------- | -------- |
+| cubic-bezier(0.00,&nbsp;0.00,&nbsp;0.20,&nbsp;1.00) | cubic-bezier(0.00,&nbsp;0.00,&nbsp;0.00,&nbsp;1.00) | 
+
+
+## 加速曲线
+
+从静止启动，逐渐加速，在达到峰值速度时结束（出场）。  使用原则：适用原本在视线中的物体，需要消失或出场，逐渐加速符合退场行为特征。  应用场景：窗口出场、卡片删除等。
+
+
+### 临界阻尼
+
+当阻尼使对象刚好能不产生振动，又以最短时间到达稳定平衡状态的情况。
+![zh-cn_media_0000001517453000.gif](figures/zh-cn_media_0000001517453000.gif)
+
+
+### 欠阻尼
+
+阻尼较弱，对象会通过振荡运动来消耗刚性能量，最后达到稳定平衡的状态。
+![zh-cn_media_0000001568212989.gif](figures/zh-cn_media_0000001568212989.gif)
+
+
+### 欠阻尼的其他类型
+
+  | ![欠阻尼1](figures/欠阻尼1.png) | ![欠阻尼2](figures/欠阻尼2.png) | 
+| -------- | -------- |
+|  |  | 
+
+
+### 过阻尼
+
+阻尼较临界状态过大，对象运动的动画曲线呈现衰减更慢的现象，最后达到稳定平衡状态。
+![zh-cn_media_0000001517453008.gif](figures/zh-cn_media_0000001517453008.gif)
+
+## 帧率
+
+每秒钟显示的帧数即帧率（FPS）。由于人眼的特殊生理结构，所看画面帧率一般高于每秒约10~12帧，就会认为是连贯的，该现象为视觉暂留。但连贯不代表感知流畅，运动较快的动画需要更高的帧率来保障流畅度。
+![zh-cn_media_0000001568212985.gif](figures/zh-cn_media_0000001568212985.gif)
+相同时间和位移距离情况下，不同帧率效果对比（90FPS和120FPS受浏览器播放器的限制，可能无法看出差异）。
+
+
+### 交互类动效帧率
+
+移动设备的屏幕一般使用60赫兹刷新率，动画帧率与其保持一致能让动效呈现最好状态。与观看类动画不同，交互型动效需要更严苛的帧率稳定性，否则易造成体验上的卡顿感受。
+
+  |![1_zh-cn_media_0000001517452982.gif](figures/1_zh-cn_media_0000001517452982.gif)|![1_zh-cn_media_0000001517452981.gif](figures/1_zh-cn_media_0000001517452981.gif)|
+| -------- | -------- |
+| 60FPS | 30FPS | 
+
+
+### 纯动画帧率
+
+纯动画（如操作引导动画）的帧率要求没有交互类动效那么严苛，早期迪士尼的手绘动画基本帧率是24FPS，也能满足观看流畅的程度。高帧率的动画则拥有更细腻的视觉体验，特别是针对快速类的动作，细腻度尤为明显。有些动画创作会选择8FPS，这更多的是动画风格上的需要。
+
+  |![zh-cn_media_0000001517293410.gif](figures/zh-cn_media_0000001517293410.gif) |![zh-cn_media_0000001517452988.gif](figures/zh-cn_media_0000001517452988.gif) |
+| -------- | -------- |
+| 60FPS&nbsp;动画过程细腻而流畅 | 12FPS&nbsp;低帧率导致元素两帧之间变化过大，中间状态缺失导致眼跳感 | 
+
+
+## 风格
+
+通过调整时长、曲线的参数，在转场、特征等动效设计上的差异来表达品牌的动效设计语言。例如较多地使用弹性动画会让产品的动效风格显得更加灵动和活泼。

zh-cn/design/ux-design/animation-design-principles.md

+# 设计原则
+
+在设计动效过程中，要清楚地理解动效在系统中承载的作用，动效能体现页面的流畅过渡、对象的明确提示、元素的层级关系、产品的品牌印象等。动效要始终围绕操作符合用户心理预期，物体运动符合真实世界，元素表现形态凸显产品的品牌与调性。
+
+
+## 自然流畅
+
+流畅性是人对加工信息难易程度的一种主观体验，它指手势触控、视觉感知、心理预期三者合一的综合体验。帧率稳定、响应及时、跟手操作是动效流畅体验的基础要求。
+
+
+## 简洁高效
+
+界面元素运动尽可能少且简洁，减少路径及不必要的元素，快速的完成用户的任务，体现性能的快。物体运动到动效设计上，界面元素越多用户所消耗的时间就越长，容易造成慢的体验。
+![zh-cn_media_0000001568212933.gif](figures/zh-cn_media_0000001568212933.gif)
+
+
+## 快速响应
+
+高效响应并减少过长的位移和时间。如长距离保持在350ms内，短距离保持在250ms内，较短的动画保持在150ms内完成动作，整体体现动画快速呈现。
+![zh-cn_media_0000001517293356.gif](figures/zh-cn_media_0000001517293356.gif)
+
+
+## 运动一致
+
+在动作编排时应遵循运动路径方式一致，避免不一致的运动来分散用户视觉焦点，运用适当的编排手法，引导用户聚焦操作任务。
+![zh-cn_media_0000001517293364.gif](figures/zh-cn_media_0000001517293364.gif)
+
+
+## 隐藏等待
+
+动效能够减少用户在操作时的等待感，通过元素的运动或转场过渡，减少用户对界面等待产生的焦虑感。另外利用动画或者优化实现机制，优先处理当前任务或将串行的逻辑优化为并行，所见即所得。
+![zh-cn_media_0000001517452948.gif](figures/zh-cn_media_0000001517452948.gif)
+
+## 凸显品牌
+
+通过动效设计为产品增加亮点，它可以为产品带来惊喜的体验及凸显品牌的气质，使它赋予生命力，让产品脱颖而出。通过系统级的元素特效设计，将某一种特效属性贯穿到适合的界面中，营造品牌的氛围感，例如拖尾、融球、发光、磁吸等效果。
+![zh-cn_media_0000001517452940.gif](figures/zh-cn_media_0000001517452940.gif)

zh-cn/design/ux-design/animation-overview.md

+##  概述
+
+OpenHarmony生长动效，围绕回归本源设计理念，打造自然、流畅、品质一体的运动，提供明确的反馈和视觉指导，丰富视觉体验，让状态传达栩栩如生。“生长”是自然界中万物必须经历的过程与规律，通过生长，万物不断变化并在其中表现丰富多样的形态。我们将其提炼转化并运用于操作系统的动效设计中。
+
+
+## 使用场景
+
+动效用于需要展示事情是如何变化的情景。它是一个直白的与用户交流的方式，能够告诉用户执行一个动作时将发生什么，以及他们下一步可以做什么，来增强交互反馈和提升理解。
+
+
+## 如何使用
+
+- 有目的的添加，不要为了添加动效而添加，避免过多的动效分散用户的注意力，让他们感觉到脱节与不适。
+
+- 动效要有实现性，遵循科学的物理规律。
+
+- 尽量使动效快速、简洁、精确，符合更年轻化、轻量化的定义。
\ No newline at end of file

zh-cn/design/ux-design/app-navigation-structure-design.md

+# 应用导航结构设计要求
+
+
+应用中的导航用于引导用户在应用的各个页面进行浏览。好的导航让用户知道身处何处，去往何方，以及来自哪里。
+
+
+## 导航的原则
+
+导航需要遵循以下原则：
+
+- **一致**：导航操作的结果应该与用户的期望保持一致。相同或类似的场景使用用户熟悉的界面布局和控件，在多设备上确保一致的应用架构和导航行为，让用户无论在什么页面，都知道如何导航。例如二级界面使用左上角的返回按钮来返回界面的上一个层级。
+
+- **清晰**：导航应该提供清晰的路径。用户使用的时候，逻辑关系简单且容易理解，能够知道当前处在界面的什么位置，操作后将会跳转到什么位置，不会迷失方向。例如使用底部页签，让用户在平级页面之间进行切换。
+
+导航要避免以下设计：
+
+- **层级过深**：导航层级建议在三层以内。对于太深的层次，会带来操作效率的问题。如果确实需要深层级设计，建议使用面包屑设计或增加一键回到首页的功能。
+
+- **导航复杂**：在侧边导航中，使用底部页签，会让操作变得复杂，建议仅使用侧边导航。
+
+
+## 导航的分类
+
+常用的应用导航有：平级导航、层级导航和混合导航。
+
+**平级导航**
+
+平级导航结构中，页面均处在同一层级。
+
+使用场景：用于展示同等地位或同等层级的界面。
+
+![zh-cn_image_0000001517612912](figures/zh-cn_image_0000001517612912.jpg)
+
+例如：以Tab方式组成的页面。图中照片、相册、发现为一级界面，从视频相册进入二级内容界面。
+
+![一多-2-2](figures/一多-2-2.png)
+
+多设备设计：可转化导航类控件到符合设备体验的位置上。默认设备上使用Tab导航，PAD和PC使用侧边Tab导航，智慧屏使用顶部Tab导航。
+
+![一多-2-3](figures/一多-2-3.png)
+
+**层级导航**
+
+层级导航结构由父页面和子页面组成。父页面可以有一个或多个子页面。每个子页面都有一个父页面。
+
+层级导航适用于多层级的复杂结构。层级结构深的内容，用户访问的路径变长，效率降低，可以通过适当的层级穿透设计（例如：控制中心中的蓝牙开关，解决了进“设置-蓝牙”界面设置操作路径过长的问题）解决此问题。
+
+使用场景：页面存在上下级关系的应用。
+
+![zh-cn_image_0000001568093237](figures/zh-cn_image_0000001568093237.jpg)
+
+例如：通过从内容进入后经返回键返回之前的页面。
+
+![一多-2-5](figures/一多-2-5.png)
+
+多设备设计：可以考虑将上下层级的界面在同一界面展示。默认设备和智慧屏上使用上下层级关系。平板和PC使用上分栏的方式展示内容。
+
+![一多-2-6](figures/一多-2-6.png)
+
+**混合导航**
+
+在实际应用设计中，仅使用平级或层级导航可能无法应对更复杂的业务结构。此时需区分不同页面的导航关系，对同等地位或同等层级的页面使用平级导航结构，对具有复杂关系的页面使用层级导航结构。
+
+使用场景：应用由几个同等级的模块组成，每个模块又有上下层级关系页面。
+
+![zh-cn_image_0000001568212949](figures/zh-cn_image_0000001568212949.jpg)
+
+多设备设计：可以根据平级导航、层级导航自身的设计规则综合运用，一般平级导航优先级比层级高。
+
+![混合导航](figures/混合导航.png)

zh-cn/design/ux-design/app-page-structure-design.md

+# 应用页面结构设计
+
+
+## 通用页面结构
+
+应用程序由多个页面组成。我们将常见的页面进行了梳理，总结了以下常用的页面结构。
+
+**启动页面**
+
+针对内容型应用，应用首页内容的获取需要花费一定的时间，此时可以使用启动页缓解页面加载内容的等待感。启动页可以展示应用的品牌形象或者广告，避免让用户等待过长时间。没有网络加载内容的应用，不需要使用启动页。
+
+![一多-应用架构-启动页](figures/一多-应用架构-启动页.png)
+
+用户总是希望第一时间看到应用内容，因此在页面加载完成后，需要及时呈现内容。
+
+从后台加载应用时，不应该显示启动页。当应用被切换到后台后，再从后台加载回来时，不应该再次显示启动页。应用需要保留应用的状态，以便从后台恢复，方便用户继续浏览。
+
+**列表内容页面**
+
+列表内容页面通常用于文字和数据的展示，利于提升使用效率。
+
+![一多-应用架构-列表视觉图](figures/一多-应用架构-列表视觉图.png)
+
+列表应该按照一定的逻辑排序，便于用户浏览和操作。例如：按字母顺序排序、按时间排序。
+
+列表应该是同类项的集合，应该对外呈现一致的布局样式。常见的是单行列表、双行列表和三行列表。
+
+列表显示的内容要主次分明，用户一眼就能关注到重要的信息和操作。
+
+**网格内容页面**
+
+网格内容页面通常用于图片和视频的展示，利于沉浸浏览内容。
+
+![一多-应用架构-网格视图](figures/一多-应用架构-网格视图.png)
+
+网格视图显示同等重要的项目，具有统一的布局。
+
+网格视图以图像为主组织内容。例如图库中用网格视图展示图片。
+
+网格视图可以辅以文字和操作。例如应用市场中使用网格展示应用程序图标、简单描述和下载按钮。
+
+网格视图应该考虑响应式布局。在横竖屏切换时，网格视图应该能够调整网格的数量以适应页面的宽度变化。
+
+**多选页面**
+
+多选页面是对页面内的数据多项选择，然后进行批量处理。常见的是针对列表的多项选择或宫格的多项选择。
+
+![应用架构-常用页面结构-通用页面结构-多选页面低保真](figures/应用架构-常用页面结构-通用页面结构-多选页面低保真.png)
+
+**详情页面**
+
+详情页用于展示应用的详细描述和操作。
+
+![应用架构-常用页面结构-通用页面结构-详情页面低保真](figures/应用架构-常用页面结构-通用页面结构-详情页面低保真.png)
+
+**空页面**
+
+在页面内没有数据的时候，使用空页面。
+
+![一多-应用架构-空页面](figures/一多-应用架构-空页面.png)
+
+**设置页面**
+
+设置页面通常是一个模块所有设置项的聚合。
+
+![一多-应用架构-设置](figures/一多-应用架构-设置.png)
+
+**我的页面**
+
+针对内容型应用，可以提供我的页面，用于承载用户的信息和资产内容。
+
+![一多-应用架构-我的页面](figures/一多-应用架构-我的页面.png)
+
+**关于页面**
+
+关于页面用于呈现应用的基本情况，包括联系方式，法律条款等内容。
+
+![一多-应用架构-关于](figures/一多-应用架构-关于.png)
+
+
+## 垂类页面结构
+
+垂类是指垂直领域，为特定的人群提供特定的服务，属于应用的细分类别。例如：华为音乐、网易云音乐等属于音乐类，华为视频、优酷等属于视频类，快手、抖音等属于直播类。垂类页面结构是在特定领域长期使用的过程中，形成的广受用户接受和理解的页面结构。
+
+例如：
+
+音乐类应用都有音乐歌单，音乐专辑，音乐播放界面。
+
+视频类应用都有视频详情和视频播放界面。
+
+直播类应用，都有瀑布流推荐和直播界面。
+
+...
+
+常见的垂类页面结构有：
+
+- 音乐播放页面
+
+- 专辑详情页面
+
+- 视频详情页面
+
+- 视频播放页面
+
+**音乐播放界面**
+
+音乐类应用中的播放器界面，该界面通常有音乐操控（播放，暂停，上一首，下一首）、歌词显示等功能。
+
+![应用架构-常用页面结构-垂类页面结构-音乐播放低保真](figures/应用架构-常用页面结构-垂类页面结构-音乐播放低保真.png)
+
+**专辑详情页**
+
+音乐类应用中的音乐专辑详情界面，该界面通常有专辑介绍、专辑包含的歌曲列表等功能。
+
+![应用架构-常用页面结构-垂类页面结构-歌单详情低保真](figures/应用架构-常用页面结构-垂类页面结构-歌单详情低保真.png)
+
+**视频详情页面**
+
+视频类应用的视频详情界面，该界面通常有视频播放器、视频剧集显示、视频简介等功能。
+
+![一多-应用架构-视频详情](figures/一多-应用架构-视频详情.png)
+
+**视频播放界面**
+
+视频类应用的视频播放界面，该界面通常有视频画面预览、播放控制等功能。
+
+![一多-应用架构-视频播放](figures/一多-应用架构-视频播放.png)
+
+
+## 特殊页面结构
+
+部分应用界面在差异较大的设备间切换，无法使用自适应和响应式布局设计方法进行适配，从用户预期上也需要调整应用架构时，将需要做特殊适配。
+
+例如，同时具有底部Tab和子页签的页面，在大屏上应考虑将底部入口置于顶部工具栏或与子页签融合。
+
+![特殊页面结构](figures/特殊页面结构.png)

zh-cn/design/ux-design/app-ux-design.md

+# 应用UX设计
+
+## 设计原则
+
+当为多种不同的设备开发应用时，有如下设计原则：
+
+**差异性**
+
+充分了解所要支持的设备，包括屏幕尺寸、交互方式、使用场景、用户人群等，对设备的特性进行针对性的设计。
+
+**一致性**
+
+除了要考虑每个设备的特性外，还需要考虑不同设备的共性，并使用通用性设计方法提供既符合设备差异性，又具有跨设备一致性的设计，从而减少用户学习的难度，降低应用开发的成本。
+
+**灵活性**
+
+在硬件能力、交互方式、使用场景类似的设备上，应主要考虑布局位置、内容宽度、横向组件数量的调整，避免出现因横竖屏切换、窗口尺寸变化造成的界面元素不合理空白、模糊、变形、截断的问题。
+
+**兼容性**
+
+在硬件能力、交互方式、使用场景差异较大的设备上，除了考虑布局位置、内容宽度、横向组件数量，还需支持不同的输入方式、考虑功能架构的调整，避免出现输入不识别、功能不可以用、使用困难的问题。
+
+
+## 设计要点
+
+很多用户的多设备体验以默认设备为核心或从默认设备往外延伸，因此，围绕全场景体验的OpenHarmony UX设计，将优先确保用户在不同的设备上获得跟使用默认设备类似的体验，同时充分利用设备的优势使体验最大化。
+
+在进行OpenHarmony的多设备应用设计时，需考虑应用以下内容：
+
+
+### 自适应应用架构
+
+使用自适应应用架构，可以确保应用在不同终端上，以最佳的导航形式来访问应用。OpenHarmony 在开发SDK上提供了便利，开发者可以通过简单配置轻松完成，无需从0开始构建。
+
+例如：默认设备上的底Tab的结构，在Pad上一般使用侧边Tab来代替，在大屏上则是顶部Tab。
+
+![一多-1-1](figures/一多-1-1.png)
+
+更多应用架构的设计内容，详见：[应用架构](app-navigation-structure-design.md)。
+
+### 响应式界面布局
+
+应用会在不同的场景下使用，常见的有横竖屏切换、分屏。这些场景会导致界面的尺寸和长宽比例发生变化。因此需要考虑内容的响应式布局，确保在各种场景下都有最佳的显示效果。
+
+OpenHarmony 提供了多种布局能力，开发者通过组合运用使内容布局更符合业务需要与用户预期。
+
+例如：默认设备上的滚动banner，在其他设备上可进行延伸，平板上露出更多banner，大屏上完全显示两张。
+
+![1_zh-cn_image_0000001568412917.png](figures/1_zh-cn_image_0000001568412917.png)
+
+在不同类型的设备上，界面的尺寸和比例更为多样，再加上使用上的差异，导致设计上更为复杂。为此，可以考虑使用分栏布局、重复布局、挪移布局、缩进布局，进一步解决内容的显示问题。
+
+例如：默认设备上上下排布的大图与列表，在长宽比例更大的设备上可挪移到左右展示。
+
+![概述-界面布局-歌单详情高保真](figures/概述-界面布局-歌单详情高保真.png)
+
+更多界面布局的设计内容，详见：[界面布局](ui-layout-overview.md)。
+
+
+### 交互归一
+
+交互归一描述了在多种交互任务或场景下，应用在触屏上和其它常用的输入方式（例如鼠标、触摸板、键盘）上分别对应的正确的交互规则。设计师和开发者应保证在当前输入方式下应用能够以正确的、符合用户习惯的交互规则进行响应。通常情况下，系统已经做好了这些事情，开发者只需正确调用。如果您的操作比较特别，您需要考虑多端上的交互归一，以确保用户体验的一致。
+
+更多交互归一的设计内容，详见：[人机交互](human-machine-interaction-basis.md)。
+
+
+### 视觉参数化
+
+通过参数，方便的调整各端的视觉，使得各端具备该设备特有的风格。在OpenHarmony中，边距、圆角、阴影、字体大小等，都可以通过参数来进行调整。
+
+![1_zh-cn_image_0000001568093301.png](figures/1_zh-cn_image_0000001568093301.png)
+
+更多视觉参数化的设计内容，详见：[视觉风格](visual-basis.md)。
+
+
+### 多态控件
+
+应用在多设备上运行，设备也可在不同交互方式下使用。控件作为应用的基础组成部分，需要支持不同的设备，且在视觉、交互、动效等表现形式上针对设备进行必要的调整，达到最佳体验。因此，同一控件在不同的设备上会呈现出不同的形态，称为多态控件。
+
+OpenHarmony默认提供支持多设备的控件，开发者可以直接使用并对不同状态进行自定义。例如平板可以连接蓝牙键盘和鼠标来做文字编辑工作，此时控件需要同时满足键盘和鼠标交互，需要支持获焦态和悬停态。
+
+
+### 针对性优化
+
+在上述设计内容以外，在具体设备上，推荐针对性地进行特殊的操作和布局优化，使之符合当前设备的使用习惯。
+
+例如：在以键鼠操作的界面上，为确保用户的使用习惯，需要提供额外的设计。
+
+  | **以触控为主** | **以键鼠操作为主** | 
+| -------- | -------- |
+| 下拉刷新 | 界面上提供“刷新”图标或适配F5快捷键 | 
+| 滑动多选 | 鼠标 框选 | 
+| 下拉关闭 | 界面上提供“关闭”图标 | 
+| 长按浮起拖拽 | 鼠标直接拖拽 | 

zh-cn/design/ux-design/design-annotated-drawings.md

+# 标注图
+
+
+标注图是向开发者传递界面上每个元素详细属性，以指导代码完整实现UX设计的图像化文档。界面元素的属性包括：色彩、尺寸、字体、圆角、间距、阴影、模糊、缩放、所用的组件、自适应布局、响应式布局等。标注图一般为jpg或png格式。
+
+
+在优秀的交付件中，不同类型属性的标注文本大小一致、色彩不一、互不重叠，并与效果图内容在视觉上良好区隔。标注图数量与关键界面效果图一一对应，如遇到较复杂的界面，为了更清晰说明规格，也有多张标注图对应一张效果图的情况。
+
+
+随着设计与开发工具的演进，一些业界工具支持界面元素属性的自动识别并创建标注，也可导出支持动态展示标注的效果图文档，一般为html格式。OpenHarmony应用的设计交付同样可以借助这些工具作为标注图的补充内容，但必选的分层参数仍需设计师专门确认并手动完成标注。
+
+
+除了尺寸、间距等强依赖于业务具体设计的参数，色彩、字体、圆角、阴影、模糊等属性应尽可能使用分层参数完成。
+
+
+标注示意图
+
+
+![4.8-标注图](figures/4.8-标注图.png)

zh-cn/design/ux-design/design-checklist.md

+# 设计自检表
+
+设计自检表详细列举出了在全场景设备设计和开发过程中应当注意的设计规则，这将帮助应用减少用户舆情且提升用户体验的一致性。
+
+
+自检表的要求范围分为“必选”与“推荐”两类。必选类一般为已总结出的较优解决方案或效果，表示相关设计需要按照此原则统一执行；推荐类指可能受应用品牌风格或业务特殊性影响，可适量做出修改。
+
+
+请参考以下表格范围内提出的要求对应用进行检查。
+
+
+  | **类型** | **条目** | **说明** |**类别** | 
+| -------- | -------- | -------- | -------- |
+| 应用架构 | 导航结构 | 在各设备上页面导航结构保持一致（同时出多个设备的UX设计）。 | 推荐 | 
+| 布局 | 拉通设计 | 拉通各设备的布局设计，保证在不同尺寸和分辨率的设备上能够无错位/不截断/不变形/不过多空白（50%以上）/不过于拥挤（间距小于16vp，明显截断）/无大图大字体地正常显示。 | 必须 | 
+| | 响应式设计 | 栅格布局只能占N列以及N列内部的Gutter，不包含N列两侧的Gutter。 | 必须 | 
+| | 响应式设计 | 明确标注使用什么类型的栅格、给出在不同断点下栅格三要素取值。 | 推荐 | 
+| | 响应式设计 | 按容器去对齐栅格，而不是内部子元素对齐栅格。 | 必须 | 
+| | 响应式设计 | 栅格除了页面布局设计外，在做局部栅格设计时，需要通过明显方式如颜色等进行标注区分，避免混淆。 | 推荐 | 
+| | 响应式设计 | 禁止出现标注了栅格但实际没有通过栅格进行布局设计，避免混淆。 | 必须 | 
+| | 自适应设计 | 非栅格设计场景下，明确标注自适应布局能力。自适应布局能力有：拉伸、均分、占比、缩放、延伸、隐藏、折行。 | 推荐 | 
+| 人机交互 | 输入方式 | 需保证在各设备上完整支持触摸、鼠标、触控、键盘、遥控器、摇杆等交互方式，并符合标准定义。 | 推荐 | 
+| | 交互归一 | 应使用系统提供的控件以达到一致的交互体验。如有定制，需保证在各场景下，不同输入设备上的操作与指南要求一致。需特别注意鼠标行为。 | 推荐 | 
+| 视觉风格 | 单位 | 用于界面布局的单位应全部使用vp。只针对严格控制元素尺寸的场景使用px。 | 必须 | 
+| | 色彩 | 用于色彩的赋值应使用分层参数。推荐支持深色模式，需保证界面在系统切换色彩模式时没有识别性问题。 | 推荐 | 
+| | 字体 | 使用fp为文字大小单位，需要响应系统大字体模式，确保系统调节字体大小后，界面字体能响应变化大小，并且界面布局没有出现布局错乱问题。 | 必须 | 
+| 多态控件 | 支持常用的控件状态 | 确保控件不同状态下的视觉效果没有缺失。控件的常用状态有：正常态、不可用态、点击态、获焦态、激活态、悬停态。 | 推荐 | 

zh-cn/design/ux-design/design-deliverable-overview.md

+# 概述
+
+
+为使UX设计详尽准确地实现并传递给用户，设计师需向开发者提供必要的设计交付件，包括但不限于：应用规格说明、交互流程、视觉效果、视觉标注、视觉规格说明、切图资源、动效参数资源、音效资源等内容。
+
+
+面向多设备多尺寸的应用UX设计交付件，以完整说明界面布局与视觉设计为主要目的，至少应包含：效果图、标注图、规格说明和切图资源。
+
+
+下面将分别介绍不同交付内容的用途与规范。
+
+
+![4.8-交付4件套](figures/4.8-交付4件套.png)

zh-cn/design/ux-design/design-effect-drawings.md

+# 效果图
+
+
+效果图是表达UX设计的关键内容，用于直观呈现目标体验的静态效果，并作为开发者与测试工程师的实现与验收依据。效果图一般为jpg或png格式。
+
+
+在优秀的设计交付件中，针对不同前置条件下，各交互流程所途经的每个界面都应匹配效果图。对于大量重复使用的组件元素，如弹窗和即时反馈，亦可配合规格统一说明，不做过多重复设计。
+
+
+在多设备设计中，为了清晰表达设计效果，设计师仍需要针对不同尺寸的关键界面提供符合规范的效果图。关键界面包括且不限于：
+
+
+- 应用的首页
+
+- 可以从首页直接进入的各二级界面
+
+- 核心使用流程途经的各界面
+
+- 能典型体现多数界面的自适应与响应式规格的界面
+
+
+不同尺寸的效果图，至少应包含小设备、中设备、大设备。根据业务涉及的设备特点，可补充超小尺寸效果，及不同设备的横竖屏效果，提前充分验证并优化UX设计体现的差异性、一致性、灵活性、兼容性。
+
+
+对应不同设备效果图的设计画板尺寸推荐如下：
+
+
+  | 设备类型 | 屏幕宽度 | 画板尺寸（vp） | 
+| -------- | -------- | -------- |
+| 超小设备 | [0, 320) | 240\*320 | 
+| 小设备 | [320, 520) | 360\*780 | 
+| 中设备 | [520, 840) | 677\*763 | 
+| 大设备 | [840, +) | 1280\*800 | 
+
+
+多设备效果示意图
+
+
+![4.8-效果示意图](figures/4.8-效果示意图.png)
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 画板尺寸为不同宽度断点下的典型设备屏幕尺寸，可根据业务具体针对的设备选择其他画板尺寸
+> 
+> - 画板尺寸以vp为单位提供，根据实际设计所需精度，可统一把设计文档中所有画板设置为1倍或多倍的px尺寸
+> 
+> - 如效果图需要展示一屏以上的内容，如列表内容较长，建议保持宽度不变并增加画板高度以容纳更多内容

zh-cn/design/ux-design/design-map-cached-drawings.md

+# 切图资源
+
+包含在设计效果中的素材，如图标、图片、序列帧等，应根据实际需要输出为合适的格式提供开发者置入界面内。·
+
+
+为了更好在多设备上根据设备dpi展示清晰的图像，一分优秀的应用应含有多套同名的切图资源，它们分别存放在mdpi、ldpi、xldpi、xxldpi的文件夹目录下，最终会存放到应用资源包的同名路径中。
+
+
+多套同名切图文件夹示意图
+
+
+![4.8-切图资源对应文件夹](figures/4.8-切图资源对应文件夹.png)
+
+
+图标资源可以是png、jpg、webp、svg等格式，推荐在多设备设计中使用svg图标资源，因为能充分利用矢量图片体积较小、可以自由缩放且不出现锯齿、可根据色彩参数实时赋色的特点，仅用一套资源即可满足复杂场景的UX规范。
+
+
+图片资源可根据设计效果提供一张复用到多设备的资源，或不同设备单独交付的资源
+
+
+夜晚单张适配多设备宽度示意图
+
+
+![4.8-夜晚单张适配多设备](figures/4.8-夜晚单张适配多设备.png)
+
+
+晴天多张适配多设备宽度示意图
+
+
+![4.8-晴天多张适配](figures/4.8-晴天多张适配.png)

zh-cn/design/ux-design/design-resources.md

+# 资源
+
+为方便UX设计师以及开发者参考使用，本文特提供：
+
+
+- [分层参数](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/visual-basics.md)的场景、id、参数详细对照表，[OpenHarmony系统资源分层设计表V1.0.xlsm](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/OpenHarmony_%E7%B3%BB%E7%BB%9F%E8%B5%84%E6%BA%90%E5%88%86%E5%B1%82%E8%AE%BE%E8%AE%A1%E8%A1%A8_V1.0.xlsm)
+
+- 符合规范的[设计交付件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/design-delivery.md)样例，[OpenHarmony天气应用UX设计交付件V1.0.zip](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/OpenHarmony_%E5%A4%A9%E6%B0%94%E5%BA%94%E7%94%A8UX%E8%AE%BE%E8%AE%A1%E4%BA%A4%E4%BB%98%E4%BB%B6_V1.0.zip)
+
+
+系统资源分层设计表列出了当前OpenHarmony中可用系统资源id及其在不同类型设备上的取值，它由六张子表组成，各个子表的含义如下所示。
+
+
+  | 表格 | 简介 | 
+| -------- | -------- |
+| 应用色彩参数 | 在**应用开发**过程中可以使用的**色彩**相关的系统资源。 | 
+| 应用圆角参数 | 在**应用开发**过程中可以使用的**圆角**相关的系统资源。 | 
+| 应用字体参数 | 在**应用开发**过程中可以使用的**字体**相关的系统资源。 | 
+| 应用间距参数 | 在**应用开发**过程中可以使用的**间距**相关的系统资源。 | 
+| 服务卡片参数 | 在**服务卡片开发**过程中可以使用的系统资源。 | 
+| 不透明度数值速查表 | 用于将不透明度在**百分比表示形式**和**十六进制表示形式**之间快速转换的速查表。 | 
+
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> - 推荐应用相关系统参数仅在应用开发场景中使用，卡片相关系统参数仅在卡片开发场景中使用。
+> 
+> - 同一系统参数在不同类型的设备上有不同的取值，当前仅提供了系统参数在默认设备上的取值，后续会针对不同设备类型做补充。
+> 
+> - 颜色可以用“RGB”或“ARGB”形式表示，采用“RGB”表示的颜色，完全不透明；采用“ARGB”表示的颜色，其不透明度由“A”（Alpha通道）确定。如“\#7FFF0000”代表不透明度为50%的红色，“\#FFFF0000”和“\#FF0000”都表示不透明度为100%（即完全不透明）的红色。

zh-cn/design/ux-design/design-specifications.md

+# 规格说明
+
+
+规格说明是一份专门编写的文档，用于更完整清晰地说明界面间的通用元素与变化规则，一般为pdf格式。规格说明不是UX设计交付件中的必选项，但它能帮助设计师节省很多重复性工作，帮助开发者快速理解UX设计规格，在面向多设备的应用设计交付中非常推荐。
+
+
+在多设备设计中，规格说明常用于并排展示同一界面在不同尺寸下的效果，并说明栅格变化规则。
+
+
+一多规范栅格图
+
+
+![4.8-栅格标注](figures/4.8-栅格标注.png)

zh-cn/design/ux-design/grid-system.md

+# 栅格系统
+
+
+栅格系统是一个多设备下通用的辅助定位系统，适用于应用窗口的整体布局，也支持界面局部内容使用。栅格系统由 Margin，Gutter，Column 三个属性构成。Margin是相对屏幕、窗口等父容器左右边缘的距离，决定了内容可展示的整体宽度；Gutter是每个Column的间距，决定内容间的紧密程度； Column是内容的占位元素，其数量决定了内容的布局复杂度。Margin大小、Gutter大小、Column数量综合决定Column的具体宽度。
+
+
+通过栅格系统进行布局，可以更好达到多设备下布局的一致性。
+
+
+![zh-cn_image_0000001517293418](figures/zh-cn_image_0000001517293418.png)
+
+
+Margin、Gutter的大小、Column的数量均可自定义，界面内容跟据Column的边缘定位。通过采用不同数值调整内容信息量和紧密程度，一般推荐使用4或8的倍数。例如Margin 32vp、Gutter 16vp、Column数量为4，或Margin 40vp、Gutter 24vp、Column数量为8。
+
+
+![栅格系统例](figures/栅格系统例.png)
+

zh-cn/design/ux-design/human-machine-interaction-basis.md

+# 交互基础
+
+在全场景的数字体验中，越来越多类型的智能终端设备分布在用户的日常生活中，可交互的用户界面广泛存在于默认设备、平板、PC、智能穿戴设备、智慧屏、车机、虚拟现实（VR）和增强现实（AR）等设备上。应用可能在多种设备上运行或在单一设备上被用户通过多种输入方式操控，也可能在多种距离上被用户操控。这需要其用户界面能够识别和支持不同的交互场景，以便用户以习惯的、舒适的方法与其进行交互。
+
+
+![zh-cn_image_0000001517293316](figures/zh-cn_image_0000001517293316.png)
+
+
+## 输入方式
+
+典型的输入方式包括但不限于触屏上手指/手写笔等直接交互、鼠标/触摸板/键盘/表冠/遥控器/车机摇杆/旋钮/手柄/隔空手势等间接交互、以及语音交互。
+
+设计和开发应用时，**设计师和开发者应考虑到应用具有使用多种输入方式的可能性**，并实现相应的功能，保证在当前输入方式下应用能够以正确的、符合用户习惯的方式进行响应。
+
+
+## 交互距离
+
+典型的设备交互距离包括但不限于15cm（智能穿戴设备）、30cm（默认设备）、60cm（桌面设备）、260cm（大屏），具体距离会在用户使用过程中产生一定范围的变化。
+
+设计和开发应用时，设计师和开发者应考虑到多种距离下使用的可能性，保证界面元素的大小、展示信息的密度符合用户的预期。
+
+![1_zh-cn_image_0000001568212889.png](figures/1_zh-cn_image_0000001568212889.png)

zh-cn/design/ux-design/multimodal-badge.md

+# 新事件标记
+
+新事件标记是用来提醒用户应用有待处理请求的控件。
+
+
+## 如何使用
+
+- 新事件标记用于底部页签、列表项、工具栏图标、内容区的分类图标、头像等控件上。
+
+- 应用中可能有需用户关注的新事件提醒，需要采用新事件标记来标识。
+
+- 应避免对新事件标记的滥用。用户打开被标记项时，如果看到的内容跟预期不符，就会失去对新事件标记的兴趣，反而降低点击率。
+
+
+## 分类
+
+- 圆点标记
+
+- 数字标记
+    | ![badge_sub_1](figures/badge_sub_1.png) | ![badge_sub_2](figures/badge_sub_2.png)  |
+  | -------- | -------- |
+  | 圆点标记 | 数字标记 | 
+
+
+### 圆点标记
+
+- 圆点标记适用于标识应用中的次要事件，通常出现在底部页签、列表项、工具栏图标、内容区的分类图标、头像上。点击后，圆点标记消失。
+
+- 运营活动失效时，对应的圆点标记需主动消失。
+
+- 纯文字时，新事件红点统一放在文字右侧。
+
+- 图标＋文字时，新事件红点放在图标右上角。
+    |![1_zh-cn_image_0000001517133786.png](figures/1_zh-cn_image_0000001517133786.png) |![2_zh-cn_image_0000001568412853.png](figures/2_zh-cn_image_0000001568412853.png) |![1_zh-cn_image_0000001517612916.png](figures/1_zh-cn_image_0000001517612916.png) |
+  | -------- | -------- | -------- |
+  | 图标+圆点 | 圆点在列表 | 圆点在子页签 | 
+
+
+### 数字标记
+
+- 桌面图标数字标记只显示应用中的主要事件。例如应用市场中有应用更新、活动推广等多种类型的事件，其中应用更新为主要事件，因此在桌面图标上显示应用更新的数字提示。
+
+- 设置里的“系统更新”用数字，与桌面设置图标的数字标记相对应。
+    | ![数字标记1](figures/数字标记1.png)|![数字标记2](figures/数字标记2.png)  |
+  | -------- | -------- |
+  | 桌面图标数字标记 | 列表数字标记 | 
+
+- 圆点跟随文本宽度自适应，数字最多99+
+  ![数字标记数字规范](figures/数字标记数字规范.png)
+
+
+## 资源
+
+新事件标记相关的开发者文档详见容器组件[“Badge”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md)。

zh-cn/design/ux-design/multimodal-bottom-tab.md

+# 底部页签
+
+底部页签是一种常见的界面导航控件，通过它用户可以快捷的访问应用的不同模块。
+![2_zh-cn_image_0000001568412805.png](figures/2_zh-cn_image_0000001568412805.png)
+
+
+## 如何使用
+
+- 仅在一级界面上使用，用于快速切换不同页签的内容。
+
+- 放置在屏幕底部，体现应用的一级分类，这些分类以平等的方式呈现。使用底部页签也方便用户单手操作。
+
+- 底部页签上的每一个页签，都是图标+文本的形式，用户单击页签时，该页签会被激活，视觉上会高亮显示。
+
+- 在平板上的横屏界面，底部页签通常会转化为侧边页签，方便用户双手握持操作。
+
+- 底部页签上的文本要精练，不要使用太长的字符串。
+
+
+- 为了避免页面拥挤，底部页签的展示数量不宜过多，建议在2-5个之间。
+
+- 底部页签上允许有新事件标记，用于通知用户该页签下有新的内容或消息，详见[“多态控件”>“新事件标记”](multimodal-badge.md)。
+
+
+![4_zh-cn_image_0000001517612876.png](figures/4_zh-cn_image_0000001517612876.png)
+
+
+- 在平板上，底部页签通常会转化为侧边页签，方便用户双手握持操作。
+
+- 底部页签个数在2-5个之间。
+
+- 底部页签采用图标+文本的构成形式。
+
+
+## 资源
+
+底部页签相关的开发文档详见容器组件[“Tabs”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md)和[“TabContent”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md)。

zh-cn/design/ux-design/multimodal-bubble.md

+# 气泡提示
+
+
+气泡提示是一种轻量的提示控件，提示用户当前如何操作，一般不阻碍用户的操作。
+
+
+![tips_sub_1](figures/tips_sub_1.png)
+
+
+## 如何使用
+
+- 气泡提示用于用户初次进入界面时，使用气泡提示告知用户某个功能如何去使用，气泡指向与提示强相关的元素或区域上。
+
+- 需要在刚进入界面时就给出提示。
+
+
+
+![21](figures/21.png)
+
+
+## 分类
+
+- 不带操作的气泡提示
+
+- 带操作的气泡提示
+
+
+### 不带操作的气泡提示
+
+- 只可以使用向上或向下的指示箭头。
+
+- 提示的文字需要简洁明了，避免设计复杂给用户带来困扰。
+
+- 点击气泡，气泡直接消失。点击屏幕任何区域或导航键，气泡消失。
+
+- 离开当前界面，下次再进入此界面，气泡消失。
+  ![不带操作的气泡提示](figures/不带操作的气泡提示.png)
+
+
+### 带操作的气泡提示
+
+- 只可以使用向上或向下的指示箭头。
+
+- 提示的文字需要简洁明了，避免设计复杂给用户带来困扰。
+
+- 点击气泡，气泡直接消失。点击屏幕任何区域或导航键，气泡消失。
+
+- 离开当前界面，下次再进入此界面，气泡消失。
+  ![带操作的气泡提示](figures/带操作的气泡提示.png)
+
+
+## 资源
+
+气泡提示相关的开发者文档详见通用属性[“Popup控制”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md)。

zh-cn/design/ux-design/multimodal-button.md

+# 按钮
+
+按钮是能够帮助用户通过点击来触发对应操作的控件。
+
+
+## 如何使用
+
+- 按钮是系统与用户行为间的桥梁。
+
+
+![图片8](figures/图片8.png)
+
+
+- 在界面上很突出，通过颜色填充强调当前的重要操作。
+
+| ![图片10](figures/图片10.png)  | ![48D55367-C85F-4BBF-A7BF-A716EB96BEB1](figures/48D55367-C85F-4BBF-A7BF-A716EB96BEB1.png)  |
+|  --------  |  --------  |
+
+按钮文字的放置居中，不能靠左或靠右；文字不能换行。
+
+
+## 界面写作规则
+
+- 按钮长度：中文 2-4 个字，单行显示。
+
+
+## 资源
+
+按钮相关的开发者文档详见基础组件[“Button”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md)。

zh-cn/design/ux-design/multimodal-check-box.md

+# 多选
+
+
+多选框是允许用户从多个选项中选择一个或多个项目的控件，多选框可以随时打开或关闭。
+
+
+![多选备份](figures/多选备份.png)
+
+
+## 如何使用
+
+- 多选一般用于多选界面。
+
+- 多选可以从列表中选中一项或多项。
+
+- 当页面无选择项时，标题显示“未选择”。
+
+- 可以用多选设置多项，而不是用开关控件。
+
+- 用户点击某个选项时，可以选中或取消选中该项。
+
+
+## 资源
+
+多选相关的开发者文档详见基础组件[“CheckboxGroup”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md)。
+

zh-cn/design/ux-design/multimodal-component-overview.md

+# 概述
+
+
+为了支持多设备，应用需要能够在不同的设备上运行，控件作为应用的基础组成部分，需要支持不同的设备，且在视觉、交互、动效等表现形式上针对设备进行必要的调整，达到最佳体验。因此，同一控件在不同的设备上会呈现出不同的形态，称为多态控件。
+
+多态控件应该具备以下特点：
+
+- 覆盖默认设备、平板，兼顾智慧屏、车机、智能穿戴等终端。(OH3.2后续版本支持)
+
+- 场景一致性。在对应的使用场景下，其交互、视觉、动效要保持一致，在设计上属性参数保持一致或差异化。
+
+- 针对设备做优化。多态控件在不同的设备上的呈现应该是该设备下的最佳效果，因此在保证一致性的同时，还需要针对设备的特点进行优化。
+
+## 控件的状态
+
+- 控件的状态是一种视觉呈现，用于展示控件当前处于何种交互阶段。不同控件的相同状态应该保持一致的视觉风格，且应该清晰可见。
+
+- 应用可能部署在不同设备上供用户使用，有些设备会支持多种输入方式。例如平板可以连接蓝牙键盘和鼠标来做文字编辑工作，此时控件需要同时满足键盘和鼠标交互，需要支持获焦态和悬停态，如果控件没有支持这两种状态，在使用键盘走焦时或鼠标悬停时，控件就无法通过呈现出相应的状态为用户提供正确的视觉引导。OpenHarmony默认提供多种交互方式的控件实现，方便开发者支持多种输入方式和交互归一。
+
+常见的状态类型：
+
+
+  |![1_zh-cn_image_0000001568212890.png](figures/1_zh-cn_image_0000001568212890.png) | ![1_zh-cn_image_0000001568293053.png](figures/1_zh-cn_image_0000001568293053.png) | ![1_zh-cn_image_0000001568212892.png](figures/1_zh-cn_image_0000001568212892.png) |
+| -------- | -------- | -------- |
+|**正常态** <br/>表明当前控件可交互。|**不可用态** <br/>表明当前控件不可交互。 | **点击态** <br/>表明当前控件当前处于点击状态。<br/>手指或鼠标按下且未释放。  | 
+ | ![1_zh-cn_image_0000001568212893.png](figures/1_zh-cn_image_0000001568212893.png) |  ![1_zh-cn_image_0000001568212894.png](figures/1_zh-cn_image_0000001568212894.png)  |  ![1_zh-cn_image_0000001568212895.png](figures/1_zh-cn_image_0000001568212895.png) |
+|**获焦态** <br/>表明当前控件处于焦点状态。操作：<br/>-&nbsp;键盘或遥控器通过方向键将焦点从一个控件移动到另一个控件。 <br/>-&nbsp;通过语音操作，使得控件获得焦点。| **激活态** <br/>表明当前控件处于激活状态。用于有多个元素可获焦的控件。<br/>操作：焦点处在页签控件的某个页签上时，该页签获焦。点击此页签，该页签被激活 | **悬停态** <br/> 表明当前控件属于鼠标悬停的状态。<br/> 操作：将鼠标悬停在控件之上。| 
+
+
+# 控件概览
+
+## 导航类
+
+  |![底部页签](figures/底部页签.png) | ![子页签超出屏幕](figures/子页签超出屏幕.png) | ![标题栏-普通](figures/标题栏-普通.png) |
+| -------- | -------- | -------- |
+|底部[页签](multimodal-bottom-tab.md) | [子页签](multimodal-subtab.md) | [标题栏](multimodal-title-bar.md) | 
+ | ![标题栏-普通备份](figures/标题栏-普通备份.png)|  ![步骤导航器-默认](figures/步骤导航器-默认.png) |  ![2_zh-cn_image_0000001568412869.png](figures/2_zh-cn_image_0000001568412869.png) |
+|[侧边导航栏](multimodal-sidebar.md) | [导航点](multimodal-swiper.md) | [步骤导航器](multimodal-stepper.md) | 
+
+
+## 展示类
+
+  |![1_zh-cn_image_0000001568093257.png](figures/1_zh-cn_image_0000001568093257.png) | ![1_zh-cn_image_0000001568212898.png](figures/1_zh-cn_image_0000001568212898.png)| ![1_zh-cn_image_0000001568212899.png](figures/1_zh-cn_image_0000001568212899.png) |
+| -------- | -------- | -------- |
+|[分隔器](multimodal-divider.md) |[气泡提示](multimodal-bubble.md) |[进度条](multimodal-progress-bar.md) | 
+|![1_zh-cn_image_0000001517133790.png](figures/1_zh-cn_image_0000001517133790.png)| ![1_zh-cn_image_0000001568093233.png](figures/1_zh-cn_image_0000001568093233.png) |![1_zh-cn_image_0000001577319197.png](figures/1_zh-cn_image_0000001577319197.png) | 
+|[新事件标记](multimodal-badge.md) | [即时反馈](multimodal-instant-tip.md) |[数据可视化](multimodal-data-panel.md) | 
+| ![文本_sub_1](figures/文本_sub_1.png) |  |  |
+| [文本](multimodal-text.md) |  |  |
+
+
+## 操作类
+
+  |![2_zh-cn_image_0000001568212961.png](figures/2_zh-cn_image_0000001568212961.png) | ![1_zh-cn_image_0000001517452952.png](figures/1_zh-cn_image_0000001517452952.png)| ![1_zh-cn_image_0000001568293089.png](figures/1_zh-cn_image_0000001568293089.png)|
+| -------- | -------- | -------- |
+|[按钮](multimodal-button.md) |[下拉按钮](multimodal-drop-down-menu.md) |[状态按钮](multimodal-state-button.md) | 
+|![1_zh-cn_image_0000001517133794.png](figures/1_zh-cn_image_0000001517133794.png) |![1_zh-cn_image_0000001517133814.png](figures/1_zh-cn_image_0000001517133814.png) |![2_zh-cn_image_0000001517612920.png](figures/2_zh-cn_image_0000001517612920.png) |
+|[索引条](multimodal-index-bar.md) | [滚动条](multimodal-scrollbar.md) |[下拉刷新](multimodal-pull-to-refresh.md) | 
+|![1_zh-cn_image_0000001568212945.png](figures/1_zh-cn_image_0000001568212945.png) |  |  | 
+|[菜单](multimodal-menu.md) |  |  | 
+
+
+输入类
+
+  |![1_zh-cn_image_0000001517452972.png](figures/1_zh-cn_image_0000001517452972.png) | ![1_zh-cn_image_0000001568093217.png](figures/1_zh-cn_image_0000001568093217.png) |
+| -------- | -------- |
+|[文本框](multimodal-text-box.md) |[搜索框](multimodal-search-box.md) |  | 
+
+选择类
+
+  |![1_zh-cn_image_0000001517133818.png](figures/1_zh-cn_image_0000001517133818.png) |![1_zh-cn_image_0000001517293384.png](figures/1_zh-cn_image_0000001517293384.png) |![1_zh-cn_image_0000001568093265.png](figures/1_zh-cn_image_0000001568093265.png) |
+| -------- | -------- | -------- |
+| [勾选](multimodal-tick-box.md) | [开关](multimodal-toggle.md) | [单选框](multimodal-radio-button.md) | 
+|![1_zh-cn_image_0000001517133778.png](figures/1_zh-cn_image_0000001517133778.png) | ![1_zh-cn_image_0000001517452964.png](figures/1_zh-cn_image_0000001517452964.png)|![3_zh-cn_image_0000001517133822.png](figures/3_zh-cn_image_0000001517133822.png) |
+| [多选](multimodal-check-box.md) |[评分条](multimodal-rating-bar.md) | [滑动条](multimodal-scrollbar.md) | 
+|![1_zh-cn_image_0000001517293372.png](figures/1_zh-cn_image_0000001517293372.png) | | |
+|[滑动选择器](multimodal-picker.md) |  |  | 
+
+
+## 容器类
+
+  |![2_zh-cn_image_0000001568212941.png](figures/2_zh-cn_image_0000001568212941.png) |![1_zh-cn_image_0000001568412877.png](figures/1_zh-cn_image_0000001568412877.png) |
+| -------- | -------- | 
+|[可滑动面板](multimodal-slidable-panel.md) | [弹出框](multimodal-dialog.md) |  | 
\ No newline at end of file

zh-cn/design/ux-design/multimodal-data-panel.md

+# 数据可视化
+
+数据可视化是将传统数据转换成可视化图形的控件，把隐藏在数据中的信息以更加直观、友好、视觉化的方式直接展现于用户面前，提升用户获取数据信息效率。
+
+
+![数据可视化_sub_1](figures/数据可视化_sub_1.png)
+
+
+## 如何使用
+
+- 数据可视化用于需要进行展示与数据信息相关的界面。
+
+- 根据产品、应用的具体功能和需求，选择合适的数据可视化控件，让数据可视化控件发挥它最形象生动的作用。
+
+- 占比类适合在有多个数据总和时使用，可突出数据总和后各个数据的占比，从而突出表现各自份额。
+
+![1_zh-cn_image_0000001517293406.png](figures/1_zh-cn_image_0000001517293406.png)
+
+
+
+## 资源
+
+占比类数据可视化相关的开发者文档详见基础组件[“DataPanel”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md)。

zh-cn/design/ux-design/multimodal-dialog.md

+# 弹出框
+
+弹出框是一种模态窗口，在弹出框消失之前，用户无法操作其他界面内容，干扰性比较强。
+
+
+## 如何使用
+
+- 弹出框常用于展示用户当前需要的或用户必须关注的信息或操作，其他情况不建议使用弹出框，可考虑通知等其他非模态窗口。
+
+- 弹出框的内容通常是不同控件进行组合布局。例如文本（可带格式，如缩进、链接、粗体等）、列表、输入框、网格、图标或图片。常用于选择或确认信息。
+
+
+
+## 标题区
+
+纯标题-单行标题。
+
+![1_zh-cn_image_0000001573471365.png](figures/1_zh-cn_image_0000001573471365.png)
+
+
+## 分类
+
+- 无标题弹出框
+
+- 有标题弹出框
+
+- 纯文本
+
+
+### 无标题弹出框
+
+没有标题的弹出框。
+
+内容区域上下留 24vp 的间隔，但内容如果为列表类的内容，则不需要上下留 24vp 的间隔。
+
+  | ![1](figures/1.png) | ![2](figures/2.png) |
+| -------- | -------- |
+| 纯内容 | 内容+操作按钮 | 
+
+
+### 有标题弹出框
+
+标题分为：纯标题（单/双行标题）、标题+操作图标。
+
+  |  ![3](figures/3.png) |
+| -------- |
+| 标题+内容 | 
+
+当内容为列表类内容时，则不需要在底部留 24vp 的间隔。
+
+
+### 纯文本
+
+只有标题时，标题居中。
+
+![1_zh-cn_image_0000001573271493.png](figures/1_zh-cn_image_0000001573271493.png)
+
+
+## 高度规则与位置
+
+竖屏与横屏定义不同。
+
+
+### 竖屏
+
+弹出框最大高度= 0.8x（屏幕高度-状态栏-导航栏）
+
+位置始终保持在导航栏上方（含导航栏隐藏场景）。
+
+
+### 横屏
+
+弹出框最大高度= 0.9x（屏幕高度-状态栏） 位置在减去状态栏的区域居中显示。
+
+
+### 操作确认
+
+**标题**
+
+- 句子短，无断句，且为陈述句时，不加句号。
+
+- 感叹句、问句，需加对应标点（感叹号、问号）。
+
+- 标题简明扼要，清晰描述要进行的操作。可为短语（动词+名词）。
+
+**内容文本**
+
+- 描述需用户确认的内容（确认后产生的影响、效果、影响范围等），可为疑问句或陈述句。尽量不用辅助说明，若仍需要，避免与标题重复。
+
+**按钮**
+
+- 按钮让用户选择是否进行下一步动作。操作按钮应使用真实的操作内容。
+
+- 通常与标题栏中的动词一致。不要使用“是”或“否”。
+
+
+### 信息确认
+
+**内容文本**
+
+- 以陈述语气描述需告知用户的具体事项。例如目前没有可用的更新。
+
+**按钮**
+
+- 只有一个，例如“知道了”。避免使用“确认”、“好”。
+
+
+### 弹出框标题
+
+- 先逐级缩小字号到 15fp。
+  ![0000000000011111111.20220510095302.53512292337511436771446888852045](figures/0000000000011111111.20220510095302.53512292337511436771446888852045.png)
+
+- 继续超长，换行处理，支持换一行。
+
+- 最后，“...“截断处理。
+
+
+### 弹出框按钮
+
+- 按钮不支持换行
+  ![0000000000011111111.20220510095302.23714859819316521858981506654570](figures/0000000000011111111.20220510095302.23714859819316521858981506654570.png)
+
+- 继续超长，先考虑改变布局，左右变上下（若是上下布局，则不考虑此方式）。
+  ![0000000000011111111.20220510095302.03301485347356730621811289300521](figures/0000000000011111111.20220510095302.03301485347356730621811289300521.png)
+
+- 其次缩小文字。按钮文本同时逐级缩小，最小字号为 9fp。
+
+- 最后，“...“截断处理。
+  ![0000000000011111111.20220510095302.96026243257093777700562089792853](figures/0000000000011111111.20220510095302.96026243257093777700562089792853.png)
+
+
+## 资源
+
+弹出框相关的开发者文档详见API接口。

zh-cn/design/ux-design/multimodal-divider.md

+# 分隔器
+
+
+分隔线是用来将界面元素隔开的一种控件，使单个元素更加容易被用户识别。
+
+
+![divider_sub_2](figures/divider_sub_2.png)
+
+
+## 如何使用
+
+- 分割器用于列表或界面布局中。
+
+- 出现在一组列表项间，帮助分隔。
+
+- 列表上方第一行和最后一行下方不加分隔线。
+
+- 图标元素本身就能很好的区隔，无需重复，因此在这种情况下，分割线从图标元素之后开始。
+
+
+![0000000000011111111.20220510095310.07730797812317188338330277233468](figures/0000000000011111111.20220510095310.07730797812317188338330277233468.png)
+
+
+## 资源
+
+分割器相关的开发者文档详见基础组件[“Divider”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md)。

zh-cn/design/ux-design/multimodal-drop-down-menu.md

+# 下拉按钮
+
+
+下拉按钮可让用户在多个选项之间选择。
+
+
+![menu_sub_4](figures/menu_sub_4.png)
+
+
+## 如何使用
+
+- 下拉按钮常用于需过滤当前界面内容、快速切换类型或选项内容的场景。
+
+- 点击后显示一个选项菜单，当前的选项需用颜色标示，箭头方向向下不变。点击其中一个选项后，菜单会关闭，并在按钮上显示新的选项值。
+
+
+## 界面写作规则
+
+- 下拉按钮文本以短语形式呈现，建议使用名词或名词词组。文字间无空格。不可使用多个词组。不带句末标点。
+
+- 句式统一。
+
+
+## 资源
+
+下拉按钮相关的开发者文档详见基础组件[“Select”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md)。

zh-cn/design/ux-design/multimodal-index-bar.md

+# 索引条
+
+
+索引条是一种帮助按字母顺序排序的列表进行快速定位的操作条控件。
+
+
+![117](figures/117.png)
+
+
+## 如何使用
+
+- 索引条用于需要快速精确定位的场景。
+
+- 当使用索引条时，横竖屏均需要显示字母索引。如果字母索引显示不下，则使用缩略的方式显示。
+
+- 当用户点击字母索引条上字母，内容跳至所点击字母区域。
+
+- 界面内容不超过一屏时，索引条不显示。
+
+- 在索引条上上下滑动时，界面显示内容需同步滚动，以匹配手指在索引条上的字母位置。
+
+
+## 资源
+
+索引条相关的开发者文档详见容器控件[“AlphabetIndexer”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md)。

zh-cn/design/ux-design/multimodal-instant-tip.md

+# 即时反馈
+
+
+即时反馈是用于在屏幕底部或中部显示一个操作的轻量级反馈的控件。
+
+
+![Toast_3_2](figures/Toast_3_2.png)
+
+
+## 如何使用
+
+- 即时反馈用于希望确保用户看到某些信息时，进行提醒。
+
+![指示位置提示](figures/指示位置提示.png)
+
+- 若无必要，不要对所有操作给出即时反馈。
+
+- 不阻碍用户在界面上的其他操作。
+
+- 超过规定时间自动消失。不能通过点击，手指在屏幕上滑动的方式使之消失。
+
+- 界面上不能同时出现多个即时反馈。若一个即时反馈消失前，另一个即时反馈被触发，则第一个即时反馈应在第二个即时反馈出现前消失。
+
+
+![toast_new_3](figures/toast_new_3.png)
+

zh-cn/design/ux-design/multimodal-menu.md

+# 菜单
+
+菜单是一种临时性弹出窗口，用于展示用户可执行操作的控件。
+
+
+![menu_sub_1](figures/menu_sub_1.png)
+
+
+## 如何使用
+
+- 当用户点击工具栏或标题栏上的“更多”时可以出现菜单，帮助展示更多的选项和信息。
+
+- 菜单项中不显示与当前内容无关的项。
+
+- 最常用菜单项放在菜单顶部依次排列。
+
+- 选项内容需要左对齐。
+
+- 当用户点击返回键、空白处或选择一个菜单项，菜单就会消失。
+
+
+## 分类
+
+- 普通菜单
+
+- 长按菜单
+
+
+### 普通菜单
+
+点击工具栏上或标题栏上的“更多”时出现。
+
+![1_zh-cn_image_0000001573482797.png](figures/1_zh-cn_image_0000001573482797.png)
+
+
+### 长按菜单
+
+在某个操作对象上长按时出现。
+
+![1_zh-cn_image_0000001573283205.png](figures/1_zh-cn_image_0000001573283205.png)
+
+
+## 资源
+
+菜单相关开发者文档详见基础组件[“Menu”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menu.md)。

zh-cn/design/ux-design/multimodal-picker.md

+# 滑动选择器
+
+
+滑动选择器是可以从单个维度或多个维度帮助用户进行单选或组合选择的控件。
+
+
+![picker备份](figures/picker备份.png)
+
+
+## 如何使用
+
+- 滑动选择器常用于时间选择器场景，用来选择年、月、日、星期、小时、分的一项或几项的组合。
+
+- 用来选择某个具体时间。
+
+- 时间选择器使用弹出框或者内嵌的方式，在移动设备上选择单个时间（小时:分钟 的格式）。其格式可根据用户的时间设置自动调整。例如 12 小时或 24 小时格式。
+
+
+## 时间选择器
+
+
+- 内容区：显示小时分。可跟随系统设置切换 12/24 小时显示小时分。
+
+- 操作区：操作为“取消”、“确定”。
+    | |
+  | -------- |
+  | ![阿斯顿](figures/阿斯顿.png) | 
+
+  有关时间选择器的软件实现，请参阅详见...
+
+
+## 日期选择器
+
+
+- 标题：显示年月日星期。可由应用根据实际场景来定义。
+
+- 内容区：根据业务场景显示所有年份 还是 不显示今年以后的年份(最多显示到今年，及带一个--，表示不选择年）。例如生日场景，年份可以不选。开发可自定义是否有农历开关。当界面上显示农历开关时，农历开关打开的时候，显示农历日期。农历开关关闭的时候，显示公历日期。当界面上没有显示农历开关时，可定义界面是显示公历还是农历。
+
+- 操作区：操作为“取消”、“确定”。
+  ![v的v分](figures/v的v分.png)
+
+  有关日期选择器的软件实现，请参阅datapicker
+
+
+## 资源
+
+滑动选择器相关的开发者文档详见基础组件[“TextPicker”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md)、[“TimePicker”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md)和[“DatePicker”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md)。

zh-cn/design/ux-design/multimodal-progress-bar.md

+# 进度条
+
+
+进度条是显示任务处理的速度、时间、完成度以及剩余完成量的控件。
+
+
+![progressbar_sub_1](figures/progressbar_sub_1.png)
+
+
+## 如何使用
+
+- 进度条常用于加载内容的等待状态，蓝牙传输文件等场景。通过显示内容加载过程或操作处理进度帮助用户看到当前任务的状态。
+
+- 一般以长方形条状显示，帮助用户感知到计算机对任务的处理进度。
+
+- 在使用进度条的时候，应当结合当前的场景进行设计，尽量将进度融合在界面内容中或操作的元素上，尽可能减少使用进度条弹出框，以免给用户带来复杂感
+
+- 在弹出框中，若操作等待时间过长，可以“隐藏”按钮帮助用户将操作任务转后台等待。要注意隐藏后要在通知栏体现任务。
+
+
+## 界面写作规则
+
+- 有明确进度：可看清任务对象和进度的，建议不用文字。若要使用，文本为：操作说明+进度“XX%”。
+
+- 无明确进度：文本为“正在xx...”,不用“xx中...”。
+
+
+## 资源
+
+进度条相关的开发者文档详见基础组件[“Progress”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md)。

zh-cn/design/ux-design/multimodal-pull-to-refresh.md

+# 下拉刷新
+
+
+下拉刷新是用户通过下拉手势快捷获取最新内容的控件。
+
+
+![refresh_3](figures/refresh_3.png)
+
+
+## 如何使用
+
+- 下拉刷新用于内容更新快，需要用户不断刷新页面，进行内容更新时。
+
+- 下拉过程中显示loading转圈动画。
+
+- 下拉小于规定距离时，松手后页面直接回弹。
+
+- 下拉超过规定距离时并松手，触发刷新动画，仅显示loading转圈动画，不显示文字。
+
+
+## 资源
+
+下拉刷新相关开发文档详见容器组件[“Refresh”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md)。

zh-cn/design/ux-design/multimodal-radio-button.md

+# 单选框
+
+
+单选框是允许用户从多个互斥选项中选择单个选项，仅该选项选中生效的控件。
+
+
+![Radio_sub_1](figures/Radio_sub_1.png)
+
+
+## 如何使用
+
+- 单选框用于有多个选项的单选列表中。在用户仅能选择一个选项的情况下，需要使用单选框而不是多选框。
+
+- 单选框所在的选项不会单独使用，而是需要和其他单选项成组使用，且展示出来的所有可选项处于平等的位置。
+
+- 建议将默认选择项作为最佳选择项推荐给用户，且需确保选中项默认被用户看到。
+
+- 如果为用户提供默认情况下，单选列表中有一项会被选中，作为默认值，用户无法清除默认值。
+
+- 对于开关形式的选择，例如开，关。请考虑使用开关控件而不是单选列表。
+
+- 某个单选项被选中后，其他单选项会被取消选中状态。
+
+
+## 资源
+
+单选框相关的开发者文档详见基础组件[“Radio”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md)。

zh-cn/design/ux-design/multimodal-rating-bar.md

+# 评分条
+
+评分条是用户对内容、商品或物体进行主观评价时使用的控件。能够表示用户的使用感受，分1－5颗星，1星最差，5星最好。
+
+
+![撒的](figures/撒的.png)
+
+
+## 如何使用
+
+- 评分条用于当需要用户对某件商品、某项服务进行评价，可以使用评分条。在评分条下方，可以显示每个星级对应的评价，根据打分动态变化。
+
+- 有两种操作方式：点击或滑动。用户可以点击星型图标对内容进行评分或在星型图标组，横向滑动对内容进行评分。
+
+![1_zh-cn_image_0000001568412841.png](figures/1_zh-cn_image_0000001568412841.png)
+
+## 资源
+
+评分条相关的开发者文档详见基础组件[“Rating”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md)。

zh-cn/design/ux-design/multimodal-scrollbar.md

+# 滚动条
+
+
+滚动条是一种可以滚动并显示页面当前所处位置的条状控件。
+
+
+![12](figures/12.png)
+
+
+## 如何使用
+
+- 索引条用于快速查找，快速定位需要的信息。
+
+- 滚动条支持拖拽，在页面很长的情况下，可以通过拖拽滚动条的方式来快速浏览内容。
+
+- 视觉上，滚动条在拖拽的情况下会变粗，以帮助用户看清滚动条的位置。
+
+- 当页面内容超出内容显示区域长度时，可以在界面右侧使用滚动条。
+
+
+![11](figures/11.png)
+
+
+- 初次进入界面，若界面内容超出显示区域，显示竖向滚动条，无任何操作，2 秒后消失。
+
+- 滚动条高度为动态高度：滚动条高度可以反映当前可视内容占整个内容的高度比例，高度是动态变化的，内容高度越高，滚动条高度越小。
+
+
+## 资源
+
+滚动条相关的开发者文档详见基础组件[“ScrollBar”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md)。

zh-cn/design/ux-design/multimodal-search-box.md

+# 搜索框
+
+
+搜索框是提供给用户进行内容搜索的控件。通过搜索，可以帮助用户快速的找到并定位到想要的内容。
+
+
+![搜索框_sub_1](figures/搜索框_sub_1.png)
+
+
+## 如何使用
+
+- 搜索框用于用户需要通过搜索功能来找到想要的内容，且该页面需要突出搜索功能时，使用搜索框（该页面不需要突出搜索功能时，使用搜索图标）。
+
+- 搜索框可以结合搜索历史记录，输入自动补全，语音输入等功能，方便用户快速输入查询。
+
+- 在搜索框有输入内容的时候，可以点击搜索框内的清除按钮，一键清除输入。
+
+
+## 界面写作原则
+
+显示的水印文字需要帮助用户了解可搜索什么内容
+
+无运营需求的应用：水印文字采用动宾结构，中文为“搜索XXX、XXX、XXX...”或“搜索XXX”
+
+有运营需求的应用：水印文字直接显示运营文案，常见于应用市场、视频、阅读等内容类应用。直接将水印文字作为搜索关键词进行搜索
+
+
+## 资源
+
+搜索框相关的开发者文档详见基础组件[“Search”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md)。

zh-cn/design/ux-design/multimodal-sidebar.md

+# 侧边导航栏
+
+侧边导航栏是在平板横屏界面时，用于对应用进行导航操作的控件。在平板横屏界面时，使用侧边导航栏，切换页签或入口效率更高。
+
+
+## 如何使用
+
+- 侧边导航栏常用于一级界面。
+
+- 侧边导航栏根据产品需要，使用合适的侧边导航栏样式。
+
+
+## 分类
+
+- 侧边页签
+
+- 侧边入口列表
+    | ![侧边导航栏_sub_1](figures/侧边导航栏_sub_1.png)  |![1_zh-cn_image_0000001517612940.png](figures/1_zh-cn_image_0000001517612940.png) |
+  | -------- | -------- |
+  | 侧边页签 | 侧边入口列表 | 
+
+
+### 侧边页签
+
+通常在一级界面上使用，用于快速切换不同页签的内容。
+
+![侧边页签](figures/侧边页签.png)
+
+
+### 侧边入口列表
+
+通常在一级界面上使用。适用：效率型应用。
+
+- 支持将较深层级的内容作为侧边入口。
+
+- 支持用户自定义侧边入口。
+
+- 支持侧边列表的编辑，例如删除、排序等。
+
+- 支持拖拽内容到侧边导航栏上生成快捷访问的列表项。
+
+- 点击“隐藏“图标，隐藏侧边栏。点击“显示“图标，显示侧边导航栏。
+
+
+## 资源
+
+侧边导航栏相关的开发者文档，侧边页签详见容器组件[“Tabs”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md)和[“TabContent”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md)，侧边入口列表详见容器组件[“SideBarContainer”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md)。

zh-cn/design/ux-design/multimodal-slidable-panel.md

+# 可滑动面板
+
+可滑动面板是一种轻量的内容展示的窗口控件。
+
+
+## 如何使用
+
+- 可滑动面板常用于界面的底部，方便用户单手操作。
+
+- 在折叠屏展开的情况下以及平板的情况下，由于设备不适合单手操作，可滑动面板的位置和显示形式会根据场景进行调整。例如分享界面会居中显示在屏幕中间。
+
+- 可滑动面板展示的内容跟当前场景相关。可以用来持续展示需要显示的内容，例如在智慧识屏界面，可滑动面板用来展示识屏的结果。也可以用来展示临时需要显示的内容，例如查单词的时候，可滑动面板用来临时显示单词的解释。
+
+- 内容永久展示，内容展示类有小、中（类半屏）、大（类全屏）三种尺寸状态，初始状态通常为中尺寸状态。
+
+| ![0000000000011111111.20220510095304.72992394150607102372539097629612](figures/0000000000011111111.20220510095304.72992394150607102372539097629612.png)   | ![0000000000011111111.20220510095304.24608889135029266787163977198981](figures/0000000000011111111.20220510095304.24608889135029266787163977198981.png)   |![0000000000011111111.20220510095304.12793285951505933611214550743568](figures/0000000000011111111.20220510095304.12793285951505933611214550743568.png)  |
+|  --------  |  --------  |  --------  |
+| 小      | 中      | 大      | 
+
+
+**滑动**
+
+
+- 小尺寸状态向上滑切换为类半屏状态，继续上滑切换为类全屏状态。
+
+- 类全屏状态向下滑切换为类半屏状态，继续向下滑切换为小尺寸状态。面板顶部短横杠随着状态的变化而变化。
+
+
+**点击**
+
+
+- 点击小尺寸面板的箭头所在区域（向上箭头），切换为半屏面板。
+
+- 点击类全屏面板向下箭头所在区域（向下箭头），切换为半屏面板。
+
+- 点击半屏面板横条所在区域，无响应。
+
+
+## 资源
+
+可滑动面板相关的开发者文档详见容器组件[“Panel”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md)。

zh-cn/design/ux-design/multimodal-slider.md

+# 滑动条
+
+
+滑动条允许用户在一系列的范围值中选择自己需要的值或位置。
+
+
+![slider_sub_4](figures/slider_sub_4.png)
+
+
+## 如何使用
+
+- 滑动条常用于进行进度或音量的调节。
+
+- 需要手动调节进度时使用。
+
+- 值的范围：左边－最小值，右边－最大值。
+
+- 用户可以沿着条形查看或选择范围中的值（或范围）。
+
+- 使用滑块进行调整应当是立即进行的，用户在确定选择时即可以进行调整。
+
+- 避免有延迟给用户带来不好的体验，滑块不应用于调整设置。
+
+
+## 资源
+
+滑动条相关的开发者文档详见基础组件[“Slider”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md)。

zh-cn/design/ux-design/multimodal-state-button.md

+# 状态按钮
+
+
+状态按钮是指从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。
+
+
+![1112](figures/1112.png)
+
+
+## 如何使用
+
+- 状态按钮用于当用户需要从一组选项中进行单选或多选，可以使用状态按钮将选择项作为筛选条件，在界面上实时显示筛选出来的结果或将选择项作为选择结果提交。
+
+- 状态按钮有已选择和未选择两种状态。
+
+- 状态按钮不单独使用，通常由多个状态按钮组成一组选择项。
+
+- 可以用于单项选择。当多个状态按钮作为单选选择时，只能有一个状态按钮处于选择状态，并作为当前的选择。即选择一个后，另一个状态按钮就自动设置为未选择状态。
+
+- 可以用于多项选择。当多个状态按钮组成多选选项，每个状态按钮都可以被选择。
+
+
+## 界面写作原则
+
+- 每个状态按钮使用名词词组，不加标点。
+  ![111112](figures/111112.png)
+
+
+## 资源
+
+状态按钮相关的开发者文档详见基础组件[“Toggle”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md)。

zh-cn/design/ux-design/multimodal-stepper.md

+# 步骤导航器
+
+步骤导航器是用户需要进行多个步骤完成任务时所使用的组件，步骤导航器可以展示当前的进展。
+
+
+![stepper_sub_1](figures/stepper_sub_1.png)
+
+
+## 如何使用
+
+- 步骤导航器用于当任务较复杂需要将任务分解成多个合理的步骤时。
+
+- 为了保证步骤清晰，每个步骤都需要聚焦一个特定的小任务，通过页面标题来呈现小任务的名称。
+
+- 为了给用户带来良好的体验，要确保每个小任务都清晰易懂，名称简洁，保持界面布局一致性。
+
+- 为了不遮挡内容，应当将操作按钮固定在底部显示。
+
+- 当需要显示输入键盘时，步骤导航按钮可以固定在输入键盘上方。
+
+- 底部操作区可以采用“文本按钮 + 箭头”形式，文本按钮可点击。
+
+- 如果当前步骤无法返回到上一界面，那么该文本按钮左侧不加箭头。
+
+- 如果当前步骤前往的下一界面无法返回，那么该文本按钮右侧不加箭头，文字可以更换成下一个任务的开始介绍例如“跳过”，“开始”等。
+
+![1_zh-cn_image_0000001568412861.png](figures/1_zh-cn_image_0000001568412861.png)
+
+- 在步骤导航流程中，如果某个操作耗时，请在操作的地方进行等待反馈，例如使用等待按钮，尽量不要弹出一个等待弹出框。
+
+![1_zh-cn_image_0000001517133802.png](figures/1_zh-cn_image_0000001517133802.png)
+
+## 资源
+
+步骤导航器相关的开发者文档详见基础组件[“Stepper”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md)。

zh-cn/design/ux-design/multimodal-subtab.md

+# 子页签
+
+子页签是一种用于展示不同分类内容的控件，能够帮助用户快速访问不同的同级内容。
+
+
+## 如何使用
+
+- 子页签主要用于多个同级内容的展示与导航。
+
+- 通常放置在内容区的上方。
+
+- 为确保能够清晰描述分类的内容，应当使用简洁明了的页签名称。
+
+- 为了避免页面拥挤，子页签的展示数量不宜过多，建议2-5个。
+
+- 子页签上可以有新事件标记，用于通知用户该页签下有新的内容或消息，详见[“多态控件”>“新事件标记”](multimodal-badge.md)。
+
+ ![subtab_sub_1](figures/subtab_sub_1.png) 
+
+
+## 界面写作规则
+
+页签中的文本采用短语形式（名词或名词词组），简明清晰描述页面内容，不带标点。
+
+
+## 资源
+
+子页签相关的开发文档详见容器组件[“TabContent”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md)、[“Tabs”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md)。

zh-cn/design/ux-design/multimodal-swiper.md

+# 导航点
+
+
+导航点是告知用户多个内容的数量并指示当前内容所处位置的组件，可以进行滑动切换显示内容。
+
+
+![pageindicator_sub_1](figures/pageindicator_sub_1.png)
+
+
+## 如何使用
+
+- 导航点用于需要按顺序浏览多个同等重要的页面或内容场景时。
+
+- 导航点位于内容区的下方。用户通过在内容区左右滑动可以切换内容，同时导航点的位置发生变化，帮助用户清晰的觉察当前内容的位置。
+
+- 需要用一系列小圆点表示，圆点个数代表界面数量。
+
+- 支持在内容区左右滑动以切换内容。仅广告轮播图提供自动循环滑动，自动滑动间隔为 5s。
+
+- 支持在导航点上滑动切换内容。左滑或右滑按顺序切换页面。
+
+- 自动轮播内容时，使用导航点指示轮播内容的数量和当前内容的位置，例如广告轮播图。
+
+
+## 资源
+
+导航点相关的开发者文档详见容器组件[“Swiper”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md)。

zh-cn/design/ux-design/multimodal-text-box.md

+# 文本框
+
+文本框是支持用户输入文本、数字或者混合数据，同时也支持用户选择文本的控件。
+
+
+![116](figures/116.png)
+
+
+## 如何使用
+
+- 文本框用于需要用户进行文本输入、文本选择的界面。
+
+- 按钮可以显示在文本框右侧并直接作用于文本框内的文字。
+
+- 右侧最多放置1个图标。
+
+- 只可输入一行文本。
+
+- 用户输入错误时，系统给出实时提示，帮助用户修正错误。
+
+![单行文本框2](figures/单行文本框2.png) 
+
+
+错误出现后，禁止提交输入的内容。若系统无法实时给出提示，则在内容提交后给出。输入存在错误时，可在输入框下方显示错误信息，说明如何修复。
+
+
+## 资源
+
+文本框相关的开发者文档详见基础组件[“TextInput”](https://gitee.com/openharmony/docs/blob/6e831661fb6f714a9492084baa552a4af4617c65/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md)和[“TextArea”](https://gitee.com/openharmony/docs/blob/6e831661fb6f714a9492084baa552a4af4617c65/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md)。

zh-cn/design/ux-design/multimodal-text.md

+# 文本
+
+
+文本是书面语言的表现形式，从文学角度说，通常是具有完整、系统含义的一个句子或多个句子的组合。一个文本可以是一个句子、一个段落或者一个篇章。
+
+
+![文本_sub_1](figures/文本_sub_1.png)
+
+
+## 如何使用
+
+- 文本用于任意界面中，向用户提供具体的阅读信息、指令、提醒等。
+
+- 文字要简洁明确，通顺，不要有错别字。
+
+- 注意标点符号的正确使用。
+
+- 注意文本与背景，文本与文本的对比度、间距、色彩，保证文本的可阅读性。
+
+- 当文本过多时，巧用分段等技巧，可以提高用户的阅读体验。
+
+
+## 资源
+
+文本相关的开发者文档详见基础组件[“Text”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md)

zh-cn/design/ux-design/multimodal-tick-box.md

+# 勾选
+
+勾选表示用户决定是否同意某项描述的控件。
+
+
+![checkbox](figures/checkbox.png)
+
+
+## 如何使用
+
+- 勾选常用于USB连接界面的“不再提示”、获取位置信息界面的“禁止后不再询问”。
+
+![1_zh-cn_image_0000001568293065.png](figures/1_zh-cn_image_0000001568293065.png)
+
+
+- 勾选项是否默认开启，需要考虑勾选项对用户所带来的影响，默认状态不应该对用户带来负面影响。
+
+- 勾选项是界面中主要内容或操作的一个附加选项。
+
+- 不要通过默认勾选这种方式，诱导用户或趁用户不注意开启或关闭某个功能，如果跟用户意愿违背，用户会有强烈的欺骗感。
+
+
+## 资源
+
+勾选相关的开发者文档详见基础组件[“Checkbox”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md)。

zh-cn/design/ux-design/multimodal-title-bar.md

+# 标题栏
+
+
+标题栏是用于呈现当前界面的名称和操作入口的控件。
+
+
+## 如何使用
+
+- 标题栏主要用于工具界面或内容型界面。
+
+- 标题栏应当放在界面顶部。当需要更突出功能或内容时，可以不需要突出标题。
+
+
+### 普通标题栏
+
+- 当标题栏用于不需要突出标题的场景时使用
+
+
+- 标题栏的右侧可以放置常用操作的图标，帮助用户通过点击执行对应的操作。
+
+- 除了沉浸式界面，所有常规设计界面都需要提供标题栏。
+  ![appbar_sub_3](figures/appbar_sub_3.png)
+
+
+### 非一级界面标题栏
+
+- 非一级界面的标题是界面的名称。非一级界面标题的左侧需要显示“返回”图标，用于指示用户可以回到上一个视图或层级。
+
+- 为了帮助用户返回上一级，文本标题左侧需要提供一个返回按钮。
+
+- 双行标题中的第二行标题，用于对第一行标题进行辅助说明。
+
+- 【不推荐】当需要有多个视图可以切换，但除默认视图外其他视图极少使用时，可以使用下拉菜单型标题。这种做法会导致下拉菜单型标题里面的内容被隐藏，降低用户的使用，因此不推荐使用。
+  ![app_bar_1_copy_3备份_2](figures/app_bar_1_copy_3备份_2.png)
+
+
+## 界面写作规则
+
+- 标题简洁明了。
+
+- 标题和进入该页面的上一级界面的功能选项名称保持一致。
+
+- 无标点，以名词短语为主。
+
+
+## 资源
+
+标题栏相关的开发文档详见基础组件[“Navigation”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md)。

zh-cn/design/ux-design/multimodal-toggle.md

+# 开关
+
+
+开关是可以用来打开或关闭单个项目功能的控件。
+
+
+![swtich备份](figures/swtich备份.png)
+
+
+## 如何使用
+
+
+- 开关的位置位于所要设置项的后面，通过开关，可以开启或关闭某个功能。
+
+- 由于开关操作会使设置的状态发生变化，因此在有些场景下从开到关或关到开，会有个状态的延迟显示。例如开启“蓝牙”功能，蓝牙从关闭到开启需要一定的时间，用户会看到一个短暂的变化过程。
+
+
+## 资源
+
+开关相关的开发者文档详见基础组件[“Toggle”](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md)。

zh-cn/design/ux-design/responsive-layout.md

+# 响应式布局
+
+当基本的自适应布局无法满足多终端上屏幕的体验要求时，我们需要针对不同终端的屏幕特点，设定容器与栅格的关系达到响应式的布局。通常响应式布局能根据栅格断点变化进行有级变化。
+
+
+## 栅格断点系统
+
+根据设备的水平宽度，OpenHarmony提供了断点系统，覆盖超小、小、中、大 四种屏幕类型，并结合栅格系统默认提供了对应 Column 的数量关系。不同的设备根据自身屏幕水平宽度，在不同的断点范围，系统将自动匹配不同数量的栅格。应用也可针对具体界面自定义栅格。
+
+![删格](figures/删格.png)
+
+栅格断点系统与日常使用的设备屏幕类型有一定的对应关系，例如：超小对应智能穿戴设备，小对应默认设备，中对应平板，大对应智慧屏与PC。设计师可面向希望运行的设备进行所属屏幕类型的适配。
+
+随着智能设备种类的增加，越来越多产品在四种屏幕类型上具备不同的交互能力，如支持触摸的运动相机（小）、仅支持遥杆的手持云台（小-中）、不可移动的智能台灯（中-大）等，需结合具体设备交互进行对应设计，不可一概而论。
+
+
+## 缩进布局
+
+为了在宽屏上内容显示有更好的效果，在不同宽度的设备上进行不同缩进效果。
+
+![缩进布局](figures/缩进布局.gif)
+
+缩进适用于，因宽度明显变大，内容拉伸以后导致屏幕空白内容超过50%，或文本内容过长（每行大于30字），但没有上下级界面可供同时展示或上下级界面不适合同时显示的场景。
+
+OpenHarmony提供的默认实现为，当栅格为8column或12column时可以响应6column和8column的缩进布局。
+
+
+## 挪移布局
+
+利用屏幕的宽度优势，将原先的上下布局切换成左右布局。
+
+例如，上下排布的插画和文字，横屏后左右排布。
+
+![挪移布局](figures/挪移布局.gif)
+
+挪移布局适用于横竖屏切换，以及类似的宽高比明显变化（大于200%）同时希望保证内容完整的场景。
+
+
+## 重复布局
+
+利用屏幕的宽度优势，将相同属性的组件横向并列排布。
+
+![重复布局](figures/重复布局.gif)
+
+重复布局适用于对宽高比敏感的图片和及组合内容，当内容缩放以后导致原图放大超过150%的场景。
+
+OpenHarmony栅格系统提供的分栏实现为，当栅格为8column或12column时可以将默认4栅格的页面整体进行重复布局。
+
+
+响应式布局对应OpenHarmony系统提供的布局能力中的栅格断点系统和媒体查询，详见本文 “[响应式布局](responsive-layout.md)”。

zh-cn/design/ux-design/typical-input-modes.md

+# 常见输入方式
+
+
+## 输入类型
+
+**基于触控的交互**
+
+很多设备都拥有支持多点触控的屏幕，允许用户使用手指和/或手写笔进行交互。它们与屏幕的接触状态、数量以及运动行为被识别成触控手势和操作，可以支持多种交互功能和体验（例如点击、滑动、缩放、旋转）。在多数情况下，应将触控交互作为用户首要的交互方式。
+
+以下是基础的手势操作：
+
+  | **手势操作** | **功能描述** | **图示** | 
+| -------- | -------- | -------- |
+| 点击 | 用户通过点击某个元素触发功能或访问界面。 | ![zh-cn_image_0000001517133754](figures/zh-cn_image_0000001517133754.png) | 
+| 长按 | 用户通过长按某个元素触发菜单或特定模式或进入界面。长按手势发现性差，常用功能不要使用长按来触发。<br/>场景：<br/>-&nbsp;长按操作显示弹出菜单。例如，在联系人列表中长按某个联系人。<br/>-&nbsp;长按操作显示快捷菜单。例如，长按某个桌面图标。<br/>-&nbsp;长按操作进入多选。一般用于列表或宫格界面。例如，长按信息的列表界面，长按图库的宫格界面。<br/>-&nbsp;长按操作进入编辑模式或可排序模式，并伴随振动。例如，长按闹钟的列表界面，长按桌面的空白处。<br/>-&nbsp;长按操作选择文本。例如，在文本框中长按已经输入的文字。<br/>-&nbsp;长按图标进入该图标对应的功能详情。例如，在通知面板上长按功能开关图标。 | ![zh-cn_image_0000001568212917](figures/zh-cn_image_0000001568212917.png) | 
+| 滑动 | 用户通过滑动来滚动列表或平移界面内容。<br/>场景：<br/>-&nbsp;通过滑动滚动列表。<br/>-&nbsp;在内容区横向滑动切换页签。<br/>-&nbsp;通过滑动平移地图。 | ![zh-cn_image_0000001517612884](figures/zh-cn_image_0000001517612884.png) | 
+| 拖动 | 用户将元素从一个位置移动到另外一个位置。 | ![zh-cn_image_0000001517293348](figures/zh-cn_image_0000001517293348.png) | 
+| 双击 | 用户快速点击两下以放大/缩小内容、选择文字或触发特定的功能。 | ![zh-cn_image_0000001517452920](figures/zh-cn_image_0000001517452920.png) | 
+| 捏合 | 用户使用两个手指按住屏幕向外展开以放大内容。<br/>使用两个手指按住屏幕向内收拢以缩小内容。<br/>场景：<br/>-&nbsp;放大/缩小图片。例如，在查看图片界面。<br/>-&nbsp;放大/缩小内容。例如，浏览页面或者相机取景界面。 | ![zh-cn_image_0000001568293069](figures/zh-cn_image_0000001568293069.png) | 
+
+**基于光标的交互**
+
+当用户使用指向设备（鼠标、触摸板、AR/VR手柄、隔空手势等）与应用程序进行间接交互时，光标指向的对象和光标本身应提供适当的视觉反馈以表达对象的可交互性和到达的准确性。同时，应考虑利用光标支持精细化操作和悬浮状态的特性（相比手指触摸），以提升应用生产力、简化交互任务和增强信息展示。
+
+基于光标的交互设计亦可推广至AR/VR手柄和隔空手势等空间交互场景。
+
+**基于焦点的交互**
+
+当用户使用键盘、智慧屏遥控器、车机摇杆/旋钮等非指向性输入方式与应用程序进行间接交互时，基于焦点的导航和交互是重要的输入手段。
+
+
+## 典型输入方式
+
+**鼠标**
+
+鼠标是一种典型的基于光标的、具备像素级精度的指向型输入方式，最为适用于对用户交互具有较高精度要求的生产力应用和高密度UI的场景。
+
+一般地，鼠标由左键、右键和滚轮键组成，这些按键的交互应遵循业界标准的规范功能和用户的既有使用习惯。鼠标也可以通过和不同的键盘按键进行结合，提供额外的快捷操作体验。
+
+**触控板**
+
+触控板同时具备多指触控手势输入（触屏）和精细化指向型输入（鼠标）的特性，使得触控板既适合用于基于触摸交互优化的用户界面，也适合用于对指点精度有较高要求的生产力应用。
+
+**键盘**
+
+键盘是一种重要的生产力输入方式，优秀的键盘使用体验应允许用户快速准确地进行文本输入、双手无需离开键盘即可在系统和应用内进行导航、访问所有的功能、以及支持无障碍体验。
+
+**手写笔**
+
+在触屏上，手写笔是手指精细化操作的延伸，是一种像素级精度的指点设备。手写笔提供了一种直接的、自然的方式来进行数字内容书写、绘图和标注。
+
+**隔空手势**
+
+隔空手势（非接触手势）是一种人与设备交互的新方式，用户可以在无需手持或接触设备的情况下与设备进行便捷的交互。随着技术的发展，隔空手势在默认设备、平板、车机、智慧屏、音箱、AR/VR等设备上都有一定的应用。通常情况下，隔空手势通常是符合用户直觉、文化习惯或者容易操作的动作。

zh-cn/design/ux-design/ui-layout-cases.md

+# 布局基础运用案例
+
+
+## 平级导航的复合网格视图
+
+平级导航的复合网格视图常出现在同时展示多种不同内容的界面。
+
+例如，市场类应用作为典型的平级导航，其首页不同板块采用了不同布局能力。
+
+![一多-布局1](figures/一多-布局1.png)
+
+- 标题栏与搜索栏：因元素单一、位置固定在顶部，因此适合采用自适应拉伸，并在大尺寸界面中从纵排变为横排，充分利用顶部区域。
+
+- 运营横幅：在小设备上默认为多张轮播展示，随宽度变化采用自适应缩放，在中尺寸界面通过重复布局变为并排多张。
+
+- 图标型网格：对于数量固定、且子内容重要程度相同的网格，需保证完全展示，可采用均分拉伸。对于数量不限的网格，则采用自适应延伸，在更大宽度上展示更多数量。
+
+- 底部导航栏：导航类控件本身综合了均分和折行，在宽度变化时能占用均等宽度并在足够宽度下并排，当在大尺寸界面中，挪移到左边，使不同页签距离更近、同时符合视觉走向。
+
+在横竖屏切换时，也保持了一致的布局能力，实际上完成了大尺寸和中尺寸的切换。
+
+![一多-布局2](figures/一多-布局2.png)
+
+当界面出现在智慧屏上，虽然同是大尺寸界面，为了符合设备样式和遥控器交互规则，搜索栏转化为图标入口，导航栏挪移到页面上部。
+
+![一多-布局3](figures/一多-布局3.png)
+
+
+## 层级导航的列表视图
+
+层级导航的列表视图常出现在多类简单信息并列或多入口业务入口的界面。
+
+例如，设置类应用作为典型的层级导航，其列表控件采用自适应拉伸。
+
+![布局基础案例-层级导航-设置](figures/布局基础案例-层级导航-设置.png)
+
+在中尺寸设备中，为避免中间区域空白过大，采用缩进布局，大尺寸设备中，为充分利用横向空间，建议采用栅格系统形成分栏效果，并让列表元素在各自区域保持拉伸。
+
+
+## 专辑详情页面
+
+专辑详情不限于展示音乐内容，也用于展示视频、短视频、电台、书本等内容类合集。
+
+例如，歌单类界面作为典型的内容垂类页面，其总体分为标题栏、歌单信息、歌单操作、歌单列表、播放栏几个板块。
+
+- 标题栏：采用自适应拉伸。
+
+- 歌单信息：采用自适应缩放，并在中尺寸界面进行缩进处理使内容呈现协调。
+
+- 歌单操作：板块内部采用均分拉伸，在小尺寸设备上利用纵向空间、中尺寸设备上挪移到歌单封面右边。
+
+- 歌单列表：板块内部采用左右拉伸，在中尺寸设备上可与歌单信息使用相同缩进布局。
+
+- 播放栏：固定在界面底部，保持左右拉伸即可。
+
+![页面布局-布局基础案例-歌单详情页面布局能力360-800vp](figures/页面布局-布局基础案例-歌单详情页面布局能力360-800vp.png)
+
+在横竖屏切换时，完成了中尺寸和大尺寸的切换。歌单列表板块进行挪移的同时，内部采用了重复布局。
+
+歌单信息和歌单操作板块因较小宽高比，挪移到上下排布。
+
+![页面布局-布局基础案例-歌单详情页面布局能力800-1280vp](figures/页面布局-布局基础案例-歌单详情页面布局能力800-1280vp.png)
+
+当界面出现在智慧屏上，为了符合沉浸简约的设备信息和遥控器交互规则，将部分歌单信息替代原来标题栏的位置，并取消播放栏。同时歌单列表居左，更方便遥控器选择。
+
+![页面布局-布局基础案例-歌单详情页面布局能力1280-1920vp](figures/页面布局-布局基础案例-歌单详情页面布局能力1280-1920vp.png)

zh-cn/design/ux-design/ui-layout-overview.md

+# 概述
+
+布局不是静态固定的，当显示环境发生变化时，如横竖屏切换、调节字体大小、应用分屏，要及时调整内容的布局方式以适应变化。本章提供了布局基础的概念和介绍。详见[布局基础](grid-system.md)。
+
+
+了解布局的基础概念后，通过调用栅格系统、自适应布局和响应式布局能力就可以让内容更好地适配显示环境的变化。综合运用布局基础能力，可实现常用页面结构的多设备适配。详见[布局基础运营案例](ui-layout-cases.md)。

zh-cn/design/ux-design/unified-interaction-events.md

+# 交互事件归一
+
+本章节描述了在多种交互任务或场景下，应用在触屏上和其它常用的输入方式（例如鼠标、触摸板、键盘）上分别对应的正确的交互规则。**设计师和开发者应保证在当前输入方式下应用能够以正确的、符合用户习惯的交互规则进行响应。**
+
+
+![zh-cn_image_0000001568093289](figures/zh-cn_image_0000001568093289.png)
+
+
+## 打开/切换对象
+
+用户通过点击某个元素触发功能、访问新页面、或改变自身状态。
+
+  | **输入方式** | **交互行为** | **示意** | 
+| -------- | -------- | -------- |
+| 触屏 | 单指单击 | ![zh-cn_image_0000001568093285](figures/zh-cn_image_0000001568093285.png) | 
+| 鼠标 | 左键单击 / 左键双击 | ![zh-cn_image_0000001517612968](figures/zh-cn_image_0000001517612968.png) | 
+| 触摸板 | 单指单击 / 单指双击 | ![zh-cn_image_0000001568212997](figures/zh-cn_image_0000001568212997.png) | 
+| 键盘 | 移动焦点到对象上后按下Enter键 | ![zh-cn_image_0000001517453012](figures/zh-cn_image_0000001517453012.png) | 
+
+一般地，触屏手指的按下/抬起行为对应于光标的按下/抬起行为。
+
+在一些特殊场景，可能会存在使用鼠标/触摸板双击打开对象的交互方案，例如电脑模式下打开桌面应用或文件。此类情况需由应用单独特殊处理，且同一功能不能同时支持单击和双击两种交互方式。
+
+
+## 显示菜单
+
+某个元素上显示弹出菜单或快捷方式菜单。
+
+![zh-cn_image_0000001568293165](figures/zh-cn_image_0000001568293165.jpg)
+
+  | **输入方式** | **交互行为** | 
+| -------- | -------- |
+| 触屏 | 单指长按 | 
+| 鼠标 | 右键单击（与PC一致）/ 左键长按（保留触屏习惯） | 
+| 触摸板 | 双指轻单击/重单击（与PC一致）/ 单指重长按（保留触屏习惯） | 
+| 键盘 | （无通用操作） | 
+
+这里的菜单指的是广义的菜单，即用于展示用户可执行的操作的临时性弹出窗口。
+
+凡是在触屏上通过长按显示的菜单，都需要支持鼠标右键单击和触摸板双指单击的触发方式。
+
+
+## 拖拽对象
+
+直接指向某个元素并移动到界面其他位置
+
+![zh-cn_image_0000001568412901](figures/zh-cn_image_0000001568412901.png)
+
+  | **输入方式** | **交互行为** | 
+| -------- | -------- |
+| 触屏 | 长按某对象后触发可拖拽状态，然后移动手指改变对象位置。 | 
+| 鼠标 / 触摸板 | 鼠标左键或触摸板单指按下即可拖拽对象（无需长按等待）。 | 
+| 键盘 | （无通用操作） | 

zh-cn/design/ux-design/visual-basis.md

+# 视觉基础
+
+**虚拟像素单位：vp**
+
+
+虚拟像素(virtual pixel)是一台设备针对应用而言所具有的虚拟尺寸（区别于屏幕硬件本身的像素单位）。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。
+
+
+![zh-cn_image_0000001517293332](figures/zh-cn_image_0000001517293332.png)
+
+
+相同的vp，在不同像素密度的屏幕上，对应不同px，一般称px/vp为像素密度比。像素密度比为当前设备屏幕的dpi/160。
+
+
+在dpi为160的OpenHarmony设备上，像素密度比为1，则1vp等于1px。
+
+
+以vp为尺寸标注单位，可使相同元素在不同密度的设备上具有一致的视觉体量，使用px则容易导致体量不一致的问题。
+
+
+**8vp网格系统**
+
+
+基于 8vp 为网格的基本单位可以对界面上元素的大小、位置、对齐方式进行更好的规划，构建更有层次感、秩序感，以及多设备上一致的布局效果。一些更小的控件（例如图标）大小也可以对齐 4vp 的网格大小。
+
+
+![8vp](figures/8vp.png)
+
+
+**字体像素单位：fp**
+
+
+字体像素(font pixel) 大小默认情况下与 vp 相同，即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在 vp 的基础上乘以 scale 系数，即 1 fp = 1 vp \* scale。
+
+
+**视觉属性：分层参数**
+
+
+分层参数是根据使用场景定义的视觉属性ID，通过在不同色彩主题、多种设备上配置不同的数值，实现多设备适配的效果。OpenHarmony的分层参数包含色彩、字体、圆角、间距、阴影、模糊、缩放，并提供了默认实现。设备、应用、服务均可在此基础上管理并自定义不同场景的视觉属性。
+
+
+![1_zh-cn_image_0000001517612872.png](figures/1_zh-cn_image_0000001517612872.png)
+
+
+例如，对于不同场景的主色调定义了对应的ID与默认实现
+
+
+| **主色调**  |**色值**|**ID**|
+|  --------  |  --------  |  --------  |
+| 高亮色 | \#007DFF | ohos_id_color_emphasize | 
+| 高亮色反色 | \#006CDE | ohos_id_color_emphasize_contrary | 
+| 警告色 | \#FA2A2D | ohos_id_color_warning | 
+| 警示色 | \#FF7500 | ohos_id_color_alert | 
+| 通讯色 | \#E84826 | ohos_id_color_handup | 
+| 通讯色 | \#00CB87 | ohos_id_color_connected | 
+
+关于OpenHarmony默认提供的所有分层参数，详见：[资源](design-resources.md)

zh-cn/design/ux-design/visual-colors.md

+# 色彩
+
+色彩能够赋予应用界面足够的生动性，并给用户提供不同设备上、不同应用间视觉感官上的连续性。同时，合理地运用色彩可以传达关键的状态信息，给予用户即时的状态反馈以及数据可视化呈现。
+
+
+OpenHarmony采用蓝色作为系统的默认主色调。根据人因研究，对蓝色的接受度无论是在男性还是女性群体中，比例都是最高的。而在世界地域维度，蓝色也是最受欢迎的颜色。更重要的是，对于大多数色觉障碍人士，蓝色依然可以被辨识。
+
+
+**色值及使用场景**
+
+
+在色彩设计上，既保持统一的色彩语言，又根据多端不同的使用场景做了调整，带来定制化用户体验。
+
+
+例如，高亮色ohos_id_color_activated，在不同设备和色彩模式上会有不同具体的值：
+
+
+  | ![zh-cn_image_0000001568093293](figures/zh-cn_image_0000001568093293.png)<br/>**用于默认设备浅色风格。** | ![zh-cn_image_0000001568293173](figures/zh-cn_image_0000001568293173.png)<br/>用于默认设备深色风格。 | ![zh-cn_image_0000001568293169](figures/zh-cn_image_0000001568293169.png)<br/>用于智慧屏深色风格。 | ![zh-cn_image_0000001517453016](figures/zh-cn_image_0000001517453016.png)<br/>用于智能穿戴深色风格。 | 
+| -------- | -------- | -------- | -------- |
+
+OpenHarmony后续将支持深色模式、浅色模式，及不同主题切换能力。
+
+关于OpenHarmony默认提供的色彩相关分层参数，详见：[资源](design-resources.md)

zh-cn/design/ux-design/visual-fonts.md

+# 字体
+
+字体直接影响界面的展示效果和用户的阅读效率。优秀的字形设计、统一的多语言字形风格、正确的字体排版，能有效地提升应用使用体验，并传递品牌连续性。
+
+
+多设备字号层级
+
+
+选择合适的字号有助于定义内容的信息层级，以及达到内容的可读性。通过研究全场景设备的显示环境、用户使用时环境的差异，OpenHarmony结合分层参数为不同设备形态提供了一套构建信息层级的字号系统。
+
+
+![1_zh-cn_image_0000001568412845.png](figures/1_zh-cn_image_0000001568412845.png)
+
+
+关于OpenHarmony默认提供的字体相关分层参数，详见：[资源](design-resources.md)
\ No newline at end of file

zh-cn/design/ux-design/visual-icons.md

+# 图标
+
+图标是操作系统与用户界面关键的视觉元素之一。图标应当具备直接识别关键信息或语义的特质，帮助用户轻松辨别图标所代表的含义。为了保证用户在不同的设备中视觉体验的一致性，在图标的设计上应当保持应用图标的元素一致，再根据不同的设备匹配对应的图标背板以适应于各种场景。除此之外，图标在颜色的使用上应当遵循符合人因的色彩规则，满足用户阅读的舒适度以及整体界面的和谐程度。对于面状图标与线状图标的使用也应当遵循系统的设计规则，两种样式使用同一种图形结构，降低用户阅读时再次识别的成本。
+
+
+![zh-cn_image_0000001517612980](figures/zh-cn_image_0000001517612980.jpg)
+
+
+关于OpenHarmony默认提供的图标库，详见[线上图标库](https://developer.harmonyos.com/cn/design/harmonyos-icon/)。

zh-cn/design/ux-design/visual-shade-shadow.md

+# 光影材质
+
+
+
+介绍微拟物风格、模糊材质、投影，以及对应的分层参数。

zh-cn/design/ux-design/visual-widgets.md

+# 卡片化
+
+
+
+| ![fullImageeefa37718bd39f0f86902ac94b6fb8a8ebf7c58b](figures/fullImageeefa37718bd39f0f86902ac94b6fb8a8ebf7c58b.png)  |![fullImage752054ae73e7c2b4b4ff5a24a1070970ea4ce477](figures/fullImage752054ae73e7c2b4b4ff5a24a1070970ea4ce477.png)  |
+|  --------  |  --------  |
+
+
+
+鼓励应用进行更多的卡片化设计，包括标志性的设置项基于卡片分组、运动健康的大小卡片搭配。
+
+
+进一步阐述卡片化有利于在多端适配时调整布局变化，以及与桌面FA卡片保持较高一致性。
+
+
+甚至可以提出，鸿蒙系统不建议圆角过小或切角的Button，因为不符合和谐的视觉体验。

zh-cn/design/ux-design/website.md

+# OpenHarmony应用UX设计规范发布版
+
+- [应用UX设计](app-ux-design.md)
+- 应用架构设计
+    - [应用导航结构设计要求](app-navigation-structure-design.md)
+    - [应用页面结构设计](app-page-structure-design.md)
+- 界面布局
+    - [概述](ui-layout-overview.md)
+    - 布局基础
+        - [栅格系统](grid-system.md)
+        - [自适应布局](adaptive-layout.md)
+        - [响应式布局](responsive-layout.md)
+    - [布局基础运用案例](ui-layout-cases.md)
+- 人机交互
+    - [交互基础](human-machine-interaction-basis.md)
+    - [常见输入方式](typical-input-modes.md)
+    - [交互事件归一](unified-interaction-events.md)
+- 视觉风格
+    - [视觉基础](visual-basis.md)
+    - [色彩](visual-colors.md)
+    - [字体](visual-fonts.md)
+    - [图标](visual-icons.md)
+    - [卡片化](visual-widgets.md)
+    - [光影材质](visual-shade-shadow.md)
+- 动效
+    - [概述](animation-overview.md)
+    - [设计原则](animation-design-principles.md)
+    - [动效属性](animation-attributes.md)
+- 多态控件
+    - [概述](multimodal-component-overview.md)
+    - [底部页签](multimodal-bottom-tab.md)
+    - [子页签](multimodal-subtab.md)
+    - [标题栏](multimodal-title-bar.md)
+    - [侧边导航栏](multimodal-sidebar.md)
+    - [导航点](multimodal-swiper.md)
+    - [步骤导航器](multimodal-stepper.md)
+    - [文本](multimodal-text.md)
+    - [分隔器](multimodal-divider.md)
+    - [进度条](multimodal-progress-bar.md)
+    - [新事件标记](multimodal-badge.md)
+    - [即时反馈](multimodal-instant-tip.md)
+    - [气泡提示](multimodal-bubble.md)
+    - [数据可视化](multimodal-data-panel.md)
+    - [按钮](multimodal-button.md)
+    - [单选框](multimodal-radio-button.md)
+    - [多选](multimodal-check-box.md)
+    - [滚动条](multimodal-scrollbar.md)
+    - [滑动条](multimodal-slider.md)
+    - [开关](multimodal-toggle.md)
+    - [文本框](multimodal-text-box.md)
+    - [索引条](multimodal-index-bar.md)
+    - [下拉按钮](multimodal-drop-down-menu.md)
+    - [状态按钮](multimodal-state-button.md)
+    - [滑动选择器](multimodal-picker.md)
+    - [评分条](multimodal-rating-bar.md)
+    - [弹出框](multimodal-dialog.md)
+    - [可滑动面板](multimodal-slidable-panel.md)
+    - [菜单](multimodal-menu.md)
+    - [下拉刷新](multimodal-pull-to-refresh.md)
+    - [搜索框](multimodal-search-box.md)
+    - [勾选](multimodal-tick-box.md)
+- [设计自检表](design-checklist.md)
+- [资源](design-resources.md)
+- 设计交付
+    - [概述](design-deliverable-overview.md)
+    - [效果图](design-effect-drawings.md)
+    - [标注图](design-annotated-drawings.md)
+    - [规格说明](design-specifications.md)
+    - [切图资源](design-map-cached-drawings.md)