界面交互動效核心知識的分類與總結

什么是界面交互動效?

界面交互動效是展現界面間的轉換和界面內元素變化的交互反饋。而效果就表現在觸發與結束的過程中,表現清晰的層級關系,自然的引出與結束。交互動效有著承上啟下的重要作用。

 

界面交互動效是用來干什么的?

  • 讓用戶清晰地感受到當前所處場景和層級關系。

  • 多種UI元素之間的相互轉換。

  • 給用戶制造驚喜感使用戶愉悅。

 

界面交互動效五大注意點:

  1. 避免動效過于花哨、酷炫、標新立意

  2. 在效率型應用中,過度、無意義的動畫只會阻塞任務流程

  3. 動作動效不超過1秒

  4. 用戶專注內容時,不要用吸引注意的動畫去打擾

  5. 出現頻率高的操作動效,避免用戶反感,延遲操作時間

 

如何設置緩動曲線與時間讓動效更加自然,可以看下面的一些總結:

  1. linear曲線(勻速運動)除了一些特殊場景如加載、很少被使用。

  2. easeIn(先緩后快)使用場景較少,主要在掉落、中使用。

  3. easeInOut(頭尾緩、中間快)通常在輪轉切換的動畫中使用,這類動畫的觸發對象與運動對象并不是同一個元素。

  4. easeOut(先快后緩)最常見的效果,其觸發對象與運動對象往往是同一個。主要用在展開、收起、出現、移動等動畫中。當不知道用哪個緩動曲線時,用這個一般不會錯。

  5. 曲度主要表現運動過程的力的大小,曲度越大,啟示力或阻力越大。

  6. 回彈則表現的是運動的劇烈程度及對象的質地。

  7. 運動時間一般都控制在0.3s-0.8s之間,過長的時間會讓人感覺拖沓,不自然。

 

界面交互動效如果以動效的表現屬性來分可以分為兩種:

  • 第一種:為銜接類型動畫。主要針對不同界面直接的銜接,為帶來更流暢的操作觀感所做的設計,彌補兩個界面直接的差異所帶來的用戶感知落差。

  • 第二種為特效類動畫。特效的核心目的是為了吸引用戶的注意力,提高信息敏感度,在游戲界面設計當中使用更為廣泛,能夠帶來更加絢麗的動態畫面。

 

界面交互動效如果以界面的維度來說可以分為以下兩類:

第一類:界面內的交互動效

在一個界面內的交互動效特別多,例如點擊加號出現下拉菜單,出現浮層動畫提示,點擊舵式導航出現選擇類型和遮罩,點擊按鈕出現評論點贊,當前頁面的展開收起,加載等等。如下圖所示:

    

    

 

第二類:界面間的交互動效

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

1.硬切到下一頁

 

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

 

3.下一頁從下往上彈出

 

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

 

看完上述的闡述,接下來是最后的兩個建議點:

  1. 動效創意方面的創新要依據用戶的認知模型。單純很炫很酷的動效如果脫離了用戶的認知模型,那么這樣的交互動效對于整個產品來說是有害的。

  2. 做界面交互動效的目的是為了更好地落地。如何更好地高效地表現我們設計的動效。同時使得我們制作的動效可以很好的運用到實現落地中,這是很重要的,不然所有的一切都是海市蜃樓。

 

封面作者:

作者:Echo(微信公眾號:UEDC)

上一篇: 優秀設計師:設計中的故事思維

下一篇: 大合集!最新版iPhone X 展示模板樣機下載!

分享到: 更多
北京pk 全天北京pk10大小计划 七星彩抓规神器 pk10长期挂机玩法 快乐扑克奖金 艇走势技巧贴吧 黑杰克21棋牌游戏 9肖计算公式 k10必中冠军计划 夺宝阁在线计划网页版 买网络彩票快3稳赚不赔的方法 全天老北京pk赛车计划 幸运飞艇电脑计划软件 重庆龙虎和走势图计划 mg游戏官网网址 三公游戏软件