九九色综合_性69交片免费看_亚洲一区二区三区久久精品_精品一久久_欧美一级黄视频_污免费网站

微交互：設(shè)計(jì)師的超能力

2020-12-23 前端達(dá)人

微交互在用戶體驗(yàn)中占據(jù)越來越重要的位置，來看看微交互該如何應(yīng)用吧～

大概幾周前，在他的朋友和孩子們的大力勸說下，我并不那么精通互聯(lián)網(wǎng)的爺爺加入了Facebook。最后。在我教他設(shè)置個(gè)人資料，創(chuàng)建帖子和后續(xù)頁面時(shí)，他遇到了一個(gè)有趣的事，在嘗試摸索頁面中不知何故偶然發(fā)現(xiàn)了著名的LIKE按鈕。他將鼠標(biāo)懸停在“贊”按鈕上，彈出了6個(gè)表情符號(hào)，然后單擊“ HAHA”笑臉，這使他對(duì)這個(gè)小動(dòng)畫感到敬畏。這就是微交互對(duì)產(chǎn)品或應(yīng)用程序的強(qiáng)大功能。

資料來源：Giphy

我們作為用戶，每天都能看到和應(yīng)用這些微交互，有些甚至沒有意識(shí)到。“喜歡”按鈕是最簡單的示例之一。其他幾個(gè)是：

滾動(dòng)鼠標(biāo)時(shí)出現(xiàn)的簡單滾動(dòng)條
向左滑動(dòng)即可清除iPhone主屏幕上的通知
能夠看到其他人在消息傳遞應(yīng)用程序上“打字”
一個(gè)進(jìn)度條顯示下載百分比
拉動(dòng)以刷新，以在應(yīng)用程序屏幕上重新加載內(nèi)容
交互式錯(cuò)誤頁面，例如Google Chrome和為文章點(diǎn)贊是一些最常見的微交互。那么，為什么這些非常有效？為什么每個(gè)應(yīng)用程序都有它們？

資料來源：Dribbble

一.什么是微互動(dòng)？

微交互就像與設(shè)備的任何其他交互一樣，用于將有意義的反饋傳達(dá)給用戶，因?yàn)橛脩舯仨毑粩嘀缊?zhí)行某項(xiàng)操作時(shí)會(huì)發(fā)生什么。這是一種人們期望發(fā)生某些事情的趨勢。例如：單擊按鈕，滾動(dòng)頁面，將商品添加到購物車，向左滑動(dòng)卡片。

這通常是通過提供系統(tǒng)狀態(tài)（尼爾森的啟發(fā)式方法）或幫助用戶避免常見錯(cuò)誤來實(shí)現(xiàn)的。當(dāng)您未填寫必填字段時(shí)，帶有錯(cuò)誤消息的紅色邊框就是微交互。

例如看下面的互動(dòng)

豎起大拇指— Facebook Messenger

該動(dòng)畫是微交互的一個(gè)很好的例子，因?yàn)樗鼘?shí)現(xiàn)了三個(gè)重要功能：

溝通狀態(tài)并提供反饋
增強(qiáng)直接操縱感
幫助人們看到自己行動(dòng)的結(jié)果

二.微交互的構(gòu)成

分解

微觀互動(dòng)包括四個(gè)部分：

觸發(fā)器啟動(dòng)微交互。觸發(fā)器可以由用戶啟動(dòng)或由系統(tǒng)啟動(dòng)。
在用戶啟動(dòng)的觸發(fā)器中，用戶必須啟動(dòng)一個(gè)動(dòng)作。
在系統(tǒng)啟動(dòng)的觸發(fā)器中，軟件檢測到滿足某些資格并啟動(dòng)操作。
規(guī)則確定了觸發(fā)微交互后會(huì)發(fā)生什么。
反饋使人們知道發(fā)生了什么事。發(fā)生微交互時(shí)，用戶看到，聽到或感覺到的任何東西都是反饋。
循環(huán)和模式決定了微交互的元規(guī)則。當(dāng)條件改變時(shí)，微相互作用會(huì)發(fā)生什么？

三.微交互的作用

如果微交互僅僅是微小的設(shè)計(jì)元素，為什么還要關(guān)心它們呢？

很多Web開發(fā)人員和設(shè)計(jì)人員還在問這樣一個(gè)問題。注重細(xì)節(jié)是一個(gè)優(yōu)秀網(wǎng)站與普通網(wǎng)站的根本區(qū)別。這些就是使用微交互的原因：

他們改善了網(wǎng)站導(dǎo)航
它們使用戶更輕松地與您的網(wǎng)站進(jìn)行交互
他們向用戶提供有關(guān)已完成操作的即時(shí)和相關(guān)反饋
他們給您的用戶提示
他們交流有關(guān)某些元素的信息，例如是否互動(dòng)
它們使用戶體驗(yàn)更有意義
他們鼓勵(lì)分享，喜歡和評(píng)論您的內(nèi)容
他們引起用戶的注意
最后，它們只是使您的網(wǎng)站更具情感性

