Material Design States 状态

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

状态是指以可视化的方式传达组件或交互元素的状况。

目录

用法

剖析

禁用状态

悬浮状态

聚焦状态

选择状态

激活状态

按下状态

拖曳状态

用法

状态将用户界面元素的状态传达给用户。每种状态应该在视觉上相似且不会大幅度改变组件,但也必须有明确的指向性以区别于其他状态和周围的布局。

Material Design States 状态插图

所有状态必须有明确的指向性以区别于其他状态。

原则

Material Design States 状态插图1

状态类型

Material Design States 状态插图2

Material Design States 状态插图3

Material Design States 状态插图4

Material Design States 状态插图5

Material Design States 状态插图6

Material Design States 状态插图7

剖析

叠加

叠加是指用元素上的半透明遮罩,用以表明状态。通过不透明度叠加的方法使状态可视化。

叠加可以应用于整个元素或以圆形形状表示。

叠加的颜色应该与应用的元素文本或图标的颜色相匹配。如果文本或图标在状态变化时也改变颜色,那么叠加的颜色应该与状态结束时的颜色相匹配。

一次只能应用一种状态层。例如,如果一个元素先是聚焦状态接着变为悬停状态,那么悬停状态层应一直显示到悬停结束,结束后如果元素仍然是聚焦状态的话,则返回显示聚焦状态层。

Material Design States 状态插图8

(1) 在列表项上叠加(2)在纸片上叠加(3)在选择控制器上叠加

Material Design States 状态插图9

Material Design States 状态插图10

叠加不透明度的值

为了保证适当的可见性和可区别的颜色对比度,应针对界面上的每个不同文本组合调整叠加的不透明度值。

Material Design States 状态插图11

(1)叠加在色值为#FFFFFF的白色界面上的不透明度值(2)叠加在#6200EE的纯色界面上的不透明度值

禁用状态

用法

当组件或元素不可进行交互时,应传达禁用状态,且组件或元素在用户界面中不应再被强调。禁用状态的叠加为启用状态叠加的38%的透明度。

禁用状态还可以通过颜色的变化和海拔的降低来指示其处于非活动状态。

Material Design States 状态插图12

此处的可用按钮(1)和禁用按钮(2)是通过颜色和海拔高度的变化来区别的。

禁用状态的运用

可以在组件上采用禁用状态,包括在切换按钮、选择控件、文本字段、图标、网格和列表、卡片、纸片和按钮上。

Material Design States 状态插图13

此处的切换按钮(1)、选择控件(2)、文本标签(3)和列表项(4)均为禁用状态。

禁用状态不可运用于以下情况:浮动按钮(FABs)、底部栏和侧边栏、对话框、菜单、工具提示和警报,或可导航的组件(如应用栏、标签、底部导航和步进器等)。如果浮动按钮处于禁用状态,那么浮动操作按钮就不应该出现在组件中。

Material Design States 状态插图14

Material Design States 状态插图15

浮动按钮(1)、底部菜单(2)和应用栏(3)不应使用禁用状态。

行为

当点击禁用组件或鼠标悬停于禁用组件上方时,该组件不改变其状态。

鼠标可以悬停在禁用组件的上方,但其状态不会因此改变。

点击禁用组件时其状态不会改变。

Material Design States 状态插图16

Material Design States 状态插图15

禁用组件不能被(1)悬停,(2)选中,(3)拖动或(4)点击。

组合中可能存在零个,一个或多个禁用的组件。

Material Design States 状态插图17

同一层中同时存在禁用的切换按钮(1),和禁用的按钮(2)。

悬停状态

用法

悬停状态是指用户使用鼠标来暂停与元素交互时的状态。这一状态可用于所有的可交互组件,并且不应被强调以避免分散内容。

悬停状态采用叠加来表示。它可以用于整个组件、组件内的元素,或组件上的一部分圆形区域。

Material Design States 状态插图18

叠加被应用于(1)组件内的某些元素,(2)整个组件,或(3)圆形区域。

Material Design States 状态插图19

悬停状态的运用

悬停状态可以运用于以下的组件:按钮、浮动按钮、切换按钮、选择控件、栅格列表项目、列表项、卡片、纸片、文本区域以及图标。

