編輯導讀：動效效果是一個功能性元素，而不僅僅是一個裝飾。本文作者介紹了五個交互動效效果，水平視差滾動效果、動畫搜索欄交互、提交按鈕啟動信息、頁面間的分頁動畫、用粘性元素展開卡片，希望對你有幫助。

設計一個帶有動效效果和轉場效果的用戶界面，是為另一個手機應用規劃一個更好的用戶體驗的好方法。在一個注意力持續時間短暫的世界里，動畫-微交互是刺激用戶參與的好方式。

這就是為什么 Airbnb最近推出Lottie–它是一個“新開源工具，可以輕松為本地應用程序添加動效效果”像Lottie項目表明了，為應用程序和網站增加用戶體驗，其中添加動畫作為一個新元素越來越重要。

就像所有放入界面中的元素并與之交互的過程一樣，動效效果也是一個功能性元素，而不僅僅是一個裝飾。動效效果在用戶界面應該堅持一個恰到好處的處理，而背后設置始終需要有一個明確的目的。當動效效果是錦上添花而不是美中不足時，用戶體驗會更流暢。

以下是介紹的交互動效效果：

1. 水平視差滾動效果；
2. 動畫搜索欄交互；
3. 提交按鈕啟動信息；
4. 頁面間的分頁動畫；
5. 用粘性元素展開卡片；

一、水平視差滾動效果

視差效果在數字系統設計中可以同時用于垂直面和水平面。視差效果首次應用是在視頻游戲，數十年后它進入了網頁設計應用中，然后漸漸的又進入了移動應用程序，使用靜態或緩慢移動的背景圖像與快速移動的前景圖像，創建一個多層次的3D滾動效果。這使用戶體驗更加身臨其境，以其微妙之處吸引用戶。為什么這會讓人眼前一亮-

• 數字屏幕是一個二維空間，但是設計師能在他們的平面像素屏幕上做有深度和廣度的創意，這就是微妙視差效果能發揮作用的地方。
• 視差滾動效果在界面設計中采用不同的視覺元素并以不同的速度移動它們來增加動作和深度的錯覺。

一起看一下在設計原則中的兩個視差滾動效果實例。

手機游戲武器卡：

Weapon cards by Hassan Mahmud

視差效果最佳位置之一是在移動應用程序或網站上水平或垂直滾動卡片，體驗最流暢環節的感受，是在最后部分的一張卡片。類似于iphone在你滾動到特定列表的末尾時引入的橡皮筋效應。

耐克APP促銷卡：

Nike promotional cards by Jardson Almeida

這個例子是耐克APP概念創作的視差滾動效果，來促進即將到來的產品發布。

這個設計通過突出前景元素—- 鞋子—- 將其提升了一個層次，從而超越了背景卡片的邊緣。這個效果彌補滾動時發生的背景顏色改變。正如你看到的例子，精心制作的視差互動效果可以很容易幫助你從產品群中脫穎而出并為你的訪客建立一個好的印象。不要認為視差是純粹的裝飾，像你使用的其他技術一樣，它應該為你的用戶增加真正有價值的體驗方式被融合。

但是，需要注意的是在視差效應范圍內過多的運動可能會對那些患有前庭疾病的人造成傷害。運動錯覺和深度錯覺可能導致眩暈或者迷失方向感，請切記這些設計準則：

• 將視差效果的數量保持在最低限度；
• 屏幕的一個小區域內限制過多移動效果；
• 不要讓你的效果分散用戶對重要信息的注意力；

二、動畫搜素欄交互

搜索欄是用戶在移動應用程序或網頁設計中最常見的圖形元素之一。在這種類型的動畫中，界面通常只有一個搜索圖標，當你點擊它搜索輸入字段時會顯示一個彈性動畫。通過在搜索元素中添加一個微妙的動畫，設計師可以實現兩個基本目標:

1. 查詢和搜索數據是數字產品中最常見的交互方式之一，為他們增添樂趣；
2. 只有當用戶需要搜索輸入時，通過擴展搜索欄有效利用空白區。

讓我們看一下這個交互的例子：

Search transform by Alex Pronsky

這個設計展示了放大鏡（搜素欄）作為圓形圖標，點擊該圖標時它會有動效，變成藥丸形狀的搜索框。這是一個非常輕量級的交互設計，在 Principle 上只需要不到5個頁面就可以實現，并且在開發應用程序或網站時也同樣簡單。

