软件的可用性改善:善用帮助信息

2023年 8月 31日 46.4k 0

当我们吭哧吭哧的开发功能性模块的时候,也需要回头思考一下软件的可用性。今天的主题就是使用帮助信息来改善软件的可用性,让软件不仅”能用”,也更”好用”。

帮助信息,也叫工具提示(Tooltip)。当用户的鼠标悬停在一段文字或者控件上时,会自动显示相关的帮助信息。例如,如果一个控件上的字符串没有足够的控件显示,当鼠标悬停在控件上时,可以通过工具提示来显示完整的字符串。

实现工具提示的一个关键点是对 TTN_SHOW 通知消息的处理,此消息可以用来在工具提示显示之前设置它的显示位置。另外一个要处理的消息是 TTM_ADJUSTRECT,它可以用来设置工具提示的精确显示位置。

下面是一段例子代码,其中添加了对工具提示的支持。

代码解析

我们声明了一些变量之后,我们来深入看看创建窗口的过程。首先,我们调用 CreateWindowEx 创建工具提示窗口,将主窗口设置为工具提示窗口的所有者(这一点对于获得正确的 Z 顺序行为非常重要)。

然后,我们获取字体并将其设置到工具提示控件中,以便工具提示以与我们相同的字体呈现。

然后,我们测量目标字体中的文本,并将 g_rcText 矩形设置为该文本的尺寸。我们使用该矩形在工具提示控件中建立工具的边界。

通过设置 TTF_SUBCLASS 标志,我们指示工具提示控件应子类化我们的窗口以拦截鼠标消息。这是一种灵活的方法,可以避免我们不得不使用 TTM_RELAYEVENT 消息手动转发鼠标消息。

绘制工具提示就比较简单了,我们只需要选择字体和绘制文本就可以了。

运行这个例子,我们将鼠标悬停在文本上。我们可以看到工具提示会显示出来,但它显示到了错误的位置。不过,除此之外,事情正在按预期进行。工具提示具有正确的字体,仅当鼠标悬停在文本本身上时触发,当鼠标离开文本时关闭。让我们来解决工具提示显示位置的问题,代码如下图所示:

TTN_SHOW 通知消息在即将显示工具提示时发送。我们通过将文本矩形映射到屏幕坐标并使用 TTM_ADJUSTRECT 消息扩展矩形以包含工具提示控件将在文本周围放置的所有边距和边框来响应通知。这样,当我们将工具提示放置在该位置时,边距和边框会精确匹配,并且文本将显示在所需位置。返回 TRUE 以向工具提示控件指示我们已负责定位窗口,并且它不应执行其默认定位,这一点很重要。

我们再次运行例子程序,你会发现还有另一个问题:工具提示动画仍在进行,如果动画是幻灯片动画,则尤其会分散注意力。这很容易解决:调整我们创建工具提示控件的方式。

TTS_NOANIMATE 样式可以用来禁止动画,这意味着工具提示只是弹出来并不再显示动画,这正是我们想要的。

大功告成!

以上就是实现工具提示的基础知识。当然,可能你想处理更多细节,例如仅在字符串被剪切时才显示工具提示。但是这些问题与工具提示无关,因此我不会在这里讨论它们,可能在以后的时间我们会来探讨这个问题。

总结

如果时常以用户的角度来使用软件,你会发现:工具提示真的是一个十分十分好用的特性。那么,现在立即就在你的软件里加上这个功能吧!

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论