【Material Design视觉设计语言】UI组件设计（五）：提示框

作者：郭孝星
微博：郭孝星的新浪微博
邮箱：[email protected]
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

【Material Design视觉设计语言】章节列表

【Material Design视觉设计语言】开篇
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计（一）：按钮
【Material Design视觉设计语言】UI组件设计（二）：卡片
【Material Design视觉设计语言】UI组件设计（三）：纸片
【Material Design视觉设计语言】UI组件设计（四）：表格
【Material Design视觉设计语言】UI组件设计（五）：提示框
【Material Design视觉设计语言】UI组件设计（六）：分隔线
【Material Design视觉设计语言】UI组件设计（七）：网格
【Material Design视觉设计语言】UI组件设计（八）：列表
【Material Design视觉设计语言】UI组件设计（九）：菜单
【Material Design视觉设计语言】UI组件设计（十）：选择器
【Material Design视觉设计语言】UI组件设计（十一）：进度条
【Material Design视觉设计语言】UI组件设计（十二）：滑块
【Material Design视觉设计语言】UI组件设计（十三）：Toast
【Material Design视觉设计语言】UI组件设计（十四）：Tabs
【Material Design视觉设计语言】UI组件设计（十五）：文本框

提示框（Dialog）用于提示用户作一些决定，或者是完成某个任务时需要的一些其它额外的信息。

一 提示框的功能

Dialog可以是用一种取消/确定的简单应答模式，它常见的应用场景如下所示：

• 提示框最典型的应用场景是提示用户去做一个些被安排好的决定 ，而这些决定可能是当前任务的一部分或者是前至条件。
• 提示框可以用于告知用户具体的问题以便他们作用重要的决定，或者是用于解释 接下来的动作的重要性及后果(起到一个警示作用) 。

二 提示框的结构

• 标题：提示框的标题是可选的，用于说明提示的类型。可以是与之相关的程序名，或者是选择后会影响到的内容 。例如：设置提示框标题应该作为提示框的一部分被整体地显示出来。
• 内容：提示框的内容是变化多样的。但是通常情况下由文本 和其它 UI 元素组成的，并且主要是用于聚焦于某个任务或者是某个步骤。比如说”确认”、”删除”或选择某个选项。
• 事件：主要是允许用户通过确认一个具体操作来继续下一步活动。

关于提示框按钮的尺寸

常规按钮

加宽型竖排按钮

并排按钮

三 提示框的交互

提示框的交互体现在提示框的事件上。

提示框事件的是一组聚焦和有限的事件，通常是一个肯定的事件和否定(与肯定的事件对立)的事件组成。

肯定的事件是放于提示框的右边并且可以继续接下来的步骤。肯定的事件可以是据有破坏性的，比如:”删除”，”移除”。

否定的事件是放于提示框的左边。用于返回用户原始的屏幕或者是步骤。

提示框是与父视图是分隔开的。不会随着父视图滚动。但是如果提示框内容偏多，也可以对提示框本身使用视图滚动。