故障藝術(shù)始于2017年，當(dāng)時(shí)網(wǎng)站設(shè)計(jì)設(shè)計(jì)師們開(kāi)始嘗試小故障效應(yīng)。使用隨處可見(jiàn)，在視頻、動(dòng)畫，當(dāng)然還有圖片里都有這種效果。這種效果完美地融入了一股懷舊浪潮，席卷了虛擬世界和現(xiàn)實(shí)世界。

如今，“故障藝術(shù)效應(yīng)”的受歡迎程度正在下降，但它成功地為另一種時(shí)髦的解決方案賦予了生命力：圖像顯示中的失真，它每天都受到網(wǎng)站設(shè)計(jì)師們的歡迎。

這種方法非常普遍，雖然乍一看這似乎是另一個(gè)豐富幻燈片之間轉(zhuǎn)換的聰明想法，但它也可以與網(wǎng)站設(shè)計(jì)界面的各種細(xì)節(jié)相匹配。即使是一個(gè)簡(jiǎn)單的靜態(tài)圖像塊也可以從中受益。

讓我們看一些例子，這些例子顯示了這種新的趨勢(shì)。

Yuen Ye

雖然在我們的理解中它沒(méi)有傳統(tǒng)的失真效果，但是在這里圖像仍然是變形的。這位藝術(shù)家成功地實(shí)現(xiàn)了一種逼真的窗簾效果，當(dāng)你向下滾動(dòng)時(shí)，網(wǎng)站設(shè)計(jì)畫面會(huì)在風(fēng)中飄動(dòng)。

在如此適度的環(huán)境和最小的設(shè)計(jì)中，效果簡(jiǎn)直閃耀，它使整個(gè)網(wǎng)站設(shè)計(jì)看起來(lái)非常精致，非常出色。

Dallara Stradale

沒(méi)有人能說(shuō)達(dá)拉拉·斯特拉代爾的官方宣傳網(wǎng)站很無(wú)聊，該網(wǎng)站設(shè)計(jì)是一個(gè)真正的杰作，就像意大利團(tuán)隊(duì)創(chuàng)建的汽車。它充滿了創(chuàng)新的特點(diǎn)，以滿足產(chǎn)品本身的意識(shí)形態(tài)。

所以在這里，每個(gè)細(xì)節(jié)都很重要，這并不令人驚訝。每一個(gè)方面都是現(xiàn)代和時(shí)尚的。隨著主頁(yè)上主要部分之間的每一次移動(dòng)，都會(huì)產(chǎn)生奇妙的圖像失真效果，就像手套一樣。

它將簡(jiǎn)單的滾動(dòng)轉(zhuǎn)換為一種性能，給每個(gè)區(qū)域一個(gè)戲劇性的入口。更重要的是，由于它的模糊，它自然模仿的速度感也是達(dá)拉拉斯特拉代爾的一個(gè)特點(diǎn)。

行星

而在前一個(gè)例子中，速度感是過(guò)渡效果的核心，而在這里，一種時(shí)髦的液體效果試圖以其流動(dòng)的性質(zhì)贏得用戶。通常情況下，這里的圖像失真效果用于主屏幕旋轉(zhuǎn)木馬。

而不是惱人的滑動(dòng)效果，我們可以享受一個(gè)可愛(ài)的過(guò)渡與平穩(wěn)的自然和魅力，給每一個(gè)場(chǎng)景的變化一個(gè)轉(zhuǎn)折。更重要的是，這種效應(yīng)也符合該機(jī)構(gòu)的招牌——加強(qiáng)外星高科技大氣。

馬克斯·柯?tīng)柼?/strong>

Max Colt是世界知名的視覺(jué)效果生產(chǎn)商，其個(gè)人作品集也有失真效果。就像在《行星》中一樣，它改善了旋轉(zhuǎn)木馬中描述藝術(shù)家最令人印象深刻的作品的幻燈片之間的轉(zhuǎn)換。它有同樣的魅力，由于它的水啟發(fā)的性質(zhì)，但它看起來(lái)有點(diǎn)不同，相比行星的解決方案。

Bizmates

這個(gè)網(wǎng)站與我們收藏的其他網(wǎng)站形成了驚人的對(duì)比，這要?dú)w功于它基于幾何形狀的失真效果。其他的例子圍繞著扭曲圖像的漣漪效應(yīng)。在這里，相對(duì)較寬的垂直面板和菱形變形的場(chǎng)景表面。

