平台 平台适配

平台适配

Material Design 支持跨平台的设计和可用性最佳实践,旨在打造出色的用户体验。

何时需要适配 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Material Design 建立在传统设计和网页设计的最佳实践之上,并以用户体验研究和认知科学为依据。基于这些研究成果制定的设计准则,旨在普遍适用于所有平台和设备。

不同平台之间的设计惯例可能有所不同。这些惯例差异可能会影响用户对界面的理解或妨碍其完成任务。在这些情况下,建议适配特定平台的设计惯例。在那些设计差异影响较小的地方,平台适配则是可选的。

以下准则指明了何时应适配原生平台惯例,以及何时可以选择适配。平台惯例在不断演进,Material Design 也随之发展,以提高我们设计模式的质量。

何时为平台惯例适配 Material Design

平台适配建议 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

工具栏

工具栏通常用于构建屏幕的上下文框架。

建议工具栏标题使用平台默认的文本对齐方式,除非右侧有多个操作按钮。

Material Design 中 Android/Web 的左对齐标题

Android/Web

标题始终左对齐。

Material Design 中 iOS 的居中对齐标题

iOS

标题默认居中对齐。

Android 上 Material Design 的左对齐工具栏标题

Android

当工具栏右侧存在多个操作按钮,甚至没有操作按钮时,标题始终左对齐。

iOS 中 Material Design 操作按钮的左对齐标题

iOS

当右侧存在多个操作按钮,或处于应用程序主屏幕时,标题可以左对齐。

图标设计

系统图标用于表示该平台上最通用的操作。

Android/Web 版 Material Design 中带细箭头和茎杆的向上按钮

Android/Web

向上按钮包含带茎杆的细箭头。

iOS 版 Material Design 中更粗且无茎杆的后退箭头

iOS

在 iOS 上,后退箭头更粗,且没有茎杆。

Android/Web 版 Material Design 中带三个点的操作溢出菜单

Android/Web

操作溢出菜单图标(由“更多”符号指示)包含三个垂直的点。

iOS 版 Material Design 中带三个点的操作溢出菜单

iOS

操作溢出菜单图标(由“更多”符号指示)包含三个水平的点。

控件

控件应清晰地指示用户如何与之交互。

Android 版 Material Design 的开关、复选框和单选按钮

Android

使用 Material Design 的开关、复选框和单选按钮。

iOS 原生开关与 Material Design 功能相匹配

iOS

原生平台的开关可以使用,因为它们与 Material Design 开关的功能和外观相匹配。

使用开关代替复选框,使用复选标记列表代替单选按钮,因为这些是 iOS 平台上预期的图形。

Web 版 Material Design 的开关、复选框和单选按钮

Web

您可以使用 Material Design 的开关、复选框和单选按钮。

手势

边缘滑动

边缘滑动从屏幕外部开始,用以显示屏幕外的内容。

边缘滑动可能与其他滑动手势(例如在页面或表格行中的水平滑动)发生冲突。为避免这类冲突,边缘滑动在内容区域上的行为应与其他任何滑动行为相同。

Android

当不存在冲突手势时,从左侧执行边缘滑动可显示屏幕外的内容,例如导航抽屉。

iOS

当不存在冲突手势时,从左侧执行边缘滑动可返回应用程序的上一层级。

Material Design:避免在网页浏览器中使用边缘滑动

推荐做法

Web

浏览器通常将边缘手势用于其功能设置。因此,网页上不应使用边缘滑动。

Material Design:边缘滑动在不同浏览器中不一致

不推荐做法

Web

不同浏览器对边缘滑动的支持不一致,不应依赖。

排版

排版既传达文本内容,也传递品牌标识。在这两种情况下,文本都必须具备无障碍可访问性并可调整大小。

如果您的应用已将排版用于品牌标识,建议适度使用。

Android 默认字体 Roboto,支持 Material Design 可伸缩文本

Android

Android 上的默认字体是 Roboto。在 Android 上,应使用可伸缩像素来指定文本大小,以允许通过无障碍功能调整字体大小。

iOS 使用 San Francisco 字体以实现 Material Design 无障碍功能

iOS

iOS 上的默认字体是 San Francisco。使用此字体是实现“动态类型”等无障碍功能的最简单方法。使用其他字体可能需要进行调整才能获得相同的无障碍功能。

Material Design 网页版字体指南:使用 Roboto 字体

Web

虽然 Arial 是网页上最广泛可用的字体,但现代浏览器为网页字体提供了无障碍和缩放支持。

Material Design 针对网页版 Roboto 的标准排版指南有助于简化字体使用。或者,也可以使用自定义字体,并建立自己的排版层级以确保可读性。