編者按：這是 UI 設(shè)計(jì)師 Diana Malewicz 的一篇 UI 界面設(shè)計(jì)的分享。怎樣在保證基本的可用性和易用性的同時(shí)，讓界面柔和、富有親和力？如何在讓用戶愉悅的同時(shí)，還能用設(shè)計(jì)取悅自己？Diana 的方法談不上有多神奇，但是讓人眼前一亮，值得借鑒。

真的關(guān)注趨勢(shì)變化，你會(huì)清晰的感受到，視覺效果和設(shè)計(jì)技巧一直在變……它們一直是設(shè)計(jì)師們的話題中心。但是這篇文章并不打算討論這個(gè)事兒，無論漸變是否流行，新擬物化的可訪問性是否不足，都不在今天的討論范圍內(nèi)。

對(duì)于各種風(fēng)格、方法，我的觀點(diǎn)始終是：做出來的設(shè)計(jì)要可用，有用，有良好的可訪問性，用戶可以輕松理解，就行了。不過，我更樂于從趨勢(shì)中獲得樂趣，而不是將它視作為約束，如果每個(gè)界面看起來都是一樣的，那該是一件多么無聊的事情啊。

關(guān)鍵在于，要讓產(chǎn)品的視覺樣式和你的用戶群體匹配起來。

我個(gè)人非常喜歡漂亮的漸變和微妙的陰影，這樣的設(shè)計(jì)常常顯得魅力非凡。這種自然的過渡和光影的變化，非常貼合我們對(duì)于現(xiàn)實(shí)世界的感知，這就是為什么這樣的設(shè)計(jì)能夠俘獲大量沒有技術(shù)背景的用戶的心——因?yàn)樗鼈兛雌饋碛押?，并且易于理解?/p>

在這篇文章當(dāng)中，我將分享如何將 UI 效果設(shè)計(jì)得出彩又友好，讓視覺效果柔和又讓人感覺舒適。本文圍繞著一個(gè)「面向年輕人的金融 APP」虛擬設(shè)計(jì)項(xiàng)目來進(jìn)行展示。

下面我們開始吧！

視覺層次的一致性

怎么讓我們的設(shè)計(jì)看起來柔和圓潤呢？下面開始準(zhǔn)備工作：

1、選擇想要使用的配色（想想使用柔和的粉彩構(gòu)成的背景主色調(diào)，搭配一個(gè)給人精致感的次要色，以及一個(gè)抓人注意力的強(qiáng)調(diào)色。）

2、選擇合理的字體（我用的是 Brandon Grotesque，這是我最喜歡的字體，它足夠友好，能夠營造有趣的氛圍，且具有良好的可讀性）。接下來，給字體設(shè)計(jì)不同大小和字重（最好不超過5種不同的樣式）。其中，標(biāo)題字體應(yīng)該較大，正文字體較小，最小的字體用于細(xì)節(jié)呈現(xiàn)。注意，盡量不要在長句子里面使用全大寫。

3、確定你所需要的陰影的高程（Height）和模糊度。

4、如果使用的是圖標(biāo)，確定使用填充樣式還是描邊樣式。盡量不要混用。

至此，一個(gè)小型的設(shè)計(jì)系統(tǒng)就已經(jīng)確定了。挺好看的！

下面我們繼續(xù)。

給UI元素營造柔和夢(mèng)幻的氛圍

在設(shè)計(jì)界面的時(shí)候注意，銳利的邊緣會(huì)讓界面看起來嚴(yán)肅而專業(yè)，圓角則會(huì)顯得充滿親和力。

自然彌散的陰影也會(huì)讓設(shè)計(jì)看起來足夠精巧，所以當(dāng)我們向元素添加陰影的時(shí)候，會(huì)強(qiáng)化視覺層次。不同的陰影效果，給人的「高程」上的感覺也不一樣。陰影較深的元素會(huì)顯得距離背景更近一些，陰影較淺，彌散范圍更大，則顯得高程更高，距離底部背景更遠(yuǎn)。這就是為什么很少會(huì)有元素產(chǎn)生較深的陰影，因?yàn)樘嗑蜁?huì)顯得不夠自然。

選擇元素并賦予它們以一定的模糊效果是一個(gè)需要不斷嘗試的過程。不過不要害怕，這就是一個(gè)調(diào)整參數(shù)的小游戲。下面是我設(shè)計(jì)界面的時(shí)候的一些參數(shù)設(shè)置。

