網(wǎng)頁設計中，24 種交互層創(chuàng)意形式

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

1. 光標跟隨動畫

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

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



示例地址： https://home.miui.com/  即時渲染粒子動畫與鼠標跟蹤



2. 鼠標懸浮動畫

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

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



示例地址： https://www.eone-time.com/ 如果是一個完整動畫緩慢播放完會更有敘述性



3. 鼠標點擊特效

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

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



4. 鼠標長按特效

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

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



5. 鼠標拖拽特效

通過鼠標點擊長按某個元素進行移動的組合交互，一般用于拖拽移動、內(nèi)容繪制、元素連接等。應用場景廣，互動性較高，能為用戶帶來更多的參與感和趣味性，甚至制造小驚喜

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



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



6. 鼠標滾輪巧妙的聯(lián)動效果

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

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



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



7. 鼠標選中自動展開

鼠標經(jīng)過選項時自動展開選項并聚焦，可以省去鼠標點開的動作，但不適用于選項內(nèi)容較多且內(nèi)容密集的場景

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



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

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

示例地址： https://lab.hakim.se/bacterium/01/ 鼠標拖拽配合空格鍵長按



9. 模塊或分頁加載動效

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

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



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

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

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



11. 大圖或多圖輪播應用

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

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



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

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

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



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



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

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

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



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



14. 游戲互動模式

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

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



15. 三維或全景空間

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

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



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



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

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

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



17. 按鍵交互效果

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

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



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

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

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



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



19. 可交互的顏色或圖形

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

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



20. 音視頻媒體控制

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

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



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

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



22. 打造儀式感

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

示例地址： https://issuu.com/matskafte 書籍預覽的場景打造，需搭梯子訪問。



23. 有聲交互

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

示例地址： http://www.bbboooooommm.com/ 搞點聲音就能動起來



24. 鏡頭交互

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

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