1、流暢的操控感

通過(guò)大小、位置和透明度的變化，使得界面與界面之間、界面上元素的出現(xiàn)和消失都有關(guān)聯(lián)，讓用戶(hù)和產(chǎn)品的交互過(guò)程更流暢，給用戶(hù)更好的體驗(yàn)。請(qǐng)看以下案例：

1-1 Nest溫控器控制界面

Nest溫控器從時(shí)鐘轉(zhuǎn)變到溫控調(diào)節(jié)界面的過(guò)程中，時(shí)鐘的指針向圓心收縮，周?chē)臅r(shí)間刻度生長(zhǎng)并一起向中心收縮，指針收縮動(dòng)效對(duì)應(yīng)溫控調(diào)節(jié)界面溫度值的顯現(xiàn)，時(shí)間刻度的生長(zhǎng)收縮動(dòng)效對(duì)應(yīng)溫度刻度的顯現(xiàn)，由于元素之間進(jìn)行有關(guān)聯(lián)的變化，操控過(guò)程中會(huì)有絲滑流暢感。

1-2 Gira窗簾設(shè)備

當(dāng)用戶(hù)調(diào)節(jié)行程時(shí)，中間的控制點(diǎn)跟隨手指實(shí)時(shí)運(yùn)動(dòng)，而進(jìn)度條會(huì)有延時(shí)拖拽效果。為什么會(huì)是這樣呢？原因是：用戶(hù)在控制面板上的操作是需要由面板向窗簾設(shè)備發(fā)送指令的，也就是說(shuō)面板上控制窗簾到窗簾設(shè)備運(yùn)行中間會(huì)有一小段時(shí)間間隔，用戶(hù)會(huì)有延遲感，所以Gira在控制窗簾行程的過(guò)程中，進(jìn)度條為了與窗簾設(shè)備運(yùn)行同步，加入延時(shí)效果，讓用戶(hù)感覺(jué)操控響應(yīng)快的錯(cuò)覺(jué)。

1-3 Nest新款溫控器

用戶(hù)在滑動(dòng)切換功能時(shí)，功能icon會(huì)按照先后順序由大到小變化，由于連續(xù)性運(yùn)動(dòng)，每個(gè)元素運(yùn)動(dòng)都有銜接，會(huì)有流暢操控感受。

1-4 Nest智能鎖

用戶(hù)輸入密碼后至鎖打開(kāi)這段時(shí)間，數(shù)字依次向下消失，鎖icon逐漸出現(xiàn)并且打開(kāi)，體現(xiàn)出柔緩的感覺(jué)；實(shí)際上動(dòng)效有時(shí)候可以彌補(bǔ)設(shè)備執(zhí)行緩慢的不足，當(dāng)設(shè)備需要長(zhǎng)時(shí)間才能執(zhí)行時(shí)，這段時(shí)間加入動(dòng)效，動(dòng)效運(yùn)行時(shí)間和設(shè)備實(shí)際執(zhí)行時(shí)間一致，用戶(hù)就會(huì)覺(jué)得很順暢；也可以讓動(dòng)效運(yùn)行時(shí)間小于設(shè)備執(zhí)行時(shí)間，這時(shí)用戶(hù)會(huì)覺(jué)得操控反應(yīng)更快。

2.直觀明確，降低用戶(hù)學(xué)習(xí)成本

通過(guò)動(dòng)效能夠幫助用戶(hù)使用功能，對(duì)功能的方向、位置、喚出操作、路徑等進(jìn)行暗示和指導(dǎo)，方便用戶(hù)在最短的時(shí)間內(nèi)來(lái)學(xué)會(huì)操作產(chǎn)品的一些功能。請(qǐng)看以下案例：

2-1 Nest溫控器安裝界面

大多數(shù)智能設(shè)備買(mǎi)回家后，需要用戶(hù)自己安裝，有的甚至牽扯到線(xiàn)路問(wèn)題，Nest溫控器安裝界面采用與實(shí)物一致的模型元素，讓用戶(hù)有參照依據(jù)；通過(guò)零部件的運(yùn)動(dòng)告訴用戶(hù)安裝順序；通過(guò)放大細(xì)節(jié)，告訴用戶(hù)應(yīng)該選哪一個(gè)部件及如何鏈接。好的操作引導(dǎo)動(dòng)效可以讓用戶(hù)有更好的參與感、成就感，還可以降低公司的人力安裝成本、客服成本。

