搜索 允许用户快速查找应用内容。

Search allows users to quickly find app content.

搜索 - 图1


用法

搜索允许用户通过应用程序快速定位内容。基本的搜索功能能够根据用户输入的文本字段来展示相关的结果。

搜索查询输入时可以加入的扩展功能:历史建议、查询字段的自动补全以及语音输入。

Search allows users to quickly locate content across an app. Basic search enables users to input a query into a search text field to view related results.

Search query input methods can be extended to include historical suggestions, auto-completion of queries, and voice input.


固定搜索

搜索是您应用的主要功能时,请使用固定搜索。搜索输入框固定在搜索栏内,随时可以进行输入。

Use persistent search when search is the primary focus of your app. The search text field is presented inside of a search bar, ready to receive focus.

用法

  1. 在用户输入时,搜索组件将扩展至整个屏幕。抑或,历史搜索建议可以显示在文本输入框的下方(类似于下拉列表)。
  2. 用户可以输入自己的问题或从建议中选择一个选项(如果应用程序支持)。按下确认键之后,搜索请求就会被提交。
  3. 搜索结果会显示在搜索栏的下方。
  4. 用户点击 返回箭头就可以在搜索框中释放焦点并关闭搜索建议。

  5. When in focus, the search experience expands to fill the entire screen. Optionally, historical search suggestions can be displayed below the text field.

  6. A user can type a query or select from a suggestion (if available). Upon pressing Return, the search is submitted.
  7. Search results are displayed below the search bar.
  8. To release focus from the search box and dismiss search suggestions, the user taps the Up arrow.

mio-staging_mio-design_1579302979877_assets_1Ron3I2Puwf4bcewpu_0U8Ke5v7mw8gIy_baseline-persistent-v03.mp4 (1.01MB)Persistent search field receiving focus, loading results, and returning to an unfocused state

image.png

  1. 固定搜索栏(默认)
    1. Persistent search bar without focus (default)
  2. 固定搜索栏获取焦点后,在下方提供建议查询的卡片
    1. Persistent search bar in focus, with cards of suggested queries below

临时搜索

搜索不是您应用的主要功能时,请使用临时搜索。临时搜索在工具栏中以搜索图标的形式展示,而不是已经打开的搜索文本框。

Use expandable search when search is not the primary focus of your app. Expandable search displays a search icon in the toolbar, instead of an open search text box.

用法

  1. 用户点击搜索图标(在工具栏中)将其展开为搜索输入框。
  2. 在用户输入时,历史搜索建议可以显示在搜索栏下方。
  3. 在输入问题或选择建议后,按下确认键,搜索请求就会被提交。
  4. 结果显示在搜索栏下方并在其下方滚动。

  5. The user taps the search icon (in the toolbar) to transform it into a focused search bar.

  6. As a user types, historical search suggestions can be shown beneath the search bar.
  7. Upon entering a query or choosing a suggestion, pressing Return submits the search.
  8. Results appear below the search bar and scroll beneath it.

显示结果时,搜索文本字段保持可见状态,但不会获取焦点。点击返回箭头可从搜索状态中释放焦点,隐藏输入建议和键盘组件,并将工具栏返回到原始状态,关闭查询结果页面。

When displaying results, the search text field remains visible, but not in focus. Tapping the Up arrow releases the focus from search, dismisses suggestions and the on-screen keyboard, and returns the toolbar to its original state.

mio-staging_mio-design_1579302979877_assets_1xPEFI6PtBotKF7bAG51hbG8Vpp0Jx9To_baseline-expandable-v02.mp4 (759.8KB) Expandable search bar opening from an icon and loading results

image.png

  1. 临时搜索栏(默认)
    1. Expandable search in its default state
  2. 固定搜索栏获取焦点后,在下方提供建议查询的卡片
    1. Search text field in focus with auto-complete suggestions