Buttons 按钮

珠珠 APP设计 1517浏览

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

通过单击按钮,用户能实现相应的操作,并进行选择。


目录

  1. 用法
  2. 剖析
  3. 层级与位置
  4. 文字按钮
  5. 线框按钮(幽灵按钮)
  6. 实心按钮
  7. 可切换按钮
  8. 主题化
  9. 规格

 

用法

按钮帮助用户传递所需的操作。他们于用户界面中无所不在,尤其是以下位置:

  1. 对话框
  2. 模态窗口
  3. 表单
  4. 卡片
  5. 工具栏


原则


类型

  1. 文字按钮(轻度强调)
    文字按钮通常用于不太重要的操作。
  2. 线框按钮(中度强调)
    多了个框的线框按钮比文字按钮更为醒目。
  3. 实心按钮(重度强调)
    实心按钮则更醒目,因为它们有色彩填充和阴影。
  4. 可切换按钮
    可切换按钮通过布局和间距对一系列操作分组。它不如上述三种按钮用得多。


剖析

按钮包含一个必须元素和一些非必须元素。

  1. 文字按钮
    A.文本标签
    B. 图标(非必须)
  2. 线框按钮(幽灵按钮)
    A. 文本标签
    B. 容器
    C. 图标(非必须)
  3. 实心按钮
    A. 文本标签
    B. 容器
    C. 图标(非必须)
  4. 可切换按钮
    A. 文本标签
    C. 图标(非必须)

 

文本标签

文字按钮和实心按钮都用到文本标签,文本标签描述了该按钮将会触发的操作。若无文本标签,则用图标代替显示该按钮的含义。

默认情况下,Material的文本标签都是大写(若该语种有大写)。这样做能让该文本在周围文字中更醒目。如果一个文字按钮没有大写,就用其他特征来区分它,如颜色、尺寸或位置。


层级与位置

层级

一个最醒目的按钮

一个页面中只能有一个最重要的按钮。比同页面的其他按钮,该重度强调的按钮最为醒目。

 

其他按钮

同个页面中可以有多个按钮:最醒目的一个和若干次要的并存。当存在多个按钮时,要保证每一个的可用状态和其他按钮的不可用状态不产生混乱。

按钮的强调程度决定了它的外观、排版和位置。


位置

多种按钮类型能体现它们不同的强调程度。

该界面使用了:

  1. 强调程度最高的浮动操作按钮
  2. 中度强调的实心按钮
  3. 轻度强调的文字按钮

 

 

底部动作条中把实心按钮放在其他重要信息旁边。

 

 

能水平排列时不要垂直叠放按钮。(译者注:移动端的登录注册页面用垂直叠放按钮是合理的)


文字按钮

用法

文字按钮主要用于不太明显的操作,包括以下位置:

  1. 对话框
  2. 卡片

 

在卡片中,文字按钮不会太抢眼

文字按钮

 

 

文本标签

文本是按钮的最重要元素,因为它表达了该按钮的功能。

文本标签用了醒目操作

 

位置

为了和对应的组件相关联,文字按钮通常被嵌入在卡片、对话框等组件里。由于文字按钮不包含容器,所以它们不会太分散用户对临近的内容的注意。

 

对话框用没有容器的文字按钮使得操作和对话框文本统一。对于从左至右书写的正文请把文字按钮右对齐。

 

文字按钮使用户对卡片内容注意力的分散最小化。

 

状态

文字按钮可置于多种背景之上。只有被点击时它的容器才会可见。

为了无障碍交互,材料设计为不同状态的颜色遮罩提供了基本的不透明度参考。品牌设计中可以通过调整不透明度来形成配色方案。

文字按钮的状态


线框按钮(幽灵按钮)

用法

线框按钮的强调程度为中等。它们代表的操作较为重要,但不是app中的首要操作。

 

可选方案

线框按钮的强调程度介于实心按钮和文字按钮之间。

 

容器

线框按钮周围会有个框。这个框有以下作用:

  1. 设定文本标签的宽度为按钮的宽度,且左右内边距为16dp
  2. 设定响应式布局网格中按钮的相对位置

静止状态下的线框按钮应表现为线框形式、无填充色的容器。

线框按钮

 

状态

线框按钮可置于多种背景之上。它的容器是透明的,只有当被点击,容器的填充色才可见。

为了无障碍交互,材料设计为不同状态的颜色遮罩提供了基本的不透明度参考。品牌设计中可以通过调整不透明度来形成配色方案。

线框按钮的状态


实心按钮

用法

实心按钮用海拔高度和颜色填充来体现它的重度强调。它们代表着app中首要的操作。

 

容器

实心按钮是带容器的,容器有以下作用:

  1. 设定文本标签的宽度为按钮的宽度,且左右内边距为16dp
  2. 设定响应式布局网格中按钮的相对位置

实心按钮的容器必须有非透明填充色。

非透明填充的实心按钮

 

 

按钮容器的宽度能适配响应式布局网格。

响应式布局网格中的实心按钮

 

图标

实心按钮的文本标签旁边还可以加上图标,这样既能阐明按钮作用还能使其更引人注意。

 

 

加上含义表示明确的图标

 

阴影与海拔高度

界面中更高海拔的按钮通常更引人注意。当点击时,按钮被抬高且容器呈现触摸反馈。

 

高海拔使实心按钮更醒目。

 

状态

推荐按钮容器的填充色采用下方的不透明度。每个app可以选择不同的遮罩不透明度以适配品牌的配色方案。

 

