借助 Material Design,让应用焕发精彩活力

  • 开发
  • 设计

遵循 Material Design 设计原则有助于您打造出令用户赏心悦目而又条理清晰的应用。

这样做的好处

Material Design 融合了设计领域的最佳做法、通用惯例和视觉震撼效果,让您可以打造完美适合任何设备并能彰显自身风格的应用。用户在逐渐熟悉这种视觉语言后,就会期待应用采用这类设计方式。如果您开发的应用符合这种设计理念,则能立即吸引用户,还能改进应用的易用性并提升用户互动度和留存率。

设计原则

  • 表面和阴影的概念,界面元素应各自分层,无论是彼此堆叠还是并排放置,都应表现出层次感。 为了让用户集中注意力并突出表面的层次感,应使用阴影来表明各表面之间的前后关系。
  • 图像应该是全宽图像。尽量减小照片之间的间距以及照片与屏幕边缘之间的外边距,让界面的沉浸感更强、内容更丰富。
  • 应大胆使用各种颜色,以凸显品牌和重要界面元素。请确保选择基本色和强调色,为应用营造整体一致的风格。请考虑利用 Palette API 让颜色从内容中直接跳脱出来,以便提供沉浸感更强的体验。
  • 度量指标和导线的位置与大小应符合 8dp 的基准网格,以保证可读性和视觉统一性。如需设置更精准的文本位置,则可以使用 4dp 网格。请视情况适当地将正文、缩略图、应用栏标题等元素与标准导线对齐。
  • 有意义的过渡效果(包括动画和转场效果有助于引导并吸引用户的注意力,同时还能实现从一个屏幕到下一个屏幕的自然承接。在视觉叙事中采用有意义的过渡,有助于提供令人愉悦的用户体验并加强视觉上的连贯性。
  • 响应式互动(如基本的触摸反馈)应采用表面涟漪的效果。5.0 之前版本的设备不支持涟漪效果,因此请采用默认的 android:selectableItemBackground 行为。除表面涟漪之外,交互表面还应当在触摸时浮升,从而在用户输入过程中呈现与用户手指相接触的效果,并且任何更改都应能从接触点向外辐射

系统界面组件

  • 系统状态栏的颜色应该与应用的基本色或当前屏幕上的内容相搭配。对于全宽图像,您可以将状态栏设置为透明。对于 API 23 及更高级别,可以将系统状态栏设置为较浅的同色系(图标则以较暗的颜色显示)。
  • 请通过在应用栏和工具栏中运用相应颜色、排版和产品徽标来展现品牌形象(避免使用启动器图标)。在图像比较多的屏幕上,由于图像紧贴表面边缘不留间隙,甚至延展到应用栏或状态栏之下,因此应用栏应该是透明的,以提供沉浸感更强的界面体验。请务必使用纱罩为透明应用栏中的所有图标提供文本保护。另外,请考虑使用滚动方式为用户提供更丰富的视觉体验。
  • 标签页应遵循 Material Design 的交互和样式规范。标签页必须能够水平滑动,并且标签页之间不加垂直分隔符。 对于用户选中的标签页,请以改变前景颜色和在标签页文本(或图标)下方显示强调色小横条的方式(两种方式同时使用或使用其中之一)来指示。如果没有特别的层次结构设计,标签页和应用栏应处于相同的表面高度。
  • 抽屉式导航栏应只包含主要导航元素,并遵循新的视觉准则。抽屉式导航栏应显示在应用栏和屏幕内容的前面、系统状态栏的后面。我们建议的最佳做法是,务必在应用首次运行时让抽屉式导航栏处于打开状态,以便用户可以轻松找到相关选项。
  • 如果您的应用包含 3 到 5 个需要直接前往的顶级目的地,请考虑使用底部导航栏。建议您使用可变换的底部导航栏模式,因为该模式可提供更强的视觉冲击,并允许在标签中使用更长的文本字符串。请务必让用户可从大多数屏幕(深层次的详情屏幕除外)访问底部导航栏,并在用户滚动屏幕时隐藏导航栏。

界面元素和模式

  • 主题应更新为最新的 Material Design 主题,以避免应用外观显得过时。更新系统主题是改进应用外观最快捷的方法之一。请确保结合 Gingerbread 和 Holo 主题进行更新,以提供一致的视觉设计和用户体验。请根据 Material Design 的标准更新界面元素(例如:选择控件选择器对话框菜单文本字段的主题。
  • 按钮是应用中最常用的交互式元素,因此将按钮更新为最新的视觉设计模式可以产生非常大的效果。如果您要使用自定义按钮,请避免采用过于圆润的边角、剧烈的渐变效果或有光泽的表面,因为这种按钮会让您的应用显得过时。对于需要在视觉上突出显示的重要操作,或者版式中文本过多以致平面按钮容易被忽略的情况,请采用凸起按钮。对于不需要突出显示的简单操作,平面按钮是最常使用的按钮。对于特定屏幕中最重要的操作,请使用悬浮操作按钮 (FAB)。这种按钮会悬浮在所有其他界面元素之上,因此非常醒目。
  • 图块列表。列表视图适合用来显示大量文本内容,方便用户快速浏览。如果是图像为主的内容,请使用图块。如需功能强大的版式选项,请务必使用 RecyclerView 微件来创建列表和图块
  • 在用户需要全面浏览内容而不是直接比较图片或文本字符串时,则应使用卡片来显示各种类型的内容。当某个表面上提供多种操作时也应使用卡片。虽然使用卡片能够凸显项目,在视觉上吸引用户的注意力,但请注意不要过度使用,以免造成不必要的视觉干扰。创建卡片内容时,请务必使用 CardView 微件
  • 应用内搜索应通过应用栏中的内嵌搜索来实施。如果内容搜索是应用的主要功能,那么不妨考虑使用永久的搜索微件应用栏。
  • 只有在分隔内容的主要版块或清楚划分文本区块时才能使用分隔线。请避免在简单列表视图中为每个项目都设置分隔线,因为这会造成大量视觉干扰,对可读性的改进却微乎其微。我们建议您使用空格和字体排版来帮助分隔内容。
  • 在设计空白状态时,请务必告知用户出现空白状态的原因,并加入一条用于解决空白状态问题的号召性用语。

Android 7.0 的新变化

  • 通知进行了修改,添加了新的内容区域、互动方式、用户控件和简短文本输入等功能。

使用入门

Material Design 准则

示例