找回密碼註冊
作者: wu.hn8401
查看: 15027
回復: 3

文章分享:

+ MORE精選文章:

+ MORE活動推薦:

SAMSUNG T7 Shield 移動固態硬碟

[*]超快的移動固態硬碟,比傳統外接 HDD 快 9.5 倍 [*]堅固的儲存 ...

GEX PRO 850W玩家開箱體驗分享活動

卓越性能,超值選擇 GEX PRO 系列通過 80 PLUS 金牌認證,實現高達 ...

體驗極速WiFi 7!MSI Roamii BE Lite Mesh

第一名 guanrung1110 https://www.xfastest.com/thread-293988-1- ...

極致效能 為遊戲而生 990 PRO SSD 玩家體驗

[*]極致效能固態硬碟 [*]PCIe 4.0 速度大幅提升 [*]優化的電源效率 ...

打印 上一主題 下一主題

[手機軟體] GIF新演繹,APP好介面

[複製鏈接]| 回復
跳轉到指定樓層
1#
wu.hn8401 發表於 2014-7-19 20:28:19 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
GIF新演繹,APP好介面

"【編按】GIF 動畫,近年逐漸消退的熱潮將重新正裝再出發,換上更為流暢的視覺變化與高精緻質感的畫面來擄獲你我的心,此外,它更成為了設計師要呈現 APP 軟件或 UI/UX 界面時的不二選擇!以下匯集了數個設計師們的作品,一同藉由 GIF 動畫感受他們所創作出的「活」著的 APP 吧!"

每種事物都有重新受矚目的一天!長期以來,GIF 動畫在開發的過程當中,逐漸失去了它的優勢,不再受歡迎與通用的它,近期將展開回擊!
儘管還是一如既往地展示圖像,但它不再以當年那些生硬的低畫質視頻、粗糙簡陋的過渡效果作呈現。如今的它,將以搶眼、流暢的變化,呈現出有如流水般柔順細緻的效果。
UI/UX 開發者迅速評估了此類動畫圖片的潛力,它們雖小卻有著完善的呈現效果。有時,在向客戶或最終用戶解釋 APP 最後看起來將是什麼樣子時甚為困難且耗時,在這情況下,若少了華麗的高質感介面、精心繪製的視覺畫面及配合著說明的「手勢」等,似乎就無法呈現出最為完善的成品。但,若藉影片和 GIF 動畫,即可輕鬆地將眾多細節相互融合展示,呈現出有如「活」著的 APP。

今天,我們匯集了一系列 GIF 動畫的作品,展現其各式移動性介面的操作流程。
Next-for-Zite1.gif

First shot in Chapps by Dmitriy Chuta

以格外討人喜愛的方式展現出一組組不同職業人員的照片與資訊,讓人於瀏覽它時,除了視覺感受相當舒適之餘,亦能進行選擇和搜索。
Next-for-Zite2.gif

App concept by Bastien Leprince

將使用者們的注意力集中在地圖內嵌的拖拽篩選功能上,藉由與頁面的互動提供了相當流暢的操作流程。
 
Next-for-Zite3.gif

FaceScan app concept by George Frigo

以短短的12秒動畫就清晰地呈現出此款 APP 設計的創意,讓想一睹完整版的人,這位 UI 設計師提供了 AVI 文件。
Next-for-Zite4.gif

WIP Discover Music app by Alexander van Ravestyn

設計師試圖將使用者的注意力引導到多媒體內容的瀏覽,而不出所料的是,此音樂播放器設計最終呈現出十分精美的界面。
 
Next-for-Zite5.gif

Speedcam app animation by Jakub Antalík

以光彩奪目的介面吸引著使用者們的注意,漂亮地呈現出 Speedcam 的一部分。
 
Next-for-Zite6.gif

Workflow Payment by Barthelemy Chalvet

上面這張將重點著重於支付流程上,看起來相當優雅便捷。其餘的畫面則著重於時間軸、支付/費用、卡片和賬戶處理等。
 
