新的APP演示良方:GIF動畫

4 評論 32318 瀏覽 9 收藏 10 分鐘

每種事物都有回歸的本能,長期以來,GIF動畫在開發者當中,失去了它的統治地位,不再受歡迎,不再通用,近期它擺出了回擊的姿態。盡管還是一如既往展示圖像序列,但它不再像當年那些生硬的低畫質視頻,沒有粗糙簡陋的過渡效果。如今,GIF動畫能夠通過搶眼的效果和流暢的過渡,有效地聚集人氣,給最終的動畫一種柔滑精致的感觀。

UI/UX開發者迅速估量了這種動畫圖片的潛力,它們雖小卻非常有效,極具解釋性。我們都知道,有時向客戶或最終用戶解釋APP最后看起來將是什么樣,會是多么困難、氣人且耗時的事情;沒有華麗的高質量截屏,精心繪制的用戶界面配上一大堆解釋和“手勢”說明效果,并不怎么管用。只有視頻和這些簡短的GIF動畫,才能輕松展示操作流程,并傳達一款“活”APP的所有魅力,在眾多功能組件之間,有效地展現交互。

頗具諷刺意味的是,我們的展示工具集中,最近補充了一種新工具,而它實際上一直以來就近在咫尺。

今天,我們匯集了一系列GIF動畫作品,愉快地展現了各種移動應用的操作流程。

第一件作品是Dmitriy Chuta的Chapps,你可以欣賞它整個漂亮的動畫效果,一組不同職業人員的照片卡。這張GIF圖片展示了一種討人喜愛的方式,通過令人愉快的視覺表現,來在數據庫中進行選擇和搜索。

Bastien Leprince的APP概念設計,這里,我們的主要注意力,集中在地圖組件內嵌的拖拽篩選功能上。所展示的所有功能界面和組件,相互間完美互動,為用戶提供了一套流暢的操作流程。

App concept

George Frigo的FaceScan APP概念設計,盡管動畫只持續了12秒,但它足夠清晰地表達了這個APP的主要創意。對于那些想要一睹完整版的人,這位UI設計師也提供了AVI文件。

FaceScan app concept

Alexander van Ravestyn設計的WIP音樂發現APP,就如名字所暗示的,設計師想將用戶的注意力引導到多媒體內容的瀏覽過程上來,不出所料,最終來到一個設計精美的音樂播放器界面。

Discover Music app

Jakub Antalík設計的Speedcam APP動畫,設計師非常棒地通過動畫表現他的APP。GIF漂亮地展示了speedcam的一部分,光彩奪目。

Speedcam app animation

Barthelemy Chalvet的Workflow Payment,這個團隊展示了他們新APP的幾張GIF。下面這張將關注點固定在支付流程上,看起來相當優雅便捷。其他GIF突出了時間軸、支付/費用、卡片和賬戶處理。

Workflow Payment

Barthelemy Chalvet的Dashag Tour,這個團隊只是展示了一張小GIF動畫,讓人想起他們之前的項目。如果你想完全熟悉這個APP,可以訪問他們的官方網站,里面包含了一大堆GIF動畫,展示幾乎所有的功能界面。

Dashag Tour

Sergey Valiukh的GIF動畫設計,這個一流的界面有著令人愉快的精心處理的過渡動畫,表現了在基本地圖組件與主菜單間切換的簡短流程。通過舒服的動畫效果,一切相互銜接良好。

gif animaton

Devin Ruppert的Walkthrough動畫,這張GIF展現了一個歡迎界面,帶有多個動態圖的幻燈片和登陸按鈕面板。一切都活了,有效地表現了這個APP所帶來的功能。

Walkthrough Animation

Mihnea Zamfir的交互概覽,這是個非常簡短卻有效的動畫,初衷是描繪一個從卡片目錄中添加和刪除項目的簡單流程。

Interaction overview

Tobs設計了給隊友刪除和添加任務的動畫,這張GIF動態展現了標準的滑動技巧,有效地支撐了整個審美取向,讓APP看起來更鮮活、現代和誘人。

Delete task and assign task

Jan Losert的團隊信息工具,這個團隊為用戶提供了大量解釋性資料,不僅用來展示帶有描述的靜態屏幕截圖,還有視頻和一張巨大的GIF動畫,展現這個APP的真實操作過程。

Ben Dunn的菜單交互GIF,這個動畫GIF被當作展示動態美感的工具,表現了菜單優雅地從左側滑出,并列出所有必要鏈接的過程。

Menu interaction

Ed Sansom的Poppin添加任務效果,這個APP有著討人喜愛的圓形氛圍和優雅的扁平美學取向,集各種柔滑效果于一張GIF,使它得到了恰到好處的強調

Adding a task

Dennis Terrey的第一件UI動畫作品,這張GIF試圖示范,如何使一個基本的菜單看上去干凈、時尚和細膩。

UI Animation

Danny Spitzer-Cohn的Zite新鮮事設計,我希望用這個討人喜愛的GIF動畫來補充這篇作品集,它對高雅和傳統的運用,絕對給人帶來一絲愉悅的懷舊感。

Next for Zite

對于那些想要嘗試這種展現方式的人,我們也準備了幾樣贈品——可以被輕松拆解成組件的GIF動畫。

贈品:PixelBuddha的扁平風格預加載動畫

Freebie: flat preloaders

Areus Wade預制的觸摸手勢動畫

Precomposed Touch Gestures

結論

就APP創造者和客戶(或最終用戶)間的互動而言,像Adobe After Effects這樣的視頻編輯軟件充滿了機會和可能,能夠解決很多問題。GIF圖片可以用來簡短的解釋動畫效果,有效的展現操作流程,讓人更好地理解這是怎么回事。

#專欄作家#

可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產品經理專欄作家,UI/UX設計師,關注互聯網,關注科技?,F居杭州,與小伙伴們正在創業途中?;蛟S不是一名優秀的設計師,至少是個快樂的設計師。

轉載請保留上述作者信息并附帶本文鏈接

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我也想問要怎樣解決gif文件很大的問題,有沒有什么好的工具推薦

    來自廣東 回復