微交互:如何塑造優(yōu)質(zhì)的產(chǎn)品細(xì)節(jié)?

1 評論 11287 瀏覽 108 收藏 10 分鐘

本文作者將與大家探討微交互是如何塑造優(yōu)質(zhì)的產(chǎn)品細(xì)節(jié)的,一起來看看吧~

“最好的產(chǎn)品通常會做好兩件事情:功能和細(xì)節(jié)。功能能夠吸引用戶關(guān)注這個產(chǎn)品,而細(xì)節(jié)則能夠讓關(guān)注的用戶留下來?!?/p>

Dan Saffer 的這句話闡明了許多成功產(chǎn)品的秘訣。

值得注意的是,功能和細(xì)節(jié)兩者都很重要,但是功能居首,細(xì)節(jié)次之。不過,讓用戶喜歡或者討厭一個APP或者網(wǎng)站,往往緣起于細(xì)節(jié)。隨著網(wǎng)站交互設(shè)計和動效的大規(guī)模普及,我們現(xiàn)在所看到的許多細(xì)節(jié)設(shè)計,都可以歸類于微交互。雖然在整體性的設(shè)計當(dāng)中,微交互似乎顯得微不足道,但是整個產(chǎn)品體驗,與之息息相關(guān)。

今天的文章,我們將會探討微交互是如何塑造優(yōu)質(zhì)的產(chǎn)品細(xì)節(jié)的。

微交互

微交互是圍繞著某個交互或任務(wù)的微妙時刻,它并不特指某個交互或者某個動效,而是和任務(wù)、交互相關(guān)的這個時間段中一系列的交互、動效和反饋。我們?nèi)粘J褂玫腁PP中都有大量的微交互。

當(dāng)我們探討微交互的時候,我們常常會拿日常生活中的開關(guān)作為實例,執(zhí)行按開關(guān)這個操作的時候,開關(guān)按鈕會有力回饋,按鈕本身會有物理上的位移,同時會有聲音回饋反映到用戶耳中,開關(guān)所啟動或者關(guān)閉的對象會發(fā)生改變,并且讓用戶感知到。這種微交互毫無疑問在計算機(jī)被發(fā)明之前就有了,而這也是我們設(shè)計微交互的原理所在。

如果說,開關(guān)的實例還不夠直觀的話,再舉兩個UI&UX上的實例吧:

1、iPhone靜音

iPhone 的靜音按鈕被打開時,手機(jī)會有震動通知,UI上會同時顯示靜音圖標(biāo)。

2、下拉刷新交互

當(dāng)用戶希望發(fā)現(xiàn)更多內(nèi)容的時候,下拉界面,隨后內(nèi)容無縫地加載到頁面中來,通常界面還會提醒內(nèi)容已更新。

3、點贊按鈕

當(dāng)你點擊點贊或者喜歡按鈕的時候,界面會使用動效提醒你點擊已經(jīng)成功,并且將你的頭像顯示在點贊列表當(dāng)中。

微交互的作用

簡而言之,微交互通過讓產(chǎn)品更加人性化來提升用戶體驗。在設(shè)計UI的時候,絕大多數(shù)情況下,我們都在反復(fù)斟酌界面的外觀和感受,思考怎么將這些東西設(shè)計出來。但是當(dāng)我需要考慮微交互的設(shè)計之時,則更多的是在產(chǎn)品、服務(wù)和品牌之間做權(quán)衡與抉擇。微交互才是真正意義上以人為核心的設(shè)計:

  • 提供即時反饋——視覺反饋符合用戶的本能預(yù)期,它的存在讓用戶明白,他們的操作被用戶接受;
  • 促進(jìn)互動——微交互本身就在鼓勵用戶進(jìn)行交互,它能夠指引用戶,教育用戶,讓用戶明白如何使用;
  • 帶來愉悅感——微交互本身就是呈現(xiàn)完美體驗的良好時機(jī)。

更多優(yōu)勢

微交互本身是短暫的,同時它也被設(shè)計為可重復(fù)使用。精心設(shè)計的微交互能做的事情不少。

塑造用戶習(xí)慣

微交互能夠養(yǎng)成特定的用戶習(xí)慣。當(dāng)用戶重復(fù)執(zhí)行相同動作的時候,能夠逐步形成習(xí)慣。典型的習(xí)慣環(huán)路是由3個要素組成的:

  • 提示——觸發(fā)交互的提示
  • 執(zhí)行——跟著提示的內(nèi)容,用戶執(zhí)行對應(yīng)的操作
  • 獎勵——完成操作,用戶獲得相應(yīng)的獎勵

