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

設(shè)計(jì)一個(gè)帶有動(dòng)效效果和轉(zhuǎn)場(chǎng)效果的用戶界面，是為另一個(gè)手機(jī)應(yīng)用規(guī)劃一個(gè)更好的用戶體驗(yàn)的好方法。在一個(gè)注意力持續(xù)時(shí)間短暫的世界里，動(dòng)畫-微交互是刺激用戶參與的好方式。

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

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

以下是介紹的交互動(dòng)效效果：

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

一、水平視差滾動(dòng)效果

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

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

一起看一下在設(shè)計(jì)原則中的兩個(gè)視差滾動(dòng)效果實(shí)例。

手機(jī)游戲武器卡：

Weapon cards by Hassan Mahmud

視差效果最佳位置之一是在移動(dòng)應(yīng)用程序或網(wǎng)站上水平或垂直滾動(dòng)卡片，體驗(yàn)最流暢環(huán)節(jié)的感受，是在最后部分的一張卡片。類似于iphone在你滾動(dòng)到特定列表的末尾時(shí)引入的橡皮筋效應(yīng)。

耐克APP促銷卡：

Nike promotional cards by Jardson Almeida

這個(gè)例子是耐克APP概念創(chuàng)作的視差滾動(dòng)效果，來促進(jìn)即將到來的產(chǎn)品發(fā)布。

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

但是，需要注意的是在視差效應(yīng)范圍內(nèi)過多的運(yùn)動(dòng)可能會(huì)對(duì)那些患有前庭疾病的人造成傷害。運(yùn)動(dòng)錯(cuò)覺和深度錯(cuò)覺可能導(dǎo)致眩暈或者迷失方向感，請(qǐng)切記這些設(shè)計(jì)準(zhǔn)則：

• 將視差效果的數(shù)量保持在最低限度；
• 屏幕的一個(gè)小區(qū)域內(nèi)限制過多移動(dòng)效果；
• 不要讓你的效果分散用戶對(duì)重要信息的注意力；

二、動(dòng)畫搜素欄交互

搜索欄是用戶在移動(dòng)應(yīng)用程序或網(wǎng)頁設(shè)計(jì)中最常見的圖形元素之一。在這種類型的動(dòng)畫中，界面通常只有一個(gè)搜索圖標(biāo)，當(dāng)你點(diǎn)擊它搜索輸入字段時(shí)會(huì)顯示一個(gè)彈性動(dòng)畫。通過在搜索元素中添加一個(gè)微妙的動(dòng)畫，設(shè)計(jì)師可以實(shí)現(xiàn)兩個(gè)基本目標(biāo):

1. 查詢和搜索數(shù)據(jù)是數(shù)字產(chǎn)品中最常見的交互方式之一，為他們?cè)鎏順啡ぃ?/li>
2. 只有當(dāng)用戶需要搜索輸入時(shí)，通過擴(kuò)展搜索欄有效利用空白區(qū)。

讓我們看一下這個(gè)交互的例子：

Search transform by Alex Pronsky

這個(gè)設(shè)計(jì)展示了放大鏡（搜素欄）作為圓形圖標(biāo)，點(diǎn)擊該圖標(biāo)時(shí)它會(huì)有動(dòng)效，變成藥丸形狀的搜索框。這是一個(gè)非常輕量級(jí)的交互設(shè)計(jì)，在 Principle 上只需要不到5個(gè)頁面就可以實(shí)現(xiàn)，并且在開發(fā)應(yīng)用程序或網(wǎng)站時(shí)也同樣簡單。

三、提交按鈕啟動(dòng)消息

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

• 當(dāng)應(yīng)用程序進(jìn)入加載階段來獲取或上傳數(shù)據(jù)時(shí)，啟動(dòng)動(dòng)畫非常合適，提供一個(gè)為用戶參與的錨點(diǎn)；
• 然而，理想情況是通過提供強(qiáng)烈影響用戶體驗(yàn)的交互式體驗(yàn)，可以使用戶走得更遠(yuǎn)。

讓我們來看一個(gè)交互式啟動(dòng)畫面的例子：

Submit splash screen by Khai

這個(gè)設(shè)計(jì)是用戶在應(yīng)用程序中完成提交交互之后的展示的動(dòng)畫。當(dāng)數(shù)據(jù)被發(fā)送到數(shù)據(jù)庫時(shí)，彈跳球創(chuàng)建了一個(gè)有趣的體驗(yàn)，接下來的勾號(hào)向用戶提供反饋，告訴用戶的操作是成功的，這是一個(gè)重要的體驗(yàn)實(shí)現(xiàn)。以下是啟動(dòng)畫面時(shí)要遵循的一些最佳的方法：

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

四、頁面間的分頁動(dòng)畫

分頁是一系列相互連接且內(nèi)容相似的頁面，需要注意的是即使頁面中某一部分的內(nèi)容可以分為不同的頁面，我們?nèi)匀粚⑦@個(gè)概念定義為分頁。其優(yōu)點(diǎn)包括3個(gè)：更容易的導(dǎo)航、更好的用戶體驗(yàn)、更流暢的購買過程。通常用在電子商務(wù)網(wǎng)站。

• 雖然大多數(shù)傳統(tǒng)網(wǎng)站和應(yīng)用程序使用單獨(dú)的頁面來分割內(nèi)容，由于頁面加載時(shí)間較長，導(dǎo)致用戶體驗(yàn)不連貫，但新的設(shè)計(jì)系統(tǒng)已經(jīng)開始使用更流暢的分頁交互，從而降低了客戶流失率，提高了客戶留存率；
• 過去用一個(gè)流暢的分頁動(dòng)畫需要通過幾個(gè)頁面進(jìn)行導(dǎo)航，現(xiàn)在我們可以創(chuàng)建一個(gè)單頁面的內(nèi)容交互的效果。

讓我們來看一個(gè)分頁組件的例子，它可以在各個(gè)部分之間滑動(dòng)并且可以通過動(dòng)畫創(chuàng)建一個(gè)令人愉快的用戶體驗(yàn)：

Pagination by André Gon?alves

當(dāng)用戶在不同部分之間切換時(shí)，它創(chuàng)造了一種流暢的用戶體驗(yàn)。它可以用在應(yīng)用程序中用戶可以在各個(gè)部分之間快速滑動(dòng)。例如瀏覽電子商務(wù)網(wǎng)站中的產(chǎn)品圖片、閱讀教育應(yīng)用程序中的不同部分信息，或者按照步驟創(chuàng)建食品應(yīng)用程序的配方。

五、用粘性元素展開卡片

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

用戶應(yīng)該得到一個(gè)清晰的圖片并準(zhǔn)確傳達(dá)信息，如果用戶選擇深入瀏覽時(shí)，可以選擇擴(kuò)展信息和更深入的展示。保持卡片展開的連續(xù)性、流動(dòng)性應(yīng)是平順且感覺就像是一個(gè)連接在一起的感覺。

像上面所有的交互一樣，看一個(gè)交互設(shè)計(jì)的例子：

MVMT concept by Lukas Guschlbauer

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

原文：https://www.wednesday.is/writing-articles/5-easy-ui-interactions-in-principle

作者：Samarth Zalte

本文由@木之 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。