經驗分享：移動應用交互動效設計

編者按：本文是@亞茹有李?妹紙觀察多個移動應用交互動畫設計后的總結，關于一些細節性的東西，同學們可以參考一下。

移動動效設計還有幾篇非常精彩的好文：
《帥呆了！一組令人愉悅的APP動效設計》
《高手之路！設計漂亮有趣的轉場動效》
《經驗分享：如何快速保存APP動效？》

1、teambition：

A：主要是團隊項目協作工具，方便團隊的管理；
B：注冊和登錄輸入框增加減少的流暢轉換；

2、rookie：

A：主要是美化照片，如添加邊框，濾鏡美化；
B：對美化出來的照片會已層層壓在一起，可以手動縮放也可以自動縮放，動畫很流暢；
C：分享照片的時候，照片放大，模糊的背景框從下到上彈出來；

3、heyday：

A：重新構想生活日志，它將iphone中的照片和視頻轉換為一本精美的日志；
B：將照片進行布局排列，可以“互換”和“添加”照片到對應的排列框內；
C：選中不用的照片直接拖動就會刪除，就像直接扔掉垃圾桶一樣特別的流暢；

4、jukely：

A：主要是現場看音樂表演并可以在現場中及時互動；
B：在搜索的時候，搜索的標簽會以一個點散發出來形成列表標簽；
C：點擊首頁左上角的人的圖標直接進入個人的資料頁面，個人頭像飛過去動畫；
D：詳情頁的分享操作，當點擊分享按鈕時候對話框從上面斜飛出來，點擊退出斜下飛出；
E：詳情頁表態操作，喜歡和不喜歡分別從左右兩邊向中間聚焦，退出向左右擴出；

5、FIFA：

A：一款足球應用軟件，解鎖足球的世界，每周提供賽事、數千進球以及很多的足球內容；
B：點擊左側的菜單，出現側邊欄目，正文的內容縮放很小的樣式；

6、番茄快點：

A：提供美食餐飲類的應用；
B：選中某一個菜之后小番茄會以小動畫的形式加入到右下角的按鈕下面；
C：如何一鍵點菜推出的菜不符合自己的口味，可以自己選擇并以翻書的效果到推薦的下一篇菜譜當中；

7、calculator：

A：一款手寫計算器；
B：手寫任意的數字公式，則APP自動識別進行計算出結果，很強大；

8、涂書筆記：

A：一款圖書筆記記錄工具，可以把紙面文字馬上電子化，專為讀書人設計；
B：在看書的時候，看到某些句子不錯，想記錄到手機上，此時可以用涂書筆記APP拍照并手涂你想要的文字，則該APP會自動識別出來你剛才涂抹的句子；手寫的文字識別出來的效果很差，書本上的文字識別出來的效果幾乎沒有差錯；

9、jetsetter：

A：一款當日酒店預訂的產品；
B：列表頁面和詳情頁面之間切換，使的返回的圖標來回翻轉效果表現的不錯；

10、priceline：

A：一款預訂酒店，在旅途中機票和租車；
B：詳情頁面的動畫效果做的不錯；

原文地址：blog.boocss
作者：@亞茹有李

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量72萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：