Material Design States 状态插图20

以下整体组件可以运用悬停状态:(1)图标,(2)文本区,(3)卡片,(4)按钮等。

交互式元素可以使用悬停状态。

Material Design States 状态插图21

悬停状态可以运用于组件内的交互元素或片段,如(1)应用栏内的图标,(2)工作表中的操作,(3)选项卡中的项,(4)列表项等。

悬停状态不可用于以下组件:应用栏、标签、底部导航、表单、对话框、警示窗口、菜单和步进器等。

Material Design States 状态插图22

Material Design States 状态插图15

表单(1),应用栏(2),对话框(3)不可运用悬停状态。

行为

悬停状态的启动是由用户使用鼠标来暂停交互元素。

悬停状态通过轻微的淡入淡出动画来显示和消失。

悬停状态可以与聚焦状态、激活状态、选择状态或按下状态结合在一起使用。

Material Design States 状态插图23

悬停状态与(1)聚焦状态,(2)激活状态,(3)选择状态和(2)按下状态一起使用。

一个布局中只能有一个悬停状态。

基于光标位置,悬停状态一次只能出现在一个元素上。

叠加的不透明度值

为了保证适当的可见性和足够的颜色对比度,叠加的不透明度值应根据不同界面上的组件文本来调整。悬停的叠加应采用较低的不透明度,避免分散内容。

Material Design States 状态插图24

(1) 界面:100% #FFFFFF

文字:100% #000000

叠加:4% #000000

(2) 界面:100% #6200EE

文字:100% #000000

叠加:8% #000000

(3) 界面:图片

叠加:16% #000000

聚焦状态

用法

聚焦状态传达当用户使用键盘或语音强调元素时的状态。聚焦状态可应用于所有可交互组件。

聚焦状态应该被高度强调,因为这一状态并没有其他视觉线索来指示。

用叠加来显示聚焦状态。叠加可被应用于整个组件,组件中的元素,或被一个圆形形状部分覆盖的组件。

Material Design States 状态插图25

叠加可被应用于(1)组件中的某些元素,(2)整个组件,或(3)圆形形状。

Material Design States 状态插图26

聚焦状态的运用

可运用聚焦状态的组件包括:按钮,浮动操作按钮,开关按钮,选择控件,网格列表,列表项,卡片,纸片,文本框和图标。

Material Design States 状态插图27

诸如(1)图标,(2)文本框,(3)卡片和(4)按钮等组件可以运用聚焦状态。

Material Design States 状态插图28

诸如(1)应用栏图标,(2)表单中的操作,(3)标签项和(4)列表项等内含可交互元素的组件,可以运用聚焦状态。

Material Design States 状态插图29

Material Design States 状态插图15

不能使用聚焦状态的组件包括:(1)整个表单,(2)整个应用栏或(3)整个对话框

行为

焦点状态由用户键盘或交互式元素上的语音输入启动,直到用户完成该音频或键盘动作。

聚焦状态通过使用渐变动画来显示和消失。

针对特定结构,聚焦状态以阅读顺序出现。

焦点状态可以与悬停,激活或选择状态结合使用。

Material Design States 状态插图30

聚焦状态与(1)悬停状态,(2)激活状态和(3)选择状态的组合。

同一屏幕同一时间只能存在一个聚焦状态。

一次只能在一个元素上有聚焦状态。

叠加的不透明度值

为了保证适当的可见性和色彩对比的有效性,应针对界面上的每个不同的文本组合调整叠加的不透明度值。聚焦状态下的叠加应有较高的不透明度,不然它们无法通过视觉线索来指示。

Material Design States 状态插图31

(1) 界面:100% #FFFFFF

文字:100% #000000

叠加:12% #000000

(2) 界面:100% #6200EE

文字:100% #FFFFFF

叠加:24% #FFFFFF

(3) 界面:图片

叠加:24% #FFFFFF

选择状态

用法

选择状态是用来指示用户通过以下方式之一来选择的选项:轻触点击、鼠标、键盘或语音。选择状态应被适当强调以便于用户识别,但不会分散用户的注意力。

