1# 弹出框
2
3弹出框是一种模态窗口,在弹出框消失之前,用户无法操作其他界面内容,干扰性比较强。
4
5
6## 如何使用
7
8- 弹出框常用于展示用户当前需要的或用户必须关注的信息或操作,其他情况不建议使用弹出框,可考虑通知等其他非模态窗口。
9
10- 弹出框的内容通常是不同控件进行组合布局。例如文本(可带格式,如缩进、链接、粗体等)、列表、输入框、网格、图标或图片。常用于选择或确认信息。
11
12## 分类
13
14- 无标题弹出框
15
16- 有标题弹出框
17
18- 纯文本
19
20### 无标题弹出框
21
22没有标题的弹出框。
23
24内容区域上下留 24vp 的间隔,但内容如果为列表类的内容,则不需要上下留 24vp 的间隔。
25
26  | ![1](figures/1.png) | ![2](figures/2.png) |
27| -------- | -------- |
28| 纯内容 | 内容+操作按钮 |
29
30
31### 有标题弹出框
32
33标题分为:纯标题(单/双行标题)、标题+操作图标。
34
35  |  ![3](figures/3.png) |
36| -------- |
37| 标题+内容 |
38
39当内容为列表类内容时,则不需要在底部留 24vp 的间隔。
40
41
42### 纯文本
43
44只有标题时,标题居中。
45
46![1_zh-cn_image_0000001573271493.png](figures/1_zh-cn_image_0000001573271493.png)
47
48
49## 高度规则与位置
50
51竖屏与横屏定义不同。
52
53
54### 竖屏
55
56弹出框最大高度= 0.8x(屏幕高度-状态栏-导航栏)
57
58位置始终保持在导航栏上方(含导航栏隐藏场景)。
59
60
61### 横屏
62
63弹出框最大高度= 0.9x(屏幕高度-状态栏) 位置在减去状态栏的区域居中显示。
64
65## 界面写作原则
66
67### 操作确认
68
69**标题**
70
71- 句子短,无断句,且为陈述句时,不加句号。
72
73- 感叹句、问句,需加对应标点(感叹号、问号)。
74
75- 标题简明扼要,清晰描述要进行的操作。可为短语(动词+名词)。
76
77**内容文本**
78
79- 描述需用户确认的内容(确认后产生的影响、效果、影响范围等),可为疑问句或陈述句。尽量不用辅助说明,若仍需要,避免与标题重复。
80
81**按钮**
82
83- 按钮让用户选择是否进行下一步动作。操作按钮应使用真实的操作内容。
84
85- 通常与标题栏中的动词一致。不要使用“是”或“否”。
86
87
88### 信息确认
89
90**内容文本**
91
92- 以陈述语气描述需告知用户的具体事项。例如目前没有可用的更新。
93
94**按钮**
95
96- 只有一个,例如“知道了”。避免使用“确认”、“好”。
97
98## 界面用语超长处理
99### 弹出框标题
100
101- 先逐级缩小字号到 15fp。
102
103  ![0000000000011111111.20220510095302.53512292337511436771446888852045](figures/0000000000011111111.20220510095302.53512292337511436771446888852045.png)
104
105- 继续超长,换行处理,支持换一行。
106
107- 最后,“...“截断处理。
108
109
110### 弹出框按钮
111
112- 按钮不支持换行。
113
114![弹出框按钮1.png](figures/弹出框按钮1.png)
115
116- 继续超长,先考虑改变布局,左右变上下(若是上下布局,则不考虑此方式)。
117
118![弹出框按钮2.png](figures/弹出框按钮2.png)
119
120- 其次缩小文字。按钮文本同时逐级缩小,最小字号为 9fp。
121
122- 最后,“...“截断处理。
123
124  ![0000000000011111111.20220510095302.96026243257093777700562089792853](figures/0000000000011111111.20220510095302.96026243257093777700562089792853.png)
125
126## 资源
127
128弹出框相关的开发者文档详见[API接口](http://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-promptAction.md)