亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

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

2022-3-8    純純

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

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

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

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

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

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

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

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

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

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

第一種:為銜接類型動(dòng)畫

主要針對(duì)不同界面直接的銜接,為帶來更流暢的操作觀感所做的設(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)擊加號(hào)出現(xiàn)下拉菜單,出現(xiàn)浮層動(dòng)畫提示,點(diǎn)擊舵式導(dǎo)航出現(xiàn)選擇類型和遮罩,點(diǎn)擊按鈕出現(xiàn)評(píng)論點(diǎn)贊,當(dāng)前頁面的展開收起,加載等等。如下圖所示:

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

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

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

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

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

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

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

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

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

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

△ 硬切到下一頁

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

△ 下一頁從右往左推入(上一頁從左往右推出)

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

△  下一頁從下往上彈出

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

△  上一頁的元素過渡到下一頁

總結(jié):

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