前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Human Interface Guidelines —— 搜索栏(Search Bars)

Human Interface Guidelines —— 搜索栏(Search Bars)

作者头像
霖酱
发布2018-05-17 10:48:39
1.2K0
发布2018-05-17 10:48:39
举报
文章被收录于专栏:Material Design组件

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

搜索栏(Search Bars)

Human Interface Guidelines链接:Search Bars

Search Bars

Search bar允许用户在大量数据中通过在一个区域中输入文本来进行搜索。 搜索栏可以单独显示,也可以在navigation bar或内容视图中显示。 当显示在navigation bar中时,search bar可以固定到navigation bar,以便始终可以访问,或者可以collapse search bar,直到用户向下滑动才显示。

·使用navigation bar而不是文本区域来实现搜索。 文本区域没有人们期望的标准搜索栏外观。

·启用清除按钮。 大多数搜索栏都包含一个清除按钮,用于删除该区域的内容。

·适当时启用取消按钮。 大多数专用搜索栏包含一个立即终止搜索的“取消”按钮。

左:清除按钮    右:取消按钮

·如有必要,请在navigation bar中展示提示和上下文。Navigation bar的区域可以包含占位符文本,如“搜索服装,鞋子和配件”或简单地“搜索”——作为正在搜索的上下文的提醒。 带有适当标点符号的简洁单线提示也可以直接出现在搜索栏上方以提供指导。 股票使用提示让人们知道他们可以输入公司名称或股票代码。

左:占位文案    右:介绍文案

·考虑在search bar下方提供有用的快捷方式和其他内容。 使用search bar下的区域可以帮助人们更快地找到内容。 例如,Safari会在您点击搜索区域后立即显示您的书签。 由此可以在没有需输入任何搜索条件时,选择一个书签即可进入。 当您在搜索区域中输入时,股票会显示结果列表。 随时轻击一个,无需再输入更多字符。


Scope Bars

Scope Bar可以添加到search bar中,以便人们优化搜索范围。

Scope Bar

可以加入一个scope bar,以改善搜索结果。 当对搜索结果有明确定义的类型时,scope bar会非常有用。 但是,最好的办法是改进搜索结果,因此就可以不使用范围。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.05.10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 搜索栏(Search Bars)
    • Scope Bars
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档