ui設(shè)計(jì)：值得關(guān)注的動(dòng)感粒子動(dòng)效設(shè)計(jì)

《ui設(shè)計(jì)：值得關(guān)注的動(dòng)感粒子動(dòng)效設(shè)計(jì)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。

1、火星時(shí)代(www.hxsd.com)-中國(guó)移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)高端品牌!UI設(shè)計(jì)：值得關(guān)注的動(dòng)感粒子動(dòng)效設(shè)計(jì)動(dòng)態(tài)、抽象等元素常常被設(shè)計(jì)師用來(lái)渲染科技氛圍，在設(shè)計(jì)圈中頗為流行。今天火星時(shí)代就來(lái)與大家分享粒子動(dòng)效這一獨(dú)特的設(shè)計(jì)元素，希望能對(duì)大家有所幫助。有的網(wǎng)頁(yè)會(huì)在頁(yè)面背景上散亂分布著點(diǎn)或者小而簡(jiǎn)單的幾何圖形，配合著各不相同的背景，粒子動(dòng)態(tài)效果所呈現(xiàn)出來(lái)的類(lèi)型和樣式非常之多。它們還可以是一大堆凌動(dòng)的小球、扁平的圓環(huán)，還可以一組來(lái)回穿梭的小三角形，等等。在動(dòng)效上，這些粒子的運(yùn)動(dòng)軌跡的差別也是千差萬(wàn)別的，它們有的可能會(huì)與用戶的操作產(chǎn)生聯(lián)動(dòng)，隨著鼠標(biāo)指針的運(yùn)動(dòng)、

2、震顫、舞蹈。然而它們依然有很明顯的共同點(diǎn)：通過(guò)這些粒子的動(dòng)效來(lái)為整個(gè)頁(yè)面營(yíng)造出動(dòng)態(tài)、活潑和科技感十足的氛圍。單調(diào)的語(yǔ)言不足以呈現(xiàn)這些粒子動(dòng)效的獨(dú)到之處，我們一起來(lái)看看案例吧。Deutser黑色的極簡(jiǎn)風(fēng)背景是這些粒子動(dòng)效的舞臺(tái)，粒子每隔幾秒會(huì)打散重組出新的圖案，并且搭配上相應(yīng)的文案，并且粒子本身會(huì)隨著鼠標(biāo)的移動(dòng)而進(jìn)行恰如其分的偏移，不僅讓用戶充滿了參與感，而且動(dòng)態(tài)的展示方式讓信息的展現(xiàn)更有厚度。SharetheForce火星時(shí)代(www.hxsd.com)-中國(guó)移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)高端品牌!這是一個(gè)星球大戰(zhàn)主題相關(guān)的網(wǎng)站，意為“分享原力”。整個(gè)網(wǎng)站的設(shè)計(jì)

3、非常貼合星戰(zhàn)的主題，加入了許多宇宙相關(guān)的設(shè)計(jì)元素，背景中的粒子動(dòng)效更是強(qiáng)化了這種環(huán)境的動(dòng)感和氣氛。SevenBriefLessons開(kāi)發(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)化了不少。Brandify火星時(shí)代(www.hxsd.com)-中國(guó)移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)高端品牌!復(fù)雜的立體幾何圖形和運(yùn)動(dòng)的粒子組合到一起，充滿了韻律感，整個(gè)動(dòng)效豐富了頁(yè)面的細(xì)節(jié)，讓它看起來(lái)一點(diǎn)都不單調(diào)，也增強(qiáng)了趣味性。NYCIGMarathon這個(gè)壯麗而又專(zhuān)業(yè)的

4、粒子動(dòng)效將NYCIG馬拉松的逼格提升到了一個(gè)全新的高度，這種壯闊的場(chǎng)景會(huì)讓用戶非常難忘的。DoublePi火星時(shí)代(www.hxsd.com)-中國(guó)移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)高端品牌!粒子動(dòng)效在這個(gè)網(wǎng)站中不僅充作背景，同時(shí)也是用戶交互的對(duì)象，它會(huì)構(gòu)成一個(gè)隧道隨著鼠標(biāo)光標(biāo)移動(dòng)。不過(guò)設(shè)計(jì)師很好地控制了動(dòng)效的尺寸，不會(huì)喧賓奪主。SiftAgent作為一個(gè)以宇宙為主題的網(wǎng)站而言，粒子動(dòng)效還是非常點(diǎn)題的。在這個(gè)頁(yè)面中，粒子動(dòng)效會(huì)模擬宇宙中星座的運(yùn)行軌跡來(lái)運(yùn)動(dòng)，當(dāng)你點(diǎn)擊不同的區(qū)域的時(shí)候，能顯示相關(guān)星球的圖片。SonyExperia火星時(shí)代(www.hxsd.com)-中

