界面交互動(dòng)效核心知識(shí)的分類(lèi)與總結(jié)

UX
4 評(píng)論 17682 瀏覽 152 收藏 7 分鐘

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

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

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

界面交互動(dòng)效是用來(lái)干什么的?

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

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

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

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

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

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

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

界面交互動(dòng)效如果以界面的維度來(lái)說(shuō)可以分為以下兩類(lèi):

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

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

第二類(lèi):界面間的交互動(dòng)效

幾個(gè)界面之間的的交互動(dòng)效通常是平緩過(guò)渡到下一頁(yè)。常見(jiàn)的有以下幾類(lèi):

1.硬切到下一頁(yè)

2.下一頁(yè)從右往左推入(上一頁(yè)從左往右推出)

3.下一頁(yè)從下往上彈出

4.上一頁(yè)的元素過(guò)渡到下一頁(yè)

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

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

 

作者:UX,華為ITUX交互組組長(zhǎng) ?微信公眾號(hào):UEDC

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 學(xué)到很多

    回復(fù)
  2. 這動(dòng)圖是怎么做出來(lái)的==

    來(lái)自江蘇 回復(fù)
    1. 在蘋(píng)果電腦上面用quicktime player 錄屏,之后再在ps上轉(zhuǎn)成gif

      來(lái)自江蘇 回復(fù)
    2. 受益匪淺 ??

      來(lái)自浙江 回復(fù)