平台 平台适配

平台适配

Material Design 支持跨平台来构建优美的用户体验,包括了设计和可用性的最佳范例。

何时适配 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

Material Design 以传统设计和网页设计为基础,并依据用户体验研究和认知科学所创建的最佳范例。这份指南就是依据这些研究,致力于将其应用到所有的平台和设备上。

不同平台的设计惯例会不同。这些设计惯例的差异会影响用户对 UI 的理解,以及对完成某项操作。在这些情况下,建议只适配特定平台的设计惯例。在几乎不受设计差异影响的地方,可以自行决定是否适配。

下文将指导你何时必须适配原生的设计惯例,何时可选适配。平台设计惯例在不断的改进,Material Design 也在和它们一起发展,以提高我们的设计模式的质量。

平台适配建议 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

工具栏

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

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

Android/Web

标题始终左对齐。

iOS

标题默认居中对齐

Android

无论工具栏的右侧是否有操作,标题始终左对齐

iOS

在应用的主页面时,或者当工具栏的右侧有多个操作时,标题可以左对齐

图标

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

Android/Web

后退按钮是带小炳的细箭头。

iOS

在 iOS 上,后退箭头更粗,且不带小柄。

Android/Web

弹出菜单按钮图标(「更多」图标)包含三个垂直的点。

iOS

弹出菜单按钮图标(「更多」图标)包含三个水平的点。

控件

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

Android

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

iOS

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

使用开关代替复选框,使用对号标记列表代替单选按钮,因为这些是 iOS 默认的图形。

Web

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

手势

边缘轻扫

边缘轻扫从屏幕外部开始,以展示停留在屏幕外部的内容。

边缘轻扫可能和其他轻扫手势发生冲突,例如,页面或表格行中的水平轻扫。为了避免这些类型的冲突,边缘轻扫的行为应当和内容区域已有的轻扫手势相同。

Android

当不存在冲突的手势时,可以从左侧使用边缘轻扫来显示屏幕外的内容,例如抽屉栏导航。

iOS

当不存在冲突的手势时,可以从左侧使用边缘轻扫回到应用的上一级界面。

Do.

Web

浏览器通常使用边缘轻扫进行浏览器的功能设置。所以边缘轻扫不应该用在网页上。

Don't.

Web

边缘轻扫不能用在浏览器上。

排版

排版可以传达文本内容和品牌标识。在这两种情况下,文本必须是可访问和可调整大小的。

如果你的应用已经使用排版来作为品牌标示,建议在使用的时候要有所节制。

Android

Android 的默认字体是 Roboto。在 Android 上,字号应当使用可缩放像素,来适配无障碍功能的字号调整。

iOS

iOS 上的默认字体是 San Francisco。使用此字型是实现无障碍功能(例如「动态字体」)的最简单的方法。使用其他字体来实现无障碍功能可能需要额外的调整。

Web

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

Material Design 中对在网页上使用 Roboto 的排版指南,有助于简化字体的使用。你也可以使用自定义字体,并建立自己的字级,以确保可辨识性。