Next-for-Zite7.gif

Dashag Tour by Barthelemy Chalvet

此設計僅展示一部分的 GIF 動畫,若你想觀看完整的 APP 介面,可以選擇造訪他們的官方網站,裡面的 GIF 動畫幾乎展示了其所有的功能畫面。
Next-for-Zite8.gif

Gif Animation by Sergey Valiukh

此款設計有著精心規劃、令人深感愉悅的過度動畫,它將基礎的地圖介面與主畫面選單切換的相當流暢。
Next-for-Zite9.gif

Walkthrough Animation by Devin Ruppert

主歡迎界面為首,帶動起多個動態式的幻燈片和登陸按鈕,讓一切功能像是具有生命般的活了過來。
 
Next-for-Zite10.gif

Interaction overview by Mihnea Zamfir

此款設計概念相當簡單,但展現的效能卻不凡!以卡片目錄式的型態描繪出增添與刪減項目的簡易流程。
 
Next-for-Zite11.gif

Delete task and assign task to your teammate in action by Tobs

這是款設計給團體刪減或增添任務的 APP,以標準化的滑動技巧支撐著整體的視覺,讓 APP 充分展現出鮮豔、現代的感受。
Next-for-Zite12.gif

Team Messages by Jan Losert

以真實操作於程式中的過程、帶有解說功能的靜態式截圖、視頻影像及大面積 GIF 動畫等元素融合,設計出此款提供給團隊訊息交流的 APP。
Next-for-Zite13.gif

Menu interaction GIF by Ben Dunn

優雅的於左側滑出來的選單,將所需的連結一一列出,展現出別於一般的動態視覺美感。
 
Next-for-Zite14.gif

Poppin – Adding a task by Ed Sansom

討人喜愛的圓潤造型與優雅的扁平美學展現是此款 APP 的最大特點,添加著一項項任務的同時,柔和的氛圍使它有別於印象中備忘錄的那一分沉悶感。
 
Next-for-Zite15.gif

My First UI Animation by Dennis Terrey

此 UI 動畫作品使人明白如何將一個基礎的選單呈現出乾淨、細緻,同時又兼具時尚感的設計。
 
Next-for-Zite16.gif

What’s Next for Zite by Danny Spitzer-Cohn
希望藉由此討人喜愛的 GIF 動畫補充此篇作品的集結,簡單的傳統式運用讓人懷舊起記憶中的那一抹知足。
 
對於想嘗試此種呈現方式的各位,我們也準備了幾項可輕易被拆解與組裝的 GIF 動畫。
Next-for-Zite17.gif

Flat preloaders by PixelBuddha

Next-for-Zite18.gif

Precomposed Touch Gestures by Areus Wade

 
結論
就APP創造者和客戶(或最終用戶)間的互動而言,像 Adobe After Effects 此款視頻編輯軟件所呈現的方式輕易地及解決了相當多的問題。GIF 圖片不僅可用來縮減解釋動畫的效果,亦能有效的展現整體操作的流程,讓人清楚的就明白整體的設計呈現。
 
●原文標題:Animated Gifs is a New Way of Good App Presentation
●原文出處:designmodo
2#
XF-Team 發表於 2014-7-19 20:29:32 | 只看該作者
發文者骨骼精奇,發文風格特異,敢問有沒有興趣跟著XF團隊深造
3#
admin 發表於 2014-7-19 20:40:13 | 只看該作者
優質好文值得回文鼓勵,更多深度評測看這裡 https://xfun.cc/apx5u
4#
XF-Staff 發表於 2014-7-19 20:53:02 | 只看該作者
最靚電競周邊新品!最完整電競賽事直擊!請鎖定XF靚電競專區 https://xfun.cc/ak4pc
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則

小黑屋|手機版|無圖浏覽|網站地圖|XFastest  

GMT+8, 2024-12-18 17:16 , Processed in 0.077071 second(s), 33 queries .

專業網站主機規劃 威利 100HUB.COM

© 2001-2018

快速回復 返回頂部 返回列表