2-2 Google Nest Hub App端語(yǔ)音設(shè)置說(shuō)明

通過(guò)生動(dòng)形象的Mg動(dòng)畫(huà)，用戶(hù)很快就知道接下來(lái)要做什么，省去了看文字的枯燥感，提升了操作效率、趣味性。

2-3 Amazon Echo 

用戶(hù)第一次設(shè)置好監(jiān)控后，通過(guò)放射動(dòng)效提示用戶(hù)雙擊屏幕，通過(guò)上下擴(kuò)張的箭頭動(dòng)效提示用戶(hù)可以通過(guò)手指來(lái)就行監(jiān)控畫(huà)面的放大縮小。

2-4 Lenovo Smart Clock 

當(dāng)設(shè)備第一次配好網(wǎng)重新開(kāi)啟后，通過(guò)遮罩、圓點(diǎn)大小位置運(yùn)動(dòng)搭配文字告訴用戶(hù)長(zhǎng)按屏幕可以控制什么功能。

頂部弧形的上下變化，告知用戶(hù)下拉可以控制什么功能。通過(guò)簡(jiǎn)單的元素既能起到提升用戶(hù)的作用，還不打擾用戶(hù)。

3、強(qiáng)調(diào)內(nèi)容

通過(guò)動(dòng)效給用戶(hù)展示用戶(hù)需要的內(nèi)容及產(chǎn)品側(cè)想讓用戶(hù)了解的內(nèi)容，讓用戶(hù)更樂(lè)意更易于理解，強(qiáng)化功能感知。請(qǐng)看以下案例：

3-1 Nest溫控器設(shè)置界面

用戶(hù)App第一次鏈接好溫控器后，為了告訴用戶(hù)溫控器的主打功能有日程安排節(jié)能、根據(jù)時(shí)間自動(dòng)設(shè)置溫度，用幾何元素圍繞日程icon放大縮小運(yùn)動(dòng)、太陽(yáng)月亮旋轉(zhuǎn)切換直觀的強(qiáng)調(diào)這些功能，讓用戶(hù)加深對(duì)產(chǎn)品核心功能的認(rèn)識(shí)。

3-2 Lenovo Smart Clock 移動(dòng)端音樂(lè)服務(wù)設(shè)置

音樂(lè)服務(wù)類(lèi)型列表選中狀態(tài)使用翻轉(zhuǎn)選中效果，列表這里為什么需要?jiǎng)有В?

原因有可能是：1、列表中的內(nèi)容為了很好的作出區(qū)分，以彩色的形式展現(xiàn)，層級(jí)較高，選中狀態(tài)如果不加入動(dòng)效，用戶(hù)就不容易快速感知自己選擇了哪一個(gè)；2、其次列表中加入動(dòng)效，在枯燥的操作中增添了趣味性，增強(qiáng)操作愉悅感。

3-3 B&O觸控音箱

雙擊音樂(lè)標(biāo)題，進(jìn)度條從左向右生長(zhǎng)出現(xiàn)、操控點(diǎn)放大出現(xiàn)，既強(qiáng)調(diào)了進(jìn)度條這個(gè)隱藏功能，還暗示用戶(hù)可以拖動(dòng)操控點(diǎn)從左向右拖動(dòng)操作。

3-4 Google Nest Hub 調(diào)光燈界面

用戶(hù)從列表進(jìn)入調(diào)光燈界面時(shí)，調(diào)光條灰底從左向右弧度生長(zhǎng)，隨后當(dāng)前亮度條生長(zhǎng)出現(xiàn)、亮度值出現(xiàn)，先暗示了用戶(hù)可以從左向右弧度操作，后強(qiáng)調(diào)了當(dāng)前設(shè)備狀態(tài)。

3-5 Google Nest Hub 睡眠質(zhì)量檢測(cè)界面

