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

接下來(lái)咱們進(jìn)入正題：

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

顏色降噪、元素降噪、排版降噪，我們依次來(lái)聊聊：

一、顏色降噪

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

舉個(gè)例子，在下方的畫面中，我們無(wú)法判斷哪個(gè)位置是重點(diǎn)，因?yàn)榈教幎际菗屟鄣念伾?/p>

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

這時(shí)，就可以很明確的區(qū)分出中間的紅色是視覺(jué)重點(diǎn)。因?yàn)槠渌念伾急蝗趸?，干擾項(xiàng)減少了。

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

甚至是只有黑白灰：

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

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

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

把黃色小卡片換成灰色之后，這部分信息弱化下去，相對(duì)來(lái)說(shuō)就不會(huì)這么搶占注意力了：

我們?cè)賮?lái)看下這位同學(xué)的界面作業(yè)：

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

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

我們?cè)賮?lái)看下頁(yè)面的整體優(yōu)化前后效果，一目了然：

2. 顏色濃度降噪

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

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

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

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

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

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

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

二、元素降噪

1. 元素?cái)?shù)量降噪

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

舉個(gè)例子：

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

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

不然你的畫面中主元素賊大，輔助元素賊小，還一堆一堆的，肯定不搭，我們?cè)倏匆槐檫@個(gè)不搭的感覺(jué)：

來(lái)個(gè)實(shí)際案例吧，以同學(xué)的等級(jí)徽章作業(yè)為例：

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

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

有時(shí)候，你把一個(gè)元素整精致了，比你整幾十個(gè)瑣碎不精致的元素要強(qiáng)很多！

2. 元素密度降噪

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

舉個(gè)例子，這是我們常見(jiàn)到的「發(fā)現(xiàn)」圖標(biāo)，這個(gè)圖標(biāo)最煩人的就是這個(gè)環(huán)繞的橢圓，因?yàn)槟抢锉容^繁瑣，所以顯得密集不透氣，也正是這個(gè)原因，其實(shí)我們是可以給他進(jìn)行降噪的：

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

這就是我們說(shuō)的元素密度降噪，在元素密集的部分，對(duì)單一物體進(jìn)行降噪處理。

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

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

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

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

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

三、排版降噪

1. 排版形式降噪

主要是指對(duì)圖形樣式做減法處理，以達(dá)到降噪的目的。

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

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

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

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

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

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

2. 排版面積降噪

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

當(dāng)重要信息和次要信息的面積占比相同時(shí)，信息層級(jí)是很容易被混淆，這就是變相對(duì)用戶產(chǎn)生了一種干擾，因?yàn)橛脩舴植磺宄膫€(gè)是重要的！

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

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

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

這時(shí)我們把層級(jí)高的面積放大，層級(jí)低的面積縮小，層級(jí)清晰了，閱讀的體驗(yàn)感也會(huì)更好。

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

再舉一個(gè)我們?cè)谌粘９ぷ髦谐Ｒ?jiàn)的例子：

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

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

排版瞬間變得精致不少。

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

大家也可以收藏起來(lái)多看幾遍，一定要多多實(shí)踐才有用哦！

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

作者：菜心設(shè)計(jì)鋪