他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

微交互:細(xì)節(jié)決定成敗

2023-1-9    ui設(shè)計分享達(dá)人

正如題目所說:細(xì)節(jié)決定成敗,微交互就是利用細(xì)節(jié)提升產(chǎn)品體驗和設(shè)立品牌標(biāo)志。

一、摘要

直到今天,人機交互已經(jīng)有很長時間的發(fā)展。從例如烤面包機的簡單產(chǎn)品到銀行應(yīng)用程序類的復(fù)雜數(shù)字產(chǎn)品,我們每天進(jìn)行上百次的交互。這些交互轉(zhuǎn)化為產(chǎn)品的可用性,最終轉(zhuǎn)化成用戶滿意度、信任度和產(chǎn)品整體體驗。

在過去的二十年里,設(shè)計師們一直在關(guān)注這些交互(按鈕、滾動、長按等)。從電腦大屏幕到移動設(shè)備、智能手表以及現(xiàn)在的可折疊設(shè)備,交互也在不斷地發(fā)展。本文研究了微交互的結(jié)構(gòu)及其與交互模型的關(guān)系,審美體驗的不同驅(qū)動力,以及我們?nèi)绾瓮ㄟ^改變微交互的元素來優(yōu)化體驗。最后,我們討論了自下而上的產(chǎn)品構(gòu)建方法。

二、簡介

自燈泡、收音機、門鈴等電氣設(shè)備出現(xiàn)以來,微交互一直存在于我們的生活。微交互和技術(shù)共同出現(xiàn)、發(fā)展。在我們的日常生活中充滿了與周圍物體的微交互,例如使用烤面包機、解鎖手機、將手機切換到靜音模式、控制音量等。

從簡單的按下按鈕到搖動手腕激活智能手表,微交互隨著技術(shù)的進(jìn)步而不斷發(fā)展。像復(fù)制文本或移動文件這類我們?nèi)缃窳?xí)以為常的、無形之中的微交互,都曾是新穎的微交互。觀察微交互有助于設(shè)計師改進(jìn)產(chǎn)品。

有趣的是,設(shè)計師將現(xiàn)實生活場景投射到產(chǎn)品來建立微交互,如剪切-粘貼、放大-縮小等。這些細(xì)節(jié)不僅提高了產(chǎn)品的可用性,也通過直觀的互動降低用戶學(xué)習(xí)難度。

微交互:細(xì)節(jié)決定成敗

我們?nèi)绾螠?zhǔn)確定義什么是微交互,什么是交互?

論文《開啟移動微交互》(Ashbrook,2010)將微交互定義為“接觸設(shè)備開始到完成的時間不超過4秒的互動”。而《微交互》一書(Saffer,2013)將其定義為:“微交互是圍繞著單個用例的產(chǎn)品使用場景——它們有一個主要任務(wù)?!闭麄€應(yīng)用程序或產(chǎn)品可能只是一個微交互,例如,天氣應(yīng)用程序(圖1.1)或烤面包機,因為它們只關(guān)注一件事。

圖1.1 天氣應(yīng)用程序能被看作是一個微交互,因為它只顯示天氣。

圖1.2 LinkedIn 的“喜歡”按鈕由兩個微交互組成,(a)當(dāng)你長按“喜歡”按鈕時,它會打開一個空間展示多個表情符號以供選擇(b)你選擇表情符號發(fā)送給帖子。

一個功能可以由多個微交互構(gòu)成,例如LinkedIn的“喜歡”按鈕(圖1.2),人們可以對帖子發(fā)送不同的表情符號。因此,微交互是一個功能模塊,或者是整個產(chǎn)品。與產(chǎn)品互動時,微交互也許能幫助用戶了解做什么,如何做,后續(xù)是怎樣。精心設(shè)計的微交互使產(chǎn)品變得直觀,優(yōu)化了產(chǎn)品的用戶體驗。

當(dāng)微交互打造了與品牌產(chǎn)生共鳴的特殊體驗時,它化身為了品牌標(biāo)志。專業(yè)術(shù)語稱之為“標(biāo)志性時刻——產(chǎn)品或服務(wù)中給人留下持久而難忘印象的突出互動”(Janhagen, Leitch & Judelson, 2020)。

Facebook的“喜歡”按鈕是它的標(biāo)志性時刻。微交互并不僅僅局限于視覺,它們可以是聲音、觸覺、實體硬件或手勢交互。Snapchat的通知作為產(chǎn)品的標(biāo)志性時刻是因其獨特的聲音。同樣地,iPhone有一個中心按鈕作為蘋果的標(biāo)志,它有多個微交互方式。

