我們?yōu)槭裁葱枰獎有гO(shè)計

5 評論 11202 瀏覽 33 收藏 8 分鐘

推薦語:最近越來越多的國內(nèi)公司開始關(guān)注動效設(shè)計了,越來越多的團隊意識到動效在產(chǎn)品用戶體驗中的重要性,下面就看下動效設(shè)計的意義。

隨著國際大品牌蘋果和谷歌的引領(lǐng),最近越來越多的國內(nèi)公司開始關(guān)注動效設(shè)計了,越來越多的團隊已經(jīng)意識到動效在產(chǎn)品用戶體驗中的重要性了,更多的射雞師們也開始投身動效設(shè)計領(lǐng)域。

但是說到底,我們到底為什么需要動效設(shè)計?或者說我們到底需要什么樣的動效?做動效設(shè)計也有段時間了,于是嘗試用一些案例,從產(chǎn)品本身出發(fā)來說說我所思考的動效設(shè)計。(文中部分案例為設(shè)計師個人作品,部分為線上產(chǎn)品,都是我非常非常欣賞的作品。如不慎冒犯請戳我替換掉)

一、加強體驗舒適度

嗯,就是讓用戶更加爽更加爽的用你的產(chǎn)品。

具體表現(xiàn)在:

1.表現(xiàn)層級關(guān)系

為了展現(xiàn)層與層的關(guān)系,是抽屜,是打開,還是平級切換等等,讓用戶知道這個界面和上一個、下一個的關(guān)系。這已經(jīng)是非常最常見的運用了。

2.與用戶手勢結(jié)合,更自然的動畫表現(xiàn)

當用戶手勢操作的時候,讓界面的動態(tài)走向更符合手指的運動,從而讓用戶感覺到是自己控制了界面的動向,而不是機械化的跳轉(zhuǎn)。

City guide app?用手勢可以向左向右扔卡片

3.愉快的提示功能

在某些需要提醒的時候能吸引用戶的注意,但是又不會生硬,符合預(yù)期的出現(xiàn)。

Action button feedback出錯提示

City GUIdes啟動時提示用戶可以左右滑動卡片

4.額外增加界面的活力

在用戶預(yù)期之外增加的驚喜,可以是帥氣的,可以是賣萌,可以有些物理屬性,總之讓用戶感知到產(chǎn)品的生命力。

?readme.io?萌萌的輸入框

amazon?Q彈的菜單

tumblr不喜歡我 心都碎了呢~

5.吸引用戶持久的注意力

也是屬于增加用戶的驚喜感,在某些數(shù)據(jù)量較大的界面中添加一些動效,讓用戶保持注意力。

Bubbles以動態(tài)的形式展現(xiàn)數(shù)據(jù)點

二、減弱不可避免的不適感

雖然我們的產(chǎn)品,我們的交互,我們的設(shè)計,我們的工程獅都在努力把產(chǎn)品打造的更加優(yōu)秀,更加完美,但是總有一些無法避免的問題、或者有可能會出現(xiàn)的bug、外界條件的不給力等因素,造成我們的產(chǎn)品體驗下降。這些時候適當?shù)脑黾右恍﹦有Э梢詮浹a在出現(xiàn)這些情況時的不適體驗。

比如下面這些:

1.讓等待變得更愉快

常出現(xiàn)在加載、刷新、發(fā)送等界面中,讓等待變得可視化,甚至不再那么無聊。

Download讓下載不再枯燥

?App loader有趣的loading動畫

gear-powered拉了還想拉的下拉刷新

2.失敗界面的動效

比如刷新失敗、頁面錯誤、未聯(lián)網(wǎng)提示這些。

?download就算失敗了還是感覺萌萌噠~

3.增加界面與界面銜接的延續(xù)感

界面的跳轉(zhuǎn)不可以避免,但是如果讓本來分別獨立的2個界面或者事件擁有了某種特定的聯(lián)系,可以顯得更加好玩,不再是生硬的跳轉(zhuǎn)。

IOS Animation Download界面跳轉(zhuǎn)時保留部分元素到下一個界面

?Filter Menu保留需要的條目 移走不再用的

?Elevate

三、不易被察覺的動效

特意把這一類單獨說一下,由于不容易被發(fā)現(xiàn),普通用戶通常會忽略它們的存在,但很多時候這些小細節(jié)讓交互變得更加有趣。

1.默默增加反饋感

為用戶的操作提供有趣的正反饋。

Twitter收藏的點擊反饋

2.去除用戶不再需要的元素

隨著用戶的操作,有的內(nèi)容已經(jīng)是用戶不再關(guān)注的。這時候可以將他們隱藏起來。

CityHour Calendar Animated Interaction

Steller

? ? ? ? 上面的例子大部分都是比較特色鮮明的,但是大多數(shù)實際情況中的優(yōu)秀動效設(shè)計都會涉及到好幾點同時都滿足??偟膩碚f動效還是為用戶體驗而服務(wù)的,動效設(shè)計師尤其要注意交互邏輯,才能讓你的作品看起來不但動效帥氣逼人而且真正發(fā)揮了實際的作用。

最后要提醒的是,千萬不要犧牲了用戶寶貴的時間用來看你毫無目的的動效。

文章總結(jié)了一些自己的想法,有不足之處希望各位可以指出~

作者:cardist

來源:UI中國

原文地址:http://www.ui.cn/detail/54562.html

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 這是怎么做到的呢?Axure可以實現(xiàn)嗎?

    來自廣東 回復(fù)
  2. 這些動效是如何實現(xiàn)的,交互設(shè)計師設(shè)計這些動效時應(yīng)該輸出怎樣的文檔

    來自浙江 回復(fù)
  3. 干得漂亮

    來自廣東 回復(fù)
  4. 這樣的動效設(shè)計在安卓機型上面來說目前應(yīng)該還是存在著一定的制約,各方面還沒有普及,但是總體上來說的話,應(yīng)該是屬于當下最棒、最有交互感的設(shè)計了,大贊

    來自安徽 回復(fù)
  5. 做的真好

    來自廣東 回復(fù)