前言

設(shè)計(jì)師在做UI設(shè)計(jì)時(shí)，或許你會(huì)碰到這些疑惑，為什么別人的設(shè)計(jì)看起來(lái)很舒服？整體看起來(lái)很高級(jí)，但是又具體不知道到底哪里高級(jí)，作為設(shè)計(jì)師，我們?cè)跐M足用戶需求的同時(shí)，還要滿足最基本的美觀度，只有兩者兼?zhèn)洳趴蛇_(dá)到真正的用戶體驗(yàn)設(shè)計(jì)，而恰恰美觀是仁者見(jiàn)仁智者見(jiàn)智的。

針對(duì)以上，總結(jié)了以下幾點(diǎn)，希望能給你帶來(lái)幫助和不一樣的思考。

1、識(shí)別度

在UI設(shè)計(jì)中，識(shí)別度是最基本也是最重要的一項(xiàng)，識(shí)別度的高低是徹底影響產(chǎn)品體驗(yàn)的。比如一個(gè)產(chǎn)品下載打開(kāi)以后發(fā)現(xiàn)文字太小，顏色太淺，內(nèi)容過(guò)于密集，瀏覽起來(lái)過(guò)于吃力，如果文字還不能高度定制化，那這個(gè)產(chǎn)品在用戶體驗(yàn)的維度上基本是失敗的案列。

以微信我的頁(yè)面為例，上圖左側(cè)的界面文字偏小，整體瀏覽起來(lái)略顯吃力，而右側(cè)的示例恰恰剛好。

當(dāng)然微信產(chǎn)品的文字大小是可以高度定制化的，這個(gè)功能基本覆蓋了微信的用戶群體，同時(shí)也避免了用戶的眾口難調(diào)。

可見(jiàn)，我們?cè)谠O(shè)計(jì)時(shí)就要盡量的去避免低識(shí)別度這一問(wèn)題，保證高識(shí)別度這一原則，要做到讓用戶一眼看清，快速和準(zhǔn)確的獲取信息。

好的UI設(shè)計(jì)原則之一，避免低識(shí)別度，保證高識(shí)別度。

2、對(duì)比原則

兩者或多者物體放在一起才能產(chǎn)生對(duì)比，如果想突出某一個(gè)物體，只需要對(duì)其單獨(dú)放大突出即可（突然背后一涼想起指點(diǎn)江山的大神，然后腦海里飄過(guò)放大，放大、加粗、要醒目）。 對(duì)比原則是設(shè)計(jì)中至關(guān)重要的，在UI設(shè)計(jì)中也不例外，如果你想讓一個(gè)信息突出，則需要對(duì)其放大突出。

以左側(cè)VUE為例，用戶的昵稱使用了小一號(hào)的字且顏色也淺一些，而用戶內(nèi)容的標(biāo)題則使用了文字大一號(hào)并且加粗顏色也深一些，這里產(chǎn)品是想突出內(nèi)容本身的標(biāo)題，所以標(biāo)題則是需要突出的。

右側(cè)的潮汐產(chǎn)品也正是如此，上圖紅框框住的主功能區(qū)域示意，選中后的功能和未選中的功能也有著大小和顏色深淺的區(qū)分。通過(guò)左劃右劃的交互形式來(lái)去切換主功能的方式還能降低用戶理解和學(xué)習(xí)成本。

好的UI設(shè)計(jì)原則之二，強(qiáng)化對(duì)比，突出主題。

3、呼吸感

隨著產(chǎn)品的商業(yè)戰(zhàn)略發(fā)展，越來(lái)越多的產(chǎn)品功能過(guò)于繁多，甚至不放過(guò)任何一個(gè)屏幕的角落，把用戶的視線大面積占據(jù)，大大忽視了用戶體驗(yàn)設(shè)計(jì)中的呼吸感。我們?cè)谧鯱I設(shè)計(jì)時(shí)，經(jīng)常會(huì)拿到雜亂無(wú)章的產(chǎn)品需求，這個(gè)時(shí)候，我們就要對(duì)功能和信息進(jìn)行拆解分類，在滿足功能的同時(shí)還要讓產(chǎn)品功能有層次和呼吸感，減少用戶對(duì)界面瀏覽過(guò)程的疲勞。

