動(dòng)效在 UI 設(shè)計(jì)場(chǎng)景中的運(yùn)用強(qiáng)化了感官層面的體驗(yàn)，也使得交互設(shè)計(jì)更加易于理解，通過動(dòng)效輔助功能操作的理解度。

近期在體驗(yàn)產(chǎn)品的過程中，觀察到了一些微動(dòng)效的優(yōu)秀案例，分享出來和大家一起探討。

拖拽頭像營(yíng)造趣味性體驗(yàn)

頭像屬于個(gè)人中心的標(biāo)配，通常不會(huì)帶有互動(dòng)體驗(yàn)，只會(huì)在裝飾性設(shè)計(jì)上面營(yíng)造氛圍。

最近在體驗(yàn)即刻 APP 的時(shí)候，個(gè)人中心頭像可以長(zhǎng)按拖拽，拖拽過程伴隨著震動(dòng)感，釋放后彈出表情符號(hào)。帶有互動(dòng)體驗(yàn)感的頭像增加了個(gè)人中心的互動(dòng)感，趣味性的設(shè)計(jì)帶給用戶更高的親和力。

動(dòng)態(tài)形象提高關(guān)注度

品牌利用人物形象代言產(chǎn)品或者服務(wù)比較常見，在一些局部功能或者服務(wù)模塊也會(huì)結(jié)合人物形象，帶給用戶更強(qiáng)的親和力。通常的做法是靜態(tài)展示，動(dòng)態(tài)形象相對(duì)較少。

開言英語(yǔ) APP 學(xué)習(xí)模塊中，頂部"立即測(cè)評(píng)"區(qū)域的人物形象采用動(dòng)態(tài)形式，雖然只是簡(jiǎn)單的手勢(shì)指引，也比靜態(tài)圖片帶來的關(guān)注度要高。利用動(dòng)態(tài)形象提高模塊的關(guān)注度，也使得設(shè)計(jì)更加生動(dòng)有趣。

動(dòng)態(tài)空狀態(tài)趣味性更強(qiáng)

空狀態(tài)從文案提示到情感化設(shè)計(jì)的演變，從細(xì)微之處帶給用戶更好的感官體驗(yàn)。為了提高產(chǎn)品的體驗(yàn)，各種狀態(tài)提示設(shè)計(jì)也在不斷優(yōu)化創(chuàng)新，利用動(dòng)態(tài)的形式提高趣味性也是一個(gè)可取的方向。

COVES APP 在空狀態(tài)界面利用帶有動(dòng)態(tài)的形象進(jìn)行設(shè)計(jì)表達(dá)，使得原本枯燥無趣的界面變得生動(dòng)有趣。提高了用戶的關(guān)注度，也提升了設(shè)計(jì)的感官度。

動(dòng)態(tài)極光風(fēng)按鈕設(shè)計(jì)

極光風(fēng)效果設(shè)計(jì)是近些年在 UI 設(shè)計(jì)中較為流行的趨勢(shì)，不僅可以豐富視覺表現(xiàn)，也能使得產(chǎn)品設(shè)計(jì)更加年輕化。被廣泛運(yùn)用于背景裝飾、卡片式裝飾、彈窗設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、按鈕設(shè)計(jì)等場(chǎng)景中。

優(yōu)酷 APP 在會(huì)員欄目中，將打卡按鈕以動(dòng)態(tài)極光風(fēng)效果進(jìn)行設(shè)計(jì)，提高了按鈕的關(guān)注度。設(shè)計(jì)風(fēng)格顯得更加年輕化，動(dòng)感的表達(dá)形式打破了按鈕設(shè)計(jì)的常規(guī)表達(dá)，帶給用戶更高的感官體驗(yàn)。

動(dòng)態(tài)引導(dǎo)提高關(guān)注度

針對(duì)新功能或者重點(diǎn)功能在設(shè)計(jì)的時(shí)候，都會(huì)進(jìn)行引導(dǎo)式設(shè)計(jì)，以此提高用戶的關(guān)注度。除了通過設(shè)計(jì)的視覺化增強(qiáng)和浮層提示以外，動(dòng)態(tài)的引導(dǎo)設(shè)計(jì)也是不錯(cuò)的選擇。

優(yōu)酷 APP 在用戶主頁(yè)為了提高用戶發(fā)布視頻的參與度，每次新進(jìn)頁(yè)面就會(huì)以動(dòng)態(tài)形式彈出引導(dǎo)設(shè)計(jì)。提示用戶"抓住你的創(chuàng)作靈感"，青春活潑的視覺風(fēng)格和動(dòng)效的雙重強(qiáng)化，提高關(guān)注度的同時(shí)也增強(qiáng)了用戶的感官體驗(yàn)。

帶有互動(dòng)感的品牌墻設(shè)計(jì)

