自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个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”+确认按钮标题
全屏提示框的标题不使用动态类型。
标题应该简洁。 如有必要,他们可以换行到第二行,若长于第二行应该加上省略号。
如果全屏对话框使用长度可变的标题或预期到可能会有长标题(例如,因为某些单词在不同的语言中较长),请将标题文本置于对话框的内容区域而不是最上面的导航栏。
不该在导航栏中使用长标题
网友评论