精心設(shè)計(jì)的微交互是用戶關(guān)心的明顯標(biāo)志。這就是為什么他們?nèi)绱酥匾暋Ｓ脩艨梢宰鍪裁矗约八麄兊男袨槭欠裾_并得到系統(tǒng)的批準(zhǔn)-應(yīng)用程序或網(wǎng)站可提供即時(shí)的視覺反饋，并教會(huì)用戶使用系統(tǒng)。

正確進(jìn)行微互動(dòng)后，它們往往會(huì)給您的品牌帶來積極的感覺并影響用戶的行為，而人們甚至根本沒有意識(shí)到為什么這樣做。如果您喜歡或不喜歡產(chǎn)品的某個(gè)方面，則通常對(duì)產(chǎn)品有正面或負(fù)面的傾向。這種所謂的“哈洛效果”既可以支持您也可以對(duì)您不利。在明智的情況下，這些知識(shí)可以幫助改善用戶對(duì)您網(wǎng)站的反饋-通過適當(dāng)注意細(xì)節(jié)，可以使用戶滿意。

四.什么時(shí)候使用微交互

在UX / UI世界中，盡管微交互非常微小，但與用戶進(jìn)行交流時(shí)卻是強(qiáng)大的動(dòng)力。以下是最常見的微交互及其對(duì)用戶體驗(yàn)的影響：

輕滑

“輕滑”動(dòng)作消除了輕擊，并且更具交互性和流暢性。它可以幫助用戶在選項(xiàng)卡之間快速切換并獲取有關(guān)產(chǎn)品的更多信息。此外，輕滑是一種非常常見的手勢，可以在不引起用戶思考的情況下潛意識(shí)地引導(dǎo)用戶。就像我們一直在讀“不要讓您的用戶思考”一樣，既有趣又令人上癮。

數(shù)據(jù)輸入

我們所有人都知道設(shè)置密碼或創(chuàng)建帳戶的麻煩。這個(gè)動(dòng)作很容易引起用戶反感。關(guān)于密碼強(qiáng)度和用法的前瞻性建議可以使用戶輕松前進(jìn)，而在輸入數(shù)據(jù)時(shí)進(jìn)行一些交互也可以使用戶參與該過程并有助于實(shí)現(xiàn)目標(biāo)。

動(dòng)畫

動(dòng)畫可以簡單地啟用并改善微交互。他們的存在可能不會(huì)被注意到，但是缺席給每個(gè)人造成了損失。它們就像膠水一樣，可以幫助設(shè)計(jì)師使最簡單的過程變得有趣和令人上癮。但是要非常小心，因?yàn)樗鼈円庠谖脩簦粫?huì)使他們分心或沮喪。延遲處理或在網(wǎng)站中引入新樣式可能會(huì)引起混亂。

當(dāng)前系統(tǒng)狀態(tài)

必須使用戶了解網(wǎng)站或應(yīng)用程序上當(dāng)前發(fā)生的狀態(tài)，這一點(diǎn)很重要。如果不通知用戶，他們將很生氣并關(guān)閉網(wǎng)站或應(yīng)用程序。微交互使用戶可以準(zhǔn)確地知道發(fā)生了什么，完成該過程需要多長時(shí)間等。即使失敗消息也很幽默，但有效地保持了用戶的信任。

使教程變得有趣

每個(gè)人都在不斷尋求信息。借助微交互功能的教程通過簡化和突出顯示基本功能和重要控件以方便用戶理解，從而指導(dǎo)用戶進(jìn)行應(yīng)用程序的工作。

號(hào)召性用語

微交互實(shí)質(zhì)上是在推動(dòng)用戶與應(yīng)用程序或網(wǎng)站進(jìn)行交互。號(hào)召性用語給用戶帶來了成就感，也給用戶行為灌輸了同理心，使用戶與CTA互動(dòng)的最佳方法是使CTA吸引用戶的興趣。

動(dòng)畫按鈕

通過讓用戶知道他們通過您的應(yīng)用程序或網(wǎng)站的方式，它們起到了信息管理器的作用。我們需要注意顏色、形狀、特殊效果、動(dòng)畫、位置和紋理，以使用戶體驗(yàn)自然而順暢。

滑動(dòng)手勢

通過使用手勢隱藏一些動(dòng)作項(xiàng)，這些類型的交互可用于節(jié)省移動(dòng)設(shè)備上的空間。例如，您可以看到向左滑動(dòng)將刪除電子郵件，向右滑動(dòng)將存檔電子郵件。同樣，在鎖定屏幕上取消/清除通知。

快速操作