用戶(hù)查看睡眠質(zhì)量數(shù)據(jù)時(shí)，睡眠質(zhì)量標(biāo)題信息漸隱漸現(xiàn)，睡眠數(shù)據(jù)條、數(shù)字生長(zhǎng)，讓數(shù)據(jù)展示有主次之分，強(qiáng)調(diào)了用戶(hù)想要看的內(nèi)容據(jù)，更人性。

4、提升用戶(hù)掌控感，讓用戶(hù)心中有數(shù)

在產(chǎn)品設(shè)計(jì)里面有一個(gè)非常重要的原則：讓用戶(hù)有操縱感。這種操縱感不僅僅表現(xiàn)在對(duì)用戶(hù)的操作有了反應(yīng)、有了顯示，還有一種方式是讓用戶(hù)知道當(dāng)前產(chǎn)品運(yùn)行的狀態(tài)，是正在等待還是正在加載，還是正在下載或變化，那這種狀態(tài)的告知也是增強(qiáng)用戶(hù)操縱感的方式之一。請(qǐng)看以下案例：

4-1 LG智能洗衣機(jī)

當(dāng)用戶(hù)往洗衣機(jī)里加入衣物后，出現(xiàn)量杯倒入洗衣液的動(dòng)畫(huà)，告知用戶(hù)當(dāng)前洗衣機(jī)正在進(jìn)行哪一個(gè)環(huán)節(jié)，我們分析一下這里加入動(dòng)效的用意，首先，一般的洗衣機(jī)沒(méi)有屏幕，有的話(huà)也就顯示當(dāng)前的功能選項(xiàng)，LG的這款洗衣機(jī)是液晶屏，那么它的定位就是高端人群，通過(guò)融入動(dòng)效，打造差異化，提升使用體驗(yàn)，加深用戶(hù)對(duì)LG品牌的印象。

4-2 Lenovo Smart Clock 起床鬧鐘功能

用戶(hù)設(shè)置好起床時(shí)間后，系統(tǒng)會(huì)根據(jù)時(shí)間段自動(dòng)進(jìn)行背景顏色的過(guò)度，來(lái)模擬天色的變化，直觀的告知用戶(hù)當(dāng)前的時(shí)間是白天還是晚上或是黃昏。

4-3 Orvibo 除濕界面

設(shè)備進(jìn)行除濕的過(guò)程中，面板上圓形元素進(jìn)行旋轉(zhuǎn)，伴隨粒子擴(kuò)散效果，模擬水分子消失的過(guò)程，直觀形象的告訴用戶(hù)現(xiàn)在正在做什么。

4-4 Lenovo Smart Clock 貓眼通話(huà)界面

用戶(hù)接通貓眼后，通話(huà)icon進(jìn)行電播擴(kuò)散動(dòng)效，模擬聲波擴(kuò)散效果，準(zhǔn)確的向用戶(hù)告知當(dāng)前通話(huà)中的狀態(tài)。

4-5 Google Nest Hub 語(yǔ)音喚起

當(dāng)用戶(hù)說(shuō)話(huà)喚起語(yǔ)音控制時(shí)，原先的全屏畫(huà)面收縮，響應(yīng)用戶(hù)的指令，四周留白，為通話(huà)內(nèi)容提供展示空間，然后彩色點(diǎn)元素起伏變化，通話(huà)內(nèi)容出現(xiàn)，告知用戶(hù)已接收到指令；隨后彩色點(diǎn)元素旋轉(zhuǎn)加載，體現(xiàn)正在執(zhí)行中。在語(yǔ)音控制的每一個(gè)環(huán)節(jié)都加入動(dòng)效反饋，會(huì)讓用戶(hù)覺(jué)得他不是在和一個(gè)冰冷的機(jī)器講話(huà)，富有人情味。

4-6 Orvibo 窗簾控制界面

運(yùn)用輕擬物效果和與實(shí)物一致的運(yùn)動(dòng)方式，用戶(hù)可以直觀的看到窗簾的行程位置與開(kāi)合狀況，大大的提升了產(chǎn)品易用性。

5、明確層級(jí)關(guān)系，提升用戶(hù)理解效率

面對(duì)一款新的智能產(chǎn)品時(shí)，用戶(hù)可能不知道怎么操作它，通過(guò)動(dòng)效向用戶(hù)交待頁(yè)面內(nèi)容之間的關(guān)系，讓用戶(hù)清楚的知道從哪里來(lái)，到哪里去，更易于理解從而可以快速上手使用。請(qǐng)看以下案例：

