新的APP演示良方:GIF動(dòng)畫

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

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

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

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

今天,我們匯集了一系列GIF動(dòng)畫作品,愉快地展現(xiàn)了各種移動(dòng)應(yīng)用的操作流程。

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

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

App concept

George Frigo的FaceScan APP概念設(shè)計(jì),盡管動(dòng)畫只持續(xù)了12秒,但它足夠清晰地表達(dá)了這個(gè)APP的主要?jiǎng)?chuàng)意。對于那些想要一睹完整版的人,這位UI設(shè)計(jì)師也提供了AVI文件。

FaceScan app concept

Alexander van Ravestyn設(shè)計(jì)的WIP音樂發(fā)現(xiàn)APP,就如名字所暗示的,設(shè)計(jì)師想將用戶的注意力引導(dǎo)到多媒體內(nèi)容的瀏覽過程上來,不出所料,最終來到一個(gè)設(shè)計(jì)精美的音樂播放器界面。

Discover Music app

Jakub Antalík設(shè)計(jì)的Speedcam APP動(dòng)畫,設(shè)計(jì)師非常棒地通過動(dòng)畫表現(xiàn)他的APP。GIF漂亮地展示了speedcam的一部分,光彩奪目。

Speedcam app animation

Barthelemy Chalvet的Workflow Payment,這個(gè)團(tuán)隊(duì)展示了他們新APP的幾張GIF。下面這張將關(guān)注點(diǎn)固定在支付流程上,看起來相當(dāng)優(yōu)雅便捷。其他GIF突出了時(shí)間軸、支付/費(fèi)用、卡片和賬戶處理。

Workflow Payment

Barthelemy Chalvet的Dashag Tour,這個(gè)團(tuán)隊(duì)只是展示了一張小GIF動(dòng)畫,讓人想起他們之前的項(xiàng)目。如果你想完全熟悉這個(gè)APP,可以訪問他們的官方網(wǎng)站,里面包含了一大堆GIF動(dòng)畫,展示幾乎所有的功能界面。

Dashag Tour

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

gif animaton

Devin Ruppert的Walkthrough動(dòng)畫,這張GIF展現(xiàn)了一個(gè)歡迎界面,帶有多個(gè)動(dòng)態(tài)圖的幻燈片和登陸按鈕面板。一切都活了,有效地表現(xiàn)了這個(gè)APP所帶來的功能。

Walkthrough Animation

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

Interaction overview

Tobs設(shè)計(jì)了給隊(duì)友刪除和添加任務(wù)的動(dòng)畫,這張GIF動(dòng)態(tài)展現(xiàn)了標(biāo)準(zhǔn)的滑動(dòng)技巧,有效地支撐了整個(gè)審美取向,讓APP看起來更鮮活、現(xiàn)代和誘人。

Delete task and assign task

Jan Losert的團(tuán)隊(duì)信息工具,這個(gè)團(tuán)隊(duì)為用戶提供了大量解釋性資料,不僅用來展示帶有描述的靜態(tài)屏幕截圖,還有視頻和一張巨大的GIF動(dòng)畫,展現(xiàn)這個(gè)APP的真實(shí)操作過程。

Ben Dunn的菜單交互GIF,這個(gè)動(dòng)畫GIF被當(dāng)作展示動(dòng)態(tài)美感的工具,表現(xiàn)了菜單優(yōu)雅地從左側(cè)滑出,并列出所有必要鏈接的過程。

Menu interaction

Ed Sansom的Poppin添加任務(wù)效果,這個(gè)APP有著討人喜愛的圓形氛圍和優(yōu)雅的扁平美學(xué)取向,集各種柔滑效果于一張GIF,使它得到了恰到好處的強(qiáng)調(diào)

Adding a task

Dennis Terrey的第一件UI動(dòng)畫作品,這張GIF試圖示范,如何使一個(gè)基本的菜單看上去干凈、時(shí)尚和細(xì)膩。

UI Animation

Danny Spitzer-Cohn的Zite新鮮事設(shè)計(jì),我希望用這個(gè)討人喜愛的GIF動(dòng)畫來補(bǔ)充這篇作品集,它對高雅和傳統(tǒng)的運(yùn)用,絕對給人帶來一絲愉悅的懷舊感。

Next for Zite

對于那些想要嘗試這種展現(xiàn)方式的人,我們也準(zhǔn)備了幾樣贈(zèng)品——可以被輕松拆解成組件的GIF動(dòng)畫。

贈(zèng)品:PixelBuddha的扁平風(fēng)格預(yù)加載動(dòng)畫

Freebie: flat preloaders

Areus Wade預(yù)制的觸摸手勢動(dòng)畫

Precomposed Touch Gestures

結(jié)論

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

#專欄作家#

可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計(jì)師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設(shè)計(jì)師,至少是個(gè)快樂的設(shè)計(jì)師。

轉(zhuǎn)載請保留上述作者信息并附帶本文鏈接

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

    來自廣東 回復(fù)