亚洲一区二区在线,国产三级在线,国产成人精品亚洲一区,亚洲综合99,欧美一区精品二区三区,国产三级国产精品,日韩午夜大片

十年專(zhuān)注于網(wǎng)站建設、系統開(kāi)發(fā),低調、有情懷的互聯(lián)網(wǎng)軟件服務(wù)商!

區塊鏈開(kāi)發(fā)服務(wù) 400-160-6558

2021年網(wǎng)站設計中的微交互

發(fā)布日期:2020-12-16   瀏覽次數:2736   來(lái)源:

微交互在用戶(hù)體驗設計中并不是一個(gè)新概念,但它們卻越來(lái)越令人印象深刻。我們在Design Shack討論微交互已經(jīng)有一段時(shí)間了,因為它們對網(wǎng)站設計項目的整體成功至關(guān)重要。


微互動(dòng)是指那些將普通用戶(hù)體驗變成更令人難忘和吸引人的微小細節。這些小事情會(huì )給你帶來(lái)驚喜和快樂(lè ),為你的應用或網(wǎng)站設計增加一層令人愉快的UX。


下面我們來(lái)看看2021年網(wǎng)站設計師們是如何使用微交互的,并舉例說(shuō)明這種設計技術(shù)是如何發(fā)展起來(lái)的。


設計的功能



動(dòng)畫(huà)+解釋


當你開(kāi)始思考如何最好地設計微交互時(shí),讓這個(gè)簡(jiǎn)單的短語(yǔ)在你的腦海中循環(huán)。每一個(gè)微小的網(wǎng)站設計都應該做這些事情。


動(dòng)畫(huà)是吸引用戶(hù)進(jìn)入元素的一個(gè)亮點(diǎn)。解釋幫助他們理解按鈕或撥動(dòng)開(kāi)關(guān)或圖標的用途和如何使用它。


每個(gè)微交互都以微秒的方式提供一系列信息:


觸發(fā):微交互何時(shí)開(kāi)始或為什么開(kāi)始


規則:是什么讓動(dòng)作/互動(dòng)起作用,以及它是如何起作用的


反饋:您如何通過(guò)某種提示知道您對元素的操作是否成功


循環(huán)和模式:交互持續到特定用戶(hù)重置為止的時(shí)間


去訪(fǎng)問(wèn)上面光明/黑暗模式切換的例子。開(kāi)關(guān)的滑動(dòng)和做的正是你所期望的,沒(méi)有太多的大驚小怪。它有一個(gè)簡(jiǎn)單的動(dòng)畫(huà),解釋了如果你按下開(kāi)關(guān)將會(huì )發(fā)生什么。這是固體的微觀(guān)相互作用。


玩得開(kāi)心



微互動(dòng)應該是有趣的。它是引人注目的元素,可以幫助引導用戶(hù)通過(guò)設計與一些現代的,可能意想不到的觸摸。


Aurelia Durand的網(wǎng)站設計充滿(mǎn)了令人驚奇的微小互動(dòng)。指針是一個(gè)小的手,它會(huì )移動(dòng)以點(diǎn)擊適當的區域,懸停在菜單上,并獲得大量的彩色點(diǎn)來(lái)鼓勵行動(dòng),主要的插圖變化和動(dòng)畫(huà)也是懸停狀態(tài)微交互的一部分。


展示個(gè)性



你可能一直接觸到的最被低估的微互動(dòng)之一就是Facebook react功能欄。(Facebook還不時(shí)在移動(dòng)標識上添加一些有趣的微互動(dòng)。)


這就是為什么這個(gè)方法有效。當你點(diǎn)擊或按住每個(gè)小表情符時(shí),它們就會(huì )活過(guò)來(lái),顯示出真實(shí)的情感表情供你選擇。這比快速點(diǎn)擊經(jīng)典的、豎起藍色大拇指的圖標更個(gè)性化、更真實(shí)。


這些小元素也有懸浮狀態(tài),告訴你每個(gè)表情/圖標的意思。這些額外的信息讓微互動(dòng)變得更有用,并為用戶(hù)提供工具,讓他們在選擇對社交媒體上的帖子的感覺(jué)時(shí)做出正確的選擇。


如果添加了新的表情符號或圖標,這一額外的信息層尤其重要,比如“關(guān)愛(ài)”擁抱,它在2020年年中成為功能欄的一部分。


微妙的動(dòng)畫(huà)效果可能很好



雖然有些微互動(dòng)更具爆炸性,但許多細微的變化幾乎可以被忽視。