5-1 Nest溫控器設(shè)置界面

溫控器的設(shè)置模塊通過(guò)左右滾動(dòng)以便在有限的屏幕中展現(xiàn)，那么模塊的下一級(jí)頁(yè)面跳轉(zhuǎn)做成像App那樣左滑切入是無(wú)法明確層級(jí)內(nèi)容的，此時(shí)需要一個(gè)與左右滑動(dòng)不一樣的動(dòng)效來(lái)區(qū)分模塊的切換，Nest運(yùn)用翻轉(zhuǎn)效果，強(qiáng)化了層級(jí)感，清楚交待了頁(yè)面翻轉(zhuǎn)后面的內(nèi)容與頁(yè)面前的關(guān)系。

5-2 Google Nest Hub 設(shè)備控制界面

用戶(hù)從頂部導(dǎo)航中進(jìn)入設(shè)備列表過(guò)程中，設(shè)備列表頁(yè)面從右向左進(jìn)入，暗示用戶(hù)“當(dāng)你想返回上一級(jí)，可以左滑離開(kāi)哦”，用戶(hù)上下滑動(dòng)設(shè)備列表時(shí)，屏幕左邊滑動(dòng)條出現(xiàn)，更加明確了“左滑返回上一頁(yè)”的功能；

當(dāng)用戶(hù)通過(guò)列表進(jìn)入操控界面以及切換功能頁(yè)時(shí)使用淡入淡出的效果，弱化它們之間的跳出感，來(lái)強(qiáng)調(diào)它們是一個(gè)層級(jí)的內(nèi)容，從細(xì)微處可見(jiàn)Google的設(shè)計(jì)師在動(dòng)效的使用、選擇上非?？酥?，值得我們學(xué)習(xí)。

5-3 Google Nest Hub 日程提醒界面

用戶(hù)發(fā)出查看日程安排的命令時(shí)，日歷界面從左到右進(jìn)入，告訴用戶(hù)這是一個(gè)新的頁(yè)面，接著日期數(shù)字21進(jìn)行大小位移變化，月份不做變化，為了強(qiáng)調(diào)這是21號(hào)的日程，2條日程信息按照時(shí)間先后從下向上運(yùn)動(dòng)，交代了日程處理的優(yōu)先級(jí)。Google設(shè)計(jì)師將信息展現(xiàn)的每一步都讓用戶(hù)看的清楚明白。

6.減少用戶(hù)焦慮

用戶(hù)在操控設(shè)備執(zhí)行一項(xiàng)指令時(shí)，會(huì)需要一段時(shí)間的加載或傳輸過(guò)程，期間使用動(dòng)效來(lái)引起用戶(hù)的注意，從而減少用戶(hù)在等待過(guò)程中的焦慮感，實(shí)際上在這個(gè)等待的過(guò)程中，品牌方還可以利用這個(gè)寶貴的時(shí)機(jī)與用戶(hù)建立情感連接，向用戶(hù)透?jìng)髌淦放普{(diào)性，達(dá)到加深品牌記憶的目的。詳見(jiàn)下一段“07 品牌調(diào)性透?jìng)鳌薄?

6-1 Lenovo Smart Clock Wi-Fi連接操作

用戶(hù)在移動(dòng)端與設(shè)備連接時(shí)，會(huì)有一個(gè)連接等待過(guò)程，此時(shí)移動(dòng)端與設(shè)備界面中同時(shí)出現(xiàn)幾何元素在繪有Wi-Fi的灰色圖層中運(yùn)動(dòng)的動(dòng)效，形象的傳達(dá)了正在運(yùn)行的具體事項(xiàng)，我們?cè)谧黾虞d動(dòng)畫(huà)時(shí)，不光要讓加載動(dòng)起來(lái)，還要貼合當(dāng)前的內(nèi)容，做到生動(dòng)有趣。

7、品牌調(diào)性透?jìng)?

在可用性良好的前提下，通過(guò)一致性、趣味性的動(dòng)效設(shè)計(jì)和創(chuàng)新的交互方式為產(chǎn)品增加亮點(diǎn)，帶來(lái)更驚喜的體驗(yàn)，傳達(dá)產(chǎn)品的氣質(zhì)與態(tài)度。請(qǐng)看以下案例：

