現(xiàn)場(chǎng)照片、Cinemagraph、動(dòng)畫(huà)等，對(duì)于網(wǎng)站設(shè)計(jì)來(lái)說(shuō)，這個(gè)趨勢(shì)有太多不同的名字，主視覺(jué)圖的影響和使用，好像正在以一種微妙的方式一直存在并發(fā)展著。

      事實(shí)上，它不是一張照片，但也不是一段視頻。通過(guò)設(shè)計(jì)技巧，將運(yùn)限制在圖像上的某一個(gè)動(dòng)作上，可以很容易吸引用戶的注意力，并將其注意力集中在圖像上。不管你怎么稱呼它，這種趨勢(shì)在網(wǎng)頁(yè)設(shè)計(jì)、可分享的gif和社交媒體上都產(chǎn)生了影響。

1.趨勢(shì)的發(fā)展

      我們很難確定這種“活動(dòng)的”照片的創(chuàng)意具體是從哪里開(kāi)始的，但你可能會(huì)知道Apple的產(chǎn)品讓它更受歡迎。在包括iPhone等產(chǎn)品的功能和特點(diǎn)的相關(guān)簡(jiǎn)介頁(yè)面的攝影作品中，你經(jīng)常會(huì)看到這種趨勢(shì)的使用。網(wǎng)站設(shè)計(jì)上“活動(dòng)的”照片具有同樣的概念，或許有點(diǎn)不同的是，網(wǎng)站中的圖像中往往會(huì)有一些額外的信息讓你看得更久一點(diǎn)。

      這種趨勢(shì)的概念已經(jīng)開(kāi)始出現(xiàn)在更多不同的領(lǐng)域。比如，在數(shù)字化廣告牌上，看似靜止的廣告中，經(jīng)常會(huì)出現(xiàn)一個(gè)眨眼睛的人。

      為什么要使用這種技術(shù)？其實(shí)目的很簡(jiǎn)單，它可以使用戶的注意力更持久，并提供一個(gè)更有趣的視覺(jué)參考點(diǎn)。Flixel是一家專門(mén)為客戶制作cinemagraph圖像的公司，根據(jù)他們所統(tǒng)計(jì)的數(shù)據(jù)顯示，使用這種設(shè)計(jì)趨勢(shì)所輸出的照片能讓用戶的注意力保持在9秒，相比之下，靜止的圖像的時(shí)間僅僅為1秒。

2.圖片或插圖

      “活動(dòng)的”圖像或cinemagraphs圖可以使用照片或插圖。這里并沒(méi)有規(guī)定說(shuō)你只能使用一種類型的圖像?？纯瓷厦娴膬蓮垐D片，你可以看到，任何一種風(fēng)格都是非常有效的。

      另一個(gè)需要考慮的是，運(yùn)動(dòng)并不一定要一直循環(huán)發(fā)生。在上面的Hillmann Living網(wǎng)頁(yè)設(shè)計(jì)中，主頁(yè)上的一部分產(chǎn)品上具有運(yùn)動(dòng)的投射光。這是該圖片上唯一一個(gè)運(yùn)動(dòng)的元素，除去這個(gè)元素，照片就是靜止的照片。你可以看到這里的效果很好，它讓你直接關(guān)注到該公司正在銷售的椅子，該技術(shù)向用戶展示了頁(yè)面上的內(nèi)容，通過(guò)一種微妙而有趣的方式。

      Bar Z Wines在其網(wǎng)站設(shè)計(jì)中采取了另一種方法。在最初的初始階段，僅有一個(gè)插圖的主頁(yè)看起來(lái)很簡(jiǎn)單，但是你會(huì)看到一架小飛機(jī)在屏幕的頂部中央飛行。該運(yùn)動(dòng)有助于引導(dǎo)用戶查看屏幕上的重要信息:“我們的葡萄酒未經(jīng)過(guò)濾?！庇脩赳R上就知道了這個(gè)網(wǎng)站上的信息，因?yàn)樗麄儽晃阶钪匾男畔⑸稀?/span>

