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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

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

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

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

下面我們開始吧!

視覺層次的一致性

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

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

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

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

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

下面我們繼續。

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

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

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

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

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

那么要加入什么樣的細節呢??

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

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

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

最后,調整用戶頭像的細節

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

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

高手如何從零開始設計 UI 界面?這個實戰案例告訴你!

?現在頭像終于完美了!

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

相關文章推薦:

 

點贊 40
收藏 111
繼續閱讀相關文章

發表評論 已發布 10

還可以輸入 800 個字
 
 
載入中....
10 收藏