UI設(shè)計(jì)大師告訴你適用性超棒的3個(gè)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

很多時(shí)候，設(shè)計(jì)趨勢(shì)并不會(huì)表現(xiàn)的那么明顯，甚至你看到它們也不一定會(huì)注意到。但是它們也是客觀存在的。通過(guò)整個(gè)一月份的觀察和總結(jié)，我們認(rèn)為接下來(lái)的一個(gè)月當(dāng)中，圓形元素、分屏式布局和深色背景+淺色文本會(huì)成為流行的網(wǎng)頁(yè)設(shè)計(jì)元素。

這些元素看起來(lái)都挺常用的，不過(guò)當(dāng)大家開(kāi)始扎堆用的時(shí)候，就以“趨勢(shì)”的形式體現(xiàn)出來(lái)了。

 

1、圓形元素

從形狀心理學(xué)的角度來(lái)看，圓形和環(huán)形有著完整、和諧的心理學(xué)特征，在很多不同的場(chǎng)合，它常常會(huì)拿來(lái)傳達(dá)愛(ài)情、能量的意象。

在 Material Design 的規(guī)范中，圓形按鈕被大規(guī)模運(yùn)用，并且由此開(kāi)始，圓形在UI設(shè)計(jì)中開(kāi)始承擔(dān)越來(lái)越多的責(zé)任。

不過(guò)，由于絕大多數(shù)的屏幕和畫(huà)布大都是矩形的，圓形元素通常不會(huì)貼邊使用，也避免了在布局進(jìn)行響應(yīng)式變化的過(guò)程中，圓形元素的扭曲和形變。下面的案例當(dāng)中，圓形元素都被很好的運(yùn)用起來(lái)，布局保持著良好的流動(dòng)性。

KymberleeJay 這個(gè)網(wǎng)頁(yè)使用圓形元素來(lái)承載首頁(yè)的主要文案，背景圖片中的女性人物的目光則起到了不錯(cuò)的視覺(jué)引導(dǎo)作用。

Buddha Pizza 這個(gè)頁(yè)面則讓文字構(gòu)成圓環(huán)，圍繞這批薩，創(chuàng)造出獨(dú)特的視覺(jué)奇觀。

Hotel Poispois 這個(gè)頁(yè)面則使用浮動(dòng)的圓形來(lái)提升視覺(jué)，它們也可以被視作為巨大的按鈕，將用戶(hù)導(dǎo)向不同的頁(yè)面。

2、分屏式設(shè)計(jì)

分屏式設(shè)計(jì)很有意思，它流行一陣子之后銷(xiāo)聲匿跡，然后又回歸，來(lái)來(lái)去去好幾回。最近這一設(shè)計(jì)趨勢(shì)又回歸了，這一次回歸的分屏式設(shè)計(jì)看起來(lái)更加大膽，細(xì)節(jié)的搭配上則更加微妙。

分屏式設(shè)計(jì)的好處在于，它可以更好地呈現(xiàn)響應(yīng)式的設(shè)計(jì)，在桌面上左右分屏，在移動(dòng)端上上下疊加。無(wú)論怎么呈現(xiàn)，用戶(hù)都不會(huì)因?yàn)檫@種設(shè)計(jì)而錯(cuò)過(guò)任何的信息。

分屏式設(shè)計(jì)之下，一個(gè)屏幕同時(shí)展示兩塊不同的內(nèi)容，也讓不同的內(nèi)容和元素有了對(duì)等的展示空間。

分屏式設(shè)計(jì)讓用戶(hù)能夠自主控制交互，讓他們面對(duì)不同的內(nèi)容的時(shí)候能夠選擇自己喜歡的內(nèi)容和方式來(lái)操作。

Taco Bill 的網(wǎng)站就是一個(gè)很好的例子，當(dāng)你打開(kāi)網(wǎng)站的時(shí)候，設(shè)計(jì)師就為用戶(hù)提出了兩個(gè)問(wèn)題：你是想打包帶走事物，還是預(yù)訂之后在餐廳里吃？通過(guò)分屏的方式，用戶(hù)有了兩個(gè)不同的選擇。分屏式的設(shè)計(jì)讓用戶(hù)的選擇更加直觀、可視化。

Nikos Pandazaras 的作品集網(wǎng)站則選擇了截然不同的設(shè)計(jì)思路。他將導(dǎo)航置于屏幕的中間，而攝影作品則左右各一并排放置，兩者的重要性無(wú)疑是對(duì)等的，用戶(hù)可以同時(shí)看到兩幅不同的作品，屏幕的利用率倒是挺高的。

D’Aucy 在進(jìn)行分屏設(shè)計(jì)的時(shí)候，選擇了更加微妙的策略。左側(cè)僅有圖片，搭配著有紋理的背景；右側(cè)的背景選擇了近似的色彩卻沒(méi)有加上紋理，僅有文本標(biāo)題。兩者在保持近似一致的視覺(jué)設(shè)計(jì)的同時(shí)，又巧妙地呈現(xiàn)出差異性。

3、深色背景+淺色文本

深色背景+淺色文本是一個(gè)相對(duì)經(jīng)典的組合。不過(guò)最新的玩法和之前的略有不同，許多設(shè)計(jì)師在深色的背景之下，加入了動(dòng)效和視頻。

無(wú)論加入的視頻或者動(dòng)效是顯著的還是微妙，它們都很好地吸引了用戶(hù)的注意力，增加了視覺(jué)上的愉悅感。比如 Top Estates 和 Bullying and Behavior 這兩個(gè)網(wǎng)站，均是采用了相對(duì)微妙的背景動(dòng)效。

白色的文本讓整個(gè)設(shè)計(jì)的信息對(duì)比度有了保證，甚至讓內(nèi)容顯得鮮明而突出。通常保持靜態(tài)的文本和背景中深色的動(dòng)效和視頻構(gòu)成了動(dòng)靜對(duì)比，使得這些網(wǎng)頁(yè)在體驗(yàn)上顯得非常有感覺(jué)。

背景顯得越黑暗，整體所營(yíng)造出的神秘感就越明顯。較深的背景也增加了整體的可讀性，背景中的動(dòng)態(tài)元素則很好的營(yíng)造了氛圍和情緒。

這樣的設(shè)計(jì)看起來(lái)并不復(fù)雜，但是其中所蘊(yùn)含的信息量一點(diǎn)都不比其他的設(shè)計(jì)方案來(lái)的少。

結(jié)語(yǔ)

這次所總結(jié)的三種設(shè)計(jì)趨勢(shì)擁有著良好的適用性，在幾乎任何設(shè)計(jì)項(xiàng)目當(dāng)中都可以適當(dāng)?shù)厝谌脒M(jìn)去。無(wú)論是進(jìn)行網(wǎng)頁(yè)重設(shè)計(jì)，還是開(kāi)始全新的設(shè)計(jì)項(xiàng)目，這些設(shè)計(jì)趨勢(shì)都可以試著運(yùn)用進(jìn)去。當(dāng)然，首先最重要的，始終是你的設(shè)計(jì)目標(biāo)是什么。