组件与常用模式

前面已经比较全面的介绍了Material Design相关的设计哲学、设计原理和方法论。这一章开始,我们将看看这些原理是如何在安卓系统当中得到实践的。

一个应用并不是完全从什么都没有来组建的,至少会有一匹一匹的砖嘛。而在界面设计当中,这些能够拿过来就使用的砖块就是控件。

例如,按钮 滑动条 列表等等,都是可以直接拿过来用的砖块。

Material Design最基础的体现,就是看看这些砖长成什么样,以及如何用Material Design的理念将这些砖组合起来,构建成应用的界面。

这样的砖块很多,Google在Material Design规范中给出了详细的定义。

因此我不会一一列举,只是拿出其中一两个最为常见的、最为典型的砖块和大家讨论,看看规范该如何解读和使用。知道了这些典型砖块的实践方式以后,大家就能自己根据设计规范来查看资料了。

我这里选取了按钮 列表 应用栏 系统栏来详细的讨论。

按钮

Material Design中有3类按钮:

  • Floating action按钮:前面已经大致介绍过,它是一个圆形的按钮,悬浮在界面之上6dp的位置,当点击的时候,按钮会向上浮动(显示出更大的阴影),是界面中吸引用户的界面元素之一;

     float_action_btn
  • Raised按钮:拥有背景颜色(Accent color)的按钮,点击时它在z轴的位置会向上变化;

     raised_btn
  • Flat按钮:按钮文字有颜色(Accent color)的按钮,点击时它在z轴的位置不会变化;

     flat_btn

Flat按钮

Flat按钮常常用在toolbar对话框以及需要与很多文字配合的地方。通常用来告诉用户“我能提供一些轻量级的功能,这些功能并不是我的特色,你知道我有就行”。

 flat_btn_pos

它的设计规范如下,

项目 数值
最小宽度 88dp
高度 36dp
边角弧度半径 2dp
左右margin 8dp
左右padding 8dp
字体大小 15sp

当使用亮色主题并按下按钮的时候,按钮的背景颜色是#999999,透明度为40%;
当使用暗色主题并按下按钮的时候,按钮的背景颜色是#CCCCCC,透明度为25%;

 flat_btn_spec

当点击按钮的时候,会出现水波纹一样的动画,

 flat_btn_press_effect

Raised按钮

Raised按钮比Flat按钮能更加吸引用户的注意力。通常用来告诉用户“点击我以后,会启动我一个很重要的功能,你要特别注意”。

 raised_btn_pos

它的设计规范如下,

项目 数值
最小宽度 88dp
高度 36dp
默认z轴位置 2dp
按下时z轴位置 8dp
边角弧度半径 2dp
左右margin 0dp
左右padding 16dp
字体大小 15sp

当使用暗色主题时,背景的颜色如下,

按钮状态 数值
正常 调色板500类型的颜色
按下 调色板700类型的颜色
 raised_btn_spec

当点击按钮的时候,会出现水波纹一样的动画,之后按钮在Z轴的位置也会提升,

 raised_btn_effect

FloatingAction按钮

FloatAction按钮是界面当中最引人瞩目的按钮。它代表了这个界面能提供的最重要、最核心的功能。默认情况下它的尺寸是56dp,放在上方会小一点,是40dp。

 float_action_btn_pos

按照中心位置会内嵌一个系统图标,系统图标的大小我们在图标的章节讲过,是24dp。

需要注意的是:并不是所有的界面一定要有个FloatAction按钮,它的存在完全是由应用的逻辑决定的。之所以我们看到那么多界面都有FloatAction按钮,是因为这是Material Design的典型特征,所以选择的很多例子都有它。如果某个界面确实需要FloatAction按钮,那么一个界面上也只能有一个,表明只有一个功能是最为重要的。

FloatAction按钮还有一些常用的使用模式:

  • 当拥有FloatAction按钮的界面退出的时候,按钮要用动画的形式消失;
    当拥有FloatAction按钮的界面显示的时候,按钮要用动画的形式出现;

     float_action_btn_fade

    当拥有FloatAction按钮的界面在内部进行切换的时候,按钮要有动态变化的效果;

     float_action_btn_trans
  • 按钮点击后可以,展示出更多菜单;

     float_action_btn_into_menu
  • 按钮变化成一个新的纸片,纸片上展现更多的内容;

     float_action_btn_into_materia

它的设计规范如下,

项目 数值
标准尺寸 56dp
最小尺寸 40dp
内嵌图标尺寸 24dp
默认z轴位置 6dp
按下时z轴位置 12dp
背景颜色 Accent Color

列表

接下来,我们看看另外一个会经常用到的组件列表。

列表用来显示展示类型相同的数据,比如都有头像、名字、职务等信息,不同的只是这些信息的具体内容。

 list_example

列表项是列表的一个显示单元,列表项的布局不要超过三行,如果确实要超过三行,那么就不应该使用列表来展示内容了。

列表项的内容根据位置的不同,体现出的重要性也不同:

  1. 靠左边的内容是最重要的,右边的次之;
  2. 靠上边的内容是最重要的,下边的次之;
 list_item_import_order

