5.3 导航搜索(Material基础)

用户头像
深圳/设计爱好者/7年前/509浏览
5.3 导航搜索(Material基础)
用户头像
饶登

本文介绍了Material基础导航中的《搜索》

搜索


搜索使用户能快速查找到应用程序中的内容。



目录

用法

常驻搜索

扩展搜索




用法


搜索使用户在应用程序中能快速定位到内容位置。基本搜索使用户在文本框中输入请求后能查看到对应的结果。


搜索查询输入方式可以扩展为历史建议、自动补全查询以及语音输入等。




常驻搜索


当搜索是应用程序的重要功能时,请使用常驻搜索。搜索文本字段出现在搜索框内,随时准备接收焦点。


用法

1. 聚焦时,搜索体验将扩展到整个屏幕。根据需要,历史搜索记录可显示在文本字段之下。

2. 用户可以键入查询或者从推荐中选择(如果可用),然后按回车提交搜索。

3. 搜索结果显示在搜索栏的下方。

4. 要从搜索栏中释放焦点并取消搜索建议,用户可点击“向上”箭头。

常驻搜索栏接收焦点、加载结果并返回到未聚焦状态。


1. 未聚焦状态时的常驻搜索栏(默认)

2. 聚焦后的常驻搜索栏,栏下是推荐信息卡片




扩展搜索


当搜索不是应用程序的主要功能时,请使用扩展搜索。扩展搜索在工具栏上显示搜索图标,而非外在搜索文本框。


用法

1. 用户点击搜索图标(工具栏内),将其转换成聚焦的搜索栏。

2. 用户输入时,历史搜索建议显示在搜索栏下方。

3. 输入查询或选择推荐信息后,按回车键提交搜索。

4. 结果显示在搜索栏下面,内容可以滚动。


显示结果时,搜索文本区域仍然可见,但没有聚焦。点击向上箭头可从搜索中释放焦点、取消推荐以及退出界面上的键盘,将工具栏返回至初始状态。

从一个图标打开扩展搜索栏并载入结果


1. 可扩展搜索的默认状态

2. 带有自动补全推荐信息的聚焦搜索文本框



*原文作者为谷歌设计团队,本文为个人翻译作品,仅供学习参考

0
阅读原文
|
举报
|
2
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
城市园林平面布局航拍
平面设计 吊牌设计
空的平台平面和自然景观
平面花卉图案扁平简约无缝拼接插画
平面风格黄绿色系花朵装饰
城市园林平面布局航拍
空的平台平面和自然景观
金色颗粒质地的平面
牛奶乳液层次梯田平铺平面
“知识宅急送”外卖,快递,平面,海报,素材,教育
平面插画设计女孩喝咖啡
平面男孩喝咖啡插画设计
玄关入门地毯印花图案红地毯
城市园林平面布局航拍
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
金色颗粒质地的平面
金色颗粒质地的平面
金色颗粒质地的平面
牛奶乳液层次平面平铺平面
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
中国传统纹样创新图案设计
倒计时,海报,平面
平面书法字手写
城阙凡花
金色颗粒质地的平面
你可能喜欢
大家都在看
登录注册