Android 弹窗设计规范

2023年4月29日08:07:51

Android 弹窗又叫弹框、弹出层等,指代所有从界面中弹出的临时存在的窗口。它是我们在Android APP中常见的交互组件,用作提醒、做决定、处理某个任务。通过查找Android开发者指南中的一些官方规范(https://developer.android.com/guide/topics/ui),它分为Toasts吐司提示、SnackBars底部提示框、Pickers选择器、Menus菜单、Dialogs对话框等。

首先,普及一个有关组件性质的概念,模态(modal)和非模态(nonmodal/modeless)情境。模态是用户必须通过点击相关按钮或其他方式来退出之后才能进行其他操作,也即模态情境会打断用户的操作。反之,非模态是不会阻断用户的操作,用户可以继续之前的交互,不对其进行回应。通常,用户可以点击非模态窗口之外的其他位置来关闭它或等它自动消失。

接下来依次讲一下各类弹框组件:

1.Toast 

在业界绝大多数APP中,是非模态的,出现在屏幕底部,纯文字显示的,并且不支持交互的系统弹窗。使用方法如下:

//第一个参数是上下文,第二个是需要显示的内容,第三个是显示时间(也可为Toast.LENGTH_SHORT) ,两个默认时长分别为 2s 和 3.5s。

Toast.makeText(this,"我是文本显示内容",Toast.LENGTH_LONG);

另外,也出现了各种打破规范的 Toasts ,比如模态的、带图标的、可交互的等,我们的应用不涉及这些,所以此处不做阐述,只使用非模态的那种方式,遵循系统默认字体和样式规范:

• 一次只显示一个 Toast。

• 纯文本的 Toasts 一般不超过 14 个字。

• 0~10个字符显示时长用Toast.LENGTH_SHORT,超过10个字用Toast.LENGTH_LONG。

【贴图】

2.SnackBars 

Snackbars 是 Android 平台的控件,跟 Toasts 非常相似。两者的区别在于,Snackbars 可以包含一个操作,是可以交互的。并且是支持主动滑动关闭的。

虽然现在的 Material Design 里已经找不到 Toasts,Snackbars 也可以取代 Toasts,但在实际运用中,还是 Toasts 用得比较多,Snackbars仅是安卓规范样式,这里不做介绍。

【贴图】

3.Pickers

选择器展示了一组值,用户可以从中进行选择其中一个选项,常用于表单。

•  显示在内容视图中,通常是嵌入表单中或出现在屏幕底部。

•  内容通常包括一组值。

•  当前选中的值在中间,以深色标识。

•  选中选项后,再次点击触发控件或界面中其他位置,关闭选择器,选择成功。

•  再次点击触发控件时,控件上一般包含「取消」和「确定」按钮,点击「确定」按钮,选择成功,同时关闭选择器。直接点击「取消」按钮或点击遮罩层可关闭选择器。

【贴图】

4.Menus

主要介绍Pop Menus 气泡菜单和 Bottom Menus 底部菜单

(1) Pop Menus 气泡菜单                     

• 以 “小型气泡浮层” 的形式承载菜单功能。

• 通常包含一个箭头,指向浮层出现的位置(有时候也不包含箭头)。

•  选中某个菜单项后,自动关闭气泡浮层。

• 一般是模态的。可在气泡浮层下显示遮罩层,也可不显示。点击遮罩层或界面中其他区域,可关闭浮层。(比较特别的是,像微信和 QQ,弹出气泡浮层后,界面中其他元素均不可点击,但仍可切换底部 tab。)

(2)Bottom Menus 底部菜单

•  以 “底部模态面板” 的形式承载菜单功能。从底部向上滑动出现的面板,可承载的菜单项较多。

• 一般可以采用官方控件,向下滑动面板、点击「关闭」、「取消」按钮或遮罩层关闭面板。

• Action Sheets 和 Activity Views 可以看作一种特定的底部菜单。

•  底部菜单用于筛选内容时:

① 单个筛选条件:选中选项后,自动关闭面板。

② 多个筛选条件:一般包含「重置」和「确定」按钮,选择菜单项后,点击「确定」才关闭面板,点击「重置」可清空所有已选条件。

【贴图】

5.Dialogs

阐述一下,贴fttr的图,然后加上CCB里面的使用方法

移动端弹窗设计规范总结(二)_laoyang520的博客-CSDN博客_移动端弹框实现,有相关介绍

-------------------

本文部分内容参考:

移动端弹窗设计规范总结(一)_laoyang520的博客-CSDN博客_弹窗设计规范

实用干货!UI设计师需要了解的 APP弹窗体系 - 优设网 - 学设计上优设

  • 作者:王的博客
  • 原文链接:https://blog.csdn.net/Wang_WY/article/details/128066100
    更新时间:2023年4月29日08:07:51 ,共 1850 字。