2025-3-25 天宇 交互設(shè)計及用戶體驗
編輯導(dǎo)讀：動效效果是一個功能性元素，而不僅僅是一個裝飾。本文作者介紹了五個交互動效效果，水平視差滾動效果、動畫搜索欄交互、提交按鈕啟動信息、頁面間的分頁動畫、用粘性元素展開卡片，希望對你有幫助。
設(shè)計一個帶有動效效果和轉(zhuǎn)場效果的用戶界面，是為另一個手機應(yīng)用規(guī)劃一個更好的用戶體驗的好方法。在一個注意力持續(xù)時間短暫的世界里，動畫-微交互是刺激用戶參與的好方式。
這就是為什么 Airbnb最近推出Lottie–它是一個“新開源工具，可以輕松為本地應(yīng)用程序添加動效效果”像Lottie項目表明了，為應(yīng)用程序和網(wǎng)站增加用戶體驗，其中添加動畫作為一個新元素越來越重要。
就像所有放入界面中的元素并與之交互的過程一樣，動效效果也是一個功能性元素，而不僅僅是一個裝飾。動效效果在用戶界面應(yīng)該堅持一個恰到好處的處理，而背后設(shè)置始終需要有一個明確的目的。當(dāng)動效效果是錦上添花而不是美中不足時，用戶體驗會更流暢。
以下是介紹的交互動效效果：
視差效果在數(shù)字系統(tǒng)設(shè)計中可以同時用于垂直面和水平面。視差效果首次應(yīng)用是在視頻游戲，數(shù)十年后它進入了網(wǎng)頁設(shè)計應(yīng)用中，然后漸漸的又進入了移動應(yīng)用程序，使用靜態(tài)或緩慢移動的背景圖像與快速移動的前景圖像，創(chuàng)建一個多層次的3D滾動效果。這使用戶體驗更加身臨其境，以其微妙之處吸引用戶。為什么這會讓人眼前一亮-
一起看一下在設(shè)計原則中的兩個視差滾動效果實例。
手機游戲武器卡：
Weapon cards by Hassan Mahmud
視差效果最佳位置之一是在移動應(yīng)用程序或網(wǎng)站上水平或垂直滾動卡片，體驗最流暢環(huán)節(jié)的感受，是在最后部分的一張卡片。類似于iphone在你滾動到特定列表的末尾時引入的橡皮筋效應(yīng)。
耐克APP促銷卡：
Nike promotional cards by Jardson Almeida
這個例子是耐克APP概念創(chuàng)作的視差滾動效果，來促進即將到來的產(chǎn)品發(fā)布。
這個設(shè)計通過突出前景元素—- 鞋子—- 將其提升了一個層次，從而超越了背景卡片的邊緣。這個效果彌補滾動時發(fā)生的背景顏色改變。正如你看到的例子，精心制作的視差互動效果可以很容易幫助你從產(chǎn)品群中脫穎而出并為你的訪客建立一個好的印象。不要認為視差是純粹的裝飾，像你使用的其他技術(shù)一樣，它應(yīng)該為你的用戶增加真正有價值的體驗方式被融合。
但是，需要注意的是在視差效應(yīng)范圍內(nèi)過多的運動可能會對那些患有前庭疾病的人造成傷害。運動錯覺和深度錯覺可能導(dǎo)致眩暈或者迷失方向感，請切記這些設(shè)計準(zhǔn)則：
搜索欄是用戶在移動應(yīng)用程序或網(wǎng)頁設(shè)計中最常見的圖形元素之一。在這種類型的動畫中，界面通常只有一個搜索圖標(biāo)，當(dāng)你點擊它搜索輸入字段時會顯示一個彈性動畫。通過在搜索元素中添加一個微妙的動畫，設(shè)計師可以實現(xiàn)兩個基本目標(biāo):
讓我們看一下這個交互的例子：
Search transform by Alex Pronsky
這個設(shè)計展示了放大鏡（搜素欄）作為圓形圖標(biāo)，點擊該圖標(biāo)時它會有動效，變成藥丸形狀的搜索框。這是一個非常輕量級的交互設(shè)計，在 Principle 上只需要不到5個頁面就可以實現(xiàn)，并且在開發(fā)應(yīng)用程序或網(wǎng)站時也同樣簡單。
用戶填寫表單或在應(yīng)用程序中進行某些選擇按下提交按鈕之后就會出現(xiàn)這個動畫。一個應(yīng)用程序首次啟動并且所有序緩存和數(shù)據(jù)都被提取時，啟動(Splash) 動畫也會被使用。啟動動畫通常包括 logo 和應(yīng)用程序的名稱，通常會在應(yīng)用程序打開前在屏幕上出現(xiàn)片刻。為什么這會讓人眼前一亮-
讓我們來看一個交互式啟動畫面的例子：
Submit splash screen by Khai
這個設(shè)計是用戶在應(yīng)用程序中完成提交交互之后的展示的動畫。當(dāng)數(shù)據(jù)被發(fā)送到數(shù)據(jù)庫時，彈跳球創(chuàng)建了一個有趣的體驗，接下來的勾號向用戶提供反饋，告訴用戶的操作是成功的，這是一個重要的體驗實現(xiàn)。以下是啟動畫面時要遵循的一些最佳的方法：
分頁是一系列相互連接且內(nèi)容相似的頁面，需要注意的是即使頁面中某一部分的內(nèi)容可以分為不同的頁面，我們?nèi)匀粚⑦@個概念定義為分頁。其優(yōu)點包括3個：更容易的導(dǎo)航、更好的用戶體驗、更流暢的購買過程。通常用在電子商務(wù)網(wǎng)站。
讓我們來看一個分頁組件的例子，它可以在各個部分之間滑動并且可以通過動畫創(chuàng)建一個令人愉快的用戶體驗：
Pagination by André Gonçalves
當(dāng)用戶在不同部分之間切換時，它創(chuàng)造了一種流暢的用戶體驗。它可以用在應(yīng)用程序中用戶可以在各個部分之間快速滑動。例如瀏覽電子商務(wù)網(wǎng)站中的產(chǎn)品圖片、閱讀教育應(yīng)用程序中的不同部分信息，或者按照步驟創(chuàng)建食品應(yīng)用程序的配方。
在用戶界面設(shè)計中，卡片列表是一個易于展示信息快的方法。借鑒現(xiàn)實世界中使用實物卡片記憶和組織信息的方法ーー例如抽屜卡或便利貼ーー卡片列表顯示一系列卡片，每張卡片包含一小部分信息。因此，設(shè)計的真正的難點在于平衡信息的傳遞方式，而不是讓使用者不知所措。
用戶應(yīng)該得到一個清晰的圖片并準(zhǔn)確傳達信息，如果用戶選擇深入瀏覽時，可以選擇擴展信息和更深入的展示。保持卡片展開的連續(xù)性、流動性應(yīng)是平順且感覺就像是一個連接在一起的感覺。
像上面所有的交互一樣，看一個交互設(shè)計的例子：
MVMT concept by Lukas Guschlbauer
這個設(shè)計是用在一個電子商務(wù)的應(yīng)用程序，購買手表顯示卡的項目。主要的信息如價格和等級需要顯示在每張卡片。擴展卡片可以顯示額外的信息，例如使用特點和推薦。在消費購買決策時，這款手表的粘性擴展視圖創(chuàng)造了一個更好的體驗。直觀的使用和-正確的操作-通常美學(xué)上也是令人舒適的。擴展卡片列表可以構(gòu)建響應(yīng)式布局設(shè)計，也是提高可用性的絕佳方案。目的是提高瀏覽內(nèi)容或者信息量大的應(yīng)用程序。
作者：Samarth Zalte
本文由@木之 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
藍藍設(shè)計的小編 http://bouu.cn