無極五平台註冊登錄_高手如何從零開始設計 UI 界面？這個實戰案例告訴你！

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

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

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

關鍵在於，要讓產品的視覺樣式和你的用戶群體匹配起來。

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

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

下面我們開始吧！

視覺層次的一致性

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

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

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

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

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

至此，一個小型的設計系統就已經確定了。挺好看的！

下面我們繼續。

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

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

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

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

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

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

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

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

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

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

增加讓項目更具吸引力的細節元素

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

那麼要加入什麼樣的細節呢？🤔

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

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

感覺單純的數據展示很無聊？那麼可以添加一些小圖標，來進行區分、說明和展示。

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

最後，調整用戶頭像的細節

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

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

現在頭像終於完美了！

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

相關文章推薦：

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五平台註冊登錄_高手如何從零開始設計 UI 界面？這個實戰案例告訴你！