向優(yōu)美交互致敬!移動(dòng)端APP動(dòng)畫設(shè)計(jì)總結(jié)

2014-2-18    藍(lán)藍(lán)設(shè)計(jì)的小編

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

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里 

扁平化界面設(shè)計(jì)越來(lái)越火爆,那么在弱化視覺效果的情況下,有ui設(shè)計(jì)師提到該從交互方面使體驗(yàn)更加愉悅,現(xiàn)在很多App界面設(shè)計(jì)也在努力朝這一方向發(fā)展,例如最近火遍全球倍受好評(píng)的 《FACEBOOK PAPER 中23個(gè)的設(shè)計(jì)細(xì)節(jié)》,還有《設(shè)計(jì)師新寵!交互神器ORIGAMI》等都足以讓人期待交互的未來(lái)。

今天藍(lán)藍(lán)設(shè)計(jì)收集總結(jié)了一組移動(dòng)端的App動(dòng)畫設(shè)計(jì),朋友們可以學(xué)習(xí)一下。

百度云UE負(fù)責(zé)人@elya妞也分享了一篇App動(dòng)態(tài)設(shè)計(jì)的好文,基礎(chǔ)不行的同學(xué)可以補(bǔ)補(bǔ):
提升品質(zhì)!豐富App動(dòng)態(tài)效果的六點(diǎn)原則

1、flipboard:

利用上下動(dòng)畫來(lái)切換到下一個(gè)界面(由于網(wǎng)慢數(shù)據(jù)沒有加載出來(lái));

flipboard:剛毅的上下動(dòng)畫來(lái)切換到下一個(gè)界面(由于網(wǎng)慢數(shù)據(jù)沒有加載出來(lái));

2、Android主界面:

界面元素使用直線型的軌跡來(lái)運(yùn)動(dòng),使界面更具有科技的感覺;

Android主界面:界面元素使用直線型的軌跡來(lái)運(yùn)動(dòng),使界面更具有科技的感覺;

3、APP交換:

列表從上到下或從下到上的曲線流暢滾動(dòng)效果,很酷的(兩個(gè)手機(jī)同時(shí)裝上該 APP,靠近互換軟件);

APP交換:列表從上到下或從下到上的曲線流暢滾動(dòng)效果,很酷的(兩個(gè)手機(jī)同時(shí)裝上該 APP,靠近互換軟件);

4、高鐵大戰(zhàn)飛機(jī):

飛機(jī)從左到右飛的效果很流暢,并且下面會(huì)隨時(shí)更新一些做飛機(jī)和高鐵的 一些小貼士,這個(gè)體驗(yàn)也很不錯(cuò),還可以學(xué)到一些小常識(shí);

高鐵大戰(zhàn)飛機(jī):飛機(jī)從左到右飛的效果很流暢,并且下面會(huì)隨時(shí)更新一些做飛機(jī)和高鐵的 一些小貼士,這個(gè)體驗(yàn)也很不錯(cuò),還可以學(xué)到一些小常識(shí);

5、Jing:

音樂播放的進(jìn)度有綠色滾動(dòng)條控制顯示,點(diǎn)擊開關(guān)停止音樂播放,抽屜式的左側(cè)欄目是從下到上的飛快的速度來(lái)呈現(xiàn)出來(lái),大家下載可以體驗(yàn)下;

jing:音樂播放的進(jìn)度有綠色滾動(dòng)條控制顯示,點(diǎn)擊開關(guān)停止音樂播放,抽屜式的左側(cè)欄目是從下到上的飛快的速度來(lái)呈現(xiàn)出來(lái),大家下載可以體驗(yàn)下;

6、Etsy:

啟動(dòng)界面從下到上再由內(nèi)到外呈現(xiàn)出一張圖片,視覺沖擊力很好;

Etsy:?jiǎn)?dòng)界面從下到上再由內(nèi)到外呈現(xiàn)出一張圖片,視覺沖擊力很好;

7、Tumblr:

發(fā)布內(nèi)容時(shí),會(huì)出現(xiàn)相關(guān)的模塊,出現(xiàn)的時(shí)候是從下到上的動(dòng)畫顯示,關(guān)閉的時(shí)候從上到下飛出去;

Tumblr:發(fā)布內(nèi)容時(shí),會(huì)出現(xiàn)相關(guān)的模塊,出現(xiàn)的時(shí)候是從下到上的動(dòng)畫顯示,關(guān)閉的時(shí)候從上到下飛出去;

8、飯本:

在發(fā)布內(nèi)容時(shí),相關(guān)的功能模塊是從兩側(cè)向中間靠攏出來(lái),點(diǎn)擊是從中間向兩側(cè) 分開飛出去;

飯本:在發(fā)布內(nèi)容時(shí),相關(guān)的功能模塊是從兩側(cè)向中間靠攏出來(lái),點(diǎn)擊是從中間向兩側(cè) 分開飛出去;

9、Safari:

在查看瀏覽記錄的時(shí)候會(huì)以層級(jí)的形式出現(xiàn),這樣的表現(xiàn)形式讓用戶一目了然,android平臺(tái)的最近瀏覽記錄也是以層級(jí)形式出現(xiàn),很方便用戶瀏覽;

Safari(ios):在查看瀏覽記錄的時(shí)候會(huì)以層級(jí)的形式出現(xiàn),這樣的表現(xiàn)形式讓用戶一目了然,android平臺(tái)的最近瀏覽記錄也是以層級(jí)形式出現(xiàn),很方便用戶瀏覽;

10、NewsHub:

詳情頁(yè)面進(jìn)入時(shí)圖片成放大狀態(tài),隨著用戶向下滾動(dòng)時(shí)圖片逐漸變下;

NewsHub:詳情頁(yè)面進(jìn)入時(shí)圖片成放大狀態(tài),隨著用戶向下滾動(dòng)時(shí)圖片逐漸變下;

11、zaker:上下動(dòng)畫流暢的返回與進(jìn)入;從上到下是返回,從下到上是進(jìn)入;

12、ireader:使用柔和的翻頁(yè)效果模仿真實(shí)的閱讀體驗(yàn);

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