今天我們來(lái)看一下網(wǎng)頁(yè)設(shè)計(jì)中24 種交互層創(chuàng)意形式，主要是關(guān)于頁(yè)面內(nèi)容元素交互時(shí)的創(chuàng)意形式講解，這里不對(duì)交互動(dòng)效或特效細(xì)節(jié)進(jìn)行過(guò)多說(shuō)明，因?yàn)樵趺慈?dòng)又或者用什么樣的特效去呈現(xiàn)實(shí)在數(shù)不清說(shuō)不完，如果有興趣可以參考一下文中的精選案例視頻整理和提供的一些體驗(yàn)合集地址。

1. 光標(biāo)跟隨動(dòng)畫

會(huì)使頁(yè)面上的元素根據(jù)光標(biāo)的位置或移動(dòng)產(chǎn)生相應(yīng)變換，增加頁(yè)面的互動(dòng)性與趣味，適用于裝飾或加強(qiáng)背景層次感，在特定的場(chǎng)景也可以使整套控制 UI 往鼠標(biāo)移動(dòng)的方向微微靠近，結(jié)合菲茲定律公式，距離的不斷縮減也能夠加快選中的效率）

示例網(wǎng)址： https://www.bilibili.com/



示例地址： https://home.miui.com/  即時(shí)渲染粒子動(dòng)畫與鼠標(biāo)跟蹤



2. 鼠標(biāo)懸浮動(dòng)畫

簡(jiǎn)單易用的鼠標(biāo)懸浮動(dòng)畫，用于聚焦顯示或 Tooltip 說(shuō)明，常用與內(nèi)容選中狀態(tài)區(qū)分或元素細(xì)節(jié)展示，加上一組好的動(dòng)效創(chuàng)意非常能夠凸顯個(gè)性，使用戶感到驚喜為體驗(yàn)加分

示例地址： https://www.makemepulse.com/



示例地址： https://www.eone-time.com/ 如果是一個(gè)完整動(dòng)畫緩慢播放完會(huì)更有敘述性



3. 鼠標(biāo)點(diǎn)擊特效

由鼠標(biāo)點(diǎn)擊進(jìn)行觸發(fā)，基本樣式即點(diǎn)擊狀態(tài)顯示，觸發(fā)后的特效可以是圖標(biāo)動(dòng)畫、光效、音效、界面動(dòng)畫等，游戲場(chǎng)景中較為常見(jiàn)，點(diǎn)擊后不僅有光效反饋還有音效附和，這是一種觸發(fā)反饋效果。

示例地址： https://lab.hakim.se/checkwave/



4. 鼠標(biāo)長(zhǎng)按特效

當(dāng)鼠標(biāo)長(zhǎng)按某個(gè)按鈕時(shí)持續(xù)出現(xiàn)的特殊效果，一般是持續(xù)鼠標(biāo)點(diǎn)擊的特效或維持某個(gè)元素的變化效果，通常對(duì)數(shù)值持續(xù)增減動(dòng)作較為常見(jiàn)，可以代替連續(xù)的點(diǎn)擊，交互更輕松。也或者是需要一定的加載時(shí)間所以用長(zhǎng)按配合

示例網(wǎng)址： https://lab.hakim.se/bacterium/01/ 通過(guò)長(zhǎng)按持續(xù)增加細(xì)菌圓點(diǎn)



5. 鼠標(biāo)拖拽特效

通過(guò)鼠標(biāo)點(diǎn)擊長(zhǎng)按某個(gè)元素進(jìn)行移動(dòng)的組合交互，一般用于拖拽移動(dòng)、內(nèi)容繪制、元素連接等。應(yīng)用場(chǎng)景廣，互動(dòng)性較高，能為用戶帶來(lái)更多的參與感和趣味性，甚至制造小驚喜

示例內(nèi)容：阿里內(nèi)測(cè)的 Real 3D



示例地址： http://fff.cmiscm.com/#!/section/sheeps



6. 鼠標(biāo)滾輪巧妙的聯(lián)動(dòng)效果

主要用于頁(yè)面某個(gè)值的控制或頁(yè)面滾動(dòng)，在頁(yè)面滾動(dòng)的時(shí)候可以配合控制元素變化來(lái)實(shí)現(xiàn)更具創(chuàng)意的展現(xiàn)效果，通常元素透明度、位置、大小、序列圖都可以控制

示例地址： https://www.eone-time.com/



示例地址： https://www.apple.com.cn/macbook-pro-16/ Apple 國(guó)內(nèi)官網(wǎng)



7. 鼠標(biāo)選中自動(dòng)展開

鼠標(biāo)經(jīng)過(guò)選項(xiàng)時(shí)自動(dòng)展開選項(xiàng)并聚焦，可以省去鼠標(biāo)點(diǎn)開的動(dòng)作，但不適用于選項(xiàng)內(nèi)容較多且內(nèi)容密集的場(chǎng)景

示例網(wǎng)址： http://www.antro.ca/en/



8. 按鍵與鼠標(biāo)配合觸發(fā)

通過(guò)指定按鍵和鼠標(biāo)配合交互進(jìn)行觸發(fā)，適用于同界面的復(fù)雜交互場(chǎng)景，且存在某些變量需要鼠標(biāo)控制。如果你的網(wǎng)頁(yè)內(nèi)交互豐富且包含變量元素，不妨試試看

示例地址： https://lab.hakim.se/bacterium/01/ 鼠標(biāo)拖拽配合空格鍵長(zhǎng)按



9. 模塊或分頁(yè)加載動(dòng)效

在頁(yè)面滑動(dòng)或分頁(yè)信息加載時(shí)，界面構(gòu)成元素有序的緩入進(jìn)場(chǎng)。采用流暢的動(dòng)效演示數(shù)據(jù)加載的過(guò)程，緩解數(shù)據(jù)加載渲染壓力的同時(shí)，使得用戶可以更加從容不迫地瀏覽信息，讓界面呈現(xiàn)更加精致優(yōu)雅

示例地址： https://www.apple.com.cn/macbook-pro-16/ #Apple 國(guó)內(nèi)官網(wǎng)



10. 趣味轉(zhuǎn)場(chǎng)或加載等候

應(yīng)用轉(zhuǎn)場(chǎng)效果與 Loading 動(dòng)畫，運(yùn)用某個(gè)元素變大覆蓋或頁(yè)面移動(dòng)交替轉(zhuǎn)場(chǎng)，而非生硬的直接替換，使得頁(yè)面切換更有趣味和層級(jí)關(guān)系體現(xiàn)。再對(duì)加載較慢的內(nèi)容補(bǔ)充 Loading 動(dòng)畫，緩解用戶焦慮的同時(shí)還能延展品牌信息

示例地址： https://teatrlalka.pl/en



11. 大圖或多圖輪播應(yīng)用

精美的圖片總是想要放大看，看了還想看。運(yùn)用超大的輪播圖展示與沉浸式功能布局，滿足用戶操作與大圖賞析

示例地址： https://www.carpediemsantorini.com/



12. 內(nèi)容穿插滾動(dòng)

運(yùn)用特殊的圖層順序結(jié)構(gòu)，在頁(yè)面滾動(dòng)查看時(shí)，形成奇妙的元素穿梭視感。通常會(huì)穿梭替換背景或讓元素接力，這樣相比靜態(tài)寫實(shí)的頁(yè)面滾動(dòng)時(shí)會(huì)更有層次感

示例地址： http://www.sehsucht.berlin/mailme/



示例地址： http://kenjiendo.com/news/



13. 內(nèi)容自動(dòng)生成

輸入關(guān)鍵內(nèi)容后，頁(yè)面自動(dòng)生成結(jié)果進(jìn)行呈現(xiàn)，整個(gè)過(guò)程可以是緩慢有序的，適用于降壓或畫面創(chuàng)意生成的產(chǎn)品，可以讓用戶感受整個(gè)過(guò)程與細(xì)節(jié)變化

示例地址： https://www.solaas.com.ar/dreamlines/ 輸入關(guān)鍵詞后頁(yè)面會(huì)自動(dòng)生成迷幻的動(dòng)態(tài)畫面



示例地址： http://fluky.io/ 輸入選項(xiàng)后生成轉(zhuǎn)盤隨機(jī)抽取，別再問(wèn)我選哪個(gè)好！轉(zhuǎn)就是了



14. 游戲互動(dòng)模式

將產(chǎn)品內(nèi)容以游戲的形式或交互呈現(xiàn)，讓內(nèi)容充滿趣味和互動(dòng)性，使得用戶在參與游戲互動(dòng)的過(guò)程中打破了常規(guī)的閱讀體驗(yàn)

示例地址： https://dccxi.com/trust/



15. 三維或全景空間

建立一個(gè)三維或者全景空間進(jìn)行查看或操作，再賦予操作按鈕或說(shuō)明，實(shí)現(xiàn) 3D 場(chǎng)景的交互與視覺(jué)效果，常用與地圖全景查看或 3D 游戲應(yīng)用，可以巧妙的結(jié)合產(chǎn)品 3D 模型，打造非凡的互動(dòng)體驗(yàn)

示例地址： http://2017.makemepulse.com/



示例地圖： https://map.baidu.com/@13371285.96,3516997.92,19z 百度地圖的全景查看



16. 一鏡到底的視角呈現(xiàn)

打造一個(gè)非平面的視覺(jué)場(chǎng)景。用鼠標(biāo)點(diǎn)擊或滾輪聯(lián)動(dòng)交互利用分層的元素變化，營(yíng)造出由近到遠(yuǎn)或由上至下的一鏡到底的視角穿梭體驗(yàn)。界面場(chǎng)景切換更加自然，還有超強(qiáng)的空間感與趣味性，讓人難以忘懷如臨其境。

示例地址： http://www.ohdeergames.com/



17. 按鍵交互效果

將某些功能或任務(wù)引用按鍵進(jìn)行交互或觸發(fā)。常使用字母、數(shù)字、空格、方位鍵，界面需要有提示對(duì)用戶進(jìn)行指導(dǎo)。

示例地址： https://www.julianabrams.co.uk/ 基于鍵盤即可完成所有瀏覽，需搭梯子訪問(wèn)



18. 個(gè)性的模塊展現(xiàn)方式

常見(jiàn)的有彈窗、抽屜、卡片展開、轉(zhuǎn)盤等，通過(guò)個(gè)性輕松的顯示結(jié)構(gòu)與交互方式也能讓人眼前一亮。

示例地址： http://go-wander.org/397_fela_kim



示例地址： http://fff.cmiscm.com/#!/main



19. 可交互的顏色或圖形

對(duì)一些顏色或形狀元素提供切換或 DIY 的空間，允許用戶進(jìn)行意料之外的交互或配置能力，提升網(wǎng)頁(yè)趣味性或用戶個(gè)性化需求滿足。

示例地址： https://ant-design.gitee.io/docs/spec/introduce 可自定義的主題色



20. 音視頻媒體控制

圍繞產(chǎn)品介紹的媒體內(nèi)容，常見(jiàn)有視頻或音頻且支持基本交互控制，結(jié)合場(chǎng)景需求可以豐富交互的形式或更多媒體控制功能，例如長(zhǎng)按快進(jìn)、倒退、剪輯、混音等，常用于娛樂(lè)互動(dòng)場(chǎng)景或音視頻類產(chǎn)品。

示例網(wǎng)址： https://aidn.jp/se/#0



21. 內(nèi)容或窗口抖動(dòng)

通過(guò)抖動(dòng)進(jìn)行報(bào)錯(cuò)或反饋，常見(jiàn)為密碼輸入錯(cuò)誤時(shí)或游戲中受到傷害的場(chǎng)景，可伴隨音效提示一起。使用場(chǎng)景不廣泛，但是也可以進(jìn)行創(chuàng)意應(yīng)用，例如抖掉灰塵小游戲，長(zhǎng)按元素抖動(dòng)干凈為止。



22. 打造儀式感

結(jié)合現(xiàn)實(shí)場(chǎng)景中的交互方式，打造相似的線上場(chǎng)景幫助用戶共情帶入，再配合交互和動(dòng)效完成類似的動(dòng)作，為用戶帶來(lái)儀式感和共情效果。

示例地址： https://issuu.com/matskafte 書籍預(yù)覽的場(chǎng)景打造，需搭梯子訪問(wèn)。



23. 有聲交互

通過(guò)麥克風(fēng)采集聲音來(lái)影響交互，是一種聲音的交互，如果網(wǎng)站支持，甚至可以語(yǔ)音交互，是一種少見(jiàn)的網(wǎng)頁(yè)交互形式，并非傳統(tǒng)的音視頻控制而已。

示例地址： http://www.bbboooooommm.com/ 搞點(diǎn)聲音就能動(dòng)起來(lái)



24. 鏡頭交互

通過(guò)攝像頭授權(quán)獲取鏡頭畫面進(jìn)行交互，通常是一些鏡頭濾鏡效果或者增強(qiáng)現(xiàn)實(shí)技術(shù)結(jié)合做交互創(chuàng)意，網(wǎng)頁(yè)上少見(jiàn)新穎。

示例地址： https://mrdoob.com/#/125/multiuser_sketchpad