旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 行業(yè)資訊 > UI設(shè)計(jì)師大牛們都在跟隨這些趨勢設(shè)計(jì)網(wǎng)頁

UI設(shè)計(jì)師大牛們都在跟隨這些趨勢設(shè)計(jì)網(wǎng)頁

時間:2018-03-01來源:lb577.com點(diǎn)擊量:作者:馬晨皓
時間:2018-03-01點(diǎn)擊量:作者:馬晨皓

1、無視邊界的文本元素

在很長的一段時間當(dāng)中,設(shè)計(jì)師會讓每一個元素都井井有條地置于各自的區(qū)間當(dāng)中。但是現(xiàn)在,設(shè)計(jì)師開始讓元素走出邊界。

橫跨多區(qū)塊的元素看起來似乎有點(diǎn)過于自由,但是在實(shí)際的設(shè)計(jì)作品當(dāng)中,效果還是頗為有趣的。尤其是橫跨多區(qū)塊的文本元素,視覺效果很是突出。

所以,現(xiàn)在所呈現(xiàn)出來的設(shè)計(jì)趨勢,是讓文本元素橫跨背景圖層、圖片和其他的區(qū)塊,就像下面的 Tradewinds 這個網(wǎng)站。

在目前我們所看到的設(shè)計(jì)作品當(dāng)中,橫跨多區(qū)域的文本可以是任何大小,形態(tài),角度,但是它們通常需要和背景的內(nèi)容都構(gòu)成足夠的對比,才能確保良好的可讀性。在下面的案例當(dāng)中,文本可以橫向展示,也可以縱向排布。

這種設(shè)計(jì)背后所隱藏的思維方式,是使用超出用戶預(yù)期的元素來引起用戶的注意,這樣是為什么設(shè)計(jì)師會在這個地方采用展示性較強(qiáng)的字體。

為了讓這些文本真正發(fā)揮作用,在網(wǎng)頁當(dāng)中,這些文本通常是作為單獨(dú)的圖層而存在。文本所用的字體在具備展示性的特征的同時,還應(yīng)該具備足夠好的可識別性。為了避免復(fù)雜的設(shè)計(jì)讓人難以獲取信息,盡量采用簡單的布局。



 

2、超大的視覺元素

超大的視覺元素并不新鮮,但是將日常生活中通常并不大的元素放大,鋪滿屏幕,就很有戲劇感了。

這種設(shè)計(jì)是一種很有趣的手法,需要設(shè)計(jì)師運(yùn)用細(xì)節(jié)豐富的高清大圖。

想要讓這樣的設(shè)計(jì)足夠突出,設(shè)計(jì)師需要在圖片素材的選取上慧眼獨(dú)具。如果有人告訴你,用一只眼睛或者一張嘴巴將整個屏幕填滿,你認(rèn)為這樣的設(shè)計(jì)會不會成功?首先,這樣的設(shè)計(jì)通常是讓人意想不到的,如果在整體設(shè)計(jì)上足夠原創(chuàng),加上特定的品牌烙印,能夠形成足夠有力的視覺傳達(dá)能力。

當(dāng)然,將日常生活中的小尺寸的元素放大到整個屏幕,視覺平衡是需要仔細(xì)控制的。它們通常需要足夠的空間和留白,來確保它們看起來不是那么奇怪,或者過于刺激。Westward Leaning 這個網(wǎng)站在眼鏡元素的周圍采用了大量的留白來平衡視覺,F(xiàn)amoustache 這個網(wǎng)站則采用了明亮的色彩和有趣的排版來平衡浮動的胡子,而DTSi 這個網(wǎng)站則用大量的半透明的幾何元素來軟化背景的眼睛。

想讓這些超大的視覺元素具有足夠的視覺沖擊力,一定要確保圖片質(zhì)量,在屏幕上要確保像素完美,銳度和焦點(diǎn)都要能夠確保。最好是高清的圖片和視頻,甚至是矢量的素材,即使是最簡單的眼鏡,也要確保它的刻畫是足夠清晰銳利的,不會讓用戶感到不適。



 

3、空心圖形

近年來,設(shè)計(jì)師對于幾何形狀的偏好明顯更多了。無論是圖形疊加還是多邊形圖案,這幾個月各種以圖形為中心的設(shè)計(jì)并不鮮見。而現(xiàn)在,設(shè)計(jì)師們似乎更加青睞空心圖形的運(yùn)用。

無論是作為LOGO,圖標(biāo)還是幾何圖形,空心的圖形都是頗為有趣的設(shè)計(jì)元素。一般而言,它們都比較簡單,比如 Bruderl 網(wǎng)站中的空心幾何體,但是同時它也充當(dāng)著引導(dǎo)視覺的標(biāo)記。而在另外一個網(wǎng)站 BorderFree 當(dāng)中,空心圖形則作為圖標(biāo)來使用,不過細(xì)節(jié)會比普通的更多一些。

無論從哪個角度上來看,空心圖形都很有趣,以它們?yōu)楹诵膩韯?chuàng)造視覺焦點(diǎn),擁有足夠的形式感,能賦予品牌以更明顯的特色,創(chuàng)造獨(dú)特而令人難忘的視覺體驗(yàn)。

為了讓整個空心圖形更突出,可以適當(dāng)?shù)刈屝螤钸吘壐駥?shí)一些,和背景的對比更明顯一些,讓它在視覺上足夠突出。

真正讓空心圖形脫穎而出的,是獨(dú)特的形狀,所以設(shè)計(jì)師應(yīng)該合理地控制前后景的對比,和整個設(shè)計(jì)的平衡,吸引用戶的注意力。



 

結(jié)語

就像我們在開頭所說的那樣,打破規(guī)則,并且盡量只打破一個規(guī)則,就能通過明顯的失衡的設(shè)計(jì),來創(chuàng)造令人難忘的設(shè)計(jì),這種策略是有效的,至少我們所看到的這些趨勢就是沿用這樣的方法來做的。


 

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ lb577.com 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