萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 移動應用交互動效設計

移動應用交互動效設計

 移動應用交互動畫設計 三聯

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

  1、teambition:

  A:主要是團隊項目協作工具,方便團隊的管理;

  B:注冊和登錄輸入框增加減少的流暢轉換;

經驗分享:移動應用交互動畫設計

  2、rookie:

  A:主要是美化照片,如添加邊框,濾鏡美化;

  B:對美化出來的照片會已層層壓在一起,可以手動縮放也可以自動縮放,動畫很流暢;

  C:分享照片的時候,照片放大,模糊的背景框從下到上彈出來;

經驗分享:移動應用交互動畫設計

  3、heyday:

  A:重新構想生活日志,它將iphone中的照片和視頻轉換為一本精美的日志;

  B:將照片進行布局排列,可以“互換”和“添加”照片到對應的排列框內;

  C:選中不用的照片直接拖動就會刪除,就像直接扔掉垃圾桶一樣特別的流暢;

20140429_pic_03

  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:詳情頁面的動畫效果做的不錯;

20140429_pic_09
copyright © 萬盛學電腦網 all rights reserved