一個(gè)簡單的快速動(dòng)作示例就是，當(dāng)您點(diǎn)擊并按住應(yīng)用程序圖標(biāo)時(shí)，在Apple設(shè)備上進(jìn)行3D觸摸，它將為您提供用戶最常使用的上下文動(dòng)作項(xiàng)。這樣可以節(jié)省點(diǎn)擊次數(shù)和時(shí)間。例如，Instagram會(huì)呈現(xiàn)諸如相機(jī)、新帖、活動(dòng)等動(dòng)作。

交流信息

這些類型的交互會(huì)分解復(fù)雜的信息，并使用視覺，動(dòng)畫將信息輕松傳達(dá)給消費(fèi)者。一個(gè)完美的例子是解釋信用卡上的利息費(fèi)用。這是一個(gè)敏感的話題，Apple Card通過使用圓形互動(dòng)動(dòng)畫來告知用戶和最高費(fèi)用，再次贏得了客戶。

互動(dòng)參與

有時(shí)，您希望用戶通過使他們感到驚奇的方式來與界面進(jìn)行交互。這種令人驚訝的結(jié)合動(dòng)作會(huì)更加產(chǎn)生更強(qiáng)大的影響。Robinhood App最近發(fā)布了一張借記卡，其候補(bǔ)名單超過一百萬。要在候補(bǔ)名單中上移您的位置，用戶可以轉(zhuǎn)到其應(yīng)用并點(diǎn)擊該卡（最多60次）。這是使用戶與應(yīng)用程序交互的一種有趣方式。

提供反饋

在用戶觸發(fā)某些內(nèi)容或輸入某些內(nèi)容之后，Motion可以有效地用于向用戶發(fā)送反饋。錯(cuò)誤狀態(tài)和成功狀態(tài)就是這些示例，下面是移動(dòng)應(yīng)用程序正確和不正確密碼輸入的示例。

向用戶介紹界面

每當(dāng)啟動(dòng)具有精美功能的新產(chǎn)品或應(yīng)用程序時(shí)，如果用戶發(fā)現(xiàn)它太難理解，它終將失敗。因此，在此類情況下，應(yīng)用程序可以利用微交互來向用戶介紹功能。例如，N26 Fintech App使用動(dòng)畫來演示用戶如何將錢從一個(gè)儲(chǔ)蓄桶轉(zhuǎn)移到另一個(gè)。

引起用戶的注意

當(dāng)移動(dòng)屏幕上的大部分空間都充滿信息時(shí)，很難突出顯示我們希望用戶注意到的特定功能。通過使用動(dòng)畫和過渡效果，微交互可以在為用戶帶來愉悅感方面發(fā)揮至關(guān)重要的作用。例如，在Slack上，在您開始鍵入之前，發(fā)送按鈕變灰，一旦開始鍵入，它將變?yōu)樗{(lán)色，向用戶指示這是號(hào)召性用語按鈕。

使加載屏幕有趣

大多數(shù)加載屏幕都很無聊，但是微交互和動(dòng)畫可以將它們變成非常有趣的東西。每當(dāng)加載或設(shè)置過程中有等待時(shí)間時(shí)，Google都會(huì)利用此空間為其用戶創(chuàng)造出色的直觀體驗(yàn)。這是一個(gè)例子：

我們?nèi)祟愐恢痹谂で蠹磿r(shí)滿足。在更大的事物方案中，忽略微交互是一種普遍的趨勢，但不可否認(rèn)微交互對(duì)于保持用戶對(duì)產(chǎn)品的興趣和好奇非常重要。每個(gè)人都說細(xì)節(jié)就是魔鬼。小小的體驗(yàn)和設(shè)計(jì)功能（例如在屏幕之間切換或突出顯示功能或彈出新通知）可以在增強(qiáng)用戶體驗(yàn)方面產(chǎn)生巨大差異。

五.如何設(shè)計(jì)微互動(dòng)？

進(jìn)行微交互對(duì)于設(shè)計(jì)師來說是令人興奮的，因?yàn)榭梢試L試新的設(shè)計(jì)解決方案并尋找使用戶感到驚訝的新方法。但是為此，您必須牢記以下幾點(diǎn)：

把自己放在用戶的角度考度，并使用所有您要弄清楚他們?nèi)绾问褂媚膽?yīng)用程序。
創(chuàng)建功能動(dòng)畫。不僅具有美學(xué)效果而且能夠增強(qiáng)用戶體驗(yàn)的動(dòng)畫。
讓用戶保持愉悅。用戶使用該應(yīng)用程序時(shí)的感受是其不斷使用該應(yīng)用程序的原因。如果用戶喜歡并感到愉快，他將再次使用產(chǎn)品。
不要打擾到用戶。過多的動(dòng)畫會(huì)對(duì)用戶產(chǎn)生相反的影響。令人討厭的用戶使他們遠(yuǎn)離您的應(yīng)用程序。
使用人類語言和非技術(shù)性語言。有趣的文案可能會(huì)讓用戶暫時(shí)忘卻應(yīng)用程序中空白頁面的沮喪。