用叠加的方法来表示选择状态。叠加可用于组件中的元素或整个组件。

Material Design States 状态插图32

叠加可被应用于(1)某组件中的特定元素,(2)组件整体。选择状态可以通过(A)叠加和(B)图标来指示。

选择状态的运用

可运用选择状态的组件有:图片列表项、列表项、纸片、卡片、数据表格、菜单项和选择器。

Material Design States 状态插图33

(1) 栅格列表项、(2)列表项、(3)卡片和(4)纸片可以使用选择状态。

不可使用选择状态的组件包括:应用栏、背景、底部导航、表单、按钮、对话框、分割线、扩展面板、警告、snackbars、标签、文本区以及工具提示。

Material Design States 状态插图34

Material Design States 状态插图15

(1)按钮,(2)文本区,(3)应用栏,(4)对话框不能使用选择状态。

行为

当用户选择一个或多个选项的时候启动选择状态。

选择状态通过使用渐变动效来显示和消失。

选择状态由用户启动的顺序来显示。

选择状态可以和悬停状态、聚焦状态、按下状态以及拖曳状态组合在一起使用。

Material Design States 状态插图35

被选状态与(1)悬停状态和(2)聚焦状态的组合。

同一布局中可以同时出现多个选择状态。

Material Design States 状态插图36

多个选择状态

叠加的不透明度值

为了保证适当的可见性和足够的颜色对比度,叠加的不透明度值应根据不同界面上的组件文本来调整。选择状态的叠加应得到适当的强调以便用户易于识别,但又不会分散注意力。

Material Design States 状态插图37

(1) 界面:100% #FFFFFF

文字:100% #6200EE

叠加:8% #6200EE

(2) 界面:100% #6200EE

文字:100% #FFFFFF

(3) 界面:图片

叠加:24% #000000

激活状态

用法

激活状态是指当前正在查看一组选项中的某个项目。默认情况时或用户选择输入方式(如点按、鼠标、键盘或语音输入)时,显示激活状态。激活状态应被重点强调。

通过使用叠加、改变颜色或其他可视化方式来显示组件元素或组件片段的激活状态。

Material Design States 状态插图38

(1) 用叠加来表明激活状态。(2)用下划线元素来表明激活状态。

激活状态的运用

激活状态与选择状态最大的区别在于激活状态高度强调了定位。

可以使用激活状态的组件包括:导航栏中的项目、标签项、底部导航项、步进器项、选择纸片和切换按钮。

Material Design States 状态插图39

(1)切换按钮,(2)底部导航栏项,(3)选择纸片,(4)标签项均可使用激活状态。

不可使用激活状态的组件包括:按钮,浮动按钮,选择控件,滑块,应用栏,底部和侧边列表,对话框,警示框。

Material Design States 状态插图40

Material Design States 状态插图15

(1)按钮和(2)对话框不可运用激活状态。

行为

默认情况或用户选择时启用激活状态。

激活状态通过使用渐变动画来显示和消失。

激活状态由用户启动的顺序来显示。

激活状态可以与悬停状态和聚焦状态组合在一起使用。

Material Design States 状态插图41

激活状态与(1)悬停状态和(2)聚焦状态的组合使用。

在一组选项中,一次只能存在一个激活状态。

Material Design States 状态插图42

此处左侧导航列表有一个激活项目,该列表跟右侧有激活项目的选择纸片一样有相同的布局。

叠加的不透明度值

为了保证适当的可见性和足够的颜色对比度,叠加的不透明度值应根据不同界面上的组件文本来调整。激活状态应采用更高的不透明度值,因为这一状态并不总是由用户来启用的。

Material Design States 状态插图43

(1) 界面:100% #FFFFFF

文字:100% #6200EE

叠加:12% #6200EE

(2) 界面:100% #6200EE

文字:100% #FFFFFF

叠加:24% #FFFFFF

(3) 界面:图片

叠加:36% #000000

按下状态

用法

按下状态是指用户使用鼠标、键盘或语音进行输入等方法进行轻触或点击。这种状态可应用于所有可交互的组件中。

按下状态触发了构图的变化,应该被高度强调。

