兄弟门，今天给大家来点干的快速，是提升我在做 UI 设计过程当中经常用的武器之一 ，也就是精致技巧降噪降噪 ，降噪分为颜色降噪 、实用元素降噪
、超多排版降噪 这三剑客
，案例而每一种降噪又分为两种方式，快速所有今天的提升大纲如下：

接下来咱们进入正题：

到底什么是降噪 ，简单来说其实就是实用减少画面中的干扰因素
，以达到突出重点 ，超多聚焦内容的案例效果。

颜色降噪 、快速元素降噪 、排版降噪 ，我们依次来聊聊：

一、颜色降噪

1. 颜色数量降噪

举个例子 ，在下方的画面中，我们无法判断哪个位置是重点，因为到处都是抢眼的颜色：

当我们把大部分的彩色替换为无彩色后：

这时，就可以很明确的区分出中间的红色是视觉重点。因为其他的颜色都被弱化了，干扰项减少了。

说实话 ，很多领域 、很多作品都是通过单一色相结合黑白灰来体现高级感：

甚至是只有黑白灰：

但是大部分初级设计师 ，总喜欢无限制的加入颜色
，使界面看起来嘈杂无章 。

所以菜心在界面设计的时候就经常使用到颜色降噪，常用的做法是在界面中融入大量的无彩色来替代杂乱的彩色 。以同学的界面作业为例：

卡片中各处都有黄色，仔细看签到的前三天已经完成的状态了，所以可以考虑对这部分进行颜色降噪 。

把黄色小卡片换成灰色之后 ，这部分信息弱化下去 ，相对来说就不会这么抢占注意力了：

我们再来看下这位同学的界面作业 
：

中间的卡片到处都是颜色 ，各处都吸引视线 ：

优化的过程中，把占据大面积的卡片从彩色换成了白色，另外把彩色的图标也去掉了。干扰的颜色减少之后，整个界面清爽多了，信息层级也变得更清晰：

我们再来看下页面的整体优化前后效果 ，一目了然：

2. 颜色浓度降噪

除了对颜色数量进行降噪以外 ，对单色也可以使用降噪
。

先来看下这张图：我们会发现，相同色相中 ，高饱和度的颜色会比低饱和度的颜色更吸引眼球 。

以同学的作业为例 ：

后方的暗部颜色非常抢眼 ，原因就是暗部使用了高饱和度的颜色。

在展示作品的时候，我们更需要突出主体亮出、光源处。在这个案例中 ，应该强调的是正面的光源处内容，暗部的饱和度太高
，会导致画面没有主次之分，想要突出的部分没有突出出来。

暗部的饱和度降下去之后，层次是不是就区分开了，前面亮部更加突出
，暗部降下去，这就是颜色浓度的降噪。

以上就是分享的颜色降噪。我们接下来讲讲元素降噪吧！

二、元素降噪

1. 元素数量降噪

为了丰富画面
，我们有时候会在主体物周围添加一些小元素进行装饰，但一不小心就容易把元素加的很琐碎
。其实有一个很好的解决思路，就是减少元素的数量。

举个例子 ：

图中主体物周围的元素很多，而且面积很小，就很容易产生琐碎的感觉。

当我们把元素的数量减少 ，并且对他们进行放大之后，画面会显得更加整洁，没那么多干扰，而且很搭配：

不然你的画面中主元素贼大，辅助元素贼小，还一堆一堆的，肯定不搭 ，我们再看一遍这个不搭的感觉：

来个实际案例吧，以同学的等级徽章作业为例 ：

在优化前，我们会发现 ，在徽章各处散落了很多小元素，显得很碎 ：

在优化的过程中，适量的把周围的元素减少了 ，并且把留下的元素放大
，画面就变得饱满和整洁了很多 ：

有时候，你把一个元素整精致了 ，比你整几十个琐碎不精致的元素要强很多！

2. 元素密度降噪

单个的元素 ，甚至小到图标，也是可以做降噪的。

举个例子，这是我们常见到的「发现」图标，这个图标最烦人的就是这个环绕的椭圆，因为那里比较繁琐，所以显得密集不透气 ，也正是这个原因
，其实我们是可以给他进行降噪的  ：

如果我们减少一个线条的局部 ，图标是不是变得更有风格，并且变得更透气了一些？

这就是我们说的元素密度降噪，在元素密集的部分 ，对单一物体进行降噪处理 。

以同学的图标作业为例：

可以发现除了第一个「地图」内部的线条是闭合的以外，其他的图标都是开放的线条 
。

优化的过程中 ，把「地图」内部的线条减少了一部分 ，做了断开 ：

现在我们再来看，图标整体的风格更统一了
，而且「地图」内部也更透气了 ，这就是单一元素进行密度降噪处理之后的效果  ，老好使了：

以上就是元素降噪。除了颜色和元素降噪之外 ，还有排版的降噪。我们接着往下看。

三
、排版降噪

1. 排版形式降噪

主要是指对图形样式做减法处理，以达到降噪的目的 。

举个例子 ：画面中的辅助元素
，各种形状都有，导致排版没有办法做的很工整。

当我们把所有形状统一成矩形之后 ，排版变得整齐 、统一了 ：

放到其他的排版例子中看下
：

用户名下方的标签形状各异  ，整体样式过多。我们可以通过统一标签的形状
，对排版进行形式降噪。

标签样式统一了之后，排版变得更加规整和统一了
，之前的标签有纯文字的，有带底图的，有带底图还带图形的 ，如果让他们统一都在一个容器底图中，虽然没办法完全统一，但至少在某个维度里进行了统一，看起来也会更加工整
：

大家在做排版的时候，形式降噪真的非常好用，大家都可以去尝试尝试！

2. 排版面积降噪

把画面中那些不重要的内容面积减少 
，也是常用的一种降噪方式。

当重要信息和次要信息的面积占比相同时 ，信息层级是很容易被混淆，这就是变相对用户产生了一种干扰 ，因为用户分不清楚哪个是重要的！

当我们有了面积的区分之后 ，层级信息就能被非常清晰的区分开来，用户也就知道哪里更加重要了，也就是我们所说的降噪了：

我们拿一个实际的案例具体说说 ，这是最近做的一个长图的需求，优化前的版本是这样的：

图中大标题、副标题和正文占据的面积都是差不多的，这就导致所有信息都很平均 
，层级不清晰，看下图红色区域你就知道了：

这时我们把层级高的面积放大 ，层级低的面积缩小，层级清晰了 ，阅读的体验感也会更好。

其实这就是细节 
，面积降噪的细节，把不重要的面积适当缩小，改突出的适当放大，不仅只是信息的合理性 ，美观度上也会有所提升  。

再举一个我们在日常工作中常见的例子：

我们来思考一下，排版中真的需要这么明显的两条直线吗 ？相比文字内容，直线肯定是没有这么重要的 
。很多同学做排版的时候就是这样的 ，是真的 ！

我们可以先减少线条的长度（也算是面积），然后再把黑色弱化：

排版瞬间变得精致不少。

好了 ，差不多了，今天的分享就先到这里了，如果大家觉得有帮助，评论给我打打气，如果反响好，我会持续出这种干货文章，把我脑子里的东西全都掏给大家，哈哈。

大家也可以收藏起来多看几遍，一定要多多实践才有用哦！

记住，这是《菜心 UI 通用武器库-降噪之三剑客》，后续要不要更新，就看大家的反响啦
！

作者：菜心设计铺