APP UI動效設(shè)計中六個基本原則與最高原則

3 評論 14112 瀏覽 98 收藏 5 分鐘

app動效設(shè)計,現(xiàn)在已是各位APP設(shè)計師學(xué)習(xí)和臨摹的方向。大家也會收集一些好看的APP動效設(shè)計作品。學(xué)習(xí)app動效設(shè)計,不是盲目的讓界面動起來那么簡單,一定不能濫用。要學(xué)會克制。

在優(yōu)設(shè)網(wǎng)當(dāng)中的一篇文章給我們闡述了 UI設(shè)計師必須知道的UI動態(tài)設(shè)計規(guī)則。也就是APP動效設(shè)計的六個基本原則。

下面我們先看下一組值得學(xué)習(xí)的按鈕、開關(guān)、滑塊等控件的動效欣賞,希望能給你設(shè)計帶來新鮮靈動的感覺。

按鈕、開關(guān)、滑塊等控件的動效欣賞 (1)

按鈕、開關(guān)、滑塊等控件的動效欣賞 (2)

第一部分:APP動效設(shè)計的六個基本原則

1、要保存APP的個性化

也是今天我們重點所講的APP UI動效設(shè)計中最基本的原則:具備個性化的動效設(shè)計。也是一款A(yù)PP特殊身份標(biāo)識的象征。

2、具備導(dǎo)向的功能

比如APP UI動效就應(yīng)該如同導(dǎo)游一樣,為用戶指引方向,防止用戶感到無聊,減少額外的圖形化說明。

3、背景動效的使用

APP動效應(yīng)當(dāng)為內(nèi)容賦予背景,通過背景來表現(xiàn)內(nèi)容的物理狀態(tài)和所處環(huán)境。

個性化的動效設(shè)計

4、與用戶產(chǎn)生共鳴

APP UI動效的目的是與用戶互動,并產(chǎn)生共鳴,而非令他們困惑甚至感到意外。UI動效和用戶操作之間的關(guān)系應(yīng)該是互補的,兩者共同促成交互完成。

5、給動效賦予情感

好的UI動效是能夠喚起積極的情緒反應(yīng)的,平滑流暢的滾動能帶來舒適感,而有效的動作執(zhí)行往往能帶來令人興奮的愉悅和快感。

6、理解此處應(yīng)用動效的目的,切記亂用

濫用特效會讓用戶分心,把握好這個微妙的平衡。APP動效是用來保持用戶的關(guān)注點、引導(dǎo)用戶操作的,不要為了動效而動效。

APP界面切換動效

第二部分:APP UI動效設(shè)計當(dāng)中的最高設(shè)計原則——具備個性化的動效設(shè)計

個性化的動效設(shè)計是APP UI動效設(shè)計中最基本的原則,甚至可以說是動效設(shè)計的最高原則。

APP ?UI動效設(shè)計就是要擺脫APP“開袋即食”的粗獷設(shè)定,設(shè)計獨特的動效,創(chuàng)造引人入勝的效果。

在確保UI風(fēng)格的一致性的前提下,表達(dá)出APP的鮮明個性,這就是UI動效設(shè)計“個性化”要做的事情。同時,還應(yīng)令動效的細(xì)節(jié)符合那些約定俗成的交互規(guī)則,這樣動效就具備了“可預(yù)期性”,用戶不會有“出戲”的感覺,如此一來,UI動效設(shè)計便有助于強化用戶的交互經(jīng)驗,保持APP黏度與活躍度。

Dots

比如:Dots這款A(yù)PP 將使用這種輕松愉悅的慣性動效,貫穿在整個APP UI設(shè)計的每個角落,讓它從同類APP中脫穎而出。

下面我們再看看一組非常有意思的鼠標(biāo)動效欣賞,都是一些驚人的動效之美。

個性化的動效設(shè)計5

下面是一個比較活潑,擬人化的下拉刷新的APP動效欣賞。

個性化的動效設(shè)計233

以上這些個性化的APP動效設(shè)計,有沒有驚艷到你呢?

 

作者:25學(xué)堂

來源:http://www.25xt.com/allcode/13689.html

本文由 @25學(xué)堂 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 不錯學(xué)習(xí)了

    來自上海 回復(fù)
  2. 確定值得學(xué)習(xí)

    回復(fù)
  3. 這種動銷在國內(nèi)的app很少見到,一部分material design的app可能會有些體現(xiàn)。目前偏年輕化的app比較適合這些動畫。

    來自廣東 回復(fù)