每个Web开发人员都不可避免地遇到需要做出视觉设计决策的情况，无论他们喜欢与否。

也许你所在的公司没有全职设计师，而你需要自己实现新功能的UI。

你很容易举起手来说：“我永远都不可能让这个做得很好看，我不是艺术家！”但事实证明你可以用很多技巧来提升你的工作水平，而且不需要图形设计。

以下是你可以用来改善设计的七个实用技巧。

•  •  •

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

UI文本样式的一个常见错误是过分依赖字体大小来控制层次结构。

“这个文字很重要吗？让它变得更大。“

“这个文字是次要的吗？让它变小。“

不要单独将所有繁重的工作留在字体大小上，而是尝试使用颜色或字体粗细来完成相同的工作。

“这个文字很重要吗？那就让它更突出。”

“这个文字是次要的吗？那就让它使用更浅的颜色。”

尝试并坚持两种或三种颜色：

• 主要内容的深色（但不是黑色）（如文章标题）
• 二级内容的灰色（如文章发布日期）
• 辅助内容的浅灰色（可能是页脚中的版权声明）

通常，字体的粗细足以突显区分文本层次的需求：

• 大多数文本的正常字体粗细（400或500，具体取决于字体）
• 要强调的文本较重的字体粗细（600或700）

在正文文本中不要使用400以下的字体权重 ; 它们可以用于大标题，但是在较小的尺寸下难以阅读。如果您正在考虑使用较轻的重量来减弱某些文本，请使用较浅的颜色或较小的字体。

•  •  •

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

使文本变为浅灰色是在白色背景上去强调它的好方法，但它在彩色背景上看起来并不那么好。

那是因为我们在白色背景上看到灰色的效果是对比度降低。

使文本更接近背景颜色实际上有助于创建层次结构，而不是使其变为浅灰色。

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

1.降低白色文本的不透明度

使用白色文本并降低不透明度。这样可以使背景颜色稍微渗透，以不与背景冲突的方式去强调文本。

2.挑选基于背景颜色的颜色

当背景是图像或图案时，降低不透明度使文本感觉太钝或者太模糊，这时候挑选一种基于背景颜色的颜色比减少不透明度更好。

选择与背景色调相同的颜色，调整饱和度和亮度，直到它看起来正确。

•  •  •

3.合理使用投影

不使用较大的模糊值来加深框的投影，而是添加距离偏移量。

这样看起来更自然，因为它模拟了一个从上面照射下来的光源，就像我们以前在现实世界中看到的一样。

这适用于表格或者输入框的投影设计：

如果您有兴趣了解有关阴影设计的更多信息，那么“ Design Guidelines ”是一本非常棒的入门读物。

•  •  •

4.使用较少的边框

当你需要在两个元素之间作出区分时，尝试放弃使用边框。

虽然边框是区分两个元素的好方法，但它们并不是唯一的方法，使用太多边框可能会让您的设计感到拥挤和混乱。

当你需要作出区分时，请尝试以下其中一个想法：

1.使用框阴影

边框投影可以很好地勾勒出像边框一样的效果，并且可以使设计看起来更精细而又不会分散注意力。

2.使用两种不同的背景颜色

为相邻元素提供稍微不同的背景颜色可以作出很好的区分效果。如果您已经使用了除边框之外的其他背景颜色，请尝试删除边框; 你可能不需要它。

3.增加额外的间距

有什么更好的方法来区分元素而不是简单地增加分割线？不引入任何新UI元素的情况下，增加元素之间的距离是一种好方法。

•  •  •

5.尝试使用更小的图标

如果你正在设计一些页面（比如登陆页面的“功能”部分），通常会用到大图标，你可能会本能地抓住像Font Awesome或Zondicons这样的免费图标集，然后提升尺寸直到满足需求。

毕竟它们是矢量图像，所以如果增加尺寸，画质不会受到影响。

虽然矢量图像在增加尺寸时不会降低质量，但是当你将它们放大到3倍或4倍时，以16-24px绘制的图标看起来会非常不专业。它们缺乏细节，给人感觉是不成比例的“矮胖”。

如果你一定要用到小图标，那请尝试将它们包含在另一个形状中并为该形状附上背景颜色：

这使你可以用实际图标获得更好的效果，同时仍然占据较大的空间。

如果你有预算，你还可以使用设计用于较大尺寸的高级图标集，例如Heroicons或Iconic。

•  •  •

6.使用一些边框为平淡的设计增添色彩

如果你不是一名平面设计师，你如何在你的用户界面中添加装饰元素使其更加突出和富有设计感？

一个可以产生重大影响的简单技巧是为界面的某些部分添加彩色边框，会为设计加分。

例如，在警报消息的旁边：

…或在突出显示的导航中：

……甚至是在整个布局的顶部：

它不需要任何专业的设计师来专门设计，一个简单的小技巧就可以为你的网站增加设计感。

如果你觉得挑选颜色很难？那可以尝试从Dribbble上借鉴好作品的颜色组合，你会发现挑选颜色真的很轻松。

•  •  •

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

当用户可以在页面上执行多个操作时，很容易陷入纯粹基于语义设计这些操作的陷阱。

像Bootstrap这样通过为你提供一个基于语义的按钮样式菜单，上面的按钮，都是可以被点击执行的：

“对于鼓励用户积极点击的按钮，将其设为绿色。“

“对于删除数据这样的危险动作，将按钮设为红色。“

语义是按钮设计的一个重要部分，但是有一个更更要多维度：层次结构。

页面上的每个操作都位于金字塔的某个位置。大多数页面只有一个真正的主要动作，一些不太重要的次要动作，以及一些很少使用的三级动作。

在设计这些操作时，要注意区分它们在层次结构中的位置。

• 主要行动应该是明显的。运用高对比度的背景色会很有效。
• 次要行动应该清楚但不突出。轮廓样式或较低对比度的背景颜色是很好的选择。
• 三级行动应该是可发现的，但不引人注目。像链接一样设置通常是最好的方法。
• 

“负面动作，他们不应该总是红色的吗？”

∗不必要！如果负面动作不是页面上的主要操作，则最好按二级或三级按钮处理。

当然，如果负面操作实际上是界面中的主要操作时，也可以将按钮设置为红色和粗体样式，就类似下图的对话框一样：