兄弟門，今天給大家來點干的，是我在做 UI 設(shè)計過程當(dāng)中經(jīng)常用的武器之一，也就是降噪，降噪分為顏色降噪、元素降噪、排版降噪 這三劍客，而每一種降噪又分為兩種方式，所有今天的大綱如下：

接下來咱們進入正題：

到底什么是降噪，簡單來說其實就是減少畫面中的干擾因素，以達到突出重點，聚焦內(nèi)容的效果。

顏色降噪、元素降噪、排版降噪，我們依次來聊聊：

一、顏色降噪

1. 顏色數(shù)量降噪

舉個例子，在下方的畫面中，我們無法判斷哪個位置是重點，因為到處都是搶眼的顏色：

當(dāng)我們把大部分的彩色替換為無彩色后：

這時，就可以很明確的區(qū)分出中間的紅色是視覺重點。因為其他的顏色都被弱化了，干擾項減少了。

說實話，很多領(lǐng)域、很多作品都是通過單一色相結(jié)合黑白灰來體現(xiàn)高級感：

甚至是只有黑白灰：

但是大部分初級設(shè)計師，總喜歡無限制的加入顏色，使界面看起來嘈雜無章。

所以菜心在界面設(shè)計的時候就經(jīng)常使用到顏色降噪，常用的做法是在界面中融入大量的無彩色來替代雜亂的彩色。以同學(xué)的界面作業(yè)為例：

卡片中各處都有黃色，仔細看簽到的前三天已經(jīng)完成的狀態(tài)了，所以可以考慮對這部分進行顏色降噪。

把黃色小卡片換成灰色之后，這部分信息弱化下去，相對來說就不會這么搶占注意力了：

我們再來看下這位同學(xué)的界面作業(yè)：

中間的卡片到處都是顏色，各處都吸引視線：

優(yōu)化的過程中，把占據(jù)大面積的卡片從彩色換成了白色，另外把彩色的圖標(biāo)也去掉了。干擾的顏色減少之后，整個界面清爽多了，信息層級也變得更清晰：

我們再來看下頁面的整體優(yōu)化前后效果，一目了然：

2. 顏色濃度降噪

除了對顏色數(shù)量進行降噪以外，對單色也可以使用降噪。

先來看下這張圖：我們會發(fā)現(xiàn)，相同色相中，高飽和度的顏色會比低飽和度的顏色更吸引眼球。

以同學(xué)的作業(yè)為例：

后方的暗部顏色非常搶眼，原因就是暗部使用了高飽和度的顏色。

在展示作品的時候，我們更需要突出主體亮出、光源處。在這個案例中，應(yīng)該強調(diào)的是正面的光源處內(nèi)容，暗部的飽和度太高，會導(dǎo)致畫面沒有主次之分，想要突出的部分沒有突出出來。

暗部的飽和度降下去之后，層次是不是就區(qū)分開了，前面亮部更加突出，暗部降下去，這就是顏色濃度的降噪。

以上就是分享的顏色降噪。我們接下來講講元素降噪吧！

二、元素降噪

1. 元素數(shù)量降噪

為了豐富畫面，我們有時候會在主體物周圍添加一些小元素進行裝飾，但一不小心就容易把元素加的很瑣碎。其實有一個很好的解決思路，就是減少元素的數(shù)量。

舉個例子：

圖中主體物周圍的元素很多，而且面積很小，就很容易產(chǎn)生瑣碎的感覺。

當(dāng)我們把元素的數(shù)量減少，并且對他們進行放大之后，畫面會顯得更加整潔，沒那么多干擾，而且很搭配：

不然你的畫面中主元素賊大，輔助元素賊小，還一堆一堆的，肯定不搭，我們再看一遍這個不搭的感覺：

來個實際案例吧，以同學(xué)的等級徽章作業(yè)為例：

在優(yōu)化前，我們會發(fā)現(xiàn)，在徽章各處散落了很多小元素，顯得很碎：

在優(yōu)化的過程中，適量的把周圍的元素減少了，并且把留下的元素放大，畫面就變得飽滿和整潔了很多：

有時候，你把一個元素整精致了，比你整幾十個瑣碎不精致的元素要強很多！

2. 元素密度降噪

單個的元素，甚至小到圖標(biāo)，也是可以做降噪的。

