对于网页设计，有时候不仅仅是UI设计师的任务，有时候还可能是Web开发人员的任务，因此这篇文章将除了适合学UI的同学阅读，还适合研究H5的同学。有时候，在进行网页设计时，很容易就陷入了设计的瓶颈，尤其是当自己的设计被一次又一次的打回，而自己痛苦地在电脑桌前表示，“我永远都不能让这看起来很好！”但事实证明，你可以用很多技巧来提升你的工作水平。

使用颜色和粗细来创建层次结构而不是大小，样式UI文本的一个常见错误是过分依赖字体大小来控制层次结构。很多都会有这样的思路，尝试并坚持两种或三种颜色：主要内容的深色（但不是黑色）（如文章标题）；二级内容的灰色（如文章发布日期）；辅助内容的浅灰色（可能是页脚中的版权声明）同样，两个字体权重通常足以用于UI工作：大多数文本的正常字体粗细（400或500，具体取决于字体）；要强调的文本较重的字体粗细（600或700）。

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

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

使用彩色背景时，有两种方法可以降低对比度：
1.减少白色文本的不透明度
使用白色文本并降低不透明度。这样可以让背景颜色稍微渗透，以不与背景冲突的方式去强调文本。
2.手工挑选基于背景颜色的颜色
当背景是图像或图案时，或者当降低不透明度使文本感觉太钝或褪色时，这比减少不透明度更好。
选择与背景颜色相同的颜色，调整饱和度和亮度，直到它看起来正确。

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

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

1.使用box shadow
box shadow可以很好地实现像边框元素那样的功能，但也可以更精细，并且实现相同的目的而不会分散注意力。
2.使用两种不同的背景颜色
通常只需要为相邻元素提供略微不同的背景颜色即可区分它们。如果您已经使用了除边框之外的其他背景颜色，请尝试删除边框; 你可能不需要它。
3.增加额外的间距
有什么更好的方法来分离元素，而不只是简单地隔开？将事物间隔得更远是不引入任何新UI的情况下创建元素组之间区别的好方法。

不要放大那些小图标
如果你正在设计一些可以使用一些大图标的东西（比如登陆页面的“功能”部分），你可能会本能地使用免费图标集，然后放大尺寸直到满足你的需求。但是它们是矢量图像，如果增加尺寸，难道质量不会受到影响吗？虽然矢量图像在增加尺寸时不会降低质量，但在16-24px处绘制的图标在将它们放大到原本尺寸的3倍或4倍时会看起来非常不专业。因为这些图缺乏细节，总有种不成比例的“矮胖”。
这使您可以使实际图标更接近其预期大小，同时仍然可以填充更大的空间。如果您有预算，您还可以使用设计用于较大尺寸的高级图标集，当然是要钱的那种。

用有色彩的重点边框改善平淡的设计
如果你不是一名平面设计师，你如何在你的设计中添加那些从美丽的摄影或彩色插图中获得的视觉效果？一个可以产生重大影响的简单技巧是为界面的某些部分添加色彩鲜艳的边框，否则会感觉有点乏味。
它不需要任何图形设计人才来为您的UI添加彩色矩形，它可以大大有助于使您的网站更“设计”。并非每个按钮都需要背景颜色，当用户可以在页面上执行多个操作时，很容易陷入纯粹基于语义设计这些操作的陷阱。无论何时添加新按钮，都可以选择：语义是按钮设计的一个重要部分，但是有一个更常见的重要维度：层次结构。