移動端交互動效設計你怎麼看？

03-07

隨著移動設備的不斷發展，越來越多的動效運用在APP中，來提升產品的品質。不過對於動效來說，始終是產品體驗的一個環節，要符合用戶體驗的基本要素；不然過度的動效設計，只會讓產品看起來很滑稽，甚至會破壞原有的流暢體驗。

那麼移動端上的交互動效如果設計得當的話，會為我們的產品帶來什麼好處呢？

1.流暢過渡

如果說界面布局可以組織UI元素的靜態位置，那麼動效可以組織UI元素在時間維度上的演進。每一個毫秒里界面元素如何出現和消失，它的大小、位置、透明度和顏色如何變化，通過動效的詮釋，用戶與產品的交互過程會更加順暢。蝦米音樂中使用旋轉的唱片來作為場景過渡之間的連接點，契合音樂應用的主題，也是轉場過程連貫自然。

2. 高效反饋

作為與用戶之間發生聯繫的一個很重要的交互元素，良好的反饋設計可以讓用戶更好地了解到操作的結果與程序當前的狀態，減輕用戶在等待過程中的焦慮。與文字型的靜態反饋相比，使用動效可以讓反饋高效直觀。iOSapp store中通過環狀的進度圈來表現應用的下載過程，並將其與暫停按鈕結合，讓用戶對進度一目了然，還可以便捷地暫停進程。

3. 增強操縱

「直接操縱」是移動產品用戶體驗中很重要的一個概念，簡單來說，它要求我們的產品與用戶交互的方式盡量接近真實世界的互動方式。它要求交互對象的反應行為是可以預測的，不需要任何提示，並且符合我們對於現實世界規律的認知。這就要求我們拉近界面操作與用戶的距離，讓用戶難以發現虛擬的交互對象與現實的操作行為之間的屏障，很多令人新奇和興奮的設計點都來源於此。通過交互動效對於現實世界的模擬，我們可以顯著地增強產品的「直接操縱」特性。以Paper App為例，使用過它的同學都會被它精緻的交互動畫所吸引。輕輕翻動繪圖本，打開一頁開始繪畫，栩栩如生的體驗讓你即使初次使用也能很快投入。

4. 幫助引導

由於移動界面的空間非常有限，我們經常要藏起一部分功能，同時手勢操作也是移動應用中很常見的交互元素。我們要怎麼樣讓用戶發現隱藏的功能，告訴他們怎麼使用手勢呢？這個時候，動效作為一種生動的表現形式，往往可以起到很好的幫助引導效果。iOS中鎖屏界面滑動解鎖的提示會顯示一種從左到右的漸變效果，用戶可以根據這種運動方向去預知手勢的方向。在打開read it！的時候，會短暫顯示左側的菜單，然後右邊的主內容區域划過來逐漸覆蓋，直到左側只剩下圖標作為入口，這幫助用戶了解了側邊欄所隱藏的功能。

5. 升華體驗

如果你的產品已經擁有了良好的可用性，卻缺乏亮點，也許你可以考慮為其增加動效。將動效融入產品之中，往往帶來更愉悅地使用體驗，也更細膩地表達應用的情緒和氣質。具有一致性的標誌動效，常常幫助產品在細節中流露出獨有的品牌特性，增加產品的魅力值。

隨著國際大品牌蘋果和谷歌的引領，最近越來越多的國內公司開始關注動效設計了，越來越多的團隊已經意識到動效在產品用戶體驗中的重要性了，更多的射雞師們也開始投身動效設計領域。

但是說到底，我們到底為什麼需要動效設計？或者說我們到底需要什麼樣的動效？做動效設計也有段時間了，於是嘗試用一些案例，從產品本身出發來說說我所思考的動效設計。

動效設計就是讓用戶更加爽更加爽的用你的產品。

具體表現在：

1.表現層級關係

為了展現層與層的關係，是抽屜，是打開，還是平級切換等等，讓用戶知道這個界面和上一個、下一個的關係。這已經是非常最常見的運用了。

2.與用戶手勢結合，更自然的動畫表現

當用戶手勢操作的時候，讓界面的動態走向更符合手指的運動，從而讓用戶感覺到是自己控制了界面的動向，而不是機械化的跳轉。

3.愉快的提示功能

在某些需要提醒的時候能吸引用戶的注意，但是又不會生硬，符合預期的出現。

4.額外增加界面的活力

在用戶預期之外增加的驚喜，可以是帥氣的，可以是賣萌，可以有些物理屬性，總之讓用戶感知到產品的生命力。

總的來說動效還是為用戶體驗而服務的，動效設計師尤其要注意交互邏輯，才能讓你的作品看起來不但動效帥氣逼人而且真正發揮了實際的作用。最後要提醒的是，千萬不要犧牲了用戶寶貴的時間用來看你毫無目的的動效。