面向开发人员使用 Tailwind CSS 进行 UI 设计的建议

还行的 UI 设计与优秀的 UI 设计之间的区别往往在于几乎隐藏的细节。大多数人可能不会意识到这些细微的调整，但一旦移除它们，它们就会很明显。

本文展示了各种类似的小 UI 调整，可以立即应用于您的 (Rails) 应用程序的 UI。 基于我 25 年以上的 UI/设计经验。虽然它使用了 Tailwind CSS 的类（这是 Rails Designer 的客户所使用的），但相同的技巧也可用于原始 CSS。

每个预览都展示了如何将提示应用于 UI 元素。

调整标题的字母间距

字距调整是指调整文本中字符之间的间距，以获得美观​​的效果。可以使用 字母间距 属性。通常，专业设计的字体具有基于粗细、样式和某些字符对（例如 WA）的特定设置。免费字体（来自 Google Fonts）通常没有这些设置，导致排版笨拙甚至看起来很糟糕！

标题通常使用更紧密的字距后会立即看起来更好。它提高了视觉元素的视觉和谐度和可读性。

Tailwind CSS 提供了 tracking-* 类来设置字母间距。默认选项为 tracking-tighter、tracking-tight、tracking-normal、tracking-wide、tracking-wider、tracking-widest。但 Tailwind 当然也允许任意值：tracking-[0.05em]。

使用彩色阴影

当您的元素带有阴影（文本或框阴影）且背景颜色不是灰色时，使用彩色阴影也会有所帮助。这样阴影看起来就不会那么模糊，而且更加突出。您可以使用 Tailwind CSS' 盒子阴影颜色 为此目的的实用程序。

灰色背景上的彩色元素的不透明度

当您使用具有彩色背景的元素/组件（如徽章或通知点）时，在悬停时会变化的灰色背景（例如从白色变为灰色或从灰色 50 变为灰色 100）上，最好将徽章的彩色背景设置为 50% 不透明。

这种技术可以让部分灰色显露出来，使元素更符合要求，不那么模糊。下面这个例子可能效果最好。

使用更多空白

我学到的关于（UI）设计的第一条规则之一是： 空白也是一个设计元素。

大多数开发人员都有将元素挤得太近的习惯。他们喜欢信息密集的屏幕。另一方面，大多数设计师喜欢增加更多的空白。如何找到正确的平衡？

这很棘手，因为它取决于具体情况。但要记住的是水平和垂直空间之间的平衡。经验法则是水平（x）空间应该大于垂直（y）空间。查看以下示例：

（还可以查看 Rails Designer 的 ButtonComponent 来获取灵感）

使用适当的行高增强可读性

设置行高是排版技巧中比较棘手的一项。设置过高看起来不正常，设置过低看起来也不正常。

行高太窄通常是因为想在一个屏幕上显示太多信息，但结果是使阅读更加困难。

Tailwind CSS 提供相对和固定行高， 领导-* 类。相对行高基于其当前字体大小。固定行高则与当前字体大小无关。

使用微妙的渐变来增加视觉趣味

在背景中使用微妙的渐变有助于提高元素的视觉趣味。诀窍是使用略有不同的颜色色调。使用由提供的广泛调色板可以轻松做到这一点 Tailwind CSS. 类似于从靛蓝 900 到靛蓝 800。

设定方向时要牢记大自然的色彩。我的意思是，浅色主题元素从浅色变为深色，深色主题元素从深色变为浅色。这分别模仿日出和日落。

实现交互元素的平滑过渡

通过创建自然的流程、引导用户注意力和保持视觉连续性，在焦点和悬停状态中添加微妙的过渡可以增强用户体验。

只需一个 CSS 类（transition），即可使用 Tailwind CSS 实现此效果，但我几乎默认使用以下类 transition ease-in-out duration-200。它提供了相当优雅的过渡。

如果您将此类悬停状态应用于大型元素，请务必添加 delay-* 类。这是为了确保您的用户在滚动屏幕时不会意外触发悬停状态。

还有其他技巧可以与开发人员分享吗？请告诉我。