7 个秘密技巧将极大地改变你的 UI 设计

如果您是一名 Web 开发人员，您可能遇到过必须做出视觉设计决策的情况。也许您的公司没有全职设计师，您需要自己实现新功能的 UI，或者您可能正在从事一个业余项目，并希望它看起来比普通 Bootstrap 网站更好。

“我没有设计感，所以我无法让这个看起来很酷！”

这样很容易放弃，但即使您没有任何图形设计知识，实际上也有很多技巧可以改进您的设计。这里有 7 种您可以立即使用的简单技巧。

1. 根据颜色和粗细而不是字体大小创建层次结构

通过将其加粗而不使其变大，或者使其变轻而不使其变小来创建层次结构。设置 UI 文本样式时的一个常见错误是仅依赖字体大小来创建层次结构。

“这个文本重要吗？我们把它弄大一点吧。”“这个文本重要吗？我们把它弄小一点吧。”

您可以使用颜色和字体粗细来实现相同的作用，而不是仅仅依赖字体大小。

“这个文字重要吗？那我们把它弄粗一点吧。”“这个文字是补充性的吗？那我们把它的颜色弄浅一点。”

推荐配色方案如下：

• 重要内容采用深色（但不是黑色）
• 补充说明的内容呈灰色。
• 浅灰色表示辅助内容（例如页脚版权声明）

较重要的内容以较深的颜色显示

此外，两种类型的字体粗细（粗细）足以满足 UI 工作的需要：

• 正常字体粗细（400 或 500）
• 对于要强调的文本使用较粗的字体粗细（600 或 700）

仅使用两种类型的字体粗细

避免 UI 中的字体粗细低于 400。它可以用于大标题，但如果尺寸较小，则难以阅读。

如果您想减轻对文本的强调，使用较浅的颜色和较小的字体大小可能会有效。

2.避免在彩色背景上使用灰色文本

白色文本在彩色背景下难以阅读

在白色背景上将文本设置为灰色可以有效地使其不那么引人注目，但在彩色背景上则效果较差。

这是因为灰色对白色的真正影响是对比度的降低。

保持文本接近背景颜色实际上有助于创建层次结构。

关键是让文字颜色更接近背景。

使用彩色背景时有两种降低对比度的方法：

降低白色文本的不透明度

使用白色文本并降低不透明度。

这允许背景颜色稍微渗色并强调文本，而不会与背景发生冲突。

通过稍微降低白色文本的不透明度，可以防止文本渗色。

根据背景颜色手动选择颜色

当背景是图像或图案时，或者当降低不透明度使文本看起来暗淡或太亮时，此功能非常有效。

过使用与背景相同的颜色，可以消除文字的沉闷感。

选择与背景色调相同的颜色，并尝试调整饱和度和亮度。

3.垂直移动阴影

垂直移动阴影以获得逼真自然的外观

不要使用大的模糊或扩散值来使框阴影突出，而是尝试添加垂直偏移。

它为您提供现实生活中常见的自然外观，并为您提供真实光源从上方照射的逼真效果。

输入字段和分隔符元素的插入阴影也是如此。

4. 减少界限

删除不必要的边界

当您想要在元素之间创建分隔时，您倾向于依赖边框，但这不是唯一的方法。使用太多边框会使您的设计看起来混乱。

下次您想使用边框时，请尝试以下想法：

只需增加元素之间的距离即可轻松区分它们。

使用框阴影

盒子阴影可以像边框一样围绕元素，但更微妙，并且具有相同的目的，但不太引人注目

不使用边框而用框阴影表达的示例

改变背景颜色

您可以简单地通过给相邻元素提供不同的背景颜色来区分它们。如果除了边框之外您还使用了不同的背景颜色，请尝试删除边框。

您只需稍微更改背景颜色即可。

增加距离

您可以通过增加元素之间的距离来轻松区分元素。

只要拉开距离就足以区分

5. 不要把小图标弄大

将背景与小图标相匹配将使设计保持完整。

当您需要大图标时，您可能会转向免费的图标集，例如 Font Awesome 或 Zondicons。

由于它是矢量图像，您可能会认为将其放大不会降低图像质量，但如果将 16-24px 的小图标放大到预期尺寸的 3 或 4 倍，则会显得非常不专业。

细节将会丢失，导致不平衡、“蓬松”的外观。

如果您只有小图标，您可以通过将它们放入其他形状内并为其指定背景颜色来解决此问题。

例如，通过将图标放置在圆形背景内，您可以在调整大小时将其用作设计的一部分。

这允许您填充大空间，同时保持图标接近其原始大小。

如果您的预算有限，您还可以购买高级图标集，例如 Heroicons 或 Iconic，它们专为更大尺寸而设计。

6. 使用边框作为强调色为您的设计添加色彩

在您的设计中添加一点颜色就会很有效。

即使您不是图形设计师，您也可能希望在 UI 设计中添加一些视觉强调或扭曲。

或者也许您看到他们使用美丽的摄影和彩色插图，并且您也想这样做。

解决此问题的一个简单技巧是添加彩色强调边框。

这可以为设计增添一些色彩，否则可能会有点平淡。

例如，向警报消息的左边缘添加颜色是有效的。

在警报消息的左边缘添加强调色

或者您可以突出显示活动的导航项目。

另一种选择是在整个布局的顶部绘制一条彩色线。

即使您没有任何图形设计技能，向用户界面添加彩色形状也很容易，并且可以使您的整个网站看起来更加“设计”。

如果您在选择颜色时遇到困难，可以使用Dribbble 的颜色搜索等受限调色板，以避免被无穷无尽的颜色选项淹没。

7.并非所有按钮都需要背景颜色

并非所有按钮都需要背景

当页面有多个操作时，很容易陷入仅根据语义来决定按钮设计的陷阱。

例如，像 Bootstrap 这样的框架鼓励您在添加新按钮时选择语义样式，这是这种情况经常发生的另一个原因。

Bootstrap 中使用的有意义的配色方案

“这是平权行动吗？那我们把按钮变成绿色吧。”

“这是删除数据的动作吗？那我们把按钮变成红色吧。”

语义在按钮设计中很重要，但经常被遗忘的更重要的元素是层次结构。

页面上的每个操作都位于重要性金字塔上的某个位置。

大多数页面都有一个最重要的“主要操作”，然后是几个“次要操作”，然后是很少使用的“第三操作”。

设计这些操作时，传达它们所在的位置非常重要。

• 主要动作应该是最明显的。高对比度背景颜色是有效的。
• 设计次要动作要清晰但不要太明显。轮廓样式和低对比度背景颜色就是答案。
• 理想情况下，第三级操作应该是可发现的但不引人注目。类似链接的样式是最好的。

想想这个行动有多重要

有人可能会问，“删除操作不应该总是红色的吗？”

然而，情况并非总是如此。

如果删除操作不是页面上的主要操作，则二级或三级按钮样式就足够了。

按钮样式的差异取决于操作的重要性

当负面操作实际上是界面中的主要操作（例如确认对话框）时，请保存大的、红色的、粗体的样式。

通过使用配色方案工具，您可以在更短的时间内创建自己的配色方案调色板，当然了解配色方案的基本规则也很重要。