如果要讓陰影看起來更加獨(dú)特，盡可能讓陰影和前景元素使用同色相的顏色，然后降低不透明度。理想情況下，背景也應(yīng)該有類似的色調(diào)。

讓漸變看起來更加平滑細(xì)膩

為了讓漸變看起來更加舒適，我們可以從同一個(gè)配色方案中選擇對(duì)比強(qiáng)烈的顏色，甚至也可以是同一色系的顏色，稍微調(diào)節(jié)一下它的亮度就可以了。然后重新拉伸一下漸變，讓顏色過渡變得更加平滑。雖然這樣的漸變幾乎看不清楚，但是元素看起來會(huì)有明顯的凹凸感。

對(duì)于白色的元素，你可以選取和背景相近的顏色來制作陰影，只要確保對(duì)比度，不會(huì)相融就可以了。

選擇和背景匹配的正確字體

在字體配色上，黑色和灰色是最經(jīng)典的選擇。但是如果要讓字體和整個(gè)設(shè)計(jì)在視覺上保持同一協(xié)調(diào)，你還需要往其中注入一些別的顏色，讓它和整體融合度更高。比如這里用的綠色的背景，那么可以在其中加入一點(diǎn)綠色的色調(diào)，這樣就協(xié)調(diào)了很多。

增加讓項(xiàng)目更具吸引力的細(xì)節(jié)元素

有些細(xì)節(jié)可能是沒有必要的。但是對(duì)我個(gè)人而言，我非常喜歡引人入勝的小細(xì)節(jié)，通過這些「額外」的設(shè)計(jì)細(xì)節(jié)，讓人感受到不一樣和愉悅感。

那么要加入什么樣的細(xì)節(jié)呢？

假設(shè)你的頁頭是一個(gè)沉悶單調(diào)的形狀，那么不妨讓它柔和一點(diǎn)，加一個(gè)小三角，然后它就變成了一個(gè)對(duì)話框氣泡，界面和用戶之間的對(duì)話感就產(chǎn)生了。

如果背景是單調(diào)的白色，可以加入一些更加富有娛樂性的底紋，它可以簡(jiǎn)約的圖標(biāo)，也可以是其他。你可以簡(jiǎn)單的復(fù)制粘貼同一個(gè)元素，調(diào)整大小和角度，只要不影響前景的可讀性即可。

感覺單純的數(shù)據(jù)展示很無聊？那么可以添加一些小圖標(biāo)，來進(jìn)行區(qū)分、說明和展示。

盡可能地讓你的界面看起來更加有趣、富有創(chuàng)意。如果你不知道要怎么辦，可以用現(xiàn)實(shí)生活中的物品或者設(shè)計(jì)作為靈感來源。

最后，調(diào)整用戶頭像的細(xì)節(jié)

這個(gè)步驟一般而言是完全沒有必要的……但是我每次都會(huì)在這件事情上花費(fèi)不少時(shí)間進(jìn)行調(diào)整，這可能是強(qiáng)迫癥吧。

我會(huì)給自己的樣機(jī)選擇一個(gè)足夠漂亮的用戶頭像，但是她的妝容和整個(gè) UI 界面的配色可能是不匹配的，這對(duì)于我這樣一個(gè)完美主義者而言是……難以接受的。所以我總會(huì)額外花費(fèi)一點(diǎn)時(shí)間來微調(diào)一下妝容來滿足我的「強(qiáng)迫癥」。比如這個(gè)案例當(dāng)中，我會(huì)從界面取色，將頭像中原本棕色的瞳孔微調(diào)成為綠色的「美瞳」，在頭像上新建一個(gè)圖層，借用 PS 的混合模式給瞳孔添加顏色（不透明度50%）。

?現(xiàn)在頭像終于完美了！

總而言之，UI界面設(shè)計(jì)的核心始終還是遵循一致性、可用性和良好的可訪問性。但是在遵循這些規(guī)則的前提之下，盡可能地發(fā)揮自己的想象力，創(chuàng)建讓自己也讓用戶感到欣喜的用戶體驗(yàn)，發(fā)揮創(chuàng)意，這樣的 UI 界面會(huì)讓人愛不釋手！