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

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

作者: 烈焰虾米 | 来源:发表于2020-05-15 17:31 被阅读0次

    使用“搜索”框,用户可以通过筛选或突出显示匹配项,在大量数据集中快速定位特定对象或文本。没有标准的搜索控件,但应尽量使程序的搜索功能与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)。

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/wpztohtx.html