聊聊未來設(shè)計(jì)趨勢的App UI動效

4 評論 17326 瀏覽 14 收藏 5 分鐘

 

善心悅目的動效已然成為一個App的必備,作為設(shè)計(jì)師自然要跟隨趨勢學(xué)習(xí)。APP中的動效可以劃分為兩類,一類是轉(zhuǎn)場動效,應(yīng)用在頁面的切換,加載等,這類動效可以柔和頁面的過度效果,增加切換、加載、等待過程的趣味性。另一類是反饋提醒,通過界面內(nèi)元素的動效,增強(qiáng)用戶的交互感知或引導(dǎo)用戶完成任務(wù)。

1.gif

動效充滿了設(shè)計(jì)師體驗(yàn)的想象,作為一個設(shè)計(jì)師,不管你的逼格下限在哪里,一個有趣有愛充滿個性的進(jìn)度條都是你設(shè)計(jì)生涯中不能拒絕的愛。那么設(shè)計(jì)師什么時候需要做一個動效設(shè)計(jì)呢?

1、等待都需要一個有意義的動效。面對等待,我們總是缺少耐心。充滿個性,有趣的動效可以讓用戶對你的設(shè)計(jì)對上一份喜愛:至少這個設(shè)計(jì)還不錯。

02-app-dong-xiao.gif

2、如果你希望用戶點(diǎn)擊這個地方,請給它一個動效。

1433314050883122

3、如果你希望你的點(diǎn)擊效果不一樣,請給它一個動效。

1433314090923023

下面則是一些常見的動效設(shè)計(jì)方法,當(dāng)我們在合適的條件下,自然要考慮從這些方法入手,為我們的設(shè)計(jì)增加一絲動感。

一、將元素替換為個性化內(nèi)容

傳統(tǒng)的等待或加載動畫人們已經(jīng)熟悉,想讓人眼前一亮,改頭換面是必須的。如谷歌用了自己的顏色,去哪兒用了自己的logo等,這些都是可以在個性化動效的同時凸顯產(chǎn)品品牌,不失為一個很好的選擇。

05-app-dong-xiao.gif

二、更換產(chǎn)品的運(yùn)動方式

除了旋轉(zhuǎn)運(yùn)動之外,我們還可以運(yùn)用重復(fù),構(gòu)建,變形,擬物、人的動作(翻書)等,只要是和產(chǎn)品定位相符的元素,我們都能給它創(chuàng)意一個獨(dú)特的運(yùn)動方式。

06-app-dong-xiao.gif

重復(fù)運(yùn)動

07-app-dong-xiao.gif

構(gòu)建

三、賦予組件明顯的交互反饋

冷冰冰的點(diǎn)擊和出現(xiàn)往往不能吸引用戶的注意力,所以,當(dāng)我們需要加強(qiáng)某些元素來引導(dǎo)用戶的時候可以給這些元素加上適當(dāng)?shù)某霈F(xiàn)效果,如漸隱漸顯,位移,放大縮小,光暈,分布等效果,會起到很好的引導(dǎo)效果。

08-app-dong-xiao.gif 09-app-dong-xiao.gif 10-app-dong-xiao.gif

動效設(shè)計(jì)可以的精妙之處在于瞬間獲得的體驗(yàn),通過瞬間的可見變化豐富了人們在使用app時的感覺,不再陌生,不再冰冷,不再無趣等等。動效設(shè)計(jì)在賦 予了元素動的同時,我認(rèn)為還要符合人們的認(rèn)知,并不是所有的動都能讓人愉悅,既要滿足產(chǎn)品的需求,還要能匹配人們的當(dāng)時的場景訴求。希望大家在今后的設(shè)計(jì) 中都能有高水平的動效設(shè)計(jì)。

 

原文地址:ued.baidu

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 大方向和好創(chuàng)意沒毛病,但是如果想讓用戶有非常好的用戶體驗(yàn),那更可謂是錦上添花。就好比我們穿的衣服,它基本需求是保溫、遮丑。這些都好滿足。如果能在這個基本需求之下滿足人們愛慕的需求。那將是更好的

    來自浙江 回復(fù)
  2. 這些動效是用什么做出來的呀

    來自北京 回復(fù)
  3. 最后一個怎么不動

    來自北京 回復(fù)
  4. 最后一個挺好看的

    來自廣東 回復(fù)