[翻譯] 2014年最佳iOS UI動畫

戴倉薯發表於2015-01-18

本文由 戴倉薯(也就是我!) 翻譯,賴信濤 校稿。首發於伯樂線上
英文出處:beautifulpixels.com

本文例項視訊均在 youtube 上,需翻牆

在 The Highlight 2014 的第三天,我們為您帶來這一系列從 app 和網際網路中精心挑選出的最佳 UI 動畫。App 向來是 UI 的實驗田,能在 app 裡看到令人愉悅、體驗良好的動畫一向是件很棒的事。設計師和開發者們一直努力為 app 提供最好的使用者體驗。我們釋出的 2013 精選集是 2014 年 Beautiful Pixel 上訪問量最大的文章,這對 app 開發者是最好的鼓勵。以下是我們今年的精選集:

Design Shots

視訊演示

App Store 上有一大堆 Dribbble 客戶端的 app。前段時間,Dribbble app 大量湧現,我們在 Beautiful Pixel 上也有所報導。但是其中的絕大部分發布之後就再也不更新了。而 Design Shots 則不然,首次釋出就很亮眼,而且後面也在持續更新新特性。它的動畫效果尤其出色。動畫效果之間契合得很好,完全沒有胡亂堆砌動畫庫的感覺。點選頭像切換到個人資料頁面的動畫很精彩。Design Shots 裡的動畫會跟隨你手指的划動而動,正是這些細節的設計使它出眾。iPhone 版的 Design Shots 可以在 App Store 上免費下載到,不試用一下都對不起自己啦。

Lush

視訊演示

Lush 在設計上面面俱到。從精美極簡的 app 圖示到 app 裡五彩繽紛的標誌符,Lush 無疑在眾多混合飲料 app 中鶴立雞群。Lush 的動畫效果也是頂級的。飲料滑過螢幕,就像老式西部電影的酒吧裡飲料滑過桌面。像 tab bar 這類的細節,都經過了充分的設計,帶有可愛的顏色變幻動畫和高光,讓人感覺像在家裡一樣。app 裡的每款雞尾酒都有單獨的設計,可圈可點。而 Lush 的動畫無疑讓 app 給人留下深刻印象。遺憾的是,這個 app 至今都沒適配 iPhone 6 和 6 Plus 的大螢幕。但它仍然值得擁有。Lush 在 App Store 上架,價格 $1.99。

Clima

視訊演示

Clima 是 iPhone 上最好的天氣 app 之一。它就是一個簡單的 app,充滿讓人愉快的動畫效果。切換不同介面的過渡效果很棒,還伴隨著俏皮的跳動。只需輕輕幾點,Clima 就能展示出詳細的天氣情況。當它獲取溫度資訊時,還有一個可愛的彩色條紋波動動畫。在 App Store 裡氾濫的極簡天氣 app 中,Clima 與眾不同。Clima 在 App Store 上架,價格 $0.99。希望它很快會適配新 iPhone 的大螢幕吧。

Storehouse

視訊演示

Storehouse 是最近在 App Store 登場的最佳 app 之一,榮獲了今年的 App 設計大獎。Storehouse 在 iPad 上非常風靡,在 iPhone 的小螢幕上表現同樣出色。app 上手幾分鐘即可清晰感受到,開發團隊在同時適配這兩種裝置上做足了功夫。無論是瀏覽社群裡發表的文章還是自己發表文章,app 的動畫設計無微不至。我們尤其喜歡下拉重新整理的微妙動畫,以及滾動頁面時照片落入的方式。Storehouse 可以在 App Store 免費下載,支援 iPhone 和 iPad。

ReadMe

視訊演示

在 ReadMe.io 網站上註冊或登入時,它的吉祥物貓頭鷹會讓你眼前一亮。在註冊頁面,貓頭鷹會用右邊的羽毛指著當前獲得焦點的輸入框。隨著焦點切換到下一個輸入框,它的羽毛也跟著移動。在登入頁面,當焦點移動到密碼輸入框時,貓頭鷹會捂住眼睛,不看你的密碼。這些動畫效果都是用細節打動使用者的典型例子。

Unread

視訊演示

Unread 是一款出色的 RSS 閱讀器,支援 iPhone 和 iPad,我們前段時間就推薦過它。它的動畫效果和手勢好得出奇,我們尤其喜歡的是下拉重新整理的動畫。這個 app 最早是由 Jared Sinclair 製作,現在是由 Supertop 繼續開發。整個 app 裡充滿了精巧而微妙的細節,讓使用體驗非常愉快。Unread 可以在 App Store 上免費下載,支援 iPhone 和 iPad。

TodoMovies

視訊演示

我們很喜歡 TodoMovies,之前向電影迷們推薦過這款 app,它能很好地幫你發現和管理“想看”和“看過”的電影。在這個app 裡,當你點選某個電影的分享按鈕時,會出現一個巧妙的小動畫。電影的海報縮小成一個圓圈,而四面飛出 4 種渠道的分享按鈕。你要親眼看到這個動態過程,才能領略它的好處。TodoMovies 可以在 App Store 免費下載。

特別推薦:Google Play 箭頭

Google 新的 Material Design 原則和實現,有很多方面令人讚歎;而我們尤其喜歡的是 Google Play 之類的 app 裡,漢堡三線按鈕變成黑色箭頭的方式。變化的動畫效果很巧妙。看到過一個類似的例子,是 starwars.com 上漢堡三線按鈕變成兩道鐳射劍的動畫;但那是在 web 頁面上,動畫卡得比較厲害,結果給人的感覺不是很好。

特別推薦之二:Gmail iOS版客戶端收件夾為空的動畫

Google 的運動圖形設計師 John Schlemmer 向我們介紹了這個他參與制作的漂亮動畫效果,是在 Gmail 的 iOS 客戶端上,當你的收件夾為空時顯示的。我們之前完全錯過了它。

圖片描述

Dribbble 上用 GIF 模仿的效果

2014 年在 UI 動畫方面最令人失望的是,Pocket Casts 在下拉重新整理時去掉了它標誌性的收音機調頻的動畫。我們不確定原因為何,只能為它的消失而傷心不已。

本週我們有一系列令人期待的新文章,所以快來訂閱我們的 RSS、Twitter 和 Facebook 吧。是 Beautiful Pixels 忠實讀者的愛和反饋,讓本次 The Highlight 2014 成為可能。感謝您的支援。

相關文章