品牌 LOGO 展示常見的形式都比較中規(guī)中矩，橫向或者縱向均以排版整齊為主。最近發(fā)現(xiàn)一個(gè)比較新穎好玩的品牌墻展示，結(jié)合互動(dòng)性營(yíng)造趣味感的體驗(yàn)。

開眼 APP 在品牌墻展示 LOGO 時(shí)，使用圓形帶有動(dòng)態(tài)的形式，類似于一堆氣泡相互碰撞，還能拖拽進(jìn)行互動(dòng)。停留時(shí) LOGO 會(huì)自動(dòng)飄起來，漂浮到界面頂部，真實(shí)感和互動(dòng)性較強(qiáng)。該設(shè)計(jì)形式不僅打破了常規(guī)，也帶給用戶十分有趣的互動(dòng)體驗(yàn)。

彈幕強(qiáng)化內(nèi)容關(guān)注度

彈幕出現(xiàn)在視頻播放中相信大家已經(jīng)很熟悉，可以增強(qiáng)觀看視頻的互動(dòng)性，也能激發(fā)大家的話題參與度。彈幕的運(yùn)用不局限于視頻，還能用于增強(qiáng)內(nèi)容的關(guān)注度。

LOFTER APP 首頁(yè)在話題欄目中，單個(gè)內(nèi)容區(qū)域增加了彈幕設(shè)計(jì)，提高了內(nèi)容的關(guān)注度和氛圍感。

彈幕設(shè)計(jì)也可以出現(xiàn)在社區(qū)中，營(yíng)造社區(qū)的氛圍感。自如 APP 在發(fā)現(xiàn)生活欄目頂部視覺區(qū)域也運(yùn)用了彈幕設(shè)計(jì)，以此來提高自如社區(qū)的氛圍感，吸引更多用戶參與分享和評(píng)論。

卡片式輪播的色彩變化

為了提高用戶的關(guān)注度和強(qiáng)化信息的對(duì)比度，在設(shè)計(jì)的時(shí)候都會(huì)在背景層和信息設(shè)計(jì)層強(qiáng)化，針對(duì)卡片式設(shè)計(jì)在背景層強(qiáng)化是一個(gè)不錯(cuò)的方向。

MOO 音樂在主題電臺(tái)欄目，針對(duì)橫向滑動(dòng)切換的卡片背景做了色彩變化。利用極光風(fēng)效果處理的同時(shí)，滑動(dòng)的時(shí)候背景也會(huì)進(jìn)行變化，色彩變化過渡自然，表現(xiàn)形式新穎獨(dú)特。

動(dòng)畫引導(dǎo)效果更直觀

針對(duì)功能或者業(yè)務(wù)進(jìn)行引導(dǎo)設(shè)計(jì)，有助于讓用戶更快的理解，便于操作。提高引導(dǎo)設(shè)計(jì)的關(guān)注度和理解度，降低學(xué)習(xí)成本是設(shè)計(jì)的目標(biāo)。

MOO 音樂在引導(dǎo)設(shè)計(jì)的時(shí)候采用動(dòng)畫形式表達(dá)，傳達(dá)意思更加直觀清晰。動(dòng)畫的形式更能吸引用戶觀看，達(dá)到更好的信息傳達(dá)目的，也能提高產(chǎn)品的感官體驗(yàn)。

動(dòng)感的音頻波動(dòng)打造獨(dú)特記憶點(diǎn)

音樂帶來的不只是聽覺體驗(yàn)，也有視覺享受的一面，讓用戶沉浸在音樂的氛圍中。

MOO 音樂在播放界面設(shè)計(jì)中，底部配合音量的大小彈出音頻波動(dòng)條，帶給用戶視聽雙享受。音頻波動(dòng)條采用不同的元素進(jìn)行設(shè)計(jì)，體現(xiàn)不同音樂的差異，帶給用戶獨(dú)特的感官體驗(yàn)。差異化的設(shè)計(jì)表達(dá)也能打造獨(dú)特的記憶點(diǎn)，讓用戶在眾多的音樂產(chǎn)品中形成獨(dú)特的記憶。

小結(jié)

本期感官體驗(yàn)日記主要總結(jié)了動(dòng)效范圍的內(nèi)容，根據(jù)特定的主題范圍去體驗(yàn)分析，也能提高自己發(fā)現(xiàn)設(shè)計(jì)細(xì)節(jié)的能力。從細(xì)微之處體現(xiàn)設(shè)計(jì)差異，帶給用戶更強(qiáng)的品牌記憶和感官體驗(yàn)。

本期分享到此結(jié)束，僅為個(gè)人角度的體驗(yàn)總結(jié)，希望可以帶給大家更多靈感啟發(fā)。

作者：黑馬家族