Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 b33f3138 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!23268 一多UX文档归一 

Merge pull request !23268 from songqq0825/master
上级 9f176be9 537c365d
隐藏空白更改
内联 并排
Showing with 9 addition and 982 deletion
zh-cn/application-dev/key-features/multi-device-app-dev/Readme-CN.md
浏览文件 @ b33f3138
...@@ -3,31 +3,7 @@ ...@@ -3,31 +3,7 @@
- [前言](foreword.md) - [前言](foreword.md)
- [简介](introduction.md) - [简介](introduction.md)
- [从一个例子开始](start-with-a-example.md) - [从一个例子开始](start-with-a-example.md)
- 应用UX设计 - [应用UX设计](design-principles.md)
- [设计原则和要点](design-principles.md)
- 应用架构设计
- [应用导航结构设计要求](navigation-design.md)
- [应用页面结构设计](page-design.md)
- 界面布局
- [概述](interface-layout-design-intro.md)
- 布局基础
- [栅格系统](design-grid.md)
- [自适应布局](design-adaptive-layout.md)
- [响应式布局](design-responsive-layout.md)
- [布局基础运用案例](design-layout-cases.md)
- 人机交互
- [交互基础](interaction-basics.md)
- [常见输入方式](common-input-modes.md)
- [交互事件归一](design-interaction-event-normalization.md)
- 视觉风格
- [视觉基础](visual-basics.md)
- [色彩](visual-style-color.md)
- [字体](visual-style-font.md)
- [图标](visual-style-icon.md)
- [多态控件](design-polymorphic-controls.md)
- [设计自检表](design-checklist.md)
- [设计交付](design-delivery.md)
- [资源](design-resources.md)
- [工程管理](ide-using.md) - [工程管理](ide-using.md)
- 页面开发的一多能力介绍 - 页面开发的一多能力介绍
- [简介](page-development-intro.md) - [简介](page-development-intro.md)
......
zh-cn/application-dev/key-features/multi-device-app-dev/common-input-modes.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 常见输入方式
## 输入类型
**基于触控的交互**
很多设备的屏幕都支持多点触控，允许用户通过手指或手写笔进行交互。它们与屏幕的接触状态、数量以及运动行为被识别成触控手势和操作，可以支持多种交互功能和体验（例如点击、滑动、缩放、旋转）。在多数情况下，应将触控交互作为用户首要的交互方式。
以下是基础的手势操作：
| **手势操作** | **功能描述** | **图示** |
| -------- | -------- | -------- |
| 点击 | 用户通过点击某个元素触发功能或访问界面。 | ![zh-cn_image_0000001291916533](figures/zh-cn_image_0000001291916533.png) |
| 长按 | 用户通过长按某个元素触发菜单或特定模式或进入界面。长按手势发现性差，常用功能不要使用长按来触发。<br/>场景：<br/>-&nbsp;长按操作显示弹出菜单。例如，在联系人列表中长按某个联系人。<br/>-&nbsp;长按操作显示快捷菜单。例如，长按某个桌面图标。<br/>-&nbsp;长按操作进入多选。一般用于列表或宫格界面。例如，长按信息的列表界面，长按图库的宫格界面。<br/>-&nbsp;长按操作进入编辑模式或可排序模式，并伴随振动。例如，长按闹钟的列表界面，长按桌面的空白处。<br/>-&nbsp;长按操作选择文本。例如，在文本框中长按已经输入的文字。<br/>-&nbsp;长按图标进入该图标对应的功能详情。例如，在通知面板上长按功能开关图标。 | ![zh-cn_image_0000001245596752](figures/zh-cn_image_0000001245596752.png) |
| 滑动 | 用户通过滑动来滚动列表或平移界面内容。<br/>场景：<br/>-&nbsp;通过滑动滚动列表。<br/>-&nbsp;在内容区横向滑动切换页签。<br/>-&nbsp;通过滑动平移地图。 | ![zh-cn_image_0000001245437476](figures/zh-cn_image_0000001245437476.png) |
| 拖动 | 用户将元素从一个位置移动到另外一个位置。 | ![zh-cn_image_0000001291557665](figures/zh-cn_image_0000001291557665.png) |
| 双击 | 用户快速点击两下以放大/缩小内容、选择文字或触发特定的功能。 | ![zh-cn_image_0000001245277712](figures/zh-cn_image_0000001245277712.png) |
| 捏合 | 用户使用两个手指按住屏幕向外展开以放大内容。<br/>使用两个手指按住屏幕向内收拢以缩小内容。<br/>场景：<br/>-&nbsp;放大/缩小图片。例如，在查看图片界面。<br/>-&nbsp;放大/缩小内容。例如，浏览页面或者相机取景界面。 | ![zh-cn_image_0000001291677093](figures/zh-cn_image_0000001291677093.png) |
**基于光标的交互**
当用户使用指向设备（鼠标、触摸板、AR/VR手柄、隔空手势等）与应用程序进行间接交互时，光标指向的对象和光标本身应提供适当的视觉反馈以表达对象的可交互性和到达的准确性。同时，应考虑利用光标支持精细化操作和悬浮状态的特性（相比手指触摸），以提升应用生产力、简化交互任务和增强信息展示。
基于光标的交互设计亦可推广至AR/VR手柄和隔空手势等空间交互场景。
**基于焦点的交互**
当用户使用键盘、智慧屏遥控器、车机摇杆/旋钮等非指向性输入方式与应用程序进行间接交互时，基于焦点的导航和交互是重要的输入手段。
## 典型输入方式
**鼠标**
鼠标是一种典型的基于光标的、具备像素级精度的指向型输入方式，最为适用于对用户交互具有较高精度要求的生产力应用和高密度UI的场景。
一般地，鼠标由左键、右键和滚轮键组成，这些按键的交互应遵循业界标准的规范功能和用户的既有使用习惯。鼠标也可以通过和不同的键盘按键进行结合，提供额外的快捷操作体验。
**触控板**
触控板同时具备多指触控手势输入（触屏）和精细化指向型输入（鼠标）的特性，使得触控板既适合用于基于触摸交互优化的用户界面，也适合用于对指点精度有较高要求的生产力应用。
**键盘**
键盘是一种重要的生产力输入方式，优秀的键盘使用体验应允许用户快速准确地进行文本输入、双手无需离开键盘即可在系统和应用内进行导航、访问所有的功能、以及支持无障碍体验。
**手写笔**
在触屏上，手写笔是手指精细化操作的延伸，是一种像素级精度的指点设备。手写笔提供了一种直接的、自然的方式来进行数字内容书写、绘图和标注。
**隔空手势**
隔空手势（非接触手势）是一种人与设备交互的新方式，用户可以在无需手持或接触设备的情况下与设备进行便捷的交互。随着技术的发展，隔空手势在默认设备、平板、车机、智慧屏、音箱、AR/VR等设备上都有一定的应用。通常情况下，隔空手势通常是符合用户直觉、文化习惯或者容易操作的动作。
zh-cn/application-dev/key-features/multi-device-app-dev/design-adaptive-layout.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 自适应布局
自适应布局是通过设定元素与外部容器的相对关系实现的。当外部容器大小、位置等发生变化时，元素即可以根据相对关系自动变化以适应外部环境的变化。通常自适应布局能根据vp/px变化进行无级连续的变化。
## 自适应拉伸
某单个内容或某组内容的显示宽度不是固定值，而是通过相对参照物的方式来确定其显示宽度。当参照物的宽度发生变化时，内容或内容间距的宽度随之发生自适应拉伸。
左右拉伸：例如，列表开关组合中，在窗口宽度变化时，开关控件固定宽度并相对列表的右边缘位置固定，整个组合与文本宽度均自适应变化。
![拉伸能力](figures/拉伸能力.gif)
均分拉伸：例如，在图标型网格中，当窗口宽度变化时，入口图标间距与图标离左右边缘间距同时均等变化。
![均分能力](figures/均分能力.gif)
自适应拉伸适用于文字、普通按钮、间距等展示宽度灵活，对宽高比不敏感的内容和内容组合。
当可能出现的拉伸宽度不足以显示默认内容时，应根据场景选择优先保证内容完整或者优先保证其他内容的屏效，并进行截断或换行等组合适配。
![拉伸注意场景](figures/拉伸注意场景.png)
## 自适应缩放
组件的显示大小是固定比例，通过相对参照物的方式来确定其宽或高。当参照物的大小发生变化时，元素的大小随之发生自适应缩放。
完整缩放：例如，在宽度或高度变化时，时钟始终保证表盘完整展示并根据较短边决定宽高。
![zh-cn_image_0000001291675753](figures/zh-cn_image_0000001291675753.gif)
占比缩放：例如，带主体和背景的插画，画面内容根据宽度变化裁切，根据高度变化按50%比例缩放。
![缩放案例](figures/缩放案例.gif)
自适应缩放适用于图片、圆形按钮、banner、反应真实物体形状的图像等必须保证宽高比的内容。
不推荐将所有元素同时缩放、或某内容放大过大超过屏幕50%。这将导致获取信息量不增反减，不符合用户预期。
![4.3-2](figures/4.3-2.png)
## 自适应延伸
组件的显示数量不是固定的，而是通过相对参照物的方式来确定其显示数量。当参照物的宽度发生变化时，组件随之发生自适应延伸显示更多数量。
同功能内容延伸：例如，子页签和可滑动宫格在默认宽度下通过露出最后内容，提示右方有更多入口，在宽度变化时，可在每个元素宽度不变、保持滑动交互时显示更多数量。
![延长能力](figures/延长能力.gif)
不同功能内容延伸或隐藏：例如，默认处于同一排的不同音乐播放按钮优先级不同，在宽度变化时可延伸或隐藏低优先级的按钮，最大化适应不同窗口尺寸。
![隐藏能力](figures/隐藏能力.gif)
自适应延伸/隐藏适用于页签、操作块、推荐栏目等具有相同交互层级且有更多数据可以填充的内容。
注意：需要判断因隐藏而不展示的内容对功能完整性是否有影响，并考虑通过滑动或“更多”按钮提供查看使用该内容的方式。
## 自适应折行
定义了折行能力的组件，可以根据组件容器的可用空间，体现纵向布局或者横向布局。
例如，在宽度足够时，操作块位于同一行，在宽度变小时，可根据内容能显示的宽度纵向排布。
![折行案例分镜](figures/折行案例分镜.png)
自适应折行适用于页签、操作块、内容流等具有相同交互层级，且希望保证类型和数量完整性的内容。
自适应布局对应OpenHarmony系统提供的自适应布局能力中的拉伸、均分、缩放、占比、延伸、隐藏、折行。自适应布局能力详见本文“[自适应布局](adaptive-layout.md)”相关介绍。
zh-cn/application-dev/key-features/multi-device-app-dev/design-checklist.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 设计自检表
设计自检表详细列举出了在全场景设备设计和开发过程中应当注意的设计规则，这将帮助应用减少用户舆情且提升用户体验的一致性。
自检表的要求范围分为“必须”与“推荐”两个类别。必须类一般为已总结出的较优解决方案或效果，表示相关设计需要按照此原则统一执行；推荐类指可能受应用品牌风格或业务特殊性影响，可适量做出修改。
请参考以下表格范围内提出的要求对应用进行检查。
| **类型** | **条目** | **说明** | **类别** |
| -------- | ------------------ | ------------------------------------------------------------ | ------ |
| 应用架构 | 导航结构 | 在各设备上页面导航结构保持一致（同时出多个设备的UX设计）。 | 推荐 |
| 布局 | 拉通设计 | 拉通各设备的布局设计，保证在不同尺寸和分辨率的设备上能够无错位/不截断/不变形/不过多空白（50%以上）/不过于拥挤（间距小于16vp，明显截断）/无大图大字体地正常显示。 | 必须 |
| | 响应式设计 | 栅格布局只能占N列以及N列内部的Gutter，不包含N列两侧的Gutter。 | 必须 |
| | 响应式设计 | 明确标注使用什么类型的栅格、给出在不同断点下栅格三要素取值。 | 推荐 |
| | 响应式设计 | 按容器去对齐栅格，而不是内部子元素对齐栅格。 | 必须 |
| | 响应式设计 | 栅格除了页面布局设计外，在做局部栅格设计时，需要通过明显方式如颜色等进行标注区分，避免混淆。 | 推荐 |
| | 响应式设计 | 禁止出现标注了栅格但实际没有通过栅格进行布局设计，避免混淆。 | 必须 |
| | 自适应设计 | 非栅格设计场景下，明确标注自适应布局能力。自适应布局能力有：拉伸、均分、占比、缩放、延伸、隐藏、折行。 | 推荐 |
| 人机交互 | 输入方式 | 需保证在各设备上完整支持触摸、鼠标、触控、键盘、遥控器、摇杆等交互方式，并符合标准定义。 | 推荐 |
| | 交互归一 | 应使用系统提供的控件以达到一致的交互体验。如有定制，需保证在各场景下，不同输入设备上的操作与指南要求一致。需特别注意鼠标行为。 | 推荐 |
| 视觉风格 | 单位 | 用于界面布局的单位应全部使用vp。只针对严格控制元素尺寸的场景使用px。 | 必须 |
| | 色彩 | 用于色彩的赋值应使用分层参数。推荐支持深色模式，需保证界面在系统切换色彩模式时没有识别性问题。 | 推荐 |
| | 字体 | 使用fp为文字大小单位，需要响应系统大字体模式，确保系统调节字体大小后，界面字体能响应变化大小，并且界面布局没有出现布局错乱问题。 | 必须 |
| 多态控件 | 支持常用的控件状态 | 确保控件不同状态下的视觉效果没有缺失。控件的常用状态有：正常态、不可用态、点击态、获焦态、激活态、悬停态。 | 推荐 |
\ No newline at end of file
zh-cn/application-dev/key-features/multi-device-app-dev/design-delivery.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 设计交付
## 概述
为了将UX设计详尽准确地实现并传递给开发者，设计师需向开发者提供必要的设计交付件，包括但不限于：应用规格说明、交互流程、视觉效果、视觉标注、视觉规格说明、切图资源、动效参数资源、音效资源等内容。
面向多设备多尺寸的应用UX设计交付件，以完整说明界面布局与视觉设计为主要目的，至少应包含：效果图、标注图、规格说明和切图资源。
下面将分别介绍不同交付内容的用途与规范。
![4.8-交付4件套](figures/4.8-交付4件套.png)
## 效果图
效果图是表达UX设计的关键内容，用于直观呈现目标体验的静态效果，并作为开发者与测试工程师的实现与验收依据。效果图一般为jpg或png格式。
在优秀的设计交付件中，针对不同前置条件下，各交互流程所途经的每个界面都应匹配效果图。对于大量重复使用的组件元素，如弹窗和即时反馈，亦可配合规格统一说明，不做过多重复设计。
在多设备设计中，为了清晰表达设计效果，设计师仍需要针对不同尺寸的关键界面提供符合规范的效果图。关键界面包括且不限于：
- 应用的首页
- 可以从首页直接进入的各二级界面
- 核心使用流程途经的各界面
- 能体现多数界面的自适应与响应式规格的典型界面
不同尺寸的效果图，至少应包含小设备、中设备、大设备。根据业务涉及的设备特点，可补充超小尺寸效果，及不同设备的横竖屏效果，提前充分验证并优化UX设计体现的差异性、一致性、灵活性、兼容性。
对应不同设备效果图的设计画板尺寸推荐如下：
| 设备类型 | 屏幕宽度 | 画板尺寸（vp） |
| -------- | -------- | -------- |
| 超小设备 | [0,&nbsp;320) | 240\*320 |
| 小设备 | [320,&nbsp;600) | 360\*780 |
| 中设备 | [600,&nbsp;840) | 677\*763 |
| 大设备 | [840,&nbsp;+) | 1280\*800 |
多设备效果示意图
![4.8-效果示意图](figures/4.8-效果示意图.png)
> **说明：**
> - 画板尺寸为不同宽度断点下的典型设备屏幕尺寸，可根据业务具体针对的设备选择其他画板尺寸。
>
> - 画板尺寸以vp为单位提供，根据实际设计所需精度，可统一把设计文档中所有画板设置为1倍或多倍的px尺寸。
>
> - 当效果图需要展示一屏以上的内容，如列表内容较长时，建议保持宽度不变并增加画板高度以容纳更多内容。
## 标注图
标注图是向开发者传递界面上每个元素详细属性，以指导代码完整实现UX设计的图像化文档。界面元素的属性包括：色彩、尺寸、字体、圆角、间距、阴影、模糊、缩放、所用的组件、自适应布局、响应式布局等。标注图一般为jpg或png格式。
在优秀的设计交付件中，不同类型属性的标注文本大小一致、色彩不一、互不重叠，并与效果图内容在视觉上良好区隔。标注图数量与关键界面效果图一一对应，如遇到较复杂的界面，为了更清晰说明规格，也有多张标注图对应一张效果图的情况。
随着设计与开发工具的演进，一些业界工具支持界面元素属性的自动识别并创建标注，也可导出支持动态展示标注的效果图文档，一般为html格式。OpenHarmony应用的设计交付同样可以借助这些工具作为标注图的补充内容，但必选的分层参数仍需设计师专门确认并手动完成标注。
除了尺寸、间距等强依赖于业务具体设计的参数，色彩、字体、圆角、阴影、模糊等属性应尽可能使用分层参数完成标注。
标注示意图
![4.8-标注图](figures/4.8-标注图.png)
> **说明：**
> - 如遇到分层参数覆盖不到的属性值，可按照具体设计效果标注。此时必须详细考虑不同场景下该元素的效果。
## 规格说明
规格说明是一份专门编写的文档，用于更完整清晰地说明界面间的通用元素与变化规则，一般为pdf格式。规格说明不是UX设计交付件中的必选项，但它能帮助设计师节省很多重复性工作，帮助开发者快速理解UX设计规格，在面向多设备的应用设计交付中非常推荐。
在多设备设计中，规格说明常用于并排展示同一界面在不同尺寸下的效果，并说明栅格变化规则。
一多规范栅格图
![4.8-栅格标注](figures/4.8-栅格标注.png)
## 切图资源
包含在设计效果中的素材，如图标、图片、序列帧等，应根据实际需要输出为合适的格式提供开发者置入界面内。
为了更好在多设备上根据设备dpi展示清晰的图像，一分优秀的应用应含有多套同名的切图资源，它们分别存放在mdpi、ldpi、xldpi、xxldpi的文件夹目录下，最终会存放到应用资源包的同名路径中。
多套同名切图文件夹示意图
![4.8-切图资源对应文件夹](figures/4.8-切图资源对应文件夹.png)
图标资源可以是png、jpg、webp、svg等格式。推荐在多设备设计中使用svg图标资源，因为能充分利用矢量图片体积较小、可以自由缩放且不出现锯齿、可根据色彩参数实时赋色的特点，仅用一套资源即可满足复杂场景的UX规范。如使用其他位图格式如png、jpg、webp，则需分别交付各dpi下的切图资源，以达到边缘像素清晰的体验。
图片资源可以是png、jpg、webp等格式。与图标资源类似，一般应提供各dpi下的图片资源。在不同dpi下对边缘像素要求不高的图片如背景图，则推荐按照更高dpi提供一张资源复用到各dpi，以减少应用包大小。
在多设备设计中，图片也可根据设计效果，在不同宽度断点使用同一个资源，或分别交付：
- 当图片所在组件接口提供的缩放显示机制满足UX设计效果，可以用同一个资源
- 当图片所在组件接口提供的缩放显示机制不满足、且不可通过简单的自定义规则实现UX效果，则推荐使用不同资源
夜晚单张适配多设备宽度示意图
![4.8-夜晚单张适配多设备](figures/4.8-夜晚单张适配多设备.png)
晴天多张适配多设备宽度示意图
![4.8-晴天多张适配](figures/4.8-晴天多张适配.png)
zh-cn/application-dev/key-features/multi-device-app-dev/design-grid.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 栅格系统
栅格系统是一个多设备下通用的辅助定位系统，适用于应用窗口的整体布局，也支持界面局部内容使用。栅格系统由 Margin，Gutter，Column 三个属性构成。Margin是相对屏幕、窗口等父容器左右边缘的距离，决定了内容可展示的整体宽度；Gutter是每个Column的间距，决定内容间的紧密程度； Column是内容的占位元素，其数量决定了内容的布局复杂度。Margin大小、Gutter大小、Column数量综合决定Column的具体宽度。
通过栅格系统进行布局，可以更好达到多设备下布局的一致性。
![zh-cn_image_0000001224173302](figures/zh-cn_image_0000001224173302.png)
Margin、Gutter的大小、Column的数量均可自定义，界面内容跟据Column的边缘定位。通过采用不同数值调整内容信息量和紧密程度，一般推荐使用4或8的倍数。例如Margin 32vp、Gutter 16vp、Column数量为4，或Margin 40vp、Gutter 24vp、Column数量为8。
![栅格系统例](figures/栅格系统例.png)
栅格系统对应OpenHarmony系统提供的布局能力中的栅格布局，详见本文 “[栅格布局](responsive-layout.md#栅格布局)”相关介绍。
zh-cn/application-dev/key-features/multi-device-app-dev/design-interaction-event-normalization.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 交互事件归一
本章节描述了在多种交互任务或场景下，应用在触屏上和其它常用的输入方式（例如鼠标、触摸板、键盘）上分别对应的正确的交互规则。**设计师和开发者应保证在当前输入方式下应用能够以正确的、符合用户习惯的交互规则进行响应。**
![zh-cn_image_0000001224333656](figures/zh-cn_image_0000001224333656.png)
## 打开/切换对象
用户通过点击某个元素触发功能、访问新页面、或改变自身状态。
| **输入方式** | **交互行为** | **示意** |
| -------- | -------- | -------- |
| 触屏 | 单指单击 | ![zh-cn_image_0000001280472681](figures/zh-cn_image_0000001280472681.png) |
| 鼠标 | 左键单击&nbsp;/&nbsp;左键双击 | ![zh-cn_image_0000001236472600](figures/zh-cn_image_0000001236472600.png) |
| 触摸板 | 单指单击&nbsp;/&nbsp;单指双击 | ![zh-cn_image_0000001280232265](figures/zh-cn_image_0000001280232265.png) |
| 键盘 | 移动焦点到对象上后按下Space键 | ![zh-cn_image_0000001280472701](figures/zh-cn_image_0000001280472701.png) |
一般地，触屏手指的按下/抬起行为对应于光标的按下/抬起行为。
在一些特殊场景，可能会存在使用鼠标/触摸板双击打开对象的交互方案，例如打开桌面应用或文件。此类情况需由应用单独特殊处理，且同一功能不能同时支持单击和双击两种交互方式。
## 显示菜单
某个元素上显示弹出菜单或快捷方式菜单。
![zh-cn_image_0000001268533753](figures/zh-cn_image_0000001268533753.jpg)
| **输入方式** | **交互行为** |
| -------- | -------- |
| 触屏 | 单指长按 |
| 鼠标 | 右键单击/左键长按（保留触屏习惯） |
| 触摸板 | 双指轻单击/重单击/单指重长按（保留触屏习惯） |
| 键盘 | （无通用操作） |
这里的菜单指的是广义的菜单，即用于展示用户可执行的操作的临时性弹出窗口。
凡是在触屏上通过长按显示的菜单，都需要支持鼠标右键单击和触摸板双指单击的触发方式。
## 拖拽对象
直接指向某个元素并移动到界面其他位置
![zh-cn_image_0000001268653953](figures/zh-cn_image_0000001268653953.png)
| **输入方式** | **交互行为** |
| -------- | -------- |
| 触屏 | 长按某对象后触发可拖拽状态，然后移动手指改变对象位置。 |
| 鼠标&nbsp;/&nbsp;触摸板 | 鼠标左键或触摸板单指按下即可拖拽对象（无需长按等待）。 |
| 键盘 | （无通用操作） |
zh-cn/application-dev/key-features/multi-device-app-dev/design-layout-cases.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 布局基础运用案例
## 平级导航的复合网格视图
平级导航的复合网格视图常出现在同时展示多种不同内容的界面。
例如，市场类应用作为典型的平级导航，其首页不同板块采用了不同布局能力。
![一多-布局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/application-dev/key-features/multi-device-app-dev/design-polymorphic-controls.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 多态控件
为了支持多设备，应用需要能够在不同的设备上运行，控件作为应用的基础组成部分，需要支持不同的设备，且在视觉、交互、动效等表现形式上针对设备进行必要的调整，达到最佳体验。因此，同一控件在不同的设备上会呈现出不同的形态，称为多态控件。
![zh-cn_image_0000001268129090](figures/zh-cn_image_0000001268129090.png)
多态控件应该具备以下特点：
- 覆盖默认设备、平板，兼顾智慧屏、车机、智能穿戴等终端。
- 场景一致性。在对应的使用场景下，其交互、视觉、动效要保持一致，在设计上属性参数保持一致或差异化。
- 针对设备做优化。多态控件在不同的设备上的呈现应该是该设备下的最佳效果，因此在保证一致性的同时，还需要针对设备的特点进行优化。
## 控件的状态
- 控件的状态是一种视觉呈现，用于展示控件当前处于何种交互阶段。不同控件的相同状态应该保持一致的视觉风格，且应该清晰可见。
- 应用可能部署在不同设备上供用户使用，有些设备会支持多种输入方式。例如平板可以连接蓝牙键盘和鼠标来做文字编辑工作，此时控件需要同时满足键盘和鼠标交互，需要支持获焦态和悬停态，如果控件没有支持这两种状态，在使用键盘走焦时或鼠标悬停时，控件就无法通过呈现出相应的状态为用户提供正确的视觉引导。OpenHarmony默认提供多种交互方式的控件实现，方便开发者支持多种输入方式和交互归一。
常见的状态类型：
| | | |
| -------- | -------- | -------- |
| ![zh-cn_image_0000001268288974](figures/zh-cn_image_0000001268288974.gif)<br/>**正常态**<br/>表明当前控件可交互。 | ![zh-cn_image_0000001268608890](figures/zh-cn_image_0000001268608890.gif)<br/>**不可用态**<br/>表明当前控件不可交互。一般使用灰显的方式呈现。 | ![zh-cn_image_0000001317208945](figures/zh-cn_image_0000001317208945.gif)<br/>**点击态**<br/>表明当前控件当前处于点击状态。<br/>操作：手指或鼠标按下且未释放。 |
| ![zh-cn_image_0000001317488873](figures/zh-cn_image_0000001317488873.gif)<br/>**获焦态**<br/>表明当前控件处于焦点状态。操作：<br/>-&nbsp;键盘或遥控器通过方向键将焦点从一个控件移动到另外一个控件。<br/>-&nbsp;通过语音操作，使得控件获得焦点。 | ![zh-cn_image_0000001317089061](figures/zh-cn_image_0000001317089061.gif)<br/>**激活态**<br/>表明当前控件处于激活的状态。用于有多个元素可获焦的控件<br/>操作：焦点处在页签控件的某个页签上时，该页签获焦。点击此页签，该页签被激活。 | ![zh-cn_image_0000001317328893](figures/zh-cn_image_0000001317328893.gif)<br/>**悬停态**<br/>表明当前控件处于鼠标悬停的状态。<br/>操作：将鼠标悬停在控件之上。 |
## 弹出框
弹出框是一种模态窗口，在弹出框消失之前，用户无法操作其他界面内容，干扰性比较强。通常用来展示用户当前需要的或用户必须关注的信息或操作，其他情况不建议使用弹出框，可考虑通知等其他非模态窗口。 弹出框的内容通常是不同控件进行组合布局。例如文本（可带格式，如缩进、链接、粗体等）、列表、输入框、网格、图标或图片等，常用于选择或确认信息。
zh-cn/application-dev/key-features/multi-device-app-dev/design-principles.md
浏览文件 @ b33f3138
# 设计原则和要点 # 应用UX设计
## 设计原则 应用UX设计：一多的应用UX设计需遵循通用设计规则，应该考虑多设备的“差异性”、“一致性”、“灵活性”和“兼容性。详细规范请参见[应用UX设计原则](../../../design/ux-design/app-ux-design.md)
当为多种不同的设备开发应用时，有如下设计原则：
**差异性**
充分了解所要支持的设备，包括屏幕尺寸、交互方式、使用场景、用户人群等，对设备的特性进行针对性的设计。
**一致性**
除了要考虑每个设备的特性外，还需要考虑不同设备的共性，并使用通用性设计方法提供既符合设备差异性，又具有跨设备一致性的设计，从而减少用户学习的难度，降低应用开发的成本。
**灵活性**
在硬件能力、交互方式、使用场景类似的设备上，应主要考虑布局位置、内容宽度、横向组件数量的调整，避免出现因横竖屏切换、窗口尺寸变化造成的界面元素不合理空白、模糊、变形、截断的问题。
**兼容性**
在硬件能力、交互方式、使用场景差异较大的设备上，除了考虑布局位置、内容宽度、横向组件数量，还需支持不同的输入方式、考虑功能架构的调整，避免出现输入不识别、功能不可用、使用困难的问题。
## 设计要点
很多用户的多设备体验以默认设备为核心或从默认设备往外延伸，因此，围绕全场景体验的OpenHarmony UX设计，将优先确保用户在不同的设备上获得跟使用默认设备类似的体验，同时充分利用设备的优势使体验最大化。
在进行OpenHarmony的多设备应用设计时，需考虑应用以下内容：
### 自适应应用架构
使用自适应应用架构，可以确保应用在不同终端上，以最佳的导航形式来访问应用。OpenHarmony 在开发SDK上提供了便利，开发者可以通过简单配置轻松完成，无需从0开始构建。
例如：默认设备上的底Tab的结构，在Pad上一般使用侧边Tab来代替，在大屏上则是顶部Tab。
![一多-1-1](figures/一多-1-1.png)
更多应用架构的设计内容，详见：应用架构下的[应用导航结构设计要求](navigation-design.md)和[应用页面结构设计](page-design.md)。
### 响应式界面布局
应用会在不同的场景下使用，常见的有横竖屏切换、分屏。这些场景会导致界面的尺寸和长宽比例发生变化。因此需要考虑内容的响应式布局，确保在各种场景下都有最佳的显示效果。
OpenHarmony 提供了多种布局能力，开发者通过组合运用使内容布局更符合业务需要与用户预期。
例如：默认设备上的滚动banner，在其他设备上可进行延伸，平板上露出更多banner，大屏上完全显示两张。
![一多-概述-界面布局-banner例图](figures/一多-概述-界面布局-banner例图.png)
在不同类型的设备上，界面的尺寸和比例更为多样，再加上使用上的差异，导致设计上更为复杂。为此，可以考虑使用分栏布局、重复布局、挪移布局、缩进布局，进一步解决内容的显示问题。
例如：默认设备上上下排布的大图与列表，在长宽比例更大的设备上可挪移到左右展示。
![概述-界面布局-歌单详情高保真](figures/概述-界面布局-歌单详情高保真.png)
更多界面布局的设计内容，详见：[界面布局](interface-layout-design-intro.md)。
### 交互归一
交互归一描述了在多种交互任务或场景下，应用在触屏上和其它常用的输入方式（例如鼠标、触摸板、键盘）上分别对应的正确的交互规则。设计师和开发者应保证在当前输入方式下应用能够以正确的、符合用户习惯的交互规则进行响应。通常情况下，系统已经做好了这些事情，开发者只需正确调用。如果您的操作比较特别，您需要考虑多端上的交互归一，以确保用户体验的一致。
更多交互归一的设计内容，详见：[人机交互](interaction-basics.md)。
### 视觉参数化
通过参数，方便的调整各端的视觉，使得各端具备该设备特有的风格。在OpenHarmony中，边距、圆角、阴影、字体大小等，都可以通过参数来进行调整。
![画板copy](figures/画板copy.png)
更多视觉参数化的设计内容，详见：[视觉风格](visual-basics.md)。
### 多态控件
应用在多设备上运行，设备也可在不同交互方式下使用。控件作为应用的基础组成部分，需要支持不同的设备，且在视觉、交互、动效等表现形式上针对设备进行必要的调整，达到最佳体验。因此，同一控件在不同的设备上会呈现出不同的形态，称为多态控件。
OpenHarmony默认提供支持多设备的控件，开发者可以直接使用并对不同状态进行自定义。例如平板可以连接蓝牙键盘和鼠标来做文字编辑工作，此时控件需要同时满足键盘和鼠标交互，需要支持获焦态和悬停态。
### 针对性优化
在上述设计内容以外，在具体设备上，推荐针对性地进行特殊的操作和布局优化，使之符合当前设备的使用习惯。
例如：在以键鼠操作的界面上，为确保用户的使用习惯，需要提供额外的设计。
| **以触控为主** | **以键鼠操作为主** |
| -------- | -------- |
| 下拉刷新 | 界面上提供“刷新”图标或适配F5快捷键 |
| 滑动多选 | 鼠标框选 |
| 下拉关闭 | 界面上提供“关闭”图标 |
| 长按浮起拖拽 | 鼠标直接拖拽 |
zh-cn/application-dev/key-features/multi-device-app-dev/design-resources.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 资源
为方便UX设计师以及开发者参考使用，本文特提供：
- [分层参数](visual-basics.md)的场景、id、参数详细对照表，[OpenHarmony_系统资源分层设计表_V1.0.xlsm](OpenHarmony_系统资源分层设计表_V1.0.xlsm)
- 符合规范的[设计交付件](design-delivery.md)样例，[OpenHarmony_天气应用UX设计交付件_V1.0.zip](OpenHarmony_天气应用UX设计交付件_V1.0.zip)
系统资源分层设计表列出了当前OpenHarmony中可用系统资源id及其在不同类型设备上的取值，它由六张子表组成，各个子表的含义如下所示。
| 表格 | 简介 |
| -------- | -------- |
| 应用色彩参数 | 在**应用开发**过程中可以使用的**色彩**相关的系统资源。 |
| 应用圆角参数 | 在**应用开发**过程中可以使用的**圆角**相关的系统资源。 |
| 应用字体参数 | 在**应用开发**过程中可以使用的**字体**相关的系统资源。 |
| 应用间距参数 | 在**应用开发**过程中可以使用的**间距**相关的系统资源。 |
| 服务卡片参数 | 在**服务卡片开发**过程中可以使用的系统资源。 |
| 不透明度数值速查表 | 用于将不透明度在**百分比表示形式**和**十六进制表示形式**之间快速转换的速查表。 |
> **说明：**
> - 推荐应用相关系统参数仅在应用开发场景中使用，卡片相关系统参数仅在卡片开发场景中使用。
>
> - 同一系统参数在不同类型的设备上有不同的取值，当前仅提供了系统参数在默认设备上的取值，后续会针对不同设备类型做补充。
>
> - 颜色可以用“RGB”或“ARGB”形式表示，采用“RGB”表示的颜色，完全不透明；采用“ARGB”表示的颜色，其不透明度由“A”（Alpha通道）确定。如“\#7FFF0000”代表不透明度为50%的红色，“\#FFFF0000”和“\#FF0000”都表示不透明度为100%（即完全不透明）的红色。
zh-cn/application-dev/key-features/multi-device-app-dev/design-responsive-layout.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 响应式布局
当基本的自适应布局无法满足多终端上屏幕的体验要求时，我们需要针对不同终端的屏幕特点，设定容器与栅格的关系达到响应式的布局。通常响应式布局能根据栅格断点变化进行有级变化。
## 栅格断点系统
根据设备的水平宽度，OpenHarmony提供了断点系统，覆盖超小、小、中、大 四种屏幕类型，并结合栅格系统默认提供了对应 Column 的数量关系。不同的设备根据自身屏幕水平宽度，在不同的断点范围，系统将自动匹配不同数量的栅格。应用也可针对具体界面自定义栅格。
![删格](figures/删格.png)
栅格断点系统与日常使用的设备屏幕类型有一定的对应关系，例如：超小对应智能穿戴设备，小对应默认设备，中对应平板竖屏，大对应智慧屏与平板横屏。设计师可面向希望运行的设备进行所属屏幕类型的适配。
随着智能设备种类的增加，越来越多产品在四种屏幕类型上具备不同的交互能力，如支持触摸的运动相机（小）、仅支持遥杆的手持云台（小-中）、不可移动的智能台灯（中-大）等，需结合具体设备交互进行对应设计，不可一概而论。
## 缩进布局
为了在宽屏上内容显示有更好的效果，在不同宽度的设备上进行不同缩进效果。
![缩进布局](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/application-dev/key-features/multi-device-app-dev/foreword.md
浏览文件 @ b33f3138
...@@ -27,13 +27,9 @@ ...@@ -27,13 +27,9 @@
- 第3章[从一个例子开始](start-with-a-example.md)通过示例介绍“一多”应用的开发过程，让读者对“一多”有个直观认识。 - 第3章[从一个例子开始](start-with-a-example.md)通过示例介绍“一多”应用的开发过程，让读者对“一多”有个直观认识。
- 第4章[应用UX设计](design-principles.md)介绍了应用UX设计理念。主要阐述了应用设计之初UX设计的原则和要点。该章节主要面向应用的UX设计师。 - 第4章[应用UX设计](../../../design/ux-design/app-ux-design.md)介绍了应用UX设计理念。主要阐述了应用设计之初UX设计的原则和要点。该章节主要面向应用的UX设计师。
UX设计原则应该考虑多设备的“差异性” 、“一致性”、“灵活性”和“兼容性”。 UX设计原则应该考虑多设备的“差异性” 、“一致性”、“灵活性”和“兼容性”。
UX设计要点则从6个方面阐述如何进行多设备应用设计，分别是“自适应应用架构”、“响应式界面布局”、“交互归一”、“视觉参数化”、“多态控件”和“针对性优化”。
最后，给出设计自检表，用于检查应用UX设计是否合理 。
- 第5章[工程管理](ide-using.md)介绍了从工程角度如何开始开发应用，让读者可以直接上手创建多设备应用的工程，是后面学习“一多”能力的上手基础。 - 第5章[工程管理](ide-using.md)介绍了从工程角度如何开始开发应用，让读者可以直接上手创建多设备应用的工程，是后面学习“一多”能力的上手基础。
- 第6章[页面开发的一多能力介绍](page-development-intro.md)和第7章[功能开发的一多能力介绍](development-intro.md)介绍了OpenHarmony提供的“一多”能力，其中每个能力都提供了代码示例和UX效果，让读者可以快速学习“一多”能力。 - 第6章[页面开发的一多能力介绍](page-development-intro.md)和第7章[功能开发的一多能力介绍](development-intro.md)介绍了OpenHarmony提供的“一多”能力，其中每个能力都提供了代码示例和UX效果，让读者可以快速学习“一多”能力。
......
zh-cn/application-dev/key-features/multi-device-app-dev/interaction-basics.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 交互基础
在全场景的数字体验中，越来越多类型的智能终端设备分布在用户的日常生活中，可交互的用户界面广泛存在于默认设备、平板、智能穿戴设备、智慧屏、车机、虚拟现实（VR）和增强现实（AR）等设备上。应用可能在多种设备上运行或在单一设备上被用户通过多种输入方式操控，也可能在多种距离上被用户操控。这需要其用户界面能够识别和支持不同的交互场景，以便用户以习惯的、舒适的方法与其进行交互。
![zh-cn_image_0000001224293580](figures/zh-cn_image_0000001224293580.png)
## 输入方式
典型的输入方式包括但不限于触屏上手指/手写笔等直接交互、鼠标/触摸板/键盘/表冠/遥控器/车机摇杆/旋钮/手柄/隔空手势等间接交互、以及语音交互。
设计和开发应用时，**设计师和开发者应考虑到应用具有使用多种输入方式的可能性**，并实现相应的功能，保证在当前输入方式下应用能够以正确的、符合用户习惯的方式进行响应。
## 交互距离
典型的设备交互距离包括但不限于15cm（智能穿戴设备）、30cm（默认设备）、60cm（桌面设备）、260cm（大屏），具体距离会在用户使用过程中产生一定范围的变化。
设计和开发应用时，设计师和开发者应考虑到多种距离下使用的可能性，保证界面元素的大小、展示信息的密度符合用户的预期。
![位图 21](figures/位图21.png)
zh-cn/application-dev/key-features/multi-device-app-dev/interface-layout-design-intro.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 概述
布局不是静态固定的，当显示环境发生变化时，如横竖屏切换、调节字体大小、应用分屏，要及时调整内容的布局方式以适应变化。本章提供了布局基础的概念和介绍。详见[布局基础](design-grid.md)。
了解布局的基础概念后，通过调用栅格系统、自适应布局和响应式布局能力就可以让内容更好地适配显示环境的变化。综合运用布局基础能力，可实现常用页面结构的多设备适配。详见[布局基础运用案例](design-layout-cases.md)。
zh-cn/application-dev/key-features/multi-device-app-dev/navigation-design.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 应用导航结构设计要求
应用中的导航用于引导用户在应用的各个页面进行浏览。好的导航让用户知道身处何处，去往何方，以及来自哪里。
## 导航的原则
导航需要遵循以下原则：
- **一致：** 导航操作的结果应该与用户的期望保持一致。相同或类似的场景使用用户熟悉的界面布局和控件，在多设备上确保一致的应用架构和导航行为，让用户无论在什么页面，都知道如何导航。例如二级界面使用左上角的返回按钮来返回界面的上一个层级。
- **清晰：** 导航应该提供清晰的路径。用户使用的时候，逻辑关系简单且容易理解，能够知道当前处在界面的什么位置，操作后将会跳转到什么位置，不会迷失方向。例如使用底部页签，让用户在平级页面之间进行切换。
导航要避免以下设计：
- **层级过深：** 导航层级建议在三层以内。对于太深的层次，会带来操作效率的问题。如果确实需要深层级设计，建议使用面包屑设计或增加一键回到首页的功能。
- **导航复杂：** 在侧边导航中，使用底部页签，会让操作变得复杂，建议仅使用侧边导航。
## 导航的分类
常用的应用导航有：平级导航、层级导航和混合导航。
**平级导航**
平级导航结构中，页面均处在同一层级。
使用场景：用于展示同等地位或同等层级的界面。
![zh-cn_image_0000001224053150](figures/zh-cn_image_0000001224053150.jpg)
例如：以Tab方式组成的页面。图中照片、相册、发现为一级界面，从视频相册进入二级内容界面。
![一多-2-2](figures/一多-2-2.png)
多设备设计：可转化导航类控件到符合设备体验的位置上。默认设备上使用Tab导航，PAD等大屏设备使用侧边Tab导航，智慧屏使用顶部Tab导航。
![一多-2-3](figures/一多-2-3.png)
**层级导航**
层级导航结构由父页面和子页面组成。父页面可以有一个或多个子页面。每个子页面都有一个父页面。
层级导航适用于多层级的复杂结构。层级结构深的内容，用户访问的路径变长，效率降低，可以通过适当的层级穿透设计（例如：控制中心中的蓝牙开关，解决了进“设置-蓝牙”界面设置操作路径过长的问题）解决此问题。
使用场景：页面存在上下级关系的应用。
![zh-cn_image_0000001224173138](figures/zh-cn_image_0000001224173138.jpg)
例如：通过从内容进入后经返回键返回之前的页面。
![一多-2-5](figures/一多-2-5.png)
多设备设计：可以考虑将上下层级的界面在同一界面展示。默认设备和智慧屏上使用上下层级关系。平板等大屏设备上使用分栏的方式展示内容。
![一多-2-6](figures/一多-2-6.png)
**混合导航**
在实际应用设计中，仅使用平级或层级导航可能无法应对更复杂的业务结构。此时需区分不同页面的导航关系，对同等地位或同等层级的页面使用平级导航结构，对具有复杂关系的页面使用层级导航结构。
使用场景：应用由几个同等级的模块组成，每个模块又有上下层级关系页面。
![zh-cn_image_0000001268653317](figures/zh-cn_image_0000001268653317.jpg)
多设备设计：可以根据平级导航、层级导航自身的设计规则综合运用，一般平级导航优先级比层级高。
![混合导航](figures/混合导航.png)
zh-cn/application-dev/key-features/multi-device-app-dev/page-design.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 应用页面结构设计
## 通用页面结构
应用程序由多个页面组成。我们将常见的页面进行了梳理，总结了以下常用的页面结构。
**启动页面**
针对内容型应用，应用首页内容的获取需要花费一定的时间，此时可以使用启动页缓解页面加载内容的等待感。启动页可以展示应用的品牌形象或者广告，避免让用户等待过长时间。没有网络加载内容的应用，不需要使用启动页。
![一多-应用架构-启动页](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/application-dev/key-features/multi-device-app-dev/resource-usage.md
浏览文件 @ b33f3138
...@@ -114,11 +114,11 @@ struct Index { ...@@ -114,11 +114,11 @@ struct Index {
## 系统资源 ## 系统资源
除了自定义资源，开发者也可以使用系统中预定义的资源（即[分层参数](visual-basics.md)，同一资源ID在设备类型、深浅色等不同配置下有不同的取值）。 除了自定义资源，开发者也可以使用系统中预定义的资源（即[分层参数](../../../design/ux-design/visual-basis.md)，同一资源ID在设备类型、深浅色等不同配置下有不同的取值）。
在开发过程中，分层参数的用法与资源限定词基本一致。开发者可以通过"$r('sys.type.resource_id')"的形式引用系统资源。sys代表是系统资源；type代表资源类型，值可以取color、float、string和media；resource_id代表资源id。 在开发过程中，分层参数的用法与资源限定词基本一致。开发者可以通过"$r('sys.type.resource_id')"的形式引用系统资源。sys代表是系统资源；type代表资源类型，值可以取color、float、string和media；resource_id代表资源id。
可以查看本文[应用UX设计中关于资源的介绍](design-resources.md)，获取系统支持的资源ID及其在不同配置下的取值。 可以查看[应用UX设计中关于资源的介绍](../../../design/ux-design/design-resources.md)，获取系统支持的资源ID及其在不同配置下的取值。
> **说明：** > **说明：**
> - 仅声明式开发范式支持使用分层参数，类Web开发范式不支持。 > - 仅声明式开发范式支持使用分层参数，类Web开发范式不支持。
......
zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md
浏览文件 @ b33f3138
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
通过窗口对象监听断点变化的核心是获取窗口对象及注册窗口尺寸变化的回调函数。 通过窗口对象监听断点变化的核心是获取窗口对象及注册窗口尺寸变化的回调函数。
1. 在Ability的[onWindowStageCreate](../../application-models/uiability-lifecycle.md)生命周期回调中，通过[窗口](../../reference/apis/js-apis-window.md)对象获取启动时的应用窗口宽度并注册回调函数监听窗口尺寸变化。将窗口尺寸的长度单位[由px换算为vp](../../key-features/multi-device-app-dev/visual-basics.md#视觉基础)后，即可基于前文中介绍的规则得到当前断点值，此时可以使用[状态变量](../../quick-start/arkts-state.md)记录当前的断点值方便后续使用。 1. 在Ability的[onWindowStageCreate](../../application-models/uiability-lifecycle.md)生命周期回调中，通过[窗口](../../reference/apis/js-apis-window.md)对象获取启动时的应用窗口宽度并注册回调函数监听窗口尺寸变化。将窗口尺寸的长度单位[由px换算为vp](../../../design/ux-design/visual-basis.md#视觉基础)后，即可基于前文中介绍的规则得到当前断点值，此时可以使用[状态变量](../../quick-start/arkts-state.md)记录当前的断点值方便后续使用。
```ts ```ts
// MainAbility.ts // MainAbility.ts
......
zh-cn/application-dev/key-features/multi-device-app-dev/start-with-a-example.md
浏览文件 @ b33f3138
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
| 大设备 | [840,&nbsp;+∞) | | 大设备 | [840,&nbsp;+∞) |
> **说明：** > **说明：**
> - vp是virtual pixel（虚拟像素）的缩写，是OpenHarmony中常用的长度单位，详见本文[视觉基础](visual-basics.md)小节中的介绍。 > - vp是virtual pixel（虚拟像素）的缩写，是OpenHarmony中常用的长度单位，详见[视觉基础](../../../design/ux-design/visual-basis.md)小节中的介绍。
> >
> - 此处基于设备屏幕宽度划分不同设备是为了读者方便理解。通常智能设备上的应用都是以全屏的形式运行，但随着移动技术的发展，当前部分智能设备支持应用以自由窗口模式运行（即用户可以通过拖拽等操作自由调整应用运行窗口的尺寸），故以应用窗口尺寸为基准进行划分更为合适，本文后续的响应式布局章节中将详细介绍相关内容。 > - 此处基于设备屏幕宽度划分不同设备是为了读者方便理解。通常智能设备上的应用都是以全屏的形式运行，但随着移动技术的发展，当前部分智能设备支持应用以自由窗口模式运行（即用户可以通过拖拽等操作自由调整应用运行窗口的尺寸），故以应用窗口尺寸为基准进行划分更为合适，本文后续的响应式布局章节中将详细介绍相关内容。
> >
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
如此，既在各设备上体现了UX的一致性，也在各设备上体现了UX的差异性，从而既可以保障各设备上应用界面的体验，也可以最大程度复用界面代码。 如此，既在各设备上体现了UX的一致性，也在各设备上体现了UX的差异性，从而既可以保障各设备上应用界面的体验，也可以最大程度复用界面代码。
在本文[应用UX设计章节](design-principles.md)中，将详细介绍应用的UX设计规则。 在[应用UX设计章节](../../../zh-ch/design/ux-design/app-ux-design.md)中，将详细介绍应用的UX设计规则。
## 工程管理及调试 ## 工程管理及调试
......
zh-cn/application-dev/key-features/multi-device-app-dev/visual-basics.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 视觉基础
**虚拟像素单位：vp**
虚拟像素(virtual pixel)是一台设备针对应用而言所具有的虚拟尺寸（区别于屏幕硬件本身的像素单位）。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。
![zh-cn_image_0000001224333864](figures/zh-cn_image_0000001224333864.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。
**视觉属性：分层参数**
分层参数是根据使用场景定义的视觉属性ID，通过在不同色彩主题、多种设备上配置不同的数值，实现多设备适配的效果。OpenHarmony的分层参数包含色彩、字体、圆角、间距、阴影、模糊、缩放，并提供了默认实现。设备、应用、服务均可在此基础上管理并自定义不同场景的视觉属性。
![画板 copy](figures/画板copy.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/application-dev/key-features/multi-device-app-dev/visual-style-color.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 色彩
色彩能够赋予应用界面足够的生动性，并给用户提供不同设备上、不同应用间视觉感官上的连续性。同时，合理地运用色彩可以传达关键的状态信息，给予用户即时的状态反馈以及数据可视化呈现。
OpenHarmony采用蓝色作为系统的默认主色调。根据人因研究，对蓝色的接受度无论是在男性还是女性群体中，比例都是最高的。在世界地域维度，蓝色也是最受欢迎的颜色。更重要的是，对于大多数色觉障碍人士，蓝色依然可以被辨识。
## 色值及使用场景
在色彩设计上，既保持统一的色彩语言，又根据多端不同的使用场景做了调整，带来定制化用户体验。
例如，高亮色ohos_id_color_activated，在不同设备和色彩模式上会有不同具体的值：
| | |
| -------- | -------- |
| ![zh-cn_image_0000001400554657](figures/zh-cn_image_0000001400554657.png)<br/>用于默认设备浅色风格。 | ![zh-cn_image_0000001400874297](figures/zh-cn_image_0000001400874297.png)<br/>用于默认设备深色风格。 |
| ![zh-cn_image_0000001350234552](figures/zh-cn_image_0000001350234552.png)<br/>用于智慧屏深色风格。 | ![zh-cn_image_0000001400674189](figures/zh-cn_image_0000001400674189.png)<br/>用于智能穿戴深色风格。 |
OpenHarmony后续将支持深色模式、浅色模式，及不同主题切换能力。
关于OpenHarmony默认提供的色彩相关分层参数，详见：[资源](design-resources.md)
zh-cn/application-dev/key-features/multi-device-app-dev/visual-style-font.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 字体
字体直接影响界面的展示效果和用户的阅读效率。优秀的字形设计、统一的多语言字形风格、正确的字体排版，能有效地提升应用使用体验，并传递品牌连续性。
## 多设备字号层级
选择合适的字号有助于定义内容的信息层级以及增强内容的可读性。通过研究全场景设备的显示环境、用户使用时环境的差异，OpenHarmony结合分层参数为不同设备形态提供了一套构建信息层级的字号系统。
![字体 copy 2](figures/字体copy2.png)
关于OpenHarmony默认提供的字体相关分层参数，详见：[资源](design-resources.md)
zh-cn/application-dev/key-features/multi-device-app-dev/visual-style-icon.md 已删除 100644 → 0
浏览文件 @ 9f176be9
# 图标
图标是操作系统与用户界面关键的视觉元素之一。图标应当具备直接识别关键信息或语义的特质，帮助用户轻松辨别图标所代表的含义。为了保证用户在不同的设备中视觉体验的一致性，在图标的设计上应当保持应用图标的元素一致，再根据不同的设备匹配对应的图标背板以适应于各种场景。除此之外，图标在颜色的使用上应当遵循符合人因的色彩规则，满足用户阅读的舒适度以及整体界面的和谐程度。对于面状图标与线状图标的使用应当遵循系统的设计规则，两种样式使用同一种图形结构，降低用户阅读时再次识别的成本。
![zh-cn_image_0000001268334113](figures/zh-cn_image_0000001268334113.jpg)
关于OpenHarmony默认提供的图标库，详见[线上图标库](https://developer.harmonyos.com/cn/design/harmonyos-icon/)。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或