实心按钮的状态


可切换按钮

用法

可切换按钮能对关联的操作分组。为了强调哪些操作是同组,一个组使用一致的容器。

 

选中操作

一次只能有一个选项被选中并激活。选中后其他选项都会取消选择。

 

这些可切换按钮供选择文字的左对齐、右对齐或居中对齐。

 

有时当图标能代表单选中的选中、未选中时,它们也可用来作为可切换按钮,例如选一个最喜欢的项目。

 

状态

激活和可用的可切换按钮

可切换按钮中激活的选项会很明显。悬停和聚焦状态则表示该选项可用。

 

不可用的可切换按钮选项

不可选的选项要么用不可用状态表示,要么就藏起来。

 

可切换按钮的状态

 

主题化

Crane材料主题

这款旅游app的按钮是按照材料主题定制的。自定义的部分包括颜色、文本以及形状。

 

Crane的自定义按钮

 

颜色

Crane的按钮在两处使用了主色:容器和文本。

Element Category Attribute Value
Container Primary Color
Opacity
#5C1349
100%
Text On Primary Color
Opacity
#FFFFFF
100%

 

排版

Crane中的按钮排版部分也进行了自定义。

Element Category Attribute Value
Text Button Typeface
Font
Size
Case
Raleway
SemiBold
14
All caps

 

形状

Crane中按钮的容器为有自定义的圆角形状。

Element Category Attribute Value
Container Override* Family
Size
Rounded
50%

 

Fortnightly材料主题

这款旅游app的按钮也是按材料主题定制的。自定义的部分包括颜色和文本。

 

Fortnightly的自定义按钮

 

颜色

Fortnightly中按钮的背景和文本颜色是自定义的。

Element Category Attribute Value
Background Background Color
Opacity
#FFFFFF
100%
Text Primary Color
Opacity
#661FFF
100%

 

排版

Fortnightly中按钮的文本使用了自定义。

Element Category Attribute Value
Text Button Typeface
Font
Size
Case
Libre Franklin
ExtraBold
14
Sentence case


Rally
材料主题

这款个人理财app的按钮也是按照材料主题自定义的,在颜色和文本都有运用。

Rally的自定义按钮

 

颜色

Rally中按钮的背景和文本都运用了主色。

Element Category Attribute Value
Background Surface Color
Opacity
#3C3C46
100%
Text Primary Color
Opacity
#FFFFFF
100%

 

文本

Rally中按钮的文本亦是自定义的。

Element Category Attribute Value
Text Button Typeface
Font
Size
Case
Roboto Condensed
Bold
14
All caps


Posivibes
材料主题

这款社交app的按钮也是按照材料主题自定义的,定制部分包括颜色、排版和形状。

 

Posivibe’s 自定义按钮

 

颜色

Posivibe’s的按钮在两个元素上使用了自定义颜色:容器边框和文本。

Element Category Attribute Value
Container stroke Secondary Color
Opacity
#000000
100%
Text Primary Color
Opacity
#000000
100%

 

排版

Posivibe’s 的按钮文本使用了自定义排版。

Element Category Attribute Value
Text Button Typeface
Font
Size
Case
Roboto Condensed
Bold
14
All caps

 

形状

Posivibe’s 按钮容器有自定义的角形状

Element Category Attribute Value
Container Small component Family
Size
Cut
0;0;0;0dp

 

Reply材料主

这款电邮App的按钮是根据材料主题自定义的。定制的部分包括颜色和排版。

 

Reply的自定义按钮

 

颜色

Reply的按钮中有四个元素使用了自定义颜色:背景,图标,图标填充和文本。

Element Category Attribute Value
Background Surface Color
Opacity
#FFFFFF
100%
Icon Primary Color
Opacity
#344955
100%
Icon fill On Primary Color
Opacity
#344955
30%
Text Primary Color
Opacity
#344955
100%

 

排版

Element Category Attribute Value
Text Button Typeface
Font
Size
Case
Work Sans
ExtraBold
15
All caps


Shrine
材料主题

这款零售App的按钮是根据材料主题自定义的。定制的部分包括颜色、排版和形状。

 

Shrine的自定义按钮

 

颜色

Shrine按钮有三处自定义:容器、图标和文本。

Element Category Attribute Value
Container Primary Color
Opacity
#FEDBD0
100%
Icon On Primary Color
Opacity
#442C2E
100%
Text On Primary Color
Opacity
#442C2E
100%

 

排版

Shrine的按钮文本排版是自定义的。

Element Category Attribute Value
Text Button Typeface
Font
Size
Case
Rubik
Medium
14
All caps

 

形状

Shrine按钮容器的角形状是自定义的。

Element Category Attribute Value
Container Small component Family
Size
Cut
4dp; 4dp; 4dp; 4dp


规格

实心按钮和带图标的实心按钮

 

线框按钮和文字按钮

 

切换按钮

 

原文地址:Material Design

译者:珠珠

转载请注明:学UI网 » Buttons 按钮

登录收藏
 
你可能喜欢的:
这些手势交互你关注到了吗?这些手势交互你关注到了吗?
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
百度这一局改版,内容导向设计做得真行!百度这一局改版,内容导向设计做得真行!
微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?
酷家乐优秀设计频道改版酷家乐优秀设计频道改版
如何用新风格引爆业务增长如何用新风格引爆业务增长
一局APP首页 改版设计分析一局APP首页 改版设计分析