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