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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

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

• 原文來(lái)源：designmodo.com
• 原文標(biāo)題：Animated Gifs is a New Way of Good App Presentation

#專欄作家#

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

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