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

  • 开发
  • 设计

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

这样做的好处

Material Design 融合了设计领域的最佳做法、通用惯例和视觉震撼效果,可助您打造完美适合任何设备且极具表现力的应用。用户在逐渐熟悉这种视觉语言后,就会期待应用采用这种设计。如果采用这种设计,您开发的应用便能立即吸引用户,同时,应用的易用性、用户互动度和留存率也会得以提升。

设计原则

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

系统界面组件

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

界面元素和模式

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

Android 7.0 的新变化

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

使用入门

Material Design 指南

示例