设计干净的平面设计按钮,使它们显示出可供性,并且看起来“设计精良”

平面设计 网站设计 坡度 按钮
2022-01-06 12:48:44

我最近开始了一个小型 CSS 框架。http://mincss.com,如果有人感兴趣的话)我很快就敲出了一些按钮的初始设计。在征求有关 UX StackExchange 的反馈(并收到很多好的反馈)之后,我被推荐来这里寻求有关改进它们的更多建议。

这是他们现在的样子,在 UXStackExchange 的反馈之后。我删除了黑色边框,添加了 3px 的“阴影”,并删除了 1px 的斜角:

在此处输入图像描述

我想要一个平面设计的外观。

我还有 3 个问题:

  • 这些按钮是否显示出足够的可供性?(这似乎是扁平化设计的问题)
  • 你会建议添加一个小渐变吗?
  • 它们看起来设计精良吗?(主观我知道,但我想不出更好的方法来问这个)

我很乐意欢迎(并且可能会使用)对这些按钮的任何反馈。

4个回答

我认为非常微妙的渐变肯定会改善按钮的美感。由于 Windows 8 “Metro” 风格是这种风格的大力支持者,我将使用它作为示例:

适用于 Windows 8 的应用程序

乍一看,“瓷砖”看起来像是一种平面颜色,但如果仔细观察,就会发现从左到右有一个非常轻微的渐变。有些人比其他人更明显,但他们都有。正如 Yisela 所说,您希望这种渐变几乎不明显,几乎是潜意识的。

正如您所提到的,在设计平面按钮时,您需要注意几件事。第一个是,我会说:它看起来像一个按钮吗?

这不一定只取决于按钮,而是取决于 UI 的其余元素。如果您使用的是平面按钮,我建议您避免在其他任何地方使用类似的形状/样式。您需要保持视觉词汇,以便人们可以立即将这些元素识别为按钮而不是其他东西。

阴影对此有好处,因为它们给人以体积的印象。因此,它们更容易被看到。另外,我们习惯了具有这种效果的按钮。但是,我会考虑使用与按钮颜色相似的颜色。例如,不要为红色按钮使用黑色,而是使用不透明度为 50% 的红色。使按钮更明显的另一个选项是添加一个图标(白色,实心)。

我会非常小心渐变不是因为它们不好,而是因为在当前超级简单的扁平化趋势中,它们不太适合。特别是如果您使用的颜色或色调非常不同。一个小的渐变看起来真的很好,但它必须很小,几乎不引人注意。

简而言之,我喜欢它们的外观。我只会将阴影颜色更改为更亮的颜色,并且可能会使前景文本也更亮,可能是白色。字体很好,你使用了很好的填充,干得好!我看到您在站点中使用它们,但在它们下方您有一组颜色柔和的通知,实际上看起来有点相似。我会重新考虑他们的风格,因为它们可能有点令人困惑,我会尝试在整个网站上使用相同的颜色(所有粉彩,或所有对比色)。

虽然我可以尊重制作这样最小的按钮,但您确实需要考虑是否/如何在不同网站上的网络上应用它们,因为您正在制作一个框架。如果你提供按钮,你需要确保提供其他人可能使用的所有东西,比如表格、表格等(我相信你还在努力)。

如果您还没有,请查看Bootstrap 。Bootstrap 是一个非常简单和干净的 CSS 框架,可以很容易地适应或集成到另一个网站中,并且可能会给你一些想法。

现在就这些实际按钮而言,我会使用边框,因为这有助于封装组件,并且边框对于许多按钮来说非常常见。我查看了网站,我确实喜欢悬停/点击状态,我认为你在这些方面做得很好。

如果您想引入渐变,请保持一致并确保您在其他元素上也使用它们,否则您将有相互竞争的深度,这只会分散注意力。

按钮看起来不错,但是在一般平面样式中显示可供性和感觉的那种按钮曾经是放置阴影部分的位置,是主要元素(按钮)底部的一条小条,并且大多是较暗的阴影按钮颜色。