!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)