一种波纹叠加表示按下状态。这种叠加可被应用于整个组件或组件中的某个元素,或组件上的圆形部分。

Material Design States 状态插图44

波纹叠加运用在(1)组件中的元素,(2)整个组件,(3)呈现圆形。

一些组件,如按钮或卡片,可以通过运用海拔变化来指示按下状态。

Material Design States 状态插图45

运用海拔变化来展示点击(1)按钮和(2)卡片。

按下状态的运用

按下状态可被运用于以下组件:按钮,浮动按钮,切换按钮,选择控件,栅格列表项,列表项,卡片,纸片,文本内容,图标。

Material Design States 状态插图46

以上的整组控件(1)图标,(2)文本区,(3)卡片,(4)按钮都可运用按下状态。

可交互的元素也能运用按下状态。

Material Design States 状态插图47

可交互的元素或片段诸如(1)应用栏图标,(2)表单动作,(3)标签项,(4)列表项都可使用按下状态。

按下状态不可用于:应用栏,标签,底部导航,表单,对话框,警告,菜单和步进器。

Material Design States 状态插图48

Material Design States 状态插图15

诸如(1)表单,(2)应用栏,(3)对话框之类的组件不能使用按下状态。

行为

用户通过键盘或交互元素中的语音输入启动按下状态。

点击状态使用波纹动画来显示和消失。

按下状态可以与悬停状态、聚焦状态、激活状态和选择状态组合在一起使用。

Material Design States 状态插图49

按下状态与(1)悬浮状态,(2)选中状态,(3)被选状态和(4)激活状态一起使用。

同一布局同一时间只能有一次点击。

叠加的不透明度值

为了保证适当的可见性和足够的颜色对比度,叠加的不透明度值应根据不同界面上的组件文本来调整。按下状态应被重点强调,因为这一状态触发布局的改变。

Material Design States 状态插图50

(1) 界面:100% #FFFFFF

文字:100% #000000

叠加:16% #000000

(2) 界面:100% #6200EE

文字:100% #FFFFFF

叠加:32% #FFFFFF

(3) 界面:图片

叠加:48% #000000

拖曳状态

用法

当用户点击并移动某个元素或组件时产生拖曳状态。拖曳状态不应被重点强调,以避免分散用户在任务中的注意力。

叠加可以表示拖曳状态。叠加可被应用于整个组件或组件中的某个元素。

Material Design States 状态插图51

叠加被应用于(1)组件中的元素,或(2)整个组件中。

一些组件,诸如列表项、纸片、卡片等,可以运用海拔变化来表示拖曳状态。

Material Design States 状态插图52

海拔变化运用于(1)卡片和(2)列表项。

拖曳的运用

拖曳状态可运用于下列组件:栅格列表项,列表项,卡片和纸片等。

Material Design States 状态插图53

(1) 列表项,(2)栅格列表项,(3)卡片,(4)纸片可运用拖曳状态。

拖曳状态不可用于:应用栏,按钮,底部导航,对话框,警告,菜单或步进器。

Material Design States 状态插图54

Material Design States 状态插图15

诸如(1)按钮,(2)应用栏,(3)对话框,或(4)文本等组件不可使用拖曳状态。

行为

当用户使用诸如轻触或点击的输入方式触摸并按住元素时,即可启用拖曳状态。

拖曳状态在按下状态之后发生,并采用一种渐变动画来显示和消失。

用户的触摸应该直接控制被拖曳元素的移动。

同一布局一次只能有一个拖曳状态。

一次拖曳

叠加的不透明度值

为了保证适当的可见性和足够的颜色对比度,叠加的不透明度值应根据不同界面上的组件文本来调整。拖曳的叠加应该采用较低的不透明度以避免内容分散。

Material Design States 状态插图55

(1) 界面:100% #FFFFFF

文字:100% #000000

叠加:8% #000000

(2) 界面:8% #000000

文字:100% #FFFFFF

叠加:16% #FFFFFF

(3) 界面:图片

叠加:32% #000000

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

【面试题】喵街tab商城页改版总结

2020-10-12 2:04:37

UI设计

Material Design Selection 选择

2020-10-12 4:05:05

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索