UI界面設計

如何設計更加友好和一致性的app界面？

3190

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

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

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

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

我個人非常喜歡漂亮的漸變和微妙的陰影，這樣的設計常常顯得魅力非凡。這種自然的過渡和光影的變化，非常貼合我們對于現(xiàn)實世界的感知，這就是為什么這樣的設計能夠俘獲大量沒有技術背景的用戶的心——因為它們看起來友好，并且易于理解。

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

下面我們開始吧！

視覺層次的一致性

怎么讓我們的設計看起來柔和圓潤呢？下面開始準備工作：

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

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

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

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

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

下面我們繼續(xù)。

給UI元素營造柔和夢幻的氛圍

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

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

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

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

讓漸變看起來更加平滑細膩

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

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

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

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

增加讓項目更具吸引力的細節(jié)元素

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

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

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

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

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

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

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

這個步驟一般而言是完全沒有必要的……但是我每次都會在這件事情上花費不少時間進行調(diào)整，這可能是強迫癥吧。

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