Windows桌面应用程序设计指南(控件篇13-搜索框)

使用“搜索”框,用户可以通过筛选或突出显示匹配项,在大量数据集中快速定位特定对象或文本。没有标准的搜索控件,但应尽量使程序的搜索功能与Windows的一致。
以下是两种典型的搜索控件:

  • 即时搜索控件
    即时搜索,用户输入搜索项时搜索结果立即显示。无需单击按钮,搜索框中的放大镜icon不是按钮,仅仅是一个图标符号。

    一个典型的即时搜索框

    一个典型的搜索框使用即时搜索。用户每次按键即自动搜索。

  • 常规搜索控件,用户点击搜索按钮执行搜索操作。搜索按钮上会展示一个放大镜icon。

    常规搜索控件示例

这两种可以任意选择使用。

何时使用该控件?

思考以下几点:

  • 具体的需求对象是否难以找到?以下几种情形会导致这种结果:
    1.对象数量过多;
    2.对象位于多个位置。搜索特别适用于在树形结构中寻找对象;
    3.搜索数据很难找到(例如元数据)
  • 用户需要在文档中寻找特定文字吗?
  • 你的功能是否能在5秒内返回相关的搜索结果?如果做不到,则可以提供搜索功能,但可以使用提供可见反馈的替代设计来适应长时间运行的搜索,如搜索对话框。

设计思路

搜索在很多场景下是至关重要的第一步:用户在找到对象之后才能使用它。随着硬盘容量的增大,用户存储的数据越来越多,仅使用浏览很难精准定位。因此,搜索必然是简洁、一致和可靠的用户体验中的重要部分。

Windows中的搜索框:

  • 是所有资源管理器窗口的一部分,因此很容易找到和识别它们。
  • 有一致的外表和行为。
  • 高效快速,在即时搜索模式下提供即时搜索结果。

在Windows中搜索框用于以下位置:

  • 资源管理器
  • 体验(微软视窗媒体播放器,视窗照片集,Internet Explorer)
  • 开始菜单(查找程序和最近的文件)
  • 控制面板主页(查找控制面板项目和任务)
  • 帮助(查找相关的帮助主题)

外观与感知

通过支持即时搜索,Windows中搜索功能的感官重要性得到了极大的提升。即时结果让Windows感觉更强大、更直接。

在文件资源管理器和应用程序窗口中,搜索作为补充的入口,位于右上角。 在这种情况下,当用户在窗口中找不到他们要找的东西时,他们会寻找另一种搜索机制。但是,如果“搜索”是主要入口,则它应位于窗口顶部的中心位置。

搜索按钮在视觉上与搜索框联系紧密。为了最小化空间,可以不使用标签文字,而是在“搜索”框中展示一个可选的提示符。提示符可以是一条指令(例如,要搜索的类型)或指示搜索范围(例如,搜索图片)。


由于没有文字标签,搜索按钮也没有独立放置,Windows中的即时搜索框视觉上很轻量

执行成功的搜索将创建搜索结果的虚拟页面,并将其添加到“后退堆栈”和“地址栏”中。用户可以通过多种方式恢复原始页面并清除搜索框,包括单击“上一步”、单击“地址栏”中的原始页面、按 Esc 或清除“搜索”框。

用户也可以简单地清除搜索框内容而不恢复以前的结果页。在即时搜索模式下,用户开始输入后会出现一个清除按钮; 一个“x”替换放大镜搜索符号。 在鼠标悬停时,“x”会显示一个按钮外观,点击即可。


用户可以通过点击右方叉号清除搜索框内容

在常规搜索模式下,清除按钮是可选的。用户可能会觉得它很有用,例如,当一个搜索需要很长时间才能完成时,用户可以点击“x”来停止正在进行的搜索。如果搜索已经完成,用户可以点击“x”来清除搜索框内容。

设计指南

位置

  • 对应用窗口来说,搜索应该放置于窗口的右上角;
  • 对弹出窗口来说,搜索框可以放置在合理和便于操作的位置;
  • 例外:如果搜索总是用户在窗口中做的第一件事(用户的主要入口),将搜索框置顶居中。

外观

  • 使用标准搜索按钮图标。有三种版本:
    1.对于即时搜索,仅展示放大镜图标(hover时不显示按钮样式)。
    2.当需要点击按钮开始搜索时,在按钮上放置放大镜图标。
    3.当用户可以应用其他设置或更改搜索范围时,使用含有放大镜图标的按钮,并结合下拉箭头。
    · 对于即时搜索,仅显示下拉箭头icon,hover时再将下拉箭头显示为按钮样式。
    · 对于常规搜索,始终将下拉箭头展示在按钮上。
    即时搜索视觉说明

    常规搜索视觉说明
  • 不要使用标签文字,使用可选的提示符代替。如果用户倾向于认为搜索是一般的文件搜索,使用提示符给出范围;或者使用“输入以搜索”或类似的简洁短语。
简洁的文字提示帮助用户使用搜索功能

简洁的文字提示帮助用户使用搜索功能

交互

  • 在输入焦点上,自动选中任意以前输入过的文本。这样的操作允许用户重新输入新的搜索内容,或通过使用箭头键定位插入字符来修改之前的搜索内容。

    该例中,之前输入过的文字被输入焦点选中

  • 搜索框的键盘快捷键设置为Ctrl+E。

功能性

  • 尽可能支持实时搜索功能。在常规搜索值得用户等待更长时间的场景中,同时提供常规搜索和即时搜索功能。
  • 常规搜索需要在五秒内反馈相关搜索结果,而即时搜索需要在两秒内反馈相关搜索结果。过了这个时间点,只要程序还在响应,搜索可能会继续给出相关性更低的搜索结果,在这个过程中用户可以同时执行其他任务。用户可能必须对搜索结果进行索引以确保准确性。
  • 如果同时提供了常规搜索和即时搜索模式,则即时搜索的结果需是常规搜索结果的子集。
  • 所有搜索都是基于前缀的(没有子字符串或后缀搜索)。可以使用通配符,不会影响搜索结果。如果输入了多个单词,请使用 OR 搜索。
  • 成功执行的搜索会将包含搜索结果的虚拟页面添加到后退堆栈和地址栏。多个搜索结果生成一个虚拟页面,因此单击“上一步”始终返回原始页面。
  • 如果有必要,按照相关性排列搜索结果。
  • 空白搜索返回原始页面。

建议尺寸和间距

常规搜索框的建议尺寸和间距

文字

  • 对于搜索框中提示符的措辞,可以是一条指令(例如,键入搜索)或指示搜索范围(例如,搜索图片)。
  • 提示文本应该简短,一个单词或短语就足够了。
  • 使用句式大小写规则。
  • 不要使用结尾标点符号或省略号。

说明

  • 将此控件引用为“搜索框”(Search box)。 第一个单词的首字母大写(Search),盒子(box)的首字母不要大写。

  • 两种类型的搜索,描述为即时搜索(Instant search)和常规搜索(regular search)。即时搜索的首字母大写(Instant),常规搜索的首字母不大写(regular)。

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