微交互通常首選(Narvhus, J.M. 2016):

  • 溝通反饋。
  • 開啟和關(guān)閉某項功能,如將手機靜音。
  • 實現(xiàn)一個單一的任務(wù),如喜歡一個Facebook上的帖子。
  • 控制一個正在進(jìn)行的進(jìn)程:顯示更改或系統(tǒng)狀態(tài),如加載條或狀態(tài)圖標(biāo)。
  • 改變一個設(shè)置。
  • 防止人為錯誤。
  • 查看或制作內(nèi)容。

我們將在之后的章節(jié)中研究一些微交互案例。

三、交互模型與微交互結(jié)構(gòu)

1. 人類處理器模型

在進(jìn)入交互模型之前,我們將嘗試研究心智和心智表征,以更好地理解人類如何與世界上的物體互動。(Newell & Card, 1985)文章談到了三個不同的處理器:感知處理器、認(rèn)知處理器和運動處理器是如何工作以理解周圍世界。

認(rèn)知處理器與長期記憶和工作記憶一起工作,從現(xiàn)有的知識中提取物體、感覺、行動等的表征,以理解來自知覺處理器的輸入。一旦認(rèn)知處理器完成處理,它就會向運動處理器發(fā)出信號,以特定方式對特定情況采取行動。心智表征是現(xiàn)實世界中事物如何運作的心智模型或理解。

2. 諾曼交互模型

唐-諾曼的七個行為階段(諾曼,2013)(圖2)是一種更清晰的心智學(xué)形式,解釋了人類如何與物體互動以實現(xiàn)目標(biāo)。目標(biāo)可能是打開一盞燈或在移動應(yīng)用程序上進(jìn)行在線交易。讓我們把手機解鎖的簡單目標(biāo)分解成七個行動階段。

  1. 目標(biāo)是手機解鎖。
  2. 我如何解鎖手機?輸入密碼或掃描手指指紋。
  3. 選擇哪個方式?如果我選擇輸入密碼,那么就在屏幕上按順序點擊密碼。
  4. 一旦我有了行動規(guī)范,就可以執(zhí)行任務(wù)。
  5. 點擊回車鍵后,將看到后續(xù)發(fā)生的事情。
  6. 我看到我已經(jīng)到達(dá)了主界面。
  7. 我根據(jù)以往經(jīng)驗判斷是否已經(jīng)完成了目標(biāo)。

微交互:細(xì)節(jié)決定成敗

在這個循環(huán)的每個階段,都有一個輸入->處理->輸出的過程。在宏觀層面上,我們也在遵循同樣的過程來達(dá)到我們的目標(biāo)。我們可以從行動模型的七個階段推導(dǎo)出互動周期(Norman, 2013)(圖3)。

交互周期包括執(zhí)行過程和評估過程,前者是行動所需信息差,后者是行動發(fā)生時各類情況所需理解的信息差。整體用戶體驗取決于交互過程中互動周期的每個部分。微交互的目標(biāo)是消除差距,使產(chǎn)品變得直觀。現(xiàn)在讓我們看看微交互的基礎(chǔ)結(jié)構(gòu),了解它們?nèi)绾螏椭畔⒉睢?

3. 微交互的結(jié)構(gòu)

微交互之所以強大,不僅僅是因為它們的細(xì)微交互差別或迷你尺寸,還因為它們構(gòu)建的方式。微交互的結(jié)構(gòu)包括四個部分(圖4)(Saffer,2013):開啟微交互的觸發(fā)器,決定微交互如何運作的規(guī)則,以及影響微互動的元規(guī)則——闡明規(guī)則、循環(huán)和模式的反饋。

觸發(fā)器可以由用戶觸發(fā),例如點擊圖標(biāo)、填寫表格等,觸發(fā)器也可以由系統(tǒng)產(chǎn)生,例如低電量提示框,通知用戶電池電量不足。

微交互:細(xì)節(jié)決定成敗

讓我們以Duo應(yīng)用中驗證用戶的微交互為例。

  • 觸發(fā)器:向我發(fā)一個推送通知是微交互的觸發(fā)器(圖5(a))。
  • 規(guī)則:它將發(fā)送帶有兩個動作的通知(圖5(b))。用戶必須點擊這兩個動作中的一個(圖5.(c))。
  • 反饋:一旦用戶點擊批準(zhǔn),它將顯示帶有“登陸”的綠色提示。(圖5.(d))
  • 循環(huán)和模式:如果你選擇了在7天內(nèi)記住本次登陸,下次登錄時它將直接顯示綠色提示,而不是向你發(fā)送推送通知。

微交互:細(xì)節(jié)決定成敗