常见的列表布局有以下三种,

  1. 单行:有一行文字的显示

     list_1_text

     list_1_icon_text

     list_1_avatar_text

     list_1_avatar_text_icon
  2. 双行:有两行文字的显示

     list_1_text

     list_1_icon_text

     list_1_avatar_text

     list_1_avatar_text_icon
  3. 三行:有三行文字的显示

     list_1_text

     list_1_icon_text

     list_1_avatar_text

     list_1_avatar_text_icon

这些布局中各个元素的位置,都在规范中有明确的规定,经过按钮那一小节的讲述,我想大家一定具备看懂规范的能力,能够从中找到设置位置的关键点。

在查看上面的示例时,大家应该注意到了列表项的分割线。这些分割线将列表区域按照逻辑区分开来,都是1dp的宽度。

  • 有的分割线贯穿了整个屏幕;

     list_full_divide
  • 有的只是将文字的部分分开;

     list_half_divide
  • 有的没有分隔;

to

 list_no_divide

关于分割线,在Material Design的规范当中,也有专门的章节细致的讲述。

应用栏与工具栏

工具栏的作用是把很多操作按钮集中起来,一起展现给用户。它可以放在应用界面的上部分、中间、底部,

 toolbar_top

 toolbar_map

 toolbar_keyboard

在安卓的设计当中,有个ActionBar的概念,它的作用就是展示一个应用的图标、名字,以及菜单、导航栏等内容,从安卓3.0开始它就被提出,并推广了起来。

 app_bar_example

不过从安卓5.0开始,在ActionBar的基础上提出了AppBarAppBar除了担当ActionBar的功能外,还增加了一些新的特性,例如滑动效果。新引入的具体的控件ToolBar接替了ActionBar的具体功能,成为AppBar最为核心的组件。

为了便于理解,我举一个例子。Google在2015年进行拆分,成立了多家公司,并将它们规整到Alphabet公司旗下。而以前的Google只保留搜索业务,成为了一个比较单纯的公司。

ActionBar就相当于以前的Google公司;AppBar相当于Alphabet;ToolBar就是Alphabet成立后的Google。AppBar除了ToolBar以外,还可能包含更多组件在其中。

应用栏的高度根据屏幕横竖状态的不同而不同,

屏幕状态 高度
竖屏 56dp
横屏 48dp

应用栏可以根据开发者的要求,变成透明的、半透明的、甚至不显示。

AppBar除了显示标题、菜单等功能外,还有令人炫目的滑动效果,这也是安卓系统使用Material Design的重要特色。

AppBar除了Toolbar以外,可以包含分页标签Tabs 图片等等内容。图片占用的空间叫做可变空间-Flexible space,不一定就是放图片,也可以放其他的元素,只不过就界面设计来讲,显示图片的效果要很多。

 appbar_area
  • AppBar只有Toolbar:内容滚动的过程中,Toolbar可以被顶到消失;也可通过下拉再次出现。

     appbar_scroll_toolbar
  • AppBarToolbarTab

    1. 内容滚动的过程中,Toolbar可以被顶到消失,只留下Tab;也可通过下拉再次出现。

    2. 内容滚动的过程中,ToolbarTab都被顶到消失;也可通过下拉再次出现。

       appbar_scroll_toolbar_tab
  • AppBarToolbar和可变区域:

    1. 内容滚动的过程中,可变区域可以被顶到消失,只留下Toolbar;也可通过下拉再次出现。

    2. 内容滚动的过程中,Toolbar和可变区域都被顶到消失;也可通过下拉再次出现。

       appbar_scroll_toolbar_txt

       appbar_scroll_toolbar_image

状态栏与导航栏

用过智能手机的同学对状态栏和导航栏一定不会陌生,

 statusbar_example

 navbar_example

状态栏贯穿了整个屏幕的宽度,高度是24dp。
导航栏同样贯穿了整个屏幕的宽度,高度是48dp。不过在很多国内定制的系统当中,因为手机已经有了实体按键,就取消了导航栏。

状态栏和导航栏的背景颜色是可以各自改变的,透明、半透明、不透明。

 statusbar_status

 navbar_status

为了配合不同应用的使用场景,状态栏和导航栏的显示也有不同的表现,

  • 沙发模式(Lean back):就像在瘫坐在沙发上看电影时一样,屏幕尽可能的呈现视频内容,把状态栏和导航栏都藏起来。这个过程中你几乎不会去接触到屏幕,当你碰触屏幕的时候,状态栏和导航栏才会出现。

     full_screen_lean_back
  • 沉浸模式(Immersive):比如当你在使用阅读软件看书的时候,屏幕只显示书本的内容,把状态栏和导航栏隐藏起来,让你沉浸在阅读的快乐当中。但每次翻页的时候,你还是需要接触屏幕的。虽然翻页的过程中接触了屏幕,状态栏和导航栏也不会出现,除非你在屏幕的边缘做了一个滑动的动作,才能将它们再次唤出。

     full_screen_immersive
  • 关灯模式(Light out):当你不碰触屏幕超过一定的时间,状态栏会自动的隐退;导航栏虽然还在那里,但是那三个操作的按钮却变成了三个小点。这个过程就好像是关闭了照亮屏幕的灯,状态栏和导航栏似乎还在那里,只是没有了灯光,已经看的不真切了。