• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 弹出框
2
3弹出框是一种模态窗口,在弹出框消失之前,用户无法操作其他界面内容,干扰性比较强。
4
5
6## 如何使用
7
8- 弹出框常用于展示用户当前需要的或用户必须关注的信息或操作,其他情况不建议使用弹出框,可考虑通知等其他非模态窗口。
9
10- 弹出框的内容通常是不同控件进行组合布局。例如文本(可带格式,如缩进、链接、粗体等)、列表、输入框、网格、图标或图片。常用于选择或确认信息。
11
12
13
14## 标题区
15
16纯标题-单行标题。
17
18![1_zh-cn_image_0000001573471365.png](figures/1_zh-cn_image_0000001573471365.png)
19
20
21## 分类
22
23- 无标题弹出框
24
25- 有标题弹出框
26
27- 纯文本
28
29
30### 无标题弹出框
31
32没有标题的弹出框。
33
34内容区域上下留 24vp 的间隔,但内容如果为列表类的内容,则不需要上下留 24vp 的间隔。
35
36  | ![1](figures/1.png) | ![2](figures/2.png) |
37| -------- | -------- |
38| 纯内容 | 内容+操作按钮 |
39
40
41### 有标题弹出框
42
43标题分为:纯标题(单/双行标题)、标题+操作图标。
44
45  |  ![3](figures/3.png) |
46| -------- |
47| 标题+内容 |
48
49当内容为列表类内容时,则不需要在底部留 24vp 的间隔。
50
51
52### 纯文本
53
54只有标题时,标题居中。
55
56![1_zh-cn_image_0000001573271493.png](figures/1_zh-cn_image_0000001573271493.png)
57
58
59## 高度规则与位置
60
61竖屏与横屏定义不同。
62
63
64### 竖屏
65
66弹出框最大高度= 0.8x(屏幕高度-状态栏-导航栏)
67
68位置始终保持在导航栏上方(含导航栏隐藏场景)。
69
70
71### 横屏
72
73弹出框最大高度= 0.9x(屏幕高度-状态栏) 位置在减去状态栏的区域居中显示。
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- 以陈述语气描述需告知用户的具体事项。例如目前没有可用的更新。
102
103**按钮**
104
105- 只有一个,例如“知道了”。避免使用“确认”、“好”。
106
107
108### 弹出框标题
109
110- 先逐级缩小字号到 15fp。
111  ![0000000000011111111.20220510095302.53512292337511436771446888852045](figures/0000000000011111111.20220510095302.53512292337511436771446888852045.png)
112
113- 继续超长,换行处理,支持换一行。
114
115- 最后,“...“截断处理。
116
117
118### 弹出框按钮
119
120- 按钮不支持换行
121  ![0000000000011111111.20220510095302.23714859819316521858981506654570](figures/0000000000011111111.20220510095302.23714859819316521858981506654570.png)
122
123- 继续超长,先考虑改变布局,左右变上下(若是上下布局,则不考虑此方式)。
124  ![0000000000011111111.20220510095302.03301485347356730621811289300521](figures/0000000000011111111.20220510095302.03301485347356730621811289300521.png)
125
126- 其次缩小文字。按钮文本同时逐级缩小,最小字号为 9fp。
127
128- 最后,“...“截断处理。
129  ![0000000000011111111.20220510095302.96026243257093777700562089792853](figures/0000000000011111111.20220510095302.96026243257093777700562089792853.png)
130
131
132## 资源
133
134弹出框相关的开发者文档详见API接口。
135