良好的微交互作用幾乎是不可見(jiàn)的。你不應該去想它,也不應該去問(wèn)為什么它會(huì )在那里,或者如何與它互動(dòng)。UX雜志是這樣描述它的:“確保微動(dòng)畫(huà)不會(huì )讓人感到尷尬或討厭。一般的和次要的行動(dòng)需要適度的反應。偶爾的重大行動(dòng)都需要有力的回應。”


這方面的一個(gè)典型例子便是伴隨著(zhù)許多漢堡或彈出式菜單圖標的微互動(dòng)。


Lucid Reality Labs有一個(gè)雙行圖標,它會(huì )切換到單行,然后在菜單打開(kāi)時(shí)顯示“X”。當“x”被點(diǎn)擊關(guān)閉時(shí),它會(huì )動(dòng)畫(huà)另一個(gè)。它太簡(jiǎn)單了,你幾乎看不見(jiàn)它。


屏幕中央的立方體也會(huì )發(fā)生二次交互。您可以通過(guò)單擊該示例查看這種微交互的分層是如何工作的。


內容和諧設計



每一個(gè)微互動(dòng)都應該與伴隨的內容和諧共存。


你并不是在一個(gè)氣泡中進(jìn)行設計,所以不要讓創(chuàng )意或你創(chuàng )造的東西的酷元素凌駕于布局之上,并與整體設計保持同步。


上面的“如何與白人孩子談?wù)摲N族主義”的timeline微交互很簡(jiǎn)單,并且完全與設計的其余部分整合在一起。他們包含了一定程度的細節,使移動(dòng)通過(guò)這本書(shū)的數字版本令人愉快。


每個(gè)時(shí)間軸微交互都包含一個(gè)與頁(yè)面內容相匹配的圖標和內容的標題。它放大到一個(gè)大小,讓你可以得到一個(gè)藝術(shù)和簡(jiǎn)單的運動(dòng)是迷人的一瞥。


該設計還包含了其他有趣的動(dòng)畫(huà),如翻頁(yè)(單頁(yè)和翻頁(yè)),使整個(gè)設計成為你想要深入研究的東西。


使用觸覺(jué)元素



想想你日常使用的一些工具在與它們互動(dòng)時(shí)是如何發(fā)揮作用的。


當你點(diǎn)擊一個(gè)按鈕時(shí),你的蘋(píng)果手表的觸覺(jué)


你手機上的提示音


當你與Siri或其他設備交談時(shí),這些監聽(tīng)點(diǎn)就會(huì )出現


在你走或跑的每一英里時(shí),輕輕的嗡嗡聲來(lái)標記


當你的耳塞連接到藍牙時(shí)的聲音


所有這些融合了數字和現實(shí)的元素都是將空間融合在一起的更偉大的觸覺(jué)體驗的一部分。微交互是實(shí)現這一目標的好方法。


您可以使用:

感覺(jué)

聲音

進(jìn)步

反彈

脈沖或嗡嗡聲


有很多方法可以做到這一點(diǎn)。它們的共同點(diǎn)是看起來(lái)和感覺(jué)都很真實(shí)。它們與其說(shuō)是屏幕的一部分,不如說(shuō)是你的物理世界的一部分(或者至少聲稱(chēng)是)。


結論


2013年左右,當丹·薩弗(Dan Saffer)在他的書(shū)中第一次提到微互動(dòng)時(shí),微互動(dòng)開(kāi)始勢頭迅猛。他當時(shí)概述的四個(gè)部分仍然是這些小型網(wǎng)站互動(dòng)的關(guān)鍵部分——觸發(fā)、規則、反饋、循環(huán)和模式。


如果你仔細觀(guān)察,你幾乎可以在每一個(gè)網(wǎng)站設計中的微交互作用中看到這些共同元素。我們也希望看到更多精巧的微交互例子。

版權所有:http://m.0415dgkaiqi.com (君度網(wǎng)絡(luò )) 轉載請注明出處
赣榆县| 丽江市| 保山市| 太康县| 巴塘县| 平凉市| 商水县| 德格县| 青冈县| 温州市| 金坛市| 禄丰县| 洱源县| 丹东市| 易门县| 连城县| 望江县| 综艺| 榆林市| 黔江区| 六安市| 肃宁县| 金沙县| 滕州市| 屯门区| 调兵山市| 湖口县| 孝义市| 铁岭市| 南城县| 龙海市| 兴城市| 南郑县| 诸暨市| 黔东| 石渠县| 平谷区| 德庆县| 灵山县| 潍坊市| 南陵县|