Material Design — 提示框( Dialogs)

作者: 霖酱 | 来源:发表于2018-04-27 16:16 被阅读94次

    自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

    提示框( Dialogs)

    Material Design链接:提示框

    提示框

    提示框告知用户特定的任务,并可能包含重要信息,需要用户做出决定或使其参与多项任务。

    对话框包含文本和UI控件。 他们保持视觉焦点直到被关闭或被完成了其中需要的行动。 谨慎使用对话,因为它们是打扰用户的。

    分类

    ·警告(Alerts)是紧急中断,通知有关情况并要求确认。

    ·简单菜单(Simple Menus)显示列表项的选项,而简单提示框(Simple Dialogs)可以提供有关列表项的详细信息或操作。

    ·确认提示框(Confirmation dialogs)要求用户明确确认选择。

    行为

    对话框不应该被其他元素或屏幕边缘遮挡。 提示框始终保持视觉聚焦,直到被关闭或被完成了其中需要的行动。

    全屏提示框(仅限手机)

    全屏对话框最适合于复杂的任务,或需要输入法编辑器,因为它可以在保存之前将一系列任务组合在一起。


    行为

    提示框的前身

    提示框是模态窗口的子类型,这里所涉及的示例用于标准材质的系统提示框。 (其他模态窗口结构在这里没有涉及,因为它们有太多的变化,例如购买流程的品牌按钮,非标准的UI表单元素或独特的布局。)

    减少打扰

    谨慎使用提示框,因为它们是中断性的。 他们的突然出现迫使用户停止当前的任务并专注于提示框内容。 并非所有的选择,设置或细节都准许这种中断。 提示框的替代选项包括Menus与内联扩展,这两个都能保持当前的环境。

    全屏幕提示框例外

    全屏对话框可能会打开其他对话框,例如选择器,因为它们的设计可以容纳额外的材料层,而不会显着增加app深度的感知与视觉干扰。

    左:提示框内容    右:全屏提示框

    可滚动内容例外

    一些提示框内容需要滚动,例如铃声列表。

    对于可滚动的选项列表,提示标题仍固定在顶部。 这可保证了无论项目在列表中什么位置,被选项与标题均保持可见。

    否则,标题会随内容一起滚动离开视野。 内容滚动时,操作始终保持原位。

    提示框与底层父级材料是分开的,不会随其滚动。

    标题与被选操作均保持可见

    显示额外内容

    要在提示框中展示额外内容,请在内容区域内使用内联展开。 或者考虑能对大量的内容进行优化的可替代的组件。

    关闭提示框

    提示框可以通过点击提示框外部或点击系统后退按钮(在Android上)来关闭。 有时候,用户必须做出选择动作后才能关闭提示框。


    警告(Alerts)

    警报是紧急中断,需要确认,通知用户有关情况。

    Snackbars消除歧义:Snackbars在行动后提供可选信息,例如确认放弃草稿。 他们经常允许用户撤消刚刚采取的操作。

    警告没有标题栏

    大多数警告不需要标题。

    他们用以下的方式以一两句话来总结一个决定,例如:

    ·提出问题(例如“删除此对话?”)

    ·做出与操作按钮有关的声明

    按钮文案要明确说明接下来将发生的操作

    带有标题的警告

    仅对高风险情况使用带标题的警告,例如连接可能丢失。 用户应该能够仅根据标题和按钮文本来理解选择。

    如果需要标题:

    ·在内容区域使用明确的问题或陈述,例如“擦除USB存储器?”

    ·避免道歉,模棱两可或提问,例如“警告!”或“你确定吗?”

    标题要明确告知结果

    简单菜单

    仅限手机和平板电脑

    消除歧义:简单提示框显示列表项目的详细选项或提供相关操作。 简单提示框可以显示与简单菜单相同的内容。 但是,简单菜单是首选,因为它们对用户当前的上下文影响较小。

    简单菜单的样式

    简单提示框(用于选择)

    简单的提示框可以提供有关列表项的额外详细信息或操作。 例如,他们可以显示头像,图标,提示语或正交行为(例如添加帐户)。

    操作机制:

    ·立即选择一个选项,提交选项并关闭菜单;

    ·触摸提示框外部或按下后退键,取消操作并关闭对话框。

    减少打扰

    简单提示框比简单菜单更具中断性,应该谨慎使用。

    简单提示框样式

    没有明确的取消按钮

    简单提示框没有明确的按钮来接受或取消操作。

    不该有明确的取消按钮

    明确说明

    ·在简单提示框中,行高可以变化;

    ·简单的对话框在屏幕上垂直和水平都居中显示;

    ·提示框与屏幕左右边缘的距离应该至少为40dp,距离顶部和底部至少为24dp;

    ·该对话框的内容距离提示框边缘为24dp。

    允许文字换行

    如果简单菜单中的文本需要换行,则使用简单提示框。

    文案要换行时使用简单提示框

    确认提示框(Confirmation dialogs)

    确认提示框要求用户在提交选项之前明确确认他们的选择。 例如,用户可以聆听多个铃声,但只能在触摸“ok”时进行最终选择。

    点击确认对话框中的“取消”,或按Android的“后退”,取消操作,放弃所有更改并关闭对话框。

    左图为带选择控件的提示框

    避免使用提示框启动提示框

    确认提示框应避免启动其他简单提示框或简单菜单,因为它们增加了页面复杂性并会增加了app的海拔。 如果需要完成任务,可以使用全屏提示框。

    确认单个值

    确认提示框可以使用列表以外的布局,例如日期选择器,但仍然专注于选定单个值(选择日期,但不选择时间和日期)。

    左:选择日期    右:选择时间

    取消与确定按钮

    确认提示框需要提供明确的确认按钮和明确的取消按钮。 点击取消按钮、返回按钮或离开确认提示框将放弃之前的更改。

    要提供明确的“取消”与“确定”按钮

    全屏提示框(Full-screen Dialogs)

    仅限手机:由于空间有限,全屏幕对话框可能更适合使用在手机,而不是屏幕较大的设备上。

    用法

    全屏幕提示框在一系列任务(例如创建日历入口)被提交或取消之前分组,并在点击“保存”后保存选择。 触摸“X”会放弃所有更改并退出提示框。

    全屏对话框可实现复杂的布局,将多个材料堆积的情况简化(提示框上层的提示框),并暂时将app可感知的海拔重置为更高。 全屏对话框允许任务在复杂操作时开启简单菜单或简单提示框。

    全屏提示框可用于满足以下标准的内容或任务:

    ·该提示框包含需要输入编辑器(IME)的组件(如选择器或form fields),例如键盘

    ·当没有实时保存更改时

    ·当app中没有草稿功能时(无法自动存到草稿)

    ·在提交之前执行批量处理操作或排队更改时

    全屏提示框支持日期选择器

    操作

    在屏幕顶部放置全屏对话框的确认和离开操作。

    确认

    屏幕右上角的确认按钮使用描述性动词,例如:保存,发送,分享,更新或创建。 不要使用模糊的动作来确认动作,如:完成,确定或关闭。

    确认按钮将被禁用,直到满足对话框中的所有必填字段都完成时,确认操作才会被激活

    丢弃(离开)

    丢弃操作(屏幕左上角的“X”)和后退按钮均会关闭全屏对话框并放弃之前所做的更改。

    ·如果没有更改,对话框关闭,不需要丢弃确认

    ·如果用户进行了任何更改,则会提示他们确认放弃操作

    左:不要用“关闭”这样的词作为确认    右:离开时进行提示

    导航

    全屏幕对话框中使用的“X”不同于向返回箭头,箭头能表示视图的状态实时被保存。 例如,设置中使用的返回箭头表示所有更改立即提交,无需明确的确认或取消操作。

    两种形式:返回箭头;“X”+确认按钮

    标题

    全屏提示框的标题不使用动态类型。

    标题应该简洁。 如有必要,他们可以换行到第二行,若长于第二行应该加上省略号。

    如果全屏对话框使用长度可变的标题或预期到可能会有长标题(例如,因为某些单词在不同的语言中较长),请将标题文本置于对话框的内容区域而不是最上面的导航栏。

    不该在导航栏中使用长标题

    相关文章

      网友评论

      • HU_Wei:了解到什么事是全屏提示框,以及提示框上还可以有简单提示框,赞!
        霖酱:@P2GGGG :wink:那倒是
        HU_Wei:@霖酱 必须仔细看,先了解,再说用不用。😀
        霖酱:@P2GGGG 🤣你看的好认真 不过有问过安卓的开发,他们从来没用过全屏提示框,因为和普通的页面并没有什么区别...
      • 霖霖的迷弟::heart_eyes: :heart_eyes:
        霖酱:@霖霖的迷哥 :heart_eyes::heart_eyes:

      本文标题:Material Design — 提示框( Dialogs)

      本文链接:https://www.haomeiwen.com/subject/figplftx.html