最終的獎勵來的越明顯,習(xí)慣越容易形成。所以,許多產(chǎn)品都在給用戶的獎勵上動心思。獎勵的方式多種多樣,而目前最常用的,是通過動效來賦予交互以愉悅感,或者是給予用戶有用的信息。Facebook 就是采用的這樣的機(jī)制,當(dāng)用戶看到圖標(biāo)上出現(xiàn)小紅點的時候(提示),會點擊圖標(biāo)(操作),進(jìn)入APP之后,用戶會看到相應(yīng)的推送信息(獎勵)。

重要時刻

如果微交互執(zhí)行的好,那么它可以成為不斷強(qiáng)化用戶忠誠度的關(guān)鍵時刻。同時,它也可以成為塑造品牌的關(guān)鍵時刻。想想 Facebook 的 Like 按鈕吧,它采用的是動效作為獎勵機(jī)制,并且現(xiàn)在已經(jīng)成為了Facebook UI和交互的標(biāo)志,是不可或缺的組成部分。如何哪天Facebook 刪除了這一功能,用戶會立刻注意到,甚至?xí)`以為Facebook 出了狀況。

高識別度

微交互的優(yōu)勢很多,它最大的特點在于可以無縫的存在于不同的界面,不同的UX環(huán)節(jié)當(dāng)中,同各式各樣的交互連接起來,如影隨形。

高亮變化

微交互常常能夠吸引用戶的注意力,在許多情況下,微交互是借由動畫和動效來提相應(yīng)用戶“這個細(xì)節(jié)很重要”。

提升用戶效率

自動補(bǔ)全是微交互的另外一個重要用途。不論是什么語言,文本輸入本身的成本一直都很高昂,在小型觸摸屏上尤其是如此,出錯率高,總體效率低下。自動補(bǔ)全,或者說自動填充,它能通過預(yù)測在一定程度上提前給用戶正確的輸入內(nèi)容,降低出錯率,提升效率。

提供相應(yīng)的反饋

微交互能夠強(qiáng)化用戶交互的實際效果,不過考慮到“show, don’t tell”這一設(shè)計原則,采用動畫來展示交互結(jié)果和操作已完成,比起文字說明和提示框要優(yōu)雅得體且有效得多。在 Stripe 的這個案例當(dāng)中,用戶點擊付款之前,會有一個短暫的加載過程,完成之后還有一個完成的對勾標(biāo)識告知用戶付款完成。這組動效不僅符合用戶接受信息的自然過程,而且給予了用戶正確的反饋。

提供狀態(tài)相關(guān)信息

Jakob Nielsen 所提出的第一個可用性原則是這么說的:系統(tǒng)應(yīng)該讓用戶明白正在發(fā)生的事情。聊天窗口中的綠色狀態(tài)指示控件就是一個很優(yōu)秀的實例。用戶是否收到了,一目了然,無需說明。

驗證用戶信息

表單設(shè)計中最容易被忽視的,其實是對于出錯信息的處理。表單,尤其是長表單,填寫內(nèi)容出錯其實是很正常的事情,等到提交信息的時候再報錯,用戶會非常沮喪。而微交互結(jié)合實時驗證,能夠讓用戶在輸入的過程中就發(fā)現(xiàn)錯誤并進(jìn)行修改,一次通過,不用等待提交的時候再回頭處理。

結(jié)語

設(shè)計始終都關(guān)乎細(xì)節(jié)。即使是再微小的細(xì)節(jié)都值得我們關(guān)注,細(xì)節(jié)的裝飾,微妙的配色,看起來微不足道的微交互,細(xì)小但是引人注意的動效,所有的這些東西構(gòu)成了產(chǎn)品令人難以忘懷的體驗,而這些都無法忽視。

“那些令人愛不釋手的應(yīng)用,和那些令人難以忍受的應(yīng)用,差別可能就在于微交互上?!边@句話也是Dan Saffer 說的。

 

原文作者:NICK BABICH

原文地址:webdesignerdepot

譯者:@陳子木

譯文地址:http://www.uisdc.com/microinteractions-designing-with-details

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 細(xì)節(jié)決定成敗 :mrgreen:

    來自廣東 回復(fù)