一系列 GIF 動(dòng)畫，感受"活"著的 APP！
GIF新演繹，APP好界面
GIF 動(dòng)畫，近年逐漸消退的熱潮將重新正裝再出發(fā)，換上更為流暢的視覺(jué)變化與高精致質(zhì)感的畫面來(lái)?yè)铽@你我的心，此外，它更成為了設(shè)計(jì)師要呈現(xiàn) APP 軟件或 UI/UX 界面時(shí)的不二選擇！以下匯集了數(shù)個(gè)設(shè)計(jì)師們的作品，一同藉由 GIF 動(dòng)畫感受他們所創(chuàng)作出的「活」著的 APP 吧！
每種事物都有重新受矚目的一天！長(zhǎng)期以來(lái)，GIF 動(dòng)畫在開發(fā)的過(guò)程當(dāng)中，逐漸失去了它的優(yōu)勢(shì)，不再受歡迎與通用的它，近期將展開回?fù)簦?/p>
盡管還是一如既往地展示圖像，但它不再以當(dāng)年那些生硬的低畫質(zhì)視頻、粗糙簡(jiǎn)陋的過(guò)渡效果作呈現(xiàn)。如今的它，將以搶眼、流暢的變化，呈現(xiàn)出有如流水般柔順細(xì)致的效果。
UI/UX 開發(fā)者迅速評(píng)估了此類動(dòng)畫圖片的潛力，它們雖小卻有著完善的呈現(xiàn)效果。有時(shí)，在向客戶或最終用戶解釋 APP 最后看起來(lái)將是什么樣子時(shí)甚為困難且耗時(shí)，在這情況下，若少了華麗的高質(zhì)感界面、精心繪制的視覺(jué)畫面及配合著說(shuō)明的「手勢(shì)」等，似乎就無(wú)法呈現(xiàn)出最為完善的成品。但，若藉影片和 GIF 動(dòng)畫，即可輕松地將眾多細(xì)節(jié)相互融合展示，呈現(xiàn)出有如「活」著的 APP。
今天，我們匯集了一系列 GIF 動(dòng)畫的作品，展現(xiàn)其各式移動(dòng)性界面的操作流程。
First shot in Chapps by Dmitriy Chuta
以格外討人喜愛(ài)的方式展現(xiàn)出一組組不同職業(yè)人員的照片與信息，讓人于瀏覽它時(shí)，除了視覺(jué)感受相當(dāng)舒適之余，亦能進(jìn)行選擇和搜索。
App concept by Bastien Leprince
將使用者們的注意力集中在地圖內(nèi)嵌的拖拽篩選功能上，藉由與頁(yè)面的互動(dòng)提供了相當(dāng)流暢的操作流程。
FaceScan app concept by George Frigo
以短短的12秒動(dòng)畫就清晰地呈現(xiàn)出此款 APP 設(shè)計(jì)的創(chuàng)意，讓想一睹完整版的人，這位 UI 設(shè)計(jì)師提供了 AVI 文件。
WIP Discover Music app by Alexander van Ravestyn
設(shè)計(jì)師試圖將使用者的注意力引導(dǎo)到多媒體內(nèi)容的瀏覽，而不出所料的是，此音樂(lè)播放器設(shè)計(jì)最終呈現(xiàn)出十分精美的界面。
Speedcam app animation by Jakub Antalík
以光彩奪目的界面吸引著使用者們的注意，漂亮地呈現(xiàn)出 Speedcam 的一部分。
Workflow Payment by Barthelemy Chalvet
上面這張將重點(diǎn)著重于支付流程上，看起來(lái)相當(dāng)優(yōu)雅便捷。其余的畫面則著重于時(shí)間軸、支付/費(fèi)用、卡片和賬戶處理等。
Dashag Tour by Barthelemy Chalvet
此設(shè)計(jì)僅展示一部分的 GIF 動(dòng)畫，若你想觀看完整的 APP 界面，可以選擇造訪他們的官方網(wǎng)站，里面的 GIF 動(dòng)畫幾乎展示了其所有的功能畫面。
Gif Animation by Sergey Valiukh
此款設(shè)計(jì)有著精心規(guī)劃、令人深感愉悅的過(guò)度動(dòng)畫，它將基礎(chǔ)的地圖界面與主畫面選單切換的相當(dāng)流暢。
Walkthrough Animation by Devin Ruppert
主歡迎界面為首，帶動(dòng)起多個(gè)動(dòng)態(tài)式的幻燈片和登陸按鈕，讓一切功能象是具有生命般的活了過(guò)來(lái)。
Interaction overview by Mihnea Zamfir
此款設(shè)計(jì)概念相當(dāng)簡(jiǎn)單，但展現(xiàn)的效能卻不凡！以卡片目錄式的型態(tài)描繪出增添與刪減項(xiàng)目的簡(jiǎn)易流程。
Delete task and assign task to your teammate in action by Tobs
這是款設(shè)計(jì)給團(tuán)體刪減或增添任務(wù)的 APP，以標(biāo)準(zhǔn)化的滑動(dòng)技巧支撐著整體的視覺(jué)，讓 APP 充分展現(xiàn)出鮮艷、現(xiàn)代的感受。
Team Messages by Jan Losert
以真實(shí)操作于程序中的過(guò)程、帶有解說(shuō)功能的靜態(tài)式截圖、視頻影像及大面積 GIF 動(dòng)畫等元素融合，設(shè)計(jì)出此款提供給團(tuán)隊(duì)訊息交流的 APP。
Menu interaction GIF by Ben Dunn
優(yōu)雅的于左側(cè)滑出來(lái)的選單，將所需的連結(jié)一一列出，展現(xiàn)出別于一般的動(dòng)態(tài)視覺(jué)美感。
Poppin – Adding a task by Ed Sansom
討人喜愛(ài)的圓潤(rùn)造型與優(yōu)雅的扁平美學(xué)展現(xiàn)是此款 APP 的最大特點(diǎn)，添加著一項(xiàng)項(xiàng)任務(wù)的同時(shí)，柔和的氛圍使它有別于印象中備忘錄的那一分沉悶感。
My First UI Animation by Dennis Terrey
此 UI 動(dòng)畫作品使人明白如何將一個(gè)基礎(chǔ)的選單呈現(xiàn)出干凈、細(xì)致，同時(shí)又兼具時(shí)尚感的設(shè)計(jì)。
What’s Next for Zite by Danny Spitzer-Cohn
希望藉由此討人喜愛(ài)的 GIF 動(dòng)畫補(bǔ)充此篇作品的集結(jié)，簡(jiǎn)單的傳統(tǒng)式運(yùn)用讓人懷舊起記憶中的那一抹知足。
對(duì)于想嘗試此種呈現(xiàn)方式的各位，我們也準(zhǔn)備了幾項(xiàng)可輕易被拆解與組裝的 GIF 動(dòng)畫。
Flat preloaders by PixelBuddha
Precomposed Touch Gestures by Areus Wade
結(jié)論
就APP創(chuàng)造者和客戶（或最終用戶）間的互動(dòng)而言，像 Adobe After Effects 此款視頻編輯軟件所呈現(xiàn)的方式輕易地及解決了相當(dāng)多的問(wèn)題。GIF 圖片不僅可用來(lái)縮減解釋動(dòng)畫的效果，亦能有效的展現(xiàn)整體操作的流程，讓人清楚的就明白整體的設(shè)計(jì)呈現(xiàn)。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）