Micro Interaction-網(wǎng)頁設(shè)計(jì)案例分享
時(shí)間：2023-09-14 06:18:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-14 06:18:01 來源：網(wǎng)站運(yùn)營
Micro Interaction-網(wǎng)頁設(shè)計(jì)案例分享：很久沒設(shè)計(jì)網(wǎng)頁了，不過最近在看一些agency的網(wǎng)站，收集了一些微交互（micro interaction) 案例，記錄一下，附上網(wǎng)址。
對(duì)于微交互來說，越subtle越好。1. 別致的“鼠標(biāo)”——— 當(dāng)"鼠標(biāo)"移到可點(diǎn)擊的item上時(shí)會(huì)變大。鼠標(biāo)顏色會(huì)隨時(shí)間改變。
（鏈接： Future Forward Studio ）
HCI的基礎(chǔ)研究中就有研究怎么提高鼠標(biāo)的點(diǎn)擊效率的。比較典型的一類叫Bubble Cursor，就是靠近點(diǎn)擊目標(biāo)時(shí)，鼠標(biāo)面積和點(diǎn)擊目標(biāo)面積都會(huì)有改變。有興趣的人可以去看看相關(guān)論文。下面給一個(gè)bubble cursor的小案例 。
HCI鼠標(biāo)點(diǎn)擊研究——Bubble Cursorhttps://www.zhihu.com/video/10818423632943390722. 滾輪交互 ——— scroll的時(shí)候網(wǎng)站logo會(huì)改變， 不scroll就靜止。
（鏈接： Normal VR ）
3. “暗”紐——— 需要自己發(fā)現(xiàn)的頁面開關(guān)。這也常見于很多設(shè)計(jì)師的作品集中，給來訪者 添了一份發(fā)現(xiàn)的樂趣。 注意點(diǎn)擊開關(guān)的時(shí)候，頁面上元素的變化。
（鏈接： Normal VR About )
4. Hover時(shí)，文字和其他的
微變化—— hover很常見，但微變化節(jié)奏拿捏得好是門技術(shù)活。
（鏈接： First Born )
（鏈接： Code And Theory )
（鏈接： Zero NYC )
5. Scroll時(shí)頂部標(biāo)題欄杠杠的微變化
——— 其實(shí)是一種信息暗示，象征這一欄內(nèi)容的開合。
（鏈接： Nexus Studio )
6. 分頁面加載時(shí)與鏈接圖片(anchor image) 在
視覺上的一致和延展性。
（鏈接： Humaan Work )
7. （上一個(gè)案例中也有所體現(xiàn)）把
digital asset和
真人/實(shí)物攝影照融合起來
（鏈接： Zero Contact Page )
（鏈接： HUMAAN )
在線咨詢