該解決方案與整體四四方方的氛圍完美契合，做出了重要貢獻(xiàn)。

1MD

在我們的綜述中，1MD是第一個(gè)失真效應(yīng)不伴隨任何移動(dòng)的例子。它只是在主頁(yè)上顯示的一個(gè)部分中使用，將其與其他部分區(qū)分開(kāi)來(lái)。

它不僅是動(dòng)畫背景的一部分，也是給中間的標(biāo)語(yǔ)增添一些情趣的媒介。因此，該部分是鼓舞人心的，而導(dǎo)致“關(guān)于我們”頁(yè)面的行動(dòng)呼吁看起來(lái)是可點(diǎn)擊的和誘人的。

精確運(yùn)行

Precision Run背后的團(tuán)隊(duì)也采取了類似的路線。然而，這一次，他們使用這個(gè)時(shí)髦的解決方案，使一個(gè)簡(jiǎn)單的靜態(tài)圖片引人注目。

這里的主頁(yè)包括復(fù)古元素，如雙色調(diào)。巧妙地搭配雙曝光的失真效果為整個(gè)界面增添了一種美妙的懷舊感。它完美地配合了網(wǎng)站上的一切，有效地將圖片置于聚光燈下。

Sass Cafe

Sass Cafe背后的團(tuán)隊(duì)展示了一種從失真效果中獲益的不同方法，他們結(jié)合了掩蔽和鼠標(biāo)交互的效果，將英雄區(qū)域變成了一個(gè)游樂(lè)場(chǎng)。

一開(kāi)始，一幅干凈的黑色畫布上有兩條醒目的標(biāo)語(yǔ)迎接著在線觀眾。如果你開(kāi)始移動(dòng)光標(biāo)，你會(huì)注意到有東西隱藏在里面。有兩個(gè)背景圖像。當(dāng)你把鼠標(biāo)懸停在標(biāo)語(yǔ)上方時(shí)，每一個(gè)都會(huì)成為焦點(diǎn)。剩下的時(shí)間里，這幅畫一直變形嚴(yán)重。

這個(gè)解決方案從一開(kāi)始就激起了人們的興趣。這真是個(gè)好主意。

艾達(dá)科爾

阿達(dá)索科爾的個(gè)人投資組合也有一個(gè)特點(diǎn)，就是很少有擺弄圖像顯示的傾向。這是我們的集合中的另一個(gè)示例，它脫離了通常的常用路徑，并與鼠標(biāo)光標(biāo)一起使用。

您可能已經(jīng)注意到，hero區(qū)域包含了代表藝術(shù)家作品的多個(gè)標(biāo)題。每個(gè)標(biāo)題都由將鼠標(biāo)懸停在其上時(shí)出現(xiàn)的圖片支持。

在本例中，當(dāng)您移動(dòng)光標(biāo)時(shí)，圖片會(huì)留下扭曲圖形的痕跡。它會(huì)提醒顯卡缺乏必要的帶寬，無(wú)法跟上用戶移動(dòng)的速度。這個(gè)原始的解決方案自然鼓勵(lì)我們玩網(wǎng)站，從而讓我們停留一段時(shí)間。

添加意想不到的轉(zhuǎn)折

標(biāo)準(zhǔn)的圖像效果仍然很受歡迎，但你必須承認(rèn)，它們已經(jīng)失去了一個(gè)令人滿意的“哇”因素。借助磨損嚴(yán)重的滑動(dòng)或彈跳來(lái)吸引注意力變得越來(lái)越具有挑戰(zhàn)性。

因此，開(kāi)發(fā)人員總是試圖想出一些新的東西來(lái)保持他們的網(wǎng)站的吸引力，這并不奇怪。而過(guò)去可以避免的臭名昭著的失真效應(yīng)，現(xiàn)在卻挽救了局面。

盡管該解決方案意味著變形和扭曲的外觀，它仍然是相當(dāng)普遍的。它與各種細(xì)節(jié)配合得很好。但從中受益的不只是滑塊。

實(shí)踐表明，該技術(shù)與基于鼠標(biāo)光標(biāo)交互和常規(guī)滾動(dòng)的解決方案完美協(xié)作。這種效果讓網(wǎng)站設(shè)計(jì)中普通的東西看起來(lái)清新、鼓舞人心。