7-1 Google多端運(yùn)行動(dòng)效

在品牌塑造上，Google已被證明做得極為成功，而且在視覺(jué)表現(xiàn)層面，Google系產(chǎn)品具備著“一致性”和“連貫性”，這讓Google獲得了品牌識(shí)別上的利益。在不同設(shè)備的動(dòng)效設(shè)計(jì)中，Google都統(tǒng)一使用代表品牌的紅、黃、藍(lán)、綠顏色和幾何圖形，遵循化繁為簡(jiǎn)的設(shè)計(jì)準(zhǔn)則，通過(guò)簡(jiǎn)潔貼近真實(shí)的運(yùn)動(dòng)方式，讓產(chǎn)品更有人情味，讓用戶(hù)更加專(zhuān)注于內(nèi)容。

7-2 Apple AirTag搜尋界面

用戶(hù)在搜尋AirTag過(guò)程中，手機(jī)屏幕粒子循環(huán)運(yùn)動(dòng)，隨后粒子組成了一個(gè)轉(zhuǎn)動(dòng)的箭頭指向一個(gè)圓點(diǎn)，隨著用戶(hù)離得AirTag越來(lái)越近，箭頭逐漸放大消失，圓點(diǎn)隨后演變成了一個(gè)旋轉(zhuǎn)的AirTag。交互方式新穎，搜尋結(jié)果又充滿(mǎn)驚喜，對(duì)于Apple這款新產(chǎn)品，無(wú)疑讓用戶(hù)加深了印象，感受到了Apple的科技創(chuàng)新態(tài)度。

7-3 智能圓鏡

用戶(hù)在靠近圓鏡設(shè)備時(shí)，鏡面中心人臉識(shí)別icon縮放，周?chē)c(diǎn)元素波動(dòng)擴(kuò)散，吸引用戶(hù)的同時(shí)，傳達(dá)出科技感。

7-4 Apple HomePod 命令反饋界面

當(dāng)HomePod在執(zhí)行一項(xiàng)指令時(shí)，頂部的屏幕會(huì)出現(xiàn)彩球融合翻轉(zhuǎn)動(dòng)畫(huà)，多變朦朧的色彩可以喚起用戶(hù)情緒，球體間的融合過(guò)程讓產(chǎn)品生動(dòng)有趣，讓用戶(hù)感受到品牌的人情味。

7-5 Apple Watch 洗手提示界面

Apple Watch洗手功能開(kāi)啟后，會(huì)有一個(gè)20秒的倒計(jì)時(shí)，倒計(jì)時(shí)以肥皂泡沫消失擴(kuò)散的形式展現(xiàn)，很貼合當(dāng)前洗手的情景，讓原本一個(gè)普通的倒計(jì)時(shí)變得生動(dòng)且有趣味性，用戶(hù)更加樂(lè)意使用，強(qiáng)化了用戶(hù)對(duì)品牌的感知。

7-6 智能溫控器

這款溫控器已經(jīng)有一定年代了，當(dāng)時(shí)那個(gè)年代，能用到溫控器，那就很有科技感了，智能溫控器還將流動(dòng)的線(xiàn)條動(dòng)效運(yùn)用至透明背景上，向用戶(hù)傳達(dá)了超前的科技感，只要見(jiàn)了就會(huì)記住這款產(chǎn)品。

8、下面為大家整理了一份動(dòng)效在產(chǎn)品中的應(yīng)用場(chǎng)景以及設(shè)計(jì)思路

總結(jié)：

實(shí)際上智能產(chǎn)品中的動(dòng)效設(shè)計(jì)，并不是要向用戶(hù)炫技，也不是做的越炫酷越好。動(dòng)效是以解決問(wèn)題為目的的一種手段。我們要去觀察現(xiàn)有好產(chǎn)品的動(dòng)效設(shè)計(jì)落地點(diǎn)及分析他們的小心思，從而運(yùn)用至自己產(chǎn)品中，提升產(chǎn)品使用體驗(yàn)。

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

文章來(lái)源：站酷   作者：木土君

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

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)