編者按:這是 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ù)。
在設(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)。
為了讓漸變看起來更加舒適,我們可以從同一個(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ì)作為靈感來源。
這個(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ì)讓人愛不釋手!
全站高品質(zhì)素材免費(fèi)下載!