平台 平台适配

平台适配

Material Design 支持跨平台的设计和可用性的最佳实践,以构建出色的用户体验。

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

Material Design 建立在传统和网页设计的最佳实践的基础上,根据用户体验研究和认知科学研究得出。这份依据这些研究结果开发的设计准则,致力于普遍适配所有的平台和设备。

不同平台之间的设计惯例会不同。这些设计惯例的差异会影响用户对 UI 的理解、或影响用户完成某些任务。在这些情况下,建议只适配特定平台的设计惯例。在设计差异不容易造成混乱的地方,可以选择不进行适配。

以下准则指示你何时应该适配本机平台的设计惯例,何时可以不进行适配。平台设计惯例在不断的改进,Material Design 也在和它们一起发展,以提高我们的设计模式的质量。

Material Design 适配平台设计惯例的准则

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

工具栏

工具栏通常作为屏幕中上下文的骨架。

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

Material Design 中的标题始终左对齐

Android/Web

标题始终左对齐。

Material Design iOS 中的标题默认居中对齐

iOS

标题默认居中对齐

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

Android

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

Material Design iOS 中的标题可以左对齐

iOS

在工具栏右侧、或应用的主屏幕上有多个操作按钮时,标题可以左对齐。

图像

系统图标用于表示在该平台中的最普遍的操作。

Material Design Android 中的带茎杆的后退按钮箭头

Android/Web

后退按钮包含带茎秆的细箭头。

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

iOS

在 iOS 上,后退箭头更粗,且不带茎秆。

Material Design Android 中的弹出菜单按钮图标,三个垂直的点

Android/Web

弹出菜单按钮图标(通过 “More” 符号指示)包含三个垂直的点。

Material Design iOS 的弹出菜单按钮图标包含三个水平点

iOS

弹出菜单按钮图标(通过 “More” 符号指示)包含三个水平的点。

控件

控件应该清楚的指示用户应如何与它们进行交互。

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

Android

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

Material Design iOS 开关和复选框功能相匹配

iOS

本平台的开关仍然可以使用,因为它们有着和 Material Design 的开关相匹配的功能和外观。

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

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

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 是网页上使用最广泛的字体,但是现代浏览器为 Web 字体提供了可访问性和缩放支持。

Material Design 的标准排版指南使用的 Roboto 字体可以帮助简化字体的使用。或者,使用自定义字体,并建立自己的类型层次结构,以确保易读性。