5、國(guó)移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)高端品牌!四處移動(dòng)的小氣泡會(huì)構(gòu)建成不同的東西，讓用戶心情愉悅，當(dāng)用戶用鼠標(biāo)點(diǎn)擊氣球的時(shí)候，這些移動(dòng)著的氣球會(huì)爆掉，非常好玩，不同的氣球會(huì)鏈接到不同的圖片。SignatureArt大量的3D粒子會(huì)幫你創(chuàng)建簽名，給人以?xún)?yōu)雅而精致的感覺(jué)，當(dāng)最終生成簽名的時(shí)候，你可以放大查看細(xì)節(jié)。Citak火星時(shí)代(www.hxsd.com)-中國(guó)移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)高端品牌!Citak的網(wǎng)站將極簡(jiǎn)風(fēng)格發(fā)揮到極致，用干凈的色彩和大量的留白來(lái)營(yíng)造出現(xiàn)代而時(shí)尚的感覺(jué)，設(shè)計(jì)師使用豐富多彩的粒子動(dòng)效引導(dǎo)用戶關(guān)注標(biāo)題文案。TheAlkemistry網(wǎng)站提供了更加個(gè)人化的

6、粒子動(dòng)效來(lái)提高整個(gè)網(wǎng)站的“個(gè)性化體驗(yàn)”，網(wǎng)站的設(shè)計(jì)和星座風(fēng)格背景緊密關(guān)聯(lián)，營(yíng)造出統(tǒng)一而一致的瀏覽體驗(yàn)。ThinkLessLoveMore火星時(shí)代(www.hxsd.com)-中國(guó)移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)高端品牌!這個(gè)網(wǎng)站在交互設(shè)計(jì)上非常突出，同時(shí)在動(dòng)效和簡(jiǎn)約風(fēng)格之間找到了不錯(cuò)的平衡點(diǎn)。動(dòng)態(tài)粒子構(gòu)成的糖果構(gòu)成了網(wǎng)站的主視覺(jué)，個(gè)性十足又充滿魅力。DectaDecta網(wǎng)頁(yè)中的顆粒動(dòng)效和網(wǎng)頁(yè)閑適的風(fēng)格相互呼應(yīng)，按照一定韻律聚散的粒子讓頁(yè)面充滿了呼吸感。NodePlus火星時(shí)代(www.hxsd.com)-中國(guó)移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)高端品牌!NodePlus頁(yè)面中三角形的粒

7、子和它們的動(dòng)效讓整個(gè)網(wǎng)站呈現(xiàn)出強(qiáng)烈的個(gè)性，給人創(chuàng)造力十足的感覺(jué)。PetarStojakovic這是PetarStojakovic的作品展示頁(yè)，作為歡迎界面，黑白分明的設(shè)計(jì)清晰簡(jiǎn)單，向中央收攏的粒子動(dòng)效營(yíng)造出一種深邃的效果，吸引用戶的注意力。VOID火星時(shí)代(www.hxsd.com)-中國(guó)移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)高端品牌!Void的網(wǎng)站為用戶提供了近乎無(wú)可匹敵的抽象粒子動(dòng)效，這些時(shí)尚又精致的粒子動(dòng)效，展現(xiàn)出了設(shè)計(jì)師的高超水平。CloudNineCloudNine的網(wǎng)頁(yè)是關(guān)于一個(gè)在宇宙環(huán)境中生存的超級(jí)英雄，頁(yè)面中這些微妙的動(dòng)效讓背景顯得微妙又漂亮無(wú)比。Tre

8、skon火星時(shí)代(www.hxsd.com)-中國(guó)移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)高端品牌!同樣是使用了經(jīng)典的強(qiáng)對(duì)比的黑白色系來(lái)設(shè)計(jì)網(wǎng)頁(yè)，Treskon的