小提示的设计你做对了么？细节决定成败

工具提示信息是当用户将鼠标悬停在界面的某一个点显示出点一段信息，通常是一个图标，用来解释某些事情是如何工作的或它们的含义。鼠标移开就会消失～

虽然他们可以在，前后左右任何一个点进行显示。不过他们也会存在一些问题？比如遮挡等等。接下来我就给大家说明下缺点和应该怎么做才好？

1. 隐藏过深，不容易被发现

有些用户不会注意到工具提示的身影，会直接忽略

2. 提示内容需要简洁有力

不仅在样式上的人性化设计，内容上也要简洁。去掉不必要的文案，尽量少的字说清楚要表达的东西

3.对屏幕和信息有遮挡

提示工具往往在输入信息的上一层，这样鼠标滑动之后就会遮挡下方信息，这样就不能同事阅读工具提示和屏幕本身的信息。如果想记住就要来回切换操作

4.在小屏幕上就容易被剪切

提示框有可能被边框所覆盖

5.悬停设计的bug

第一，悬停需要鼠标碰触，这对于手机端就不是很友好～

第二，对于只用键盘无鼠标的操作也是很艰难～

第三，因为需要精准悬停在某处所以容易误操作，影响浏览视线

最后，用户不能选择或与工具提示中的内容交互。

🌟应该怎么做？如何改善呢？

1.组合搭配～

看看以下的图片就一目了然，icon+文字描述更有说服力和效率。如果想展示表多的说明用超链也不错～

2.在外部直接显示内容

在文字比较少的情况下，直接外露就很好～

3.使用一些组件模块来切换

既省地方，下拉之后有简洁明了～

🎉撒花总结

文中写了显示和隐藏的一些小方式，和在什么情况使用哪种更好，具体的就要你来选择了～

作者还强调但是，利用图和文字相辅相成。只要设计的好，就不怕用户不明白～

 

扩展阅读：如何正确使用这个小但强大的UI模式

               web设计的提示信息模式

感谢大家的阅读！喜欢不喜欢都可以私信留言～希望我们一起进步！❤️