【Material Design视觉设计语言】UI组件设计（十三）：Toast

作者：郭孝星
微博：郭孝星的新浪微博
邮箱：[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组件设计（十五）：文本框

ToastAndroid提供的一种主要用于提示系统消息的胶囊状的提示框。

一 Toast设计原则

1.1 短文本

通常 Toast 的高度应该仅仅用于容纳所有的文本，而文本应该与执行的操作相关。Toast 中不能包含图标，操作只能以文本的形式存在。

举例

正确的做法

错误的做法

1.2 暂时性

为了保证可用性，Toast 不应该成为通往核心操作的唯一方式。作为在所有层的上方，Toast 不应该持续存在或相互堆叠。

举例

正确的做法

错误的做法

1.3 操作少

当一个动作发生的时候，应当符合提示框和可用性规则。当有2个或者2个以上的操作出现时，应该使用提示框而不是 Toast，即使其中的一个是取消操作。如果 Toast 中提示的操作重要到需要打断屏幕上正在进行的操作，那么理当使用提示框而非 Toast。

举例

正确的做法

错误的做法

1.4 勿遮挡

垂直移动浮动操作按钮到 Toast 的上方。

举例

正确的做法

错误的做法

二 Toast设计规格

2.1 手机端

单行 Toast 高度：48 dp
多行 Toast 高度：80 dp
文本：Roboto Regular 14 sp
操作按钮：Roboto Medium 14 sp, 大写文本
默认背景填充色：#323232 100%

2.2 平板/桌面端

单行 Toast 高度：48 dp 以上
最小宽度：288 dp
最大宽度：568 dp
2 dp 圆角
文本：Roboto Regular 14 sp
操作按钮：Roboto Medium 14 sp, 大写文本
默认背景填充色：#323232 100%