三、提交按鈕啟動消息

用戶填寫表單或在應用程序中進行某些選擇按下提交按鈕之后就會出現這個動畫。一個應用程序首次啟動并且所有序緩存和數據都被提取時，啟動(Splash) 動畫也會被使用。啟動動畫通常包括 logo 和應用程序的名稱，通常會在應用程序打開前在屏幕上出現片刻。為什么這會讓人眼前一亮-

• 當應用程序進入加載階段來獲取或上傳數據時，啟動動畫非常合適，提供一個為用戶參與的錨點；
• 然而，理想情況是通過提供強烈影響用戶體驗的交互式體驗，可以使用戶走得更遠。

讓我們來看一個交互式啟動畫面的例子：

Submit splash screen by Khai

這個設計是用戶在應用程序中完成提交交互之后的展示的動畫。當數據被發送到數據庫時，彈跳球創建了一個有趣的體驗，接下來的勾號向用戶提供反饋，告訴用戶的操作是成功的，這是一個重要的體驗實現。以下是啟動畫面時要遵循的一些最佳的方法：

• 將持續時間控制在2秒以內；
• 對于用戶可能在應用程序中多次進行的交互將時間減少到1秒或更短（比如多次提交）；
• 在評估設計想法時要追求簡單和大膽的想法而不是難懂的、錯綜復雜點子；
• 過于復雜的序列動畫只會顯得華而不實，可能會讓用戶覺得他們的時間被浪費；
• 強烈的背景色彩、背景圖片都是不錯的選擇。假如啟動畫面有動畫效果，那么在一個相對固定或漸變的背景上添加動畫可能呈現的效果會更好。

四、頁面間的分頁動畫

分頁是一系列相互連接且內容相似的頁面，需要注意的是即使頁面中某一部分的內容可以分為不同的頁面，我們仍然將這個概念定義為分頁。其優點包括3個：更容易的導航、更好的用戶體驗、更流暢的購買過程。通常用在電子商務網站。

• 雖然大多數傳統網站和應用程序使用單獨的頁面來分割內容，由于頁面加載時間較長，導致用戶體驗不連貫，但新的設計系統已經開始使用更流暢的分頁交互，從而降低了客戶流失率，提高了客戶留存率；
• 過去用一個流暢的分頁動畫需要通過幾個頁面進行導航，現在我們可以創建一個單頁面的內容交互的效果。

讓我們來看一個分頁組件的例子，它可以在各個部分之間滑動并且可以通過動畫創建一個令人愉快的用戶體驗：

Pagination by André Gonçalves

當用戶在不同部分之間切換時，它創造了一種流暢的用戶體驗。它可以用在應用程序中用戶可以在各個部分之間快速滑動。例如瀏覽電子商務網站中的產品圖片、閱讀教育應用程序中的不同部分信息，或者按照步驟創建食品應用程序的配方。

五、用粘性元素展開卡片

在用戶界面設計中，卡片列表是一個易于展示信息快的方法。借鑒現實世界中使用實物卡片記憶和組織信息的方法ーー例如抽屜卡或便利貼ーー卡片列表顯示一系列卡片，每張卡片包含一小部分信息。因此，設計的真正的難點在于平衡信息的傳遞方式，而不是讓使用者不知所措。

用戶應該得到一個清晰的圖片并準確傳達信息，如果用戶選擇深入瀏覽時，可以選擇擴展信息和更深入的展示。保持卡片展開的連續性、流動性應是平順且感覺就像是一個連接在一起的感覺。

像上面所有的交互一樣，看一個交互設計的例子：

MVMT concept by Lukas Guschlbauer

這個設計是用在一個電子商務的應用程序，購買手表顯示卡的項目。主要的信息如價格和等級需要顯示在每張卡片。擴展卡片可以顯示額外的信息，例如使用特點和推薦。在消費購買決策時，這款手表的粘性擴展視圖創造了一個更好的體驗。直觀的使用和-正確的操作-通常美學上也是令人舒適的。擴展卡片列表可以構建響應式布局設計，也是提高可用性的絕佳方案。目的是提高瀏覽內容或者信息量大的應用程序。

作者：Samarth Zalte

本文由@木之 翻譯發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

 

蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan