中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)頁設(shè)計(jì)中,24 種交互層創(chuàng)意形式

2022-03-29    分類: 網(wǎng)站建設(shè)


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

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

會(huì)使頁面上的元素根據(jù)光標(biāo)的位置或移動(dòng)產(chǎn)生相應(yīng)變換,增加頁面的互動(dòng)性與趣味,適用于裝飾或加強(qiá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)畫

簡單易用的鼠標(biāo)懸浮動(dòng)畫,用于聚焦顯示或 Tooltip 說明,常用與內(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)畫等,游戲場景中較為常見,點(diǎn)擊后不僅有光效反饋還有音效附和,這是一種觸發(fā)反饋效果。

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



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

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

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



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

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

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



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



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

主要用于頁面某個(gè)值的控制或頁面滾動(dòng),在頁面滾動(dòng)的時(shí)候可以配合控制元素變化來實(shí)現(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. 鼠標(biāo)選中自動(dòng)展開

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

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



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

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

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



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

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

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



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

應(yīng)用轉(zhuǎn)場效果與 Loading 動(dòng)畫,運(yùn)用某個(gè)元素變大覆蓋或頁面移動(dòng)交替轉(zhuǎn)場,而非生硬的直接替換,使得頁面切換更有趣味和層級(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),在頁面滾動(dòng)查看時(shí),形成奇妙的元素穿梭視感。通常會(huì)穿梭替換背景或讓元素接力,這樣相比靜態(tài)寫實(shí)的頁面滾動(dòng)時(shí)會(huì)更有層次感

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



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



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

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

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



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



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

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

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



15. 三維或全景空間

建立一個(gè)三維或者全景空間進(jìn)行查看或操作,再賦予操作按鈕或說明,實(shí)現(xiàn) 3D 場景的交互與視覺效果,常用與地圖全景查看或 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è)非平面的視覺場景。用鼠標(biāo)點(diǎn)擊或滾輪聯(lián)動(dòng)交互利用分層的元素變化,營造出由近到遠(yuǎn)或由上至下的一鏡到底的視角穿梭體驗(yàn)。界面場景切換更加自然,還有超強(qiáng)的空間感與趣味性,讓人難以忘懷如臨其境。

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



17. 按鍵交互效果

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

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



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

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

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



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



19. 可交互的顏色或圖形

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

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



20. 音視頻媒體控制

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

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



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

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



22. 打造儀式感

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

示例地址: https://issuu.com/matskafte 書籍預(yù)覽的場景打造,需搭梯子訪問。



23. 有聲交互

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

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



24. 鏡頭交互

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

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

分享文章:網(wǎng)頁設(shè)計(jì)中,24 種交互層創(chuàng)意形式
文章起源:http://www.rwnh.cn/news13/145113.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、App開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
凤冈县| 高平市| 中宁县| 饶阳县| 天峨县| 呼和浩特市| 同江市| 建始县| 阳江市| 临安市| 乌鲁木齐县| 德格县| 宁城县| 都兰县| 无锡市| 临沭县| 固原市| 奈曼旗| 巴塘县| 正蓝旗| 弋阳县| 哈密市| 红安县| 宿松县| 仁寿县| 鄂尔多斯市| 肇州县| 阿拉善右旗| 高淳县| 和政县| 绥德县| 清新县| 凤庆县| 镇坪县| 江达县| 新沂市| 博湖县| 丰顺县| 英山县| 微博| 永川市|