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 |  |  | 27| -------- | -------- | 28| 纯内容 | 内容+操作按钮 | 29 30 31### 有标题弹出框 32 33标题分为:纯标题(单/双行标题)、标题+操作图标。 34 35 |  | 36| -------- | 37| 标题+内容 | 38 39当内容为列表类内容时,则不需要在底部留 24vp 的间隔。 40 41 42### 纯文本 43 44只有标题时,标题居中。 45 46 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  104 105- 继续超长,换行处理,支持换一行。 106 107- 最后,“...“截断处理。 108 109 110### 弹出框按钮 111 112- 按钮不支持换行。 113 114 115 116- 继续超长,先考虑改变布局,左右变上下(若是上下布局,则不考虑此方式)。 117 118 119 120- 其次缩小文字。按钮文本同时逐级缩小,最小字号为 9fp。 121 122- 最后,“...“截断处理。 123 124  125 126## 资源 127 128弹出框相关的开发者文档详见[API接口](http://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-promptAction.md)。