UI/交互设计规范产品交互设计交互设计与用户体验

Material Design —Snackbars &

2018-04-29  本文已影响126人  霖酱

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

Snackbars & Toasts

Material Design链接:Snackbars&Toasts

Snackbars & Toasts

Snackbars是通过屏幕底部的消息对操作进行的简短反馈。

Snackbar包含与所执行的操作直接相关的单行文本。 它们可能包含操作文本,但不包含icon。

Toast(仅限Android)主要用于系统消息传递。 它们也显示在屏幕的底部,但不能从屏幕中滑走。

用法

一次只能显示一个snackbar。 每个snackbar可能包含一个单独的操作,但不会是“关闭”或“取消”。

行为

Snackbars激活后从屏幕的底部向上滑出。


用法

一次只能在屏幕上显示一个Snackbar。

位置

Snackbars出现在屏幕上的大多数元素的上方,与浮动操作按钮的高程相同。 但高程低于提示框,底部动作条和导航抽屉。

行为

入口时,Snackbars激活时从屏幕底部向上出现。 出现时不会阻碍用户输入。

消失方式:1、向下滑动;2、一段时间后自动消失;3、用户在别处进行新交互时(例如打开了新的页面)

非常短的文本字符串

Snackbars应包含与所执行的操作直接相关的单行文本。 它们可能包含操作文本。但不包含icon。

短暂的

Snackbars超时后自动从屏幕消失。 出于可用性原因,Snackbars不应该成为访问核心情形的唯一途径。 它们不应该是长时间存在或堆叠的,因为它们在屏幕上的其他元素之上。

在Android上,当Snackbars出现时有不相关的Dialog或Popup,Snackbars超时后将在重新获得窗口焦点时重置。 这是为了确保用户能够在预期时间内阅读Snackbar。

最多0-1个操作,不包含取消按钮

如果存在行为,则遵守Dialog的空间和可视性规则。 对于两个或更多操作,使用Dialog,即使其中一个操作是取消。如果Snackbar中描述的操作重要到需要阻止用户使用屏幕,则应该使用Dialog。

不要挡住浮动操作按钮(Floating Action Button)

纵向移动浮动动作按钮以适应Snackbar的高度。

连续Snackbars

一个时间只有一个Snackbar能展示。 当显示第一个Snackbar时第二个就该做准备,在第二个Snackbar开始出现前第一个Snackbar应该开始向下收缩。

(今天的好短~开心~)

上一篇下一篇

猜你喜欢

热点阅读