這篇文章是基于我自己的理解對界面交互動(dòng)進(jìn)行了分類整理和總結(jié)。

什么是界面交互動(dòng)效？

界面交互動(dòng)效是展現(xiàn)界面間的轉(zhuǎn)換和界面內(nèi)元素變化的交互反饋。而效果就表現(xiàn)在觸發(fā)與結(jié)束的過程中，表現(xiàn)清晰的層級關(guān)系，自然的引出與結(jié)束。交互動(dòng)效有著承上啟下的重要作用。

界面交互動(dòng)效是用來干什么的？

• 讓用戶清晰地感受到當(dāng)前所處場景和層級關(guān)系。
• 多種UI元素之間的相互轉(zhuǎn)換。
• 給用戶制造驚喜感使用戶愉悅。

界面交互動(dòng)效五大注意點(diǎn)

1. 避免動(dòng)效過于花哨、酷炫、標(biāo)新立意
2. 在效率型應(yīng)用中，過度、無意義的動(dòng)畫只會阻塞任務(wù)流程
3. 動(dòng)作動(dòng)效不超過1秒
4. 用戶專注內(nèi)容時(shí)，不要用吸引注意的動(dòng)畫去打擾
5. 出現(xiàn)頻率高的操作動(dòng)效，避免用戶反感，延遲操作時(shí)間

如何設(shè)置緩動(dòng)曲線與時(shí)間讓動(dòng)效更加自然，可以看下面的一些總結(jié)

1. linear曲線（勻速運(yùn)動(dòng)）除了一些特殊場景如加載、很少被使用。
2. easeIn（先緩后快）使用場景較少，主要在掉落、中使用。
3. easeInOut（頭尾緩、中間快）通常在輪轉(zhuǎn)切換的動(dòng)畫中使用，這類動(dòng)畫的觸發(fā)對象與運(yùn)動(dòng)對象并不是同一個(gè)元素。
4. easeOut（先快后緩）最常見的效果，其觸發(fā)對象與運(yùn)動(dòng)對象往往是同一個(gè)。主要用在展開、收起、出現(xiàn)、移動(dòng)等動(dòng)畫中。當(dāng)不知道用哪個(gè)緩動(dòng)曲線時(shí)，用這個(gè)一般不會錯(cuò)。
5. 曲度主要表現(xiàn)運(yùn)動(dòng)過程的力的大小，曲度越大，啟示力或阻力越大。
6. 回彈則表現(xiàn)的是運(yùn)動(dòng)的劇烈程度及對象的質(zhì)地。
7. 運(yùn)動(dòng)時(shí)間一般都控制在0.3s-0.8s之間，過長的時(shí)間會讓人感覺拖沓，不自然。

界面交互動(dòng)效如果以動(dòng)效的表現(xiàn)屬性來分可以分為兩種：

• 第一種：為銜接類型動(dòng)畫。主要針對不同界面直接的銜接，為帶來更流暢的操作觀感所做的設(shè)計(jì)，彌補(bǔ)兩個(gè)界面直接的差異所帶來的用戶感知落差。
• 第二種為特效類動(dòng)畫。特效的核心目的是為了吸引用戶的注意力，提高信息敏感度，在游戲界面設(shè)計(jì)當(dāng)中使用更為廣泛，能夠帶來更加絢麗的動(dòng)態(tài)畫面。

界面交互動(dòng)效如果以界面的維度來說可以分為以下兩類：

第一類：界面內(nèi)的交互動(dòng)效

在一個(gè)界面內(nèi)的交互動(dòng)效特別多，例如點(diǎn)擊加號出現(xiàn)下拉菜單，出現(xiàn)浮層動(dòng)畫提示，點(diǎn)擊舵式導(dǎo)航出現(xiàn)選擇類型和遮罩，點(diǎn)擊按鈕出現(xiàn)評論點(diǎn)贊，當(dāng)前頁面的展開收起，加載等等。如下圖所示：

第二類：界面間的交互動(dòng)效

幾個(gè)界面之間的的交互動(dòng)效通常是平緩過渡到下一頁。常見的有以下幾類：

1.硬切到下一頁

2.下一頁從右往左推入（上一頁從左往右推出）

3.下一頁從下往上彈出

4.上一頁的元素過渡到下一頁

看完上述的闡述，接下來是最后的兩個(gè)建議點(diǎn)。

1. 動(dòng)效創(chuàng)意方面的創(chuàng)新要依據(jù)用戶的認(rèn)知模型。單純很炫很酷的動(dòng)效如果脫離了用戶的認(rèn)知模型，那么這樣的交互動(dòng)效對于整個(gè)產(chǎn)品來說是有害的。
2. 做界面交互動(dòng)效的目的是為了更好地落地。如何更好地高效地表現(xiàn)我們設(shè)計(jì)的動(dòng)效。同時(shí)使得我們制作的動(dòng)效可以很好的運(yùn)用到實(shí)現(xiàn)落地中，這是很重要的，不然所有的一切都是海市蜃樓。

作者：UX，華為ITUX交互組組長 ?微信公眾號：UEDC

本文由 @UX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。