Windows桌面应用程序设计指南(控件篇19-工具提示和信息提示)

工具提示是一个用于指示没有文字标签控件的弹出窗口,如未标记的工具栏控件或命令按钮等。

工具栏按钮上的典型工具提示

实践中工具提示非常有价值,因此引申出了一种与之类似的信息提示控件,它比工具提示包含更多的描述性文字。
一个典型的信息提示

在本篇中,工具提示和信息提示统称为提示。


提示能够帮助用户理解在界面中没有直接给出描述的未知以及不熟悉的对象。当用户将鼠标划过对象时,对象的提示会自动展示,当用户点击对象、将鼠标指针从对象上移走、或者显示时间结束时,提示会自动消失。


何时使用该控件?

思考以下问题再做决定:

  • 信息的展示需要基于指针的hover操作吗?如果不是,使用其它控件。提示的展示需要基于用户的交互动作,而不是自动展示。相对应的,气球状提示是可以自动展示的(这一点和通知Notifications一样),因此它们会带有一个指明源控件的小尾巴。
  • 该控件本身是否带有文字标签?如果没有,提示可以很好地提供文字信息。注意大多数控件都是有文字标签的,因此不需要提示控件。工具栏控件以及命令按钮因为标签为图片,所以需要提示控件展示文字标签。
  • 对象会因为补充性的描述和更进一步的信息展示得到优化吗?如果这样,使用信息提示。但是补充性的文字对于该控件要执行的主要任务不应该是必须的。如果是必备信息,应直接在界面中进行展示,用户不应该通过探索和寻找才能看到该信息。
  • 用户需要与提示信息交互吗?如果是这样,使用其他控件,例如气球状提示(气球状提示,用户点击即消失)。因为移开鼠标提示就会消失,用户无法与之进行交互操作。
  • 用户会有需要打印出补充信息的需求吗?如果这样,使用其他控件,例如静态评论框。但你仍然可以使用信息提示,告诉用户如何进行这一操作。
    Word中可供用户打印的静态评论框
  • 提示中的内容会让用户感觉厌烦和被打扰吗?如果这样,考虑使用其它方式或者不要设计任何操作。如果一定要在该情况下使用提示,确保用户可以关掉它。

只要使用得当,提示可以提高与用户间的沟通效率。永远不要用提示来代替好的设计。如果图片、按钮或其他表达方式,需要用户查看其提示才能够理解,那就是糟糕的设计,需要对其进行修改。

设计思路

提示是一种简化用户界面的有效方式。它们以用户最轻松的方法,提供给用户需要的信息。提示能够帮助你更有效率地利用屏幕空间,避免浪费。但是,设计不佳的提示也会令人厌烦、分散用户注意、毫无帮助、喧宾夺主,甚至妨碍用户进行操作。下面的设计概念旨在展示好坏设计的不同之处。

可见性

信息提示会在用户将鼠标hover在某一目标上一段时间后自动展示出来。这种延时显示机制会让用户感觉比较能接受,但是也会降低其可见性。

经过一段时间的使用,用户能领会到一些特定的对象,例如工具栏按钮、图标按钮、开始菜单项目以及通知区域的图标等会带有提示,所以可以默认这些地方的提示是能被用户看到的。

但是在非常规区域的提示则需要用户花更长的时间去发现。没有任何类似热点或鼠标指针变化的视觉线索能表明某个对象含有提示。更糟糕的是,一些用户经常移动鼠标,特别是当他们在学习浏览界面UI的时候。用户需要通过体验或尝试,才能知道对象是否含有提示。

可以通过对对象统一使用提示来提升其可见性,这也增强了其可预见性。如果为某些对象提供了提示,那么也应该为所有用户可能需要补充信息的类似对象提供这些提示。有时候这样做是很有挑战性的,因为必须确保这些建议是有用的,而不是画蛇添足。

如果提供易于发现的、始终有效的提示有困难,可以考虑其他设计,比如自解释的控制标签或就近补充文本。

适当的信息

