切片组件不同于列表项,可以定制内容,显示在搜索结果中。
image.png


用法

Slices display rich content and actions on components, appearing as part of search results in the Google search app. They can display a variety of content types, such as text, images, and actions.

原则

image.png

专注 切片专注于一个任务或一组相关任务,用于突出显示最重要的信息。 Slices focus on one task, or a set of related tasks, and highlight the most important information.

映射 切片映射了应用中的内容或功能。 Slices reflect content or features from your app.

关联 切片仅提供完成任务所需的信息和控件,与用户息息相关。 Slices provide only the information and controls needed to complete a task.

导航

切片可导航至应用程序中的特定功能或内容。

Slices provide navigation to a specific feature, or content, in an app.
image.png
Slices can provide navigation to specific items.

完成任务

切片提供诸如切换或滑动条之类的控件,以便用户可以快速完成任务。

Slices allow users to complete tasks inline, such as by displaying controls like toggles or sliders.
image.png
Slices can display checklists and other controls.

交互记录

切片可以提示用户过去与应用程序的内容和功能的交互记录。

Slices remind users of past interactions with an app’s content and features.
image.png
用户之前看过的视频会在切片中标注出观看进度。
Slices can display rich content from past user interactions, such as videos.


使用时间

设计者需要根据上下文来确定要显示的切片类型。

在搜索结果中,切片类型受切片与搜索结果的相关性影响。

Android’s Presenter determines the appropriate type of slice to display based on context. In search, the type of slice is influenced by how relevant a slice is to the search results.


结构

切片包含标题和一行或多行交互式内容。各种元素组合在一起以创建切片,例如列表,网格或图像。

Slices contain a header and one or more rows of interactive content. Various elements are grouped together to create a slice, such as a list, grid, or images.
image.png

  1. 标题
  2. 辅助文本
  3. 标题操作区
  4. 图片(可选)
  5. 列表项标题
  6. 列表项辅助文本
  7. 列表项操作区

  8. Header title - The title of the slice

  9. Header subtitle - Supplementary text
  10. Header actions - Actions
  11. Image (Optional) - An image related to a row’s content
  12. Row title - A row description
  13. Row subtitle - Supplementary row text
  14. Row action - Actions that apply to a single row

内容

image.png
Do
与用户息息相关
Make each slice relevant to the user.

image.png
Don’t
一个切片每次只专注于一个任务。
在出现多个用例时,设计者需要为每个用例提供单独的切片。
Don’t serve multiple purposes with a single slice. Create separate slices for each use case.

image.png
Don’t
不要在切片中放入与搜索结果无关的内容。
Don’t place unrelated search terms or content in a slice


操作

切片显示与特定任务相关的一组有限动作。

Slices display a limited set of actions related to a specific task.
image.png
Do
减少操作。
Provide a limited set of actions.

image.png
Don’t
仅显示与任务相关的主要操作。
Only show primary actions that relate to a specific task.


分类

Slices can be displayed in different sizes, depending on their usage and presentation.

大切片

Large slices consist of a header and one or more rows of content (with corresponding actions).
image.png
A large slice

小切片

Small slices are equal in size to the header of a large slice. The header area (used for subtitles on large slices) can be replaced with a summary.
image.png
A small slice


行为

滚动

切片可以包含溢出内容,可通过“查看更多”按钮进行访问。

Slices can contain overflow content, accessible from the “See more” button.
image.png
Slices can contain additional content in an overflow menu.


敏感操作

对于敏感或个人任务,可以在切片用户界面中执行内联动作,但不应在切片中进行确认操作。

设计者应该提供将用户导航进应用程序的确认链接。

For sensitive or personal tasks, inline actions can be performed in the slice UI but should not be confirmed there. Instead, they should provide a link that takes the user into the app for confirmation.


位置

切片作为 Android 中搜索结果的一部分。

切片的位置由搜索排名算法确定。

Slices appear as part of search results in Android. The placement of a slice is determined by the search ranking algorithm.
image.png
A large slice in search results

Search suggestions

切片可以作为搜索建议出现在搜索结果中。

A search query can include a slice in search suggestions.
image.png
A small slice in search suggestions


主题

切片的主题与应用的设计体系一致。

Slices display the default system UI style.

强调色

在切片中可以通过强调色来突出关键信息。

Slices can use an accent color to highlight important information or reinforce product branding.
image.png
Highlight important information using coloring, with appropriate color contrast.

image.png
Don’t
不要在切片中使用两种以上的颜色。
Don’t highlight multiple pieces of information, use multiple colors for highlighting, or highlight many elements.


规格

标题

image.png

列表项

image.png

网格

image.png

图片

image.png

滑动输入

image.png

进度条

image.png