上圖左側(cè)App Store為例，標(biāo)題和產(chǎn)品本身的大面積結(jié)合的案列，突出產(chǎn)品名稱的同時(shí)也宣傳了產(chǎn)品圖片。圖文搭配的最高境界的就是讓產(chǎn)品要傳遞的信息傳達(dá)到極致。簡(jiǎn)潔不簡(jiǎn)單，很多時(shí)候并不需要任何花里胡哨的裝飾。貫穿這個(gè)設(shè)計(jì)形式會(huì)讓整體上下瀏覽起來(lái)具有很好的呼吸感。

上圖右側(cè)音街產(chǎn)品首頁(yè)的設(shè)計(jì)同樣是使用了結(jié)構(gòu)化功能分類，不同的產(chǎn)品模塊化結(jié)構(gòu)和視覺(jué)上的設(shè)計(jì)區(qū)分，大大增強(qiáng)了頁(yè)面瀏覽起來(lái)的呼吸感。

好的UI設(shè)計(jì)原則之三，保持設(shè)計(jì)的層次和呼吸感。

4、留白

留白是一門學(xué)問(wèn)，它可以讓你的世界不擁擠，做設(shè)計(jì)亦是如此，留白設(shè)計(jì)可以讓產(chǎn)品更高級(jí)，更具呼吸感，界面的張力會(huì)更突顯，傳遞的信息也會(huì)更為清晰。相反內(nèi)容冗雜無(wú)章的界面，會(huì)讓用戶找不到主次。

上圖左側(cè)夸克瀏覽器的產(chǎn)品設(shè)計(jì)，打開(kāi)后除了輸入框，不再有任何其他的元素，就連底部的Tab功能文字也去掉了，把留白用到了極致，令人過(guò)目難忘。右側(cè)潮汐產(chǎn)品亦是如此，整體簡(jiǎn)潔沉靜舒適。

好的UI設(shè)計(jì)原則之四，讓適當(dāng)?shù)牧舭装l(fā)揮產(chǎn)品張力。

5、降噪

在設(shè)計(jì)中降噪其實(shí)就是把多余的裝飾物簡(jiǎn)化，甚至去掉。不同的產(chǎn)品屬性也意味著產(chǎn)品的視覺(jué)形式是不一致的，UI設(shè)計(jì)的本質(zhì)是讓信息傳達(dá)和功能傳遞足夠清晰。所以，并不是你的設(shè)計(jì)增加了很多花哨的效果就意味著是適合的。

繼續(xù)以潮汐產(chǎn)品為例，頂部的標(biāo)題下方還有一處二級(jí)標(biāo)題，但利用了降噪原則后，雖然標(biāo)題信息有兩層，最后的效果并不會(huì)讓人感覺(jué)凌亂無(wú)層次。右側(cè)微信讀書(shū)產(chǎn)品我的頁(yè)面，也沒(méi)有任何線或者其他花哨的設(shè)計(jì)，整體設(shè)計(jì)是以圓角區(qū)塊去區(qū)分功能和功能之間的相近關(guān)系。

好的UI設(shè)計(jì)原則之五，避免多余的裝飾，讓設(shè)計(jì)降噪。

6、靜中有動(dòng)

在UI設(shè)計(jì)中，動(dòng)效目的通常是為了突出某一項(xiàng)功能或者某項(xiàng)物體，在靜態(tài)的頁(yè)面中加入少量的動(dòng)態(tài)效果，可以讓設(shè)計(jì)更加出彩。

以躺平產(chǎn)品為例，系統(tǒng)通知的動(dòng)效讓系統(tǒng)通知這一功能更靈動(dòng)，更易被用戶注意到。在靜態(tài)的頁(yè)面中增加微小的動(dòng)畫(huà)，可以讓枯燥的頁(yè)面更加富有趣味性。當(dāng)然，類似的產(chǎn)品還有很多，暫不一一舉例。

好的UI設(shè)計(jì)原則之六，動(dòng)靜結(jié)合，靜中有動(dòng)。

小結(jié)

好的優(yōu)秀的產(chǎn)品設(shè)計(jì)，在具備美觀的同時(shí)一定要是滿足目標(biāo)用戶群體需求的。文中的案列分析和總結(jié)都是以實(shí)際產(chǎn)品來(lái)分析舉例，拋磚引玉，歡迎小伙伴們一起交流探討。

作者：Vinli維恩