現(xiàn)在當(dāng)我們解構(gòu)微交互并理解其結(jié)構(gòu)時,微交互的結(jié)構(gòu)支持行動七階段理論,最終幫助消除執(zhí)行和評估之間的鴻溝。精心設(shè)計的觸發(fā)器便于用戶進(jìn)行計劃->指定->執(zhí)行行動,精心設(shè)計的規(guī)則和反饋便于用戶進(jìn)行感知->解釋->對比結(jié)果確認(rèn)完成目標(biāo)。我們將在下一節(jié)中談?wù)撚|發(fā)器、規(guī)則和反饋的設(shè)計,以了解微交互如何有效構(gòu)建所需的用戶體驗。

我們回看心智部分,認(rèn)知處理器不僅包含了不同事物如何工作的心智模型,并且隨著我們在日常生活中對新物體的體驗而不斷地發(fā)展。從這些心智模型中,設(shè)計師可以創(chuàng)建概念模型。作為關(guān)于產(chǎn)品和功能運作的高級計劃,概念模型一旦被建立就能被轉(zhuǎn)化為行動模型的七個階段,從而幫助我們創(chuàng)建對用戶來說很直觀的微交互。這是一種自下而上的方法,用于建立交互 -> 功能 -> 產(chǎn)品。

四、審美與微交互

在上一節(jié)中,我們談到了交互模型和微交互的結(jié)構(gòu),并探討了它們?nèi)绾螖y手使產(chǎn)品變得直觀好用?,F(xiàn)在我們將關(guān)注動態(tài)審美體驗,以及微交互如何在產(chǎn)品的微觀層面建立體驗。

審美體驗的韻律之舞有一個內(nèi)在的、動態(tài)的結(jié)構(gòu)。杜威指出了體驗建立的相關(guān)過程,如累積、保存、緊張張力和預(yù)期,來指稱體驗的內(nèi)部動態(tài)(McCarthy & Wright, 2004)。

完整的用戶體驗是這些動態(tài)的集合,它可以根據(jù)用戶過往經(jīng)驗和知識認(rèn)知而變化。過往經(jīng)驗和任何審美經(jīng)驗都取決于上下文:用戶的過往和能力,人工制品的技術(shù),以及互動發(fā)生的任一物理、社會空間(Petersen, Iversen, Krogh, & Ludvigsen, 2004)。當(dāng)我們與物體/產(chǎn)品互動時,觸覺、嗅覺、視覺和聽覺都會喚起體驗。

在過去的幾十年里,設(shè)計師們一直在關(guān)注這些觸發(fā)奇跡的交互。交互不應(yīng)該僅僅是傳達(dá)內(nèi)容和完成任務(wù),它應(yīng)該引人思考,并鼓勵人們以不同的方式思考變化。我們將展示一些喚起了不同審美體驗的動態(tài)微交互案例。

微交互:細(xì)節(jié)決定成敗

1)積累:指伴隨著體驗時間展開的積聚。我認(rèn)為谷歌支付作為微交互建立了用戶體驗,并包含非常優(yōu)秀的展開界面和支付完成音效。

這個之所以判定為其微交互,是因為它只專注于一件事,而且建立了非常充實的體驗。這個交互開始于點擊支付端->選擇銀行卡->加載->支付完成(圖6)。動畫和音效帶來了一步步徐徐展開的體驗感受。

2)留存:指保留一些過往事物的趨勢,不論體驗還是內(nèi)容。文本或信息的保存對優(yōu)秀用戶體驗來說確實是必要的,畢竟這樣能減少認(rèn)知負(fù)擔(dān)。在網(wǎng)站和應(yīng)用程序上填寫表格時,許多微交互都保留了之前的填寫信息。

這類微交互的一個非常簡單的例子是,當(dāng)你復(fù)制一個鏈接并試圖將其輸入網(wǎng)絡(luò)瀏覽器時,瀏覽器會顯示直接粘貼鏈接的選項,甚至顯示你復(fù)制的內(nèi)容(圖7)。我們在這此觀察到與微交互的結(jié)構(gòu)不同的是重點更多地放在了交互的反饋上,它傳達(dá)的狀態(tài)是:你復(fù)制的內(nèi)容已保存,并可以用來搜索網(wǎng)頁瀏覽器。這是一個展示了我們?nèi)绾握{(diào)整微交互側(cè)重點來優(yōu)化體驗的優(yōu)秀案例。

3)張力:指體驗內(nèi)和參與體驗的人之間的關(guān)聯(lián)。這是社交媒體和流媒體平臺使用的一種技術(shù),當(dāng)用戶期待在短時間內(nèi)快速閱覽內(nèi)容時,用戶不斷下滑來反復(fù)觸發(fā)刷新的微交互(圖8.) 。微交互帶給用戶參與感以牢牢抓住其注意力。它帶來的延遲滿足,讓用戶在想快速瀏覽內(nèi)容時耐心等待。