3.使用技巧

      這種技術(shù)可以通過(guò)多種方法和多種設(shè)計(jì)應(yīng)用來(lái)發(fā)揮它的作用。一些比較好的例子往往是來(lái)自那些簡(jiǎn)單的場(chǎng)景或風(fēng)景，其中，一張漂亮的照片是所有后續(xù)工作的起點(diǎn)。

      草可能會(huì)在風(fēng)或風(fēng)景中移動(dòng)、通過(guò)任務(wù)展示的時(shí)候可能會(huì)使用眨眼的動(dòng)作、產(chǎn)品可能會(huì)傾斜或旋轉(zhuǎn)或在一定時(shí)間段中完成設(shè)計(jì)的動(dòng)作。

      在考慮使用這種趨勢(shì)時(shí)，最重要的其實(shí)是你需要保持畫(huà)面足夠簡(jiǎn)單。如果你需要比較多的動(dòng)作，你最好還是選擇視頻。這項(xiàng)技巧令人驚訝的是——用戶可能在前期期望的是靜止的圖像，但咋實(shí)際看到它的時(shí)候它盡然是以“動(dòng)”的狀態(tài)展示。

      · 專注，你需要只針對(duì)某一個(gè)事情；

      · 它需要看起來(lái)很現(xiàn)實(shí)；

      · 運(yùn)動(dòng)需要遵循物理定律；

      · 運(yùn)動(dòng)應(yīng)該是微妙而明顯的；

      · 不要添加聲音或需要大量的點(diǎn)擊操作來(lái)完成；

      · 考慮使用微妙的用戶體驗(yàn)技巧，比如鼠標(biāo)滑動(dòng)或觸發(fā)的動(dòng)作；

      · 設(shè)計(jì)一個(gè)可以在多個(gè)活動(dòng)或主題中使用的移動(dòng)圖像，而不僅僅是你的網(wǎng)站。

4.你應(yīng)該怎么做

      在你的網(wǎng)站設(shè)計(jì)中有很多方法可以產(chǎn)生這種效果。

      創(chuàng)造微妙運(yùn)動(dòng)的一些技巧包括:

      · 創(chuàng)建一張GIF圖；

      · 使用在線工具(目前有很多軟件或應(yīng)用可以根據(jù)你不同的需求，提供不同的定制服務(wù)）；

      · 通過(guò)限制視頻的動(dòng)作來(lái)創(chuàng)建圖像；

      · 使用一個(gè)應(yīng)用程序，甚至是你的iPhone；

      · 以視頻格式將靜止圖像串在一起。

5.一個(gè)完美的例子

      Monochrome Paris的網(wǎng)站設(shè)計(jì)是這一趨勢(shì)的完美范例。在它的主頁(yè)上。你可以看到一個(gè)很簡(jiǎn)單的圖像，僵硬的元素幾乎看起來(lái)要融化了，并且你會(huì)看到在風(fēng)中移動(dòng)的面料。效果足夠引人注目，并吸引用戶參與到設(shè)計(jì)中。

      這種效果有助于以一種微妙的方式讓用戶產(chǎn)生興趣。因?yàn)檫\(yùn)動(dòng)，想象的視覺(jué)看起來(lái)更真實(shí)。

      這個(gè)網(wǎng)站是一個(gè)很好的案例研究，以有效的方式使用這一趨勢(shì)。

總結(jié)

      不管你怎么稱呼它，這種趨勢(shì)很可能會(huì)持續(xù)下去。這是一種將動(dòng)畫(huà)添加到網(wǎng)頁(yè)設(shè)計(jì)中而不必生成視頻的方法。它很有效，而且比視頻制作成本低很多。

      這一趨勢(shì)的訣竅在于確保它看起來(lái)是有意識(shí)的和真實(shí)的。加入一些毫無(wú)意義的運(yùn)動(dòng)并不一定會(huì)給你想要的效果?；剡^(guò)頭來(lái)看看上面的例子，看看這些動(dòng)畫(huà)會(huì)讓你在設(shè)計(jì)中得到什么。在每個(gè)示例中，運(yùn)動(dòng)可以幫助用戶獲得特定的元素或執(zhí)行特定的操作。這種有意和指引性的運(yùn)動(dòng)才是是有效的設(shè)計(jì)關(guān)鍵。