对于网页设计，有时候不仅仅是UI设计师的任务，有时候还可能是Web开发人员的任务，因此这篇文章将除了适合学UI的同学阅读，还适合研究H5的同学。

有时候，在进行网页设计时，很容易就陷入了设计的瓶颈，尤其是当自己的设计被一次又一次的打回，而自己痛苦地在电脑桌前表示，“我永远都不能让这看起来很好！”但事实证明，你可以用很多技巧来提升你的工作水平。

这里就有7个方法，改善你的设计

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

样式UI文本的一个常见错误是过分依赖字体大小来控制层次结构。很多都会有这样的思路

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

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

“这个文字很重要吗？让它更粗点。”“这个文字是次要的吗？让它更浅点。”

尝试并坚持两种或三种颜色：主要内容的深色（但不是黑色）（如文章标题）；二级内容的灰色（如文章发布日期）；辅助内容的浅灰色（可能是页脚中的版权声明）

同样，两个字体权重通常足以用于UI工作：大多数文本的正常字体粗细（400或500，具体取决于字体）；要强调的文本较重的字体粗细（600或700）

在设计中，避免使用400以下的字体粗细; 它们可以用于大标题，但是在较小的尺寸下会变得难以阅读。如果你正在考虑使用较细的字体来减弱某些文本，请使用较浅的颜色或较小的字体大小。

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

在白色背景上，使文本变成浅灰色是强调它的好方法，但这个颜色的字体在彩色背景上看起来并不那么友好。那是因为我们实际上在白色背景上看到灰色字体的会产生降低对比度的效果。而使文本更接近背景颜色实际上有助于创建层次结构，而不是使其变为浅灰色。

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

1.减少白色文本的不透明度

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

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

当背景是图像或图案时，或者当降低不透明度使文本感觉太钝或褪色时，这比减少不透明度更好。

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

改善阴影的样式

不使用较大的模糊和展开值来使框阴影更明显，而是添加垂直偏移。它看起来更自然，因为它模拟了一个从上面照射下来的光源，就像我们以前在现实世界中看到的一样。

这适用于您可能在井或表格输入上使用的插入阴影：

使用较少的边框

当你需要分离两个元素时，尝试避免突然看到边框。虽然边框是区分两个元素的好方法，但它们不是唯一的方法，使用太多边框可能会让你的设计感到繁杂和混乱。

当你下次需要解决方法时时，请尝试以下其中一个想法：

1.使用box shadow

box shadow可以很好地实现像边框元素那样的功能，但也可以更精细，并且实现相同的目的而不会分散注意力。

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

通常只需要为相邻元素提供略微不同的背景颜色即可区分它们。如果您已经使用了除边框之外的其他背景颜色，请尝试删除边框; 你可能不需要它。

3.增加额外的间距

有什么更好的方法来分离元素，而不只是简单地隔开？将事物间隔得更远是不引入任何新UI的情况下创建元素组之间区别的好方法。

不要放大那些小图标

如果你正在设计一些可以使用一些大图标的东西（比如登陆页面的“功能”部分），你可能会本能地使用免费图标集，然后放大尺寸直到满足你的需求。但是它们是矢量图像，如果增加尺寸，难道质量不会受到影响吗？

虽然矢量图像在增加尺寸时不会降低质量，但在16-24px处绘制的图标在将它们放大到原本尺寸的3倍或4倍时会看起来非常不专业。因为这些图缺乏细节，总有种不成比例的“矮胖”。

如果你有小图标，请尝试将它们包含在另一个形状中，并为形状提供背景颜色：

这使您可以使实际图标更接近其预期大小，同时仍然可以填充更大的空间。如果您有预算，您还可以使用设计用于较大尺寸的高级图标集，当然是要钱的那种。

用有色彩的重点边框改善平淡的设计

如果你不是一名平面设计师，你如何在你的设计中添加那些从美丽的摄影或彩色插图中获得的视觉效果？一个可以产生重大影响的简单技巧是为界面的某些部分添加色彩鲜艳的边框，否则会感觉有点乏味。

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

或突出显示活动导航项：

甚至在整个布局的顶部：

它不需要任何图形设计人才来为您的UI添加彩色矩形，它可以大大有助于使您的w88更“设计”。

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

当用户可以在页面上执行多个操作时，很容易陷入纯粹基于语义设计这些操作的陷阱。无论何时添加新按钮，都可以选择：

“这是一个积极的行动吗？将按钮设为绿色。““这会删除数据吗？将按钮设为红色。“

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

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

在设计这些操作时，在层次结构中传达它们的位置非常重要。

主要行动应该是明显的。坚固，高对比度的背景色在这里工作得很好。次要行动应该清楚但不突出。轮廓样式或较低对比度的背景颜色是很好的选择。三级行动应该是可发现的，但不引人注目。像链接一样设置这些操作通常是最好的方法。

“破坏性的行动怎么样，他们不应该总是变红吗？”

不必要！如果破坏性操作不是页面上的主要操作，则最好给它进行二级或三级按钮处理。

最重要的是保存大，红色和粗体样式，以便当负面操作实际上是界面中的主要操作时，就像在确认对话框中一样：

这7个方法希望对你以后的工作以及学习有帮助，希望同学们可以设计出自己满意，领导满意，甲方满意的作品。

另外，我们最新一期的UI精英班将在10月11日正式开班哟~

文章来源：medium.com

作者：Adam Wathan & Steve Schoger

翻译：源宝