現(xiàn)代風(fēng)盛行的網(wǎng)頁設(shè)計圈中，不少設(shè)計師會傾向于用動態(tài)、抽象的元素來為頁面渲染出富有科技和未來感的氛圍。在這其中，飄散的粒子動效是比較常見也頗受歡迎的一種元素，而今天我們要聊的就是這種設(shè)計元素。
有的網(wǎng)頁會在頁面背景上散亂分布著點或者小而簡單的幾何圖形，配合著各不相同的背景，粒子動態(tài)效果所呈現(xiàn)出來的類型和樣式非常之多。它們還可以是一大堆凌動的小球，扁平的圓環(huán)，還可以一組來回穿梭的小三角形，等等等等。在動效上，這些粒子的運動軌跡的差別也是千差萬別的，它們有的可能會與用戶的操作產(chǎn)生聯(lián)動，隨著鼠標(biāo)指針運動，震顫，舞蹈。然而它們依然有很明顯的共同點：通過這些粒子的動效來為整個頁面營造出動態(tài)、活潑和科技感十足的氛圍。
單調(diào)的語言不足以呈現(xiàn)這些粒子動效的獨到之處，我們一起來看看案例吧。
黑色的極簡風(fēng)背景是這些粒子動效的舞臺，粒子每隔幾秒會打散重組出新的圖案，并且搭配上相應(yīng)的文案，并且粒子本身會隨著鼠標(biāo)的移動而進行恰如其分的偏移，不僅讓用戶充滿了參與感，而且動態(tài)的展示方式讓信息的展現(xiàn)更有厚度。
這是一個星球大戰(zhàn)主題相關(guān)的網(wǎng)站，意為“分享原力”。整個網(wǎng)站的設(shè)計非常貼合星戰(zhàn)的主題，加入了許多宇宙相關(guān)的設(shè)計元素，背景中的粒子動效更是強化了這種環(huán)境的動感和氣氛。
開發(fā)者讓移動的粒子構(gòu)成了一個環(huán)形，并讓它們順滑地運動著，漂亮的漸變效果讓整個背景加分不少。環(huán)形運動的粒子動效讓用戶將注意力集中到中間的文字上，這使得動效的功能性強化了不少。
復(fù)雜的立體幾何圖形和運動的粒子組合到一起，充滿了韻律感。整個動效豐富了頁面的細(xì)節(jié)，讓它看起來一點都不單調(diào)，也增強了趣味性。
這個壯麗而又專業(yè)的粒子動效將NYCIG 馬拉松的逼格提升到了一個全新的高度，這種壯闊的場景會讓用戶非常難忘的。
粒子動效在這個網(wǎng)站中不僅充作背景，同時也是用戶交互的對象，它會構(gòu)成一個隧道隨著鼠標(biāo)光標(biāo)移動。不過設(shè)計師很好地控制了動效的尺寸，不會喧賓奪主。
作為一個以宇宙為主題的網(wǎng)站而言，粒子動效還是非常點題的。在這個頁面中，粒子動效會模擬宇宙中星座的運行軌跡來運動，當(dāng)你點擊不同的區(qū)域的時候，能顯示相關(guān)星球的圖片。
四處移動的小氣泡會構(gòu)建成不同的東西，讓用戶心情愉悅，當(dāng)用戶用鼠標(biāo)點擊氣球的時候，這些移動著的氣球會爆掉，非常好玩。不同的氣球會鏈接到不同的圖片。
大量的3D粒子會幫你創(chuàng)建簽名，給人以優(yōu)雅而精致的感覺，當(dāng)最終生成簽名的時候，你可以放大查看細(xì)節(jié)。
Citak 的網(wǎng)站將極簡風(fēng)格發(fā)揮到機制，用干凈的色彩和大量的留白來營造出現(xiàn)代而時尚的感覺。設(shè)計師使用豐富多彩的粒子動效引導(dǎo)用戶關(guān)注標(biāo)題文案。
網(wǎng)站提供了更加個人化的粒子動效來提高整個網(wǎng)站的“個性化體驗”，網(wǎng)站的設(shè)計和星座風(fēng)格背景緊密關(guān)聯(lián)，營造出統(tǒng)一而一致的瀏覽體驗。
這個網(wǎng)站在交互設(shè)計上非常突出，同時在動效和簡約風(fēng)格之間找到了不錯的平衡點。動態(tài)粒子構(gòu)成的糖果構(gòu)成了網(wǎng)站的主視覺，個性十足又充滿魅力。
Decta 網(wǎng)頁中的顆粒動效和網(wǎng)頁閑適的風(fēng)格相互呼應(yīng)，按照一定韻律聚散的粒子讓頁面充滿了呼吸感。
NodePlus 頁面中三角形的粒子和它們的動效讓整個網(wǎng)站呈現(xiàn)出強烈的個性，給人創(chuàng)造力十足的感覺。
這是 Petar Stojakovic 的作品展示頁，作為歡迎界面，黑白分明的設(shè)計清晰簡單，向中央收攏的粒子動效營造出一種深邃的效果，吸引用戶的注意力。
Void 的網(wǎng)站為用戶提供了近乎無可匹敵的抽象粒子動效，這些時尚又精致的粒子動效，展現(xiàn)出設(shè)計師的高超水平。
CloudNine 的網(wǎng)頁是關(guān)于一個在宇宙環(huán)境中生存的超級英雄的，頁面中這些微妙的動效讓背景顯得微妙又漂亮無比。
同樣是使用了經(jīng)典的強對比的黑白色系來設(shè)計網(wǎng)頁，Treskon 的設(shè)計師也傾向于借用粒子動效來強化頁面質(zhì)感，突出內(nèi)容。
細(xì)膩的粒子動效在這個網(wǎng)頁中起到了支撐作用，完善了整個設(shè)計。動態(tài)的背景在動效支撐下顯得更加富有美感。
Orion9 是一個獨特的個人作品網(wǎng)站，乍一看可能有點單調(diào)，但是當(dāng)粒子動效開始充塞頁面的時候，那種枯燥的氛圍會被一掃而空，這種打開體驗范兒詞不錯。
粒子動效的運用范疇非常廣泛，動態(tài)，活潑，具有引導(dǎo)性，交互性，可以和色彩、圖片、內(nèi)容充分的組合，并且在美學(xué)上產(chǎn)生化學(xué)反應(yīng)，微妙又讓人期待，偶爾能給人一種意外，更多的時候又用獨特的質(zhì)感征服每一個訪客。它能否在未來的一年中成為主流的設(shè)計趨勢？讓我們拭目以待吧。
0
喜歡他，就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計網(wǎng)（CNDESIGN）會員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有，任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處，作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計網(wǎng)