這個特殊的微交互的重點是方式:即在內(nèi)容加載之前顯示一個加載器。

微交互:細(xì)節(jié)決定成敗

4)預(yù)期:它包含兩個時間階段。第一階段是用戶在交互中開始期待,第二階段是用戶從交互中得到期望反饋。我想到的微交互是Google Pay India的刮刮卡獎勵(圖9)。

這個特殊的微交互為它在印度帶來了巨大的成功。人們喜歡期待好事發(fā)生,即使期望沒有發(fā)生。若是期望發(fā)生,那期待就是值得的。支付完成后,用戶進(jìn)入刮刮卡獎勵界面,對刮獎產(chǎn)生期待,點擊卡片進(jìn)行刮獎。刮獎微交互的重點是動作的觸發(fā)上,兼具有趣性和參與感,觸發(fā)本來可以只是一個點擊按鈕,但他們設(shè)計了一個刮擦動作作為觸發(fā)。

上文提到的各種例子可看出:通過調(diào)整微交互的元素來優(yōu)化體驗。微交互小而強的原因在于:它們是產(chǎn)品的差異化細(xì)節(jié)。好的微交互能讓產(chǎn)品提升一個等級。

五、微交互會引人討厭嗎?

我們認(rèn)識了精心設(shè)計的微交互在創(chuàng)造美好體驗方面的力量,現(xiàn)在讓我們來探討一下,如果糟糕的微交互可能會引發(fā)什么問題。

我想到的案例是手機通知。并不是說通知很糟糕,而是它設(shè)計得如此之好,以至于它有違用戶的意愿。通知是由系統(tǒng)發(fā)起的觸發(fā)器,它僅顯示部分信息來吸引用戶點擊。

每個人都會遇到這樣的情況:明明只是想看看時間,但在看到通知時點擊進(jìn)入信息,無聲無息之中半個小時就耗費了。這不僅僅耗費了時間,更嚴(yán)重的是人們在駕駛時也會分心看通知。

另一個案例是 Facebook 的著名的“喜歡”按鈕。這個精心設(shè)計的微互動,是 Facebook 的標(biāo)志,但沒有人意識到一個微互動可以對人們的生活產(chǎn)生如此大的影響。近期 Instagram 停止顯示帖子上的點贊數(shù),因為它對用戶行為產(chǎn)生了負(fù)面影響。上面的例子也顯示出:小事情可以產(chǎn)生大影響。

微交互:細(xì)節(jié)決定成敗

微交互也會令人討厭,例如,在填寫表單最后點擊提交時,彈出一個對話框(圖10),說表單填寫中存在錯誤。這里的觸發(fā)器是提交按鈕,規(guī)則是顯示一個對話框,反饋是靜態(tài)文本——“有填寫有誤”。

這里的微交互形式是錯誤的,如果填寫有誤,提示應(yīng)該在出錯點附近。而且這里的反饋是糟糕的靜態(tài)文本,對用戶沒有任何用處,因為它沒有說明出錯的位置和類型。因此,微交互的使用和場景真的很重要。

六、結(jié)論

縱觀全文,我們探討了什么是微交互,以及如何創(chuàng)建符合交互模型的微交互來消除執(zhí)行和評估之間的差距。接下來,我們研究了動態(tài)審美體驗,以及我們?nèi)绾卧诋a(chǎn)品的微觀層面上用微交互創(chuàng)造美好體驗。

設(shè)計師有幾種方法來創(chuàng)建微交互,方法一是自下而上思考,把一切都想得越小越好后,再建立功能。另一種方法是把整個產(chǎn)品看成是一個微交互,如果你想增加另一個功能,那么就把它看成是另一個只包含一個微交互的產(chǎn)品。

我相信谷歌支付是以這種方式創(chuàng)建的,因為它是從支付開始,且只專注于支付,后來才引入了獎勵和其他內(nèi)容。

微交互有助于建立一個品牌標(biāo)志和提升用戶體驗。我們喜歡或者討厭產(chǎn)品的根源正是細(xì)節(jié)。細(xì)節(jié)是向用戶展示你以用戶為中心并為用戶著想的方法。這就是微小的事情會帶來巨大差異的原因。

作者:三分設(shè)

來源:人人都是產(chǎn)品經(jīng)理

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計ssll180.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


日歷

鏈接

個人資料

存檔