舉個例子，這是我們常見到的「發(fā)現(xiàn)」圖標(biāo)，這個圖標(biāo)最煩人的就是這個環(huán)繞的橢圓，因為那里比較繁瑣，所以顯得密集不透氣，也正是這個原因，其實我們是可以給他進行降噪的：

如果我們減少一個線條的局部，圖標(biāo)是不是變得更有風(fēng)格，并且變得更透氣了一些？

這就是我們說的元素密度降噪，在元素密集的部分，對單一物體進行降噪處理。

以同學(xué)的圖標(biāo)作業(yè)為例：

可以發(fā)現(xiàn)除了第一個「地圖」內(nèi)部的線條是閉合的以外，其他的圖標(biāo)都是開放的線條。

優(yōu)化的過程中，把「地圖」內(nèi)部的線條減少了一部分，做了斷開：

現(xiàn)在我們再來看，圖標(biāo)整體的風(fēng)格更統(tǒng)一了，而且「地圖」內(nèi)部也更透氣了，這就是單一元素進行密度降噪處理之后的效果，老好使了：

以上就是元素降噪。除了顏色和元素降噪之外，還有排版的降噪。我們接著往下看。

三、排版降噪

1. 排版形式降噪

主要是指對圖形樣式做減法處理，以達到降噪的目的。

舉個例子：畫面中的輔助元素，各種形狀都有，導(dǎo)致排版沒有辦法做的很工整。

當(dāng)我們把所有形狀統(tǒng)一成矩形之后，排版變得整齊、統(tǒng)一了：

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

用戶名下方的標(biāo)簽形狀各異，整體樣式過多。我們可以通過統(tǒng)一標(biāo)簽的形狀，對排版進行形式降噪。

標(biāo)簽樣式統(tǒng)一了之后，排版變得更加規(guī)整和統(tǒng)一了，之前的標(biāo)簽有純文字的，有帶底圖的，有帶底圖還帶圖形的，如果讓他們統(tǒng)一都在一個容器底圖中，雖然沒辦法完全統(tǒng)一，但至少在某個維度里進行了統(tǒng)一，看起來也會更加工整：

大家在做排版的時候，形式降噪真的非常好用，大家都可以去嘗試嘗試！

2. 排版面積降噪

把畫面中那些不重要的內(nèi)容面積減少，也是常用的一種降噪方式。

當(dāng)重要信息和次要信息的面積占比相同時，信息層級是很容易被混淆，這就是變相對用戶產(chǎn)生了一種干擾，因為用戶分不清楚哪個是重要的！

當(dāng)我們有了面積的區(qū)分之后，層級信息就能被非常清晰的區(qū)分開來，用戶也就知道哪里更加重要了，也就是我們所說的降噪了：

我們拿一個實際的案例具體說說，這是最近做的一個長圖的需求，優(yōu)化前的版本是這樣的：

圖中大標(biāo)題、副標(biāo)題和正文占據(jù)的面積都是差不多的，這就導(dǎo)致所有信息都很平均，層級不清晰，看下圖紅色區(qū)域你就知道了：

這時我們把層級高的面積放大，層級低的面積縮小，層級清晰了，閱讀的體驗感也會更好。

其實這就是細節(jié)，面積降噪的細節(jié)，把不重要的面積適當(dāng)縮小，改突出的適當(dāng)放大，不僅只是信息的合理性，美觀度上也會有所提升。

再舉一個我們在日常工作中常見的例子：

我們來思考一下，排版中真的需要這么明顯的兩條直線嗎？相比文字內(nèi)容，直線肯定是沒有這么重要的。很多同學(xué)做排版的時候就是這樣的，是真的！

我們可以先減少線條的長度（也算是面積），然后再把黑色弱化：

排版瞬間變得精致不少。

好了，差不多了，今天的分享就先到這里了，如果大家覺得有幫助，評論給我打打氣，如果反響好，我會持續(xù)出這種干貨文章，把我腦子里的東西全都掏給大家，哈哈。

大家也可以收藏起來多看幾遍，一定要多多實踐才有用哦！

記住，這是《菜心 UI 通用武器庫-降噪之三劍客》，后續(xù)要不要更新，就看大家的反響啦！

歡迎關(guān)注作者的微信公眾號：「菜心設(shè)計鋪」