适合放在提示中的信息有以下特点:

  • 简明。提示使用的弹出窗口非常适合短语和句子片段,以及格式化的文本。大块未格式化的文本难以阅读和理解。

  • 对用户有帮助。提示文字必须包含信息,不能太直白描述,或者只是重复屏幕上已经显示的内容。

  • 补充的性质。因为提示文本并不总是可见的,所以它应该是用户非必须阅读的补充信息。重要信息应使用自解释的控制标签或就近补充文本展示。

  • 静态稳定。用户不希望提示经常改变,所以他们不太可能注意到动态内容的变化,比如状态信息。通知区域图标提示是一个明显的例外: 用户更有可能在那里发现提示信息的变化,因为这些图标主要就是用来表明状态的。

合适的消失时间

适当的自动显示和消除提示对于用户保持其对UI环境的控制至关重要。提示有三个超时值:

  • 初始时间。鼠标指针必须保持静止以使提示出现的时间。默认时间为0.5秒。
  • 再现时间。当鼠标指针从一个目标移动到另一个目标时,其必须保持静止的时间。默认时间为0.1秒。
  • 消失时间。提示自动消失的时间。默认时间为5秒。

太短的初始值和重现值会导致一种恼人的、破坏性的体验,因为它们的出现是不期而至的;而太长的反应时间又会导致提示没有反馈或者无法被用户发现。默认的提示消失时间适用于短文本提示,例如工具提示中使用的文字信息。信息提示如果有更长的文本,则需要更长的显示时间。

合适的放置位置

提示应该放置在鼠标悬停的对象附近,尽量将其放在指针的尾巴或头部。然而,它们绝不应该遮挡用户正在关注的对象,这样会干扰用户将要进行的操作进程。为了防止这种情况发生,可能需要将提示从指针移开,但是要靠近对象。只要对象和它的提示之间的关系明确,就没有问题。确保用户不会仅仅为了看到对象的提示而移动指针。

可达性

提示对可达性有非同寻常的影响。将指针悬停在对象上通常会触发这些提示,对于具有键盘访问权限的控件,屏幕阅读器会处理这些提示。当适当地使用简洁、有用、静态、补充性的信息时,提示可以提高整体的可访问性。事实上,替代文本提示模式是使图形可访问的首选方式。然而,如果使用不当,它们会使重要或动态信息更难获取,从而影响可达性。

如果某个控件的提示不具有键盘访问权限,则提供多种访问该控件的方法。

该例中,用户可以点击按钮(键盘无法实现该操作)或使用快捷键进行打印操作

只需记住一件事
在适当的时间,适当的位置展示简洁、有用、静态的补充性信息。

应用范例

提示有以下几种应用范例:

工具提示:显示未标记的控件或标志符号的标签文字信息。因为这些提示充当标签,所以它们的文本遵循源控件的标签显示指南。

充当命令标签的工具提示

为图标按钮提供标签的工具提示

为图标按钮提供标签的工具提示
为标志符号提供标签的工具提示

信息提示:为对象或控件提供补充性的解释或描述。这一用法常见于工具栏控件、图标(包括叠层图标)、链接、标签、渐进展示控件和自定义控件等。


示例

替代文本信息提示:对图形进行描述以提高可达性。该模式主要适用于那些有视力障碍的用户,并且可以使用屏幕阅读器。

该例中,信息提示描述了开始菜单图标

缩略图信息提示:展示项目的缩略图。缩略图使得窗口或文件能够被轻松识别。

任务栏中的项目缩略图提示
相册中的缩略图提示

细节信息提示:展示项目的细节信息。这是种展示项目细节和数据的有效方式。

示例

开始菜单信息提示:描述开始菜单中的项目。开始菜单由程序名和重要的功能窗口(如文档、图片和控制面板)组成。信息提示通常通过给出程序或目标项目的简短描述,以及用户可以用它执行的主要任务,描述开始菜单项。这些描述也能被开始菜单搜索框索引,进一步帮助用户找到他们需要的程序。

该例中的信息提示描述了开始菜单中项目的功能

控制面板信息提示:描述控制面板的类别或任务。这里的提示能提供补充信息,帮助用户选择正确的控制面板类别和项目。

该例中,信息提示描述了用户账户面板的性质内容

