UI/交互设计规范产品交互设计Human Interface Guidelines

Human Interface Guidelines — 搜索栏

2018-05-10  本文已影响91人  霖酱

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个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会非常有用。 但是,最好的办法是改进搜索结果,因此就可以不使用范围。

上一篇下一篇

猜你喜欢

热点阅读