如何使选项不可用并且可以删除?

平面设计 网站设计 css 界面设计 网站模板 寻路
2022-02-22 04:29:44

这是我在 StackOverflow 上提出的问题,但不知何故没有得到我希望的答复。我现在在这里尝试,因为我正在寻找一种视觉上吸引人的解决方案。理想情况下,使用图书馆会很棒。


在我的网站33hotels.com 上,我使用按钮(例如 Twitter Bootstrap 提供的)来指示酒店的便利设施。

我需要的是清楚地表明没有便利设施。为此,我已经将按钮显示为红色,其中的文本被水平线穿过。但是,从用户测试反馈来看,这还不足以传达没有便利设施的信息。所以我需要更清楚的东西。

我正在考虑在按钮顶部放置一个大十字(字母“X”或图标),它应该与按钮一样大,并且很好地覆盖按钮,而不会伸出。十字应该很薄,以免遮挡文字,但仍清晰可见。

我的问题是:

如何在按钮顶部放置“X”?有什么优雅且可重复使用的方法吗?也许定义一个可以附加到 HTML 元素的 Web 组件(或 Angular 指令)“交叉”?

这是我想要实现的丑陋版本然而,除了丑陋之外,它无法使交叉的文本可读。所以也许我应该使用更薄的“X”版本?


编辑。受 E. Upvoter 先生建议的启发,将颜色更改为灰色并添加了“X”,悬停时外观更清晰。该按钮在单击自身时消失(而不仅仅是在“X”上),以提高难以单击小图标的人的可用性。非常感谢所有建议!

4个回答

我建议一系列指标协同工作:

  1. '灰色' - 给不可用的按钮一些透明度,(或颜色较浅的透明度外观)。这将确保它与其他按钮明显不同,至少会引发人们对它为什么不同的好奇心。

  2. “罢工!!!!” - “就像认真的人一样,我把它穿过了一条线。” 这通常意味着负面的东西。

  3. 在点击或悬停时(您可以简单地使用:hover它,据我所知,它始终可以用于点击 - 您不能在没有解决方法的情况下在链接上使用它)提供删除选项和适当的解释。

快速样机:

没有悬停:

在此处输入图像描述

悬停/点击整个按钮:

在此处输入图像描述

悬停/点击问号:

在此处输入图像描述

查看带有悬停帮助和删除按钮的 (div) 按钮的 JSFiddle 模型

一个更优雅的解决方案是将按钮变灰,将其状态设置为禁用并使用禁用光标清楚地显示状态。我已经拼凑了一个快速的代码笔来演示这一点。

某些东西根本不存在的事实很好地表明它不存在!

如果您仍想在每个结果元素中显示“选择但缺少”的内容,我建议不要将其作为同一部分中的相同元素进行,唯一的区别是样式。

而是让用户清楚地知道此部分显示酒店拥有的内容,而此部分显示您搜索的未包含的内容。可能具有“已选择但缺失”的元素是一个简单的逗号分隔的删除线文本列表,该列表以存在于结果中的方式呈现,但看起来不像是对位置的描述。

因此,结果是一个视觉元素,而酒店是结果中的一个视觉元素,描述每个元素的数据也是如此分离的。

例子:

在此处输入图像描述

我认为逻辑有问题。我选择了一些便利设施,因此我希望只看到结合了这些便利设施的酒店。您应该通知用户没有拥有所有便利设施的酒店,并可能通过单击另一个按钮让他们看到缺少便利设施的结果。在我看来,红色交叉按钮效果很好。如果有用户不理解,那是他们的问题。