好的產品通常會做好兩件事情:功能和細節(jié)。功能能夠吸引用戶關注這個產品,而細節(jié)則能夠讓關注的用戶留下來。功能和細節(jié)兩者都很重要,但是功能居首,細節(jié)次之。不過,讓用戶喜歡或者討厭一個APP或者網站,往往緣起于細節(jié)。隨著網站交互設計和動效的大規(guī)模普及,我們現(xiàn)在所看到的許多細節(jié)設計,都可以歸類于微交互。微交互所要求的關注細節(jié)是獲得有效、強大用戶體驗的關鍵原則。優(yōu)秀的動效是完善用戶體驗中不可或缺的一環(huán),擁有好用且令人難忘的細節(jié)能讓產品脫穎而出。
——Dan Saffer
1.微交互在界面中的作用
2.微交互的必要性
3.按用途劃分動效設計類型
4.如何輸出動效
5.如何書寫動效設計文檔
6.微交互的測試過程
「微交互在界面中的作用」
傳遞狀態(tài)信息和層級信息
1.通過一定的動效暗示,可以讓用戶更好的理解整個app的信息結構。
2.賦予app生命感,讓用戶知道app正在積極的為用戶執(zhí)行操作。
提示隱藏信息功能或讓用戶快速識別提示信息
1.若我們需要隱藏一些需要適時出現(xiàn)的,或需要用戶探索的界面或按鈕,可以通過適當?shù)膭有гO計進行合理的引導,提示,銜接。
2.微動畫可以使用戶能夠快速識別界面視覺元素,并高效的與之進行交互,同時也能使實際顯示的形式更加優(yōu)雅。
傳遞情感化信息交互及時得到反饋
1.使等待不枯燥
2.使變化不生硬
3.使反饋不單調
4.增加用戶參與度,讓用戶更加愉悅的體驗產品
注冊和登錄流程一直是產品中最為枯燥繁瑣但又必不可少的環(huán)節(jié),微動畫用有趣和交互性元素改進了填充表單的枯燥過程,可以有效的環(huán)節(jié)用戶在體驗上的負面情緒。
當輸入密碼錯誤的時候,密碼輸入欄會顯示出一個搖頭的效果。完全可以想象,假設用一個錯誤提示的彈窗,不僅會中斷用戶的操作流程,引起人的反感,而且很容易讓人受挫。通過動效,設計者用一種更友好簡單的方式達到了提示的目的。
「微交互的必要性」
提升用戶體驗
1.讓用戶覺察視覺元素的連續(xù)變化,對新舊狀態(tài)的更替有更清晰的感知,為用戶提供良好的動態(tài)沉浸式體驗,使用戶更加清晰愉悅的使用產品。
2.解決扁平化的弊端,扁平化雖然可以讓用戶將注意力放在內容本身,但是在多信息的情況下很難區(qū)分信息層級關系,合適的動效可以讓用戶更好的理解信息層級關系,賦予設計情感,增加用戶參與度。
增添產品氣質
1.合理的動效能更立體的傳遞信息,提高產品的“表達能力”。
2.增添產品的親和力和趣味性,利于品牌的建立,未添加動效的產品,會有種死氣沉沉的感覺,所有內容平鋪直敘,即使界面設計的再美觀,也會缺乏一種靈動細膩的氣質。
3.但是動效并不是越多越好,不同產品對不同動效需求也不盡相同,如:新聞類,深度閱讀類產品過度的動效反而會干擾閱讀。所以要針對產品本身的屬性來恰當?shù)脑O計動效。
「動效設計類型(按用途劃分)」
過渡型
人腦灰質會對動態(tài)事物(如:移動、形變、色變等)保持敏感。在界面中加入一些平滑舒適的過渡效果,不僅能讓界面顯得生動,更能幫助用戶理解界面前后變化的邏輯關系。好的過渡動效避免了界面快速切換時給用戶帶來的迷失感,作為最為常見的交互,它會在潛意識中引導用戶,而用戶通常不需要去思考就會下意識執(zhí)行。
反饋型
無論是點擊、長按、拖拽、滑動等交互行為,(如:下拉刷新,loading,tabbar上的微交互)都應該得到系統(tǒng)的即時反饋,將其以視覺或動效的方式展現(xiàn),幫助用戶了解當前系統(tǒng)對交互過程的響應情況,為用戶帶來安全感。
表單設計中最容易被忽視的,其實是對于出錯信息的處理。表單,尤其是長表單,填寫內容出錯其實是很正常的事情,等到提交信息的時候再報錯,用戶會非常沮喪。而微交互結合實時驗證,能夠讓用戶在輸入的過程中就發(fā)現(xiàn)錯誤并進行修改,一次通過,不用等待提交的時候再回頭處理。
功能型
特定工具類,直播類產品所需的元素動效,安全、清理類產品的掃描動效,emoji表情動效等。
情感型(趣味型)
增加情感交流,強化品牌調性。
如:刷新、loading動效,加載過程往往比較枯燥,有趣的動效可以吸引用戶注意力,從而減緩用戶負面情緒。
相關實驗數(shù)據(jù)表明,較差的loading動效讓用戶感受到的等待時長比實際時長還要長,普通的loading動效讓用戶感受到的等待時長和實際時長相差不多,優(yōu)秀有趣的loading動效讓用戶感受到的等待時長比實際時長要短。
以此說明,出色有趣的動效會更加吸引用戶注意力,從心理上忘記時間的流逝,大大提升了用戶體驗。
「如何輸出動效」
1.通常我們做的偏復雜的 app 動效(例如:情感型、功能型),在實際落地過程中會遇到很多問題,比如:Gif 圖失真、占內存過大、開發(fā)成本過高。
2.Airbnb 開源的動畫渲染庫 Lottie 可以有效的解決了這一系列問題。Lottie 可以直接利用 AE 導出的 JSON 動畫文件,將其解析為原生代碼,在 iOS 和 Android 設備平臺上運行。
3.使用方法:設計師使用After Effect制作動畫,并通過插件bodymovie導出.json文件給開發(fā)人員;開發(fā)人員通過Lottie開源庫進行渲染。
4.Lottie獲取方法:微信公眾號后臺輸入“Lottie插件”,會有下載鏈接。
以上動效輸出方式只針對復雜動效,普通過度轉場動效還是使用原始方式,標注說明給開發(fā)。
「如何書寫動效設計文檔」
1.動效輸出后會出現(xiàn)開發(fā)和設計師對接困難的問題,是因為沒有通過精準的參數(shù)去描述動效。要解決這個問題,我們需要創(chuàng)造一套有效的動效標注系統(tǒng)(或書寫一份動效設計文檔),這個系統(tǒng)必須做到以下兩點:讓設計師可以輕松地描述動效,讓開發(fā)可以準確地還原動效。
2.如何向開發(fā)具象的陳述動效,需要做到以下幾步(如圖),先拆解動效,將組合動效拆解成基礎動畫;在從變化、時長、曲線這三方面,闡述每個屬性的變化數(shù)據(jù)。
變化
變化可以劃分為四類(如動圖所示),這四類變化基本涵蓋了界面元素的全部運動方式,只要我們準確地描述元素在動效前后的變化量,就可以準確地完成「變化」這個參數(shù)的對接。
那么這個時候我們需要記錄的狀態(tài)(這里只涉及到變化)就應該是這樣:
初始狀態(tài):
? 位移:X軸 0
? 旋轉 :0度
? 尺寸:1
? 透明度:0.2
結束狀態(tài):
? 位移:X軸 200px
? 旋轉:+180度
? 尺寸:1.5
? 透明度:1
時長
第二個關鍵參數(shù)就是時長,這個顧名思義也就是動畫播放的時間長度。無論變化是多是少,簡單還是復雜,我們需要把每一段變化的時間確定,時間短干脆利落,時間長輕緩柔和。標注清楚起始時間和終止時間。
曲線
曲線描述的是物體運動時候的速度變化,如果說變化和時長是動效的本體,那么曲線就是動效的靈魂。對于一個運動的物體,同樣的變化,同樣時間,賦予不同的速度曲線,會讓它的動效產生豐富的變化。 所以在動效設計中,曲線也是設計者最為關注的部分。
最基礎的速度曲線有線性(就是全程勻速)、緩入、緩出、緩入緩出四種,動效描述中要闡述清楚使用的是何種曲線,如需特殊曲線需要展示出來。
「微交互的測試過程」
發(fā)現(xiàn)問題
使用下面描述的流程作為測試微交互的開始:
1.首先,詢問用戶希望通過這個微交互做什么?在使用這個微交互之前,問問用戶是否需要學習什么東西,特別是如果他們以前從未使用過類似的交互時。
2.允許用戶在沒有任何幫助的情況下使用這個微交互,并實時收集定量數(shù)據(jù)。
3.觀察用戶使用微交互的每一步。傾聽用戶對所做選擇的印象和描述。觀察微交互規(guī)則對參與者是否作用明顯,注意差異。
4.與用戶溝通,記錄用戶想讓微交互幫助記住哪些數(shù)據(jù)。
5.最后,請用戶表達在這個微交互中還有哪些地方是需要繼續(xù)優(yōu)化的。
這個過程能幫助你發(fā)現(xiàn)微交互的很多問題。它能驗證一般的目標和期望。對兩個用戶團隊重復這個過程至少兩次。在既定時間內,利用用戶反饋來分析和優(yōu)化你的微交互。
使用研究數(shù)據(jù)
這些是可以測試的一些定量數(shù)據(jù):
? 完成率
? 微交戶互持續(xù)時間
? 具體每一步的持續(xù)時間
? 步驟數(shù)
? 點擊/敲擊/選擇的次數(shù)
? 人為失誤的數(shù)量
優(yōu)化微交互并重新測試一遍,看看是否需要進一步改進。 另外也需要注意樣本量,測試用戶不多可能會使錯誤或偏好變得更加明顯。
數(shù)據(jù)可以幫助你做出更好的決策,但不能完全依賴數(shù)據(jù),很多情況還是需要具體問題具體分析。
「總結」
1.微交互可以提高產品的用戶體驗,幫助用戶記住你的品牌。增添產品親和力和趣味性。微交互存在的目的是讓用戶感覺順暢、愉悅,設計師借此創(chuàng)造出吸引人或者令人高興的瞬間,或者說,讓用戶在這一刻感受到人性化。
2.動效的作用是更好的呈現(xiàn)界面元素間的邏輯關系,幫助用戶梳理信息層級,規(guī)避了扁平化的缺陷;有趣的動畫可以減緩用戶使用過程中的負面情緒,增加用戶參與度,讓用戶更加愉悅的體驗產品。
3.動效不是越多越好,越炫酷越好,要針對產品自身定位來設計動效,讓用戶意識不到動效的存在,才是最合適的,否則會適得其反,干擾用戶操作。
(注意:以上內容均有參考,作者只負責梳理和總結,圖片均來源于網絡,侵刪)
作者:33
公眾號: Panda Plus
全站高品質素材免費下載!