隨著技術(shù)和個(gè)性的需求不斷提升，動(dòng)態(tài)元素在網(wǎng)站設(shè)計(jì)中幾乎無(wú)處不在。從完整的視頻到微妙的動(dòng)畫(huà)，這些元素是激發(fā)用戶興趣和參與度的寶貴工具。它可以幫助你跟隨趨勢(shì)、吸引用戶注意力或?yàn)槟愕木W(wǎng)站提供更具品牌感的體驗(yàn)。
動(dòng)態(tài)主視覺(jué)元素幾乎是一個(gè)明顯的趨勢(shì)，但它的完成方式和成功程度存在很大差異。
今天，我們就來(lái)看看這個(gè)網(wǎng)站設(shè)計(jì)趨勢(shì)以及如何讓它可以更好的為你服務(wù)。
識(shí)別動(dòng)效主視覺(jué)元素設(shè)計(jì)趨勢(shì)（Identifying the Animated Hero Elements Design Trend）
這個(gè)其實(shí)很容易識(shí)別：任何在主視覺(jué)區(qū)域中包含動(dòng)畫(huà)元素的設(shè)計(jì)都很重要。這種動(dòng)態(tài)效果在范圍上可大可小，它可以是簡(jiǎn)單或復(fù)雜的，發(fā)生一次或循環(huán)播放。在線制作動(dòng)態(tài)效果有很多不同的方式。
你可能會(huì)看到這種趨勢(shì)元素的一些地方包括：
· 加載動(dòng)畫(huà)
· 動(dòng)態(tài)導(dǎo)航元素
· 視頻
· 動(dòng)畫(huà)插圖
· 文本運(yùn)動(dòng)或滾動(dòng)
· 動(dòng)畫(huà)懸停狀態(tài)
· 在屏幕上增加視覺(jué)趣味的元素
· 提供信息的動(dòng)畫(huà)（例如滾動(dòng)通知）
設(shè)計(jì)趨勢(shì)的關(guān)鍵特征（Key Characteristics of the Design Trend）
既然動(dòng)態(tài)主視覺(jué)元素最明顯的特點(diǎn)就是動(dòng)效，那我們就重點(diǎn)說(shuō)說(shuō)好的動(dòng)效的一些特點(diǎn)吧。
如果你遵循這些規(guī)則考慮，你將很快看到僅僅作為裝飾的動(dòng)態(tài)效果與作為設(shè)計(jì)的一部分服務(wù)于更大目的的動(dòng)效之間的區(qū)別。這也是這個(gè)趨勢(shì)能夠構(gòu)成良好且持久的網(wǎng)站設(shè)計(jì)趨勢(shì)的原因。
趨勢(shì)主要特征包括：
· 它需要講述一個(gè)故事或幫助用戶更好地理解設(shè)計(jì)。
· 它是可信的或感覺(jué)像是有目的的，過(guò)多的動(dòng)態(tài)效果會(huì)讓人頭暈?zāi)垦?，最好的感覺(jué)是真實(shí)的。
· 它不應(yīng)該影響設(shè)計(jì)的其余部分。如果用戶只看到動(dòng)效而忽略了其他內(nèi)容，那么他們不太可能按照你想要的方式進(jìn)行行動(dòng)。
· 它應(yīng)該幫助用戶與設(shè)計(jì)建立聯(lián)系并指引用戶做一些事情、更深入地探索或提供反饋。
· 它應(yīng)該讓用戶感到愉悅，并讓他們想要進(jìn)一步參與設(shè)計(jì)（點(diǎn)擊、滑動(dòng)或滾動(dòng)）。
動(dòng)效的類型（Types of Hero Animations）
作為這種設(shè)計(jì)趨勢(shì)的一部分，你可以期望找到和使用哪些類型的動(dòng)效呢？答案是一切。
最適合你的網(wǎng)站項(xiàng)目的類型完全取決于你可用的內(nèi)容和資產(chǎn)。動(dòng)效可以與其他趨勢(shì)設(shè)計(jì)元素結(jié)合或獨(dú)立使用。
動(dòng)效類型可能包括：
· 運(yùn)動(dòng)的形狀或幾何
· 滑塊或移動(dòng)圖像面板
· 插圖或卡通元素
· 增加微妙動(dòng)作的漂浮物
· 動(dòng)態(tài)圖像或插圖（電影）
· 加載元素
· 視頻
· 液體元素或斑點(diǎn)
· 懸停運(yùn)動(dòng)
· 反彈或方向狀態(tài)
你可能會(huì)從技術(shù)的角度來(lái)考慮動(dòng)效。通常你可以使用 HTML5、CSS、JavaScript 和 SVG 這些主流技術(shù)來(lái)完成。解決方案的類型完全取決于項(xiàng)目和所包含元素的類型。
使用此網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的提示（Tips for Using this Web Design Trend）
確保趨勢(shì)成功的一種主要方法是：有目的地設(shè)計(jì)和使用它。
這可能比聽(tīng)起來(lái)更困難，挑戰(zhàn)主要是因?yàn)閯?chuàng)建出色動(dòng)效的許多技巧是相互矛盾的。所以這就是你要做的，選擇其中一個(gè)技巧并使用它，有目的地創(chuàng)造。
· 創(chuàng)建讓用戶驚喜和愉悅的微妙動(dòng)畫(huà)
· 動(dòng)畫(huà)可以直接且大膽，讓用戶無(wú)法忽略
· 使用動(dòng)畫(huà)來(lái)做用戶期望的事情
· 將它們用于完整設(shè)計(jì)，以便網(wǎng)站的每個(gè)部分都包含動(dòng)畫(huà)元素
· 設(shè)計(jì)一個(gè)特定的動(dòng)畫(huà)元素以引起對(duì)設(shè)計(jì)或故事的某一部分的特別關(guān)注
3個(gè)我們喜歡的例子（3 Examples We Love）
動(dòng)效有很多種形式，挑選一些最喜歡的確實(shí)有點(diǎn)困難。不過(guò)，最核心的點(diǎn)在于使用的動(dòng)效元素應(yīng)該是柔和的，不會(huì)對(duì)用戶造成太多的困擾。以下是一些我們喜歡的示例。
Days
Days 有很多動(dòng)作效果，是一個(gè)幾乎隱藏在時(shí)髦設(shè)計(jì)中的電商類網(wǎng)站。簡(jiǎn)單的滑動(dòng)動(dòng)畫(huà)既有趣又引人注目，滑塊可以顯示多個(gè)產(chǎn)品并將你的注意力吸引到它們而不妨礙其他內(nèi)容。
Popcornopolis
這是最有趣的動(dòng)畫(huà)，爆米花在首次加載時(shí)會(huì)“彈出”到設(shè)計(jì)中。主視覺(jué)區(qū)域中的一個(gè)動(dòng)畫(huà)元素可以引起你的注意，然后剩余的一切都非常簡(jiǎn)單。這是一種非常有效的技術(shù)，尤其適用于對(duì)內(nèi)容的展現(xiàn)。
Idear Ideas
此設(shè)計(jì)中一個(gè)動(dòng)效元素具有兩種效果——分別發(fā)生和同時(shí)發(fā)生。隨著用戶進(jìn)入網(wǎng)站，這些字母與許多小點(diǎn)一起出現(xiàn)，元素之間仿佛具有磁性而相互吸引，然后字母破裂并以懸停狀態(tài)進(jìn)行重組。
總結(jié)
動(dòng)效主視覺(jué)元素正在成為設(shè)計(jì)項(xiàng)目的流行元素。但是，在技術(shù)上以及在可行的設(shè)計(jì)和失敗的設(shè)計(jì)之間存在很多差異。
和眾多設(shè)計(jì)趨勢(shì)一樣，恰到好處和過(guò)度之間可能僅僅只是一線之隔，你需要注意把握度，在處理這種設(shè)計(jì)趨勢(shì)時(shí)，反復(fù)測(cè)試和關(guān)注用戶反饋對(duì)于確保你的設(shè)計(jì)盡可能有效非常重要。
----圖文來(lái)自：design shack
----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理，為您提供更多有關(guān)深圳網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)