全称信息提示:在名称被缩略或不能完整显示时,信息提示用于展示项目的全名。这种提示能让设计者在更紧凑的空间中显示项目,同时减少了水平滚动。这在内容长度未知时尤其重要,因为它是动态的。与其他模式不同,在列表和树型结构中使用时,这些提示直接显示在源对象上。

该例中,鼠标hover时信息提示展示项目全名

状态信息提示:展示通知栏图标的状态信息。通常情况下,提示应该是静态的,因为用户不希望它们常常变动。通知区域图标是一个例外,因为这些图标就是用来显示状态的,并且没有其他屏幕空间可用于状态的文本描述展示。

通知栏图标的状态信息提示

设计指南

消失时间

  • 除以下特殊情况,请使用默认的出现时间和消失时间:
    不冗余且显示在相关对象一侧的缩略图提示可以立即显示(无任何时间延迟)。对于没必要展示的缩略图(例如小图形对象的放大缩略图)或覆盖源对象的缩略图,使用默认的缩略图展示和消失时间。

  • 对于工具提示,使用默认的5秒后消失。

  • 对于消息提示,关闭消息提示超时设置。针对开发人员的建议:如果不能在技术上关闭超时消失,那么把它设定为最大值。

  • 为了保证可访问性,如果超时值设置需要超过最大值,请将它们设置为 spi _ getmousefortime 和 spi _ getessageduration 系统参数的倍数,而不是固定的时间值。这样做可以根据用户的速度调整超时。

出现位置

  • 避免遮挡用户想要看到以及交互的对象。就算需要将提示和鼠标焦点分开,也要将提示放置在对象的旁边。只要对象以及它的提示之间的关系看起来很明确,有一些距离上的间隔也是可以的。
    例外情况:在列表和树状视图中使用的全称工具提示。
    错误示例

    正确示例:提示放在输入框的一侧,尽管其与输入光标之间有一定距离

    错误示例

    正确示例:因为下方文字比提示上的文字更重要,所以提示被远远地放在了另一边以避免遮挡
  • 对于一系列项目的集合,避免遮挡用户可能查看或交互的其他对象。水平排列的项目,不要在右方放置提示;垂直排列的项目,不要在下方放置提示。
    错误示例

    正确示例
  • 对于可能分散用户注意力的提示(通常这些提示尺寸很大),确保它们对大多数用户有帮助。如果不是,要么让它们选择性展示,要么直接去除。不然大多数用户不得不将指针移开目标对象,以消除提示的遮挡。

工具提示

  • 使用工具提示为不含标签的对象提供标签文字。一般工具栏的图标、图像按钮以及渐进式展示控件会包含工具提示。含有文字提示的控件,例如文本框和组合框等,会被认为是含有文字标签的。其他所有的控件都应该含有明确的标签文字。

  • 使用不含标点符号的句式短语。

  • 使用句式大小写规则。

  • 对于需要进一步操作的功能项,在提示文字结尾加上省略号。

  • 相对于一般的标签文字,工具提示文字更为简洁,一般在五个字以内,简洁的同时保证明确、无歧义。

    可接受示例

    优化示例

    最佳示例

    错误示例

  • 如有必要,工具提示也可以为有标签的工具栏按钮提供更详细的细节说明。不要重复或是单纯用文字重新解释标签文字。

    正确示例

    错误示例

  • 但也不用为了保持一致性,为所有带标签的控件加上工具提示。

    示例:没标签的工具栏按钮有工具提示,有标签的则没有工具提示

  • 如果可以,尽量通过展示键盘快捷键和默认值的方式,提升工具提示的效用。把这些附加信息放在括号中。这样即使单纯重复标签文字,工具提示也是有用的。但在评估工具提示的简洁性时,不要考虑该附加文本。

    展示默认值和键盘快捷键的工具栏按钮工具提示

信息提示

  • 对于非常规位置的工具提示,为了提升可见性,相比于提示的有效性、要更看重展现的一致性。即使一些对象的含义很明显,也要为所有对象提供有可能需要补充信息的提示。这样能避免让用户等待不会出现的信息提示。
    特例:如果只有少数对象的信息提示有意义,那么就彻底不要使用信息提示。使用能自解释的控件标签或就近补充文本。

  • 使用带有结束符号的完整句式结构。
    特例:通知栏的图标信息提示不要含有结尾标点符号

  • 使用句式大小写规则。

  • 使用现在时态、而非将来时态描述。

  • 使用相同的语法结构组织句子,这要求具有相同功能的词和短语具有相同的形式。
    特例:对于全称信息提示,它们的信息提示实际上需要匹配的是源控件的措辞、大写和标点符号规则。

  • 避免使用尺寸过大的信息提示。这样的信息提示很难阅读,也很难在不干扰源控件的情况下定位。

  • 信息提示内容的排版要让用户方便阅读和浏览。大块未格式化的文本是很难阅读的。

    错误示例

    正确示例

  • 第一次出现的信息提示,先写出缩略词的全称,然后在括号中附上首字母缩写。例如:Dynamic Host Configuration Protocol (DHCP)。


开始菜单信息提示

  • 使用开始菜单信息提示简洁地描述项目,并列出用户能使用项目执行的主要任务。
  • 切实帮助到用户。关注用户目标。不要只是重复项目名称,甚至在描述中照搬使用。
  • 描述尽量具体。避免使用通用动词和诸如“其他任务”之类的笼统短语。如果信息很重要,请清晰陈述;否则,假设用户能理解信息提示中并不会列出所有内容。
  • 简明扼要。不要超过25个字。太长的信息提示不利于阅读。
  • 用现在时、祈使动词开头,例如创建、编辑、显示和发送。尽量使用特定的动词,而不是通用动词,例如管理和打开,这些动词实际上适用于大多数开始菜单项。直截了当地点出要点。
    错误示例

    优化示例
  • 不要使用有营销感的文字描述。
    错误示例
  • 因为这些信息提示会被开始菜单搜索框索引,用用户最有可能搜索的术语描述程序的重要任务。考虑使用关键词和常见的同义词。

    错误示例

    正确示例

  • 使用句式大小写规则。

快速启动工具提示

  • 工具提示使用的格式为:启动(完整程序名)

  • 不要使用结尾标点符号。

  • 不要使用附加文本来描述程序或它做什么。因为用户是在快速启动栏中选择的程序,他们已经知道自己的目的。

控制面板信息提示

  • 使用控制面板信息提示简明地描述控制面板任务以及所配置的硬件和软件。
  • 控制面板名称和图标必须有信息提示。单个任务没有工具提示。
  • 信息提示要能产生帮助。关注于用户能做什么。不要只是重复控制面板的项目名称,甚至在描述中重复使用。

  • 描述尽量具体。避免使用通用动词和短语,比如“其他硬件”。如果这些信息很重要,那就特别列出来; 否则,假设用户理解并不是所有的信息都列在这些信息提示中。

    错误提示

    正确提示

  • 保持简洁。使用25个以内的单词描述。过长的信息提示不利于阅读。

  • 以现在时、祈使动词开始句子。

  • 直奔主题。不要使用适用于任何控制面板选项的语言,例如“用于查看和配置您的... 外观和功能的设置”或“为您提供... 的选项”。

  • 不要使用营销措辞语气。


  • 因为这些信息提示会被控制面板搜索框索引,所以请使用用户最有可能搜索的术语来描述项目。考虑使用大众使用的常用任务和对象的同义词。

  • 如果控制面板中的项目容易被混淆,使用信息提示解释它们的独特与不同之处。

错误示例

正确示例

图标

和之前版本的Windows不同,Windows Vista允许提示带有图标。

  • 对于工具提示,不能使用图标。

  • 对于信息提示,只在图标有助于用户识别、理解或提供内容的情况下使用它。大多数信息提示是不需要使用图标的。


    该例中,信息提示的图标帮助解释了项目的含义
  • 图标必须使用aero风格,并且外观不过于突出。

说明

在提到提示时:

  • 在编程和其他技术文档中,请说明提示的类型(工具提示或信息提示)。在其他任何地方,简单地称之为提示。

  • 以下书写形式是不正确的: tool tip, Tooltip, &ToolTip。

  • 要描述用户交互,可以使用hover。

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