Bars系列之 l 搜索栏(Search Bars)设计指南

定义

搜索栏(Search Bars):通过在其中输入字段,来实现对大量数据合集的查询。


SearchBar

基础设计指南

  1. 将搜索框放在用户预期的位置
    搜索框最佳的位置,网站上是每个页面的正上方或右上方,移动端是每个页面的导航栏下方,也可以固定在导航栏中或默认隐藏待下滑时再显示。

  2. 占位文字提示可搜索的内容和上下文
    搜索栏可以包含占位符文本,如“搜索服装,鞋子和配件”或简单地显示“搜索” ——作为搜索上下文的提醒。

    search_Placeholder

  3. 提供一个带有放大镜图标的搜索按钮
    放大镜图标具备高效识别的特点,搜索按钮则提示用户进行下一步,即使大多数用户会按Enter键执行此操作。

  4. 提供清除按钮
    辅助用户快速清除已经输入的文字内容。

    search_Clear

  5. 适时提供一个取消按钮
    立即终止搜索的取消按钮,为用户提供了取消当前搜索行为的操作方式。

    search_Cancel

  6. 保持搜索栏简洁,默认情况下不显示高级搜索选项,但可以考虑在搜索栏下方提供有用的快捷方式和其他内容。
    帮助用户更快地获取内容,例如,Safari在点击搜索栏后会立即显示出已收藏的书签,不输入任何字段就可以点击跳转至对应书签页。

  7. 当搜索正在执行时,提供明确的状态反馈。
    通过视觉提示向用户反馈系统当前的工作状态,可以在搜索结果中对用户已输入的字符内容进行突出显示。

体验优化Tips

  • 遵循显性搜索(Explicit Search)的原则
    例如,在输入域周围提供明显的操作按钮,提供撤销搜索选项,通过反馈告知用户搜索动作已完成

  • 自动补全(Auto-Complete)输入内容
    根据已输入内容,推测或提示关联搜索词,用户点击后自动补全输入内容。
    匹配的查询条件不要超过10个(且不要显示滚动条),以保证信息不会过载。
    可以在搜索结果中加粗已输入的字符,突出显示。

  • 动态搜索(Dynamic Search)
    针对已输入的内容,即时呈现搜索结果。
    对有限的数据,如地址薄或个人媒体库,比较有效;不适合搜索海量数据。

  • 范围搜索(Scoped Search)
    在搜索之前或之后对搜索对象的类型和范围进行限定,从而得到更匹配的搜索结果。
    根据数据集提供合理的搜索范围选项或设定默认分类,3-6个足够,必要的时候可以通过表单来实现高级搜索功能。
    例如,将范围分栏(Scope Bars)添加到搜索栏下方,适用于有明确分类定义的场景,缩小搜索范围。

    ScopeBar

  • 保存搜索记录(Saved&Recent)
    显示最近搜索的内容,便于用户选择搜索过的关键词,节省重新输入的时间。

  • 搜索结果(Search Results)
    标明搜索结果的总项数,提供合理的默认排序规则和信息呈现形式。

  • 移动端通常采用延迟加载(Lazy Loading)的方式
    首先加载一部分搜索结果,另一部分继续载入。两种方式触发更多内容的加载,一是浏览内容下滑到未加载位置时自动加载,二是用户点击某个按钮或链接来加载。

  • 网页端可根据实际场景确定搜索结果是否采用分页显示的方式
    分页可以帮助用户从一个很长的列表中定位某个特定的项目;对于浏览性的表格来说,点击显得比较多余。

  • 如果内容仅限于单一字段,输入框可以确定一个合适长度
    根据输入内容的长度规划字符数,体验更佳。

以电商为例

其搜索位置明显,定位是按需要精准购买的用户;
通常在搜索框内及周围推荐商品品类;
鼠标定位在输入框时,会显示热搜推荐和历史记录提示,以及更加细分的某类别(或提供分类搜索框指定搜索范围);
有字段容错功能,支持语音输入。

参考来源:

Search Patterns: Design for Discovery
Designing Search: UX Strategies for eCommerce Success
移动应用UI设计模式
Apple developer Human Interface Guidelines

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容