網(wǎng)站設(shè)計(jì)趨勢正在發(fā)展，以有趣的方式將現(xiàn)實(shí)的圖像與插圖和藝術(shù)元素混合在一起。 它古怪，獨(dú)特而美麗！


它是視覺元素的混合體，乍一看似乎并沒有融合在一起，但是如果處理得當(dāng)，可以創(chuàng)造出極富吸引力和令人愉悅的美感。

在這里，我們將研究這種設(shè)計(jì)趨勢的示例，以及將現(xiàn)實(shí)與插圖相結(jié)合以最大程度發(fā)揮作用的不同方式。 其中一些已經(jīng)使用于現(xiàn)實(shí)的網(wǎng)站設(shè)計(jì)之中，而另一些則完全寓教于樂。


1.卡式設(shè)計(jì)中的混合視覺元素（Mixing Visual Elements in Cards）



Greenhouse采用博客風(fēng)格的設(shè)計(jì)，每個(gè)內(nèi)容塊均使用卡式設(shè)計(jì)。 卡片中包含視覺元素——一些照片，一些插圖。

結(jié)果是內(nèi)容類型和視覺樣式的完美結(jié)合，使頁面新鮮有趣。 大膽的顏色使用使得插圖塊引人注目，幾乎迫使用戶滾動瀏覽內(nèi)容。

之所以可以這樣使用它，是因?yàn)樵摽蚣芎芎唵危一旌显厮坪跬昝榔ヅ洌瑫r(shí)為參與提供了充足的對比。


2.插圖疊加（Illustrated Overlays）



混搭現(xiàn)實(shí)主義和插圖的最簡單方法之一就是創(chuàng)建一個(gè)插圖覆蓋層。 它的工作原理幾乎就像在照片上使用徽標(biāo)一樣。

Malai將此技術(shù)與分屏設(shè)計(jì)結(jié)合使用（這也是一種非常時(shí)尚的元素）。 圖示的覆蓋層有助于將設(shè)計(jì)的兩側(cè)連接起來，從而創(chuàng)造出視覺流暢性和和諧感。

插圖盡管有些復(fù)雜，但是作為純白色的元素，感覺優(yōu)雅，不會妨礙設(shè)計(jì)。


3.3D效果（3D Effects）



越來越多的設(shè)計(jì)師正在一個(gè)介于現(xiàn)實(shí)和插圖之間的領(lǐng)域進(jìn)行實(shí)驗(yàn)。 Plink的整個(gè)設(shè)計(jì)中的三維元素看起來很真實(shí)。

插圖以真實(shí)的方式移動，它給你的感覺不像是一張簡單的圖像，而是你幾乎必須翻看的藝術(shù)品。

這種樣式是一種越來越流行的方式，用于顯示難以拍照或以其他方式在視覺上進(jìn)行描繪，而動畫元素可以幫助它增加用戶交互的機(jī)會。


4.并排照片與插圖（Photos and Illustrations Side-by-Side）



照片和插圖可在整個(gè)設(shè)計(jì)中一起用于框架中。 在這個(gè)設(shè)計(jì)趨勢的例子中，每種視覺形式都在“照片”框架或盒子中，并且以相同的方式處理，無論是圖片還是插圖。

這與上面的卡式設(shè)計(jì)示例非常相似，但又有不同之處。

Griflan很好地使用了這個(gè)概念，甚至使用了更多的照片插圖。 它創(chuàng)建了一個(gè)靈活的網(wǎng)站設(shè)計(jì)框架，可以在不完全重新設(shè)計(jì)的情況下快速更改圖像和插圖。


5.圖層與運(yùn)動（Layers and Motion）



插圖可能并不總是很明顯。 作為徽標(biāo)的一部分，或者在作為背景元素的情況下。插圖元素是一個(gè)很酷的鼠標(biāo)箭頭或懸停圓圈等，似乎在屏幕和圖像上跳動。

小型動畫通過簡單的首頁設(shè)計(jì)將所有內(nèi)容組合在一起。


6.“差不多”插圖（“Almost” Illustrations）



另一種流行的網(wǎng)站設(shè)計(jì)技巧是使用帶有元素的發(fā)光效果以引起注意。 將其與插圖背景結(jié)合使用，可獲得超越現(xiàn)實(shí)的效果。

Boda Borg用兩張?jiān)谌蝿?wù)主題插圖上來回“小故障”的家庭照片來做到這一點(diǎn)。 它既有趣又輕巧，絕對會讓你著眼于設(shè)計(jì)。


7.背景和前景層（Background and Foreground Layers）



混合照片和插圖可以很簡單。

Canneseries使用獎(jiǎng)杯的照片，看起來幾乎像是帶有背景插圖元素的插圖和帶有類似插圖的圖標(biāo)。

很難說出真實(shí)元素和插圖元素之間的區(qū)別，并且使用這種類型的設(shè)計(jì)方案完全可以。


8.簡單的插圖與圖像（Simple Illustration with Images）



將照片和插圖結(jié)合起來很簡單。 元素的設(shè)計(jì)應(yīng)有助于將用戶吸引到設(shè)計(jì)中，并提供有價(jià)值的信息以增強(qiáng)他們的體驗(yàn)。

Neueform使用的插圖可以吸引吸引用戶關(guān)注整個(gè)設(shè)計(jì)。 它就像是一個(gè)麥克風(fēng)，連接了設(shè)計(jì)和內(nèi)容。


9.主視覺元素（Hero Partners）



你可以將插圖或動畫與圖像一起使用，以創(chuàng)建一個(gè)酷炫的英雄圖像區(qū)域，從而打破標(biāo)準(zhǔn)的設(shè)計(jì)模式。 這是一種新的美學(xué)，它以新的方式使用了相同的空間和長寬比。

簡單的事情如破壞空間可以使整個(gè)設(shè)計(jì)在視覺上更有趣。 它通過破壞用戶的期望來達(dá)到正面的作用。

Mondial只是通過動畫來做到這一點(diǎn)——可能不是太多的插圖，而是很適當(dāng)?shù)模瑵L動連接到下面標(biāo)題的圖像。 憑借內(nèi)容塊的完美計(jì)時(shí)速度，它使你可以在繼續(xù)滾動之前瀏覽和閱讀每個(gè)不同的內(nèi)容。


10.結(jié)合成為一個(gè)元素（Combining in a Single Element）



結(jié)合真實(shí)的圖像和插圖來創(chuàng)建一個(gè)新的元素可能會令人驚嘆。

Constance Burke出色地做到了這一點(diǎn)，并且可能是你會發(fā)現(xiàn)的這種圖像風(fēng)格的最好例子之一。

經(jīng)過深思熟慮，可以執(zhí)行并完美匹配內(nèi)容，后者使它如此有效，使用趨勢可以使內(nèi)容更好。


11.細(xì)微的插圖（Subtle Illustrations）



你不必全力以赴使用這種趨勢。 視覺元素之一（圖像或插圖）可能非常微妙。

FourSeasonsHyrda在一個(gè)巨大的視覺圖內(nèi)使用了一個(gè)微妙的動人插圖，將其分層放置在視頻上以產(chǎn)生興趣。 這項(xiàng)技術(shù)特別有趣的是，它會創(chuàng)建額外的空白區(qū)域，以幫助吸引眼球，從而使你閱讀內(nèi)容。 顏色和對比度在這里也很重要。


總結(jié)

你是否認(rèn)為這些趨勢可以用于你的項(xiàng)目？ 訣竅是計(jì)劃元素之間如何相互作用。 現(xiàn)實(shí)主義和插圖必須交織在一起，以使效果具有意向性。