提升用户界面设计的 8 个技巧

设计。它让你感到害怕吗？

虽然前端开发人员没有义务设计用户界面，但我认为我们也不应该回避这项工作。

许多开发者声称自己没有设计眼光，但就像任何事情一样，技能会随着练习而提高。

在本文中，我想分享 8 个对我的开发工作很有帮助的设计技巧。希望它们也能对你有所帮助！

这些技巧大部分（如果不是全部）都来自《重构 UI》的免费章节——这是一本由 TailwindCSS 的开发者编写的、从开发者角度出发的 UI 技巧宝库。

提示 1

使用颜色和粗细来创建层次结构，而不是使用大小。

我在这方面很纠结。我倾向于放大元素（通常是文本）的尺寸来强调其重要性。

相反，您可以调整字体粗细和颜色。请注意，通过加粗标题文本并更改一些字体颜色，右侧的卡片看起来更加统一，也不那么令人感到压抑。

技巧二

不要在彩色背景上使用灰色文字。

左侧的用户标题是灰色的。虽然它本身看起来并不“难看”，但请注意，将其颜色更改为浅绿色，与深绿色背景相协调，可以提高可读性，并建立层次感。

技巧三

偏移阴影。

不要在父元素周围放置范围很大的阴影，而是将阴影偏移并使用较小的范围。请记住，阴影的位置可以让用户（通常是无意识地）判断用户界面中的光源。保持一致性，以免破坏效果。

你也可以在内部元素上使用阴影！

技巧四

请尽量减少边框！
这个理念建立在之前一些建议的基础上。

人们的本能是使用边框来定义元素或元素的各个部分之间的分隔，或者使用边框来勾勒元素轮廓，使它们从用户界面的背景组件中凸显出来。

不要使用边框来勾勒元素轮廓，而是使用带有偏移量的微妙阴影。

不要使用边框来定义分隔线，而是使用空白或不同的背景颜色。

通过这一简单的修改，各个元素将不再让人感到压抑，也不会再像 10 年前的设计潮流。

技巧五

不要放大原本就很小的图标。

留白有时很麻烦。有时它能提升可读性，但有时却像个需要填补的空白。我发现，当图标位于其他元素内部时，这种情况尤为明显，我通常会放大图标来填补空白。

与其试图增大图标尺寸以占据空间，不如尝试将图标放置在另一种形状中，并使用辅助颜色。

技巧#6

使用装饰边框为单调的设计增添色彩。

我们都经历过这种情况。
我们看着自己设计的东西，心想：

它太白太单调了，看着很无聊。我得加点颜色。

我常常用力过猛，添加太多颜色，不知不觉中，卡片的背景就被涂成了原色，整个设计看起来就不对劲了。

很多时候，少即是多。与其过度设计，不如简单地给某个元素添加一个亮色边框。这样既不会喧宾夺主，又能有效改善单调乏味的视觉效果。

技巧7

并非每个按钮都需要背景颜色。

这一点非常重要，我认为这是我们从一些老旧的设计趋势中继承下来的。总是给按钮添加背景色会让用户难以专注于用户界面中最关键的操作。

不要总是使用主色、辅助色或第三色背景，让不太重要的按钮稍微“呼吸”一下。

以下是史蒂夫·肖格尔提出的一些规则，可以帮助您决定按钮的样式：

1. 主要操作应该一目了然。纯色、高对比度的背景色在这里效果很好。
2. 次要操作应该清晰明了，但不要过于显眼。使用轮廓样式或低对比度背景色都是不错的选择。
3. 三级操作应该易于发现，但又不能过于显眼。通常来说，将这些操作设计成链接样式是最佳方案。

以下是一些例子：

技巧#8

跳出数据库的局限去思考。

作为开发者，我们很容易将从后端获取的数据对象直接复制到用户界面上。这样缺乏创意，最终的设计看起来非常表格化。

相反，不要害怕以更有用的方式呈现数据，强调最重要的内容，并将标签和值组合成人类可读的短语。

结论

设计或许会让你感到畏惧，但其实不必如此。没错，设计师需要花费多年时间学习理论知识，掌握构建出色用户界面所需的一切技能，但作为开发者，即使缺乏设计天赋，我们也可以运用策略进行设计。

我希望这 8 个技巧能帮助你找到可以做出的小改变，从而大大改进你的设计。

想要了解更多类似的技巧和窍门，请务必查看RefactoringUI！

感谢阅读！

如果您喜欢这篇文章，请考虑订阅我的开发者新闻简报！

如果你想每天了解我的最新动态，请在Twitter上关注我！