活力四射的狀態指示器:移動APP界面的加載動畫與進度條界面設計
活力四射的狀態指示器:移動APP界面的加載動畫與進度條界面設計-移動閱讀二維碼

調查顯示人們總是希望看到進度條的,尤其是在各種數據化APP中。充分理解當前狀態或進度,對用戶來說至關重要。另外,在需要耐心等待的時候,進度條是極為強大的工具?;盍λ纳?、有趣且漂亮令人愉快的進度條,絕對會讓我們短短數秒的等待時間興致盎然。

而且,進度條是各種多媒體播放器的基本組成,提供了退后和前進的功能。讓用戶不只是跟隨播放,更能控制它。進度狀態的圖形表達對于增加用戶好感起著至關重要的作用,同時也建立了優秀的人機交互界面。一起來看這二十七個創新的案例吧。

 

帶有載入動畫與進度條的手機界面

案例一:

妙的背景。輕微半透明的部件、白色風格和淡粉色的注入,為APP增添幾分暖意和女性化意味。

b1306a44e3434861907a874c37d64d71 優秀APP加載動畫與進度條設計

案例二:

Miguel Pires 的dB-METER在中央繪制了一個明亮的儀表盤,巧妙地打破了深色硬朗背景的單調。微妙的凹槽和精準的繪制使得界面看起來非常精致

a4a15db8635013b1dbc6aea0e0d27636 優秀APP加載動畫與進度條設計

案例三:

Corey Lui 的充電動畫設計看上去優雅醒目,有著令人喜愛的現實主義感染力。用綠意盎然的動畫表達充電過程,吸引了所有的注意力

87cbaae23e81042ac3e0d53c85404ebb 優秀APP加載動畫與進度條設計

案例四:

Muhammad Farhan 的iOS7設計練習利用扁平的圖形、柔和的色彩和纖細字體,清晰無疑表達了扁平風格的哲學。巨大的環形進度條占據整個界面的主要部分,使得數據看起來躍然紙上。

2ea1240619bde7b59845061b68367020 優秀APP加載動畫與進度條設計

案例五:

Breezy 的TICKER通過明快樂觀的色系創造出溫暖親切的感覺。純白色背景和扁平元素相互協調,為APP打造干凈輕快的形象。

fc57ded803a367ac5e9111700a75d58f 優秀APP加載動畫與進度條設計

案例六:

Andrew Fuller 的音樂APP使用帶噪點的灰色背景、明亮的控制按鈕,橙色作為主色起強調作用,都使之區別于通常音樂播放器。精細的陰影和漸變使按鈕微微凸起。

8f0b98af992c38280d82896aa0cd04bc 優秀APP加載動畫與進度條設計

案例七:

Leigh Taylor 的Lift概念圖基于深色系設計,配上炫目耀眼的亮色點綴。環形進度條很優雅,使用了間斷和點狀的線條來表達狀態。

6f0d3c9ed33aa696a1c31d73c71f4b84 優秀APP加載動畫與進度條設計

案例八:

Miguel Pires 的AudioRec界面設計是擬物派的一款清新之作。兩側設計有冷光指示器,漂亮的光點給音量旋鈕增添了幾分趣味。

37c3007ca194effc8ca930d8d78e00c9 優秀APP加載動畫與進度條設計

案例九:

Maximilian 的音樂播放APP概念圖有著相當扁平的風格。中央的巨大的環狀進度條,同時也是唱片封面圖的邊框。

f9715655a80ff9dfe3f9901651852aee 優秀APP加載動畫與進度條設計

案例十:

MVBen 的計時器。作者設計了一款非常棒的現實主義風格作品,中間的控制按鈕與現實中的幾乎無差。精致的漸變藍進度條,在深色背景上非常醒目。

d7e46f4ee9ee07b89253148b3ba9c7c1 優秀APP加載動畫與進度條設計

案例十一:

Karol Ortyl 的Statistics Screen用了仿儀表盤的進度條設計,還有附加文字來表示狀態。干凈的淺灰色背景與扁平圖形巧妙地融合。

65409ce8f45090da0b4c784e27ad45e1 優秀APP加載動畫與進度條設計

案例十二:

Patrick N. Lewis 的Dash iOS App。全屏背景圖、非正式字體和普通的白色裝飾,作者很好地處理了它們之間的平衡。半透明部件構成的環形加載動畫,看起來優雅簡練。

6ae9c8468807d17e2610a7969e8c84cc 優秀APP加載動畫與進度條設計

案例十三:

Corey Lui 的另一款iPhone APP主要采用雙色設計(淺灰色與鮮艷的綠色),令界面外觀干凈且井然有序。

a9dd6da19ada6068b09e61d10a7ecd39 優秀APP加載動畫與進度條設計

案例十四:

Dario, Morning設計。作者很巧妙地處理了黑色調、微妙的漸變和精細紋理之間的平衡。有光澤、極大的綠色環形進度條被放置在屏幕中心,用戶一眼就能看見所需信息。

9eca1e9ee1a7ed03d8f1c60c8f3abc96 優秀APP加載動畫與進度條設計

案例十五:

Ryan Littrell 設計的CLOCKWORK Timer App有很不錯的metro格調。干凈純白的巨大矩形、淺藍色的運用、細字體和整齊排布的數據,都給它創造一種井井有條的形象。

669da90c05730fe3b70056f757b60f5a 優秀APP加載動畫與進度條設計

案例十六:

Kiran 的iPhone音樂播放器APP概念圖的界面風格以深色、重紋理為主。深色的音量滑塊、金屬質感按鈕和控制按鈕的霓虹燈背景光,給界面增添一點粗獷的感覺。

9746d43be7f68342fd00ff270c9b6e34 優秀APP加載動畫與進度條設計

案例十七:

這張播放器界面概念圖有著讓人驚嘆的音樂氛圍。紫色與藍色,和深至純黑的圖形與背景完美結合。柔滑高光和微妙漸變使得按鈕看起來非常漂亮。

6f10c48a92df42442783847b03f521e4 優秀APP加載動畫與進度條設計

案例十八:

Lucas Ramos 的Recife FM是個充滿正能量的設計。明亮的橙色帆布質地、清晰明確的網格和圓形音樂控制中心,給界面創造了歡樂愉快的氛圍。

621cf13c0d4c84e786d1f2e9287afc7f 優秀APP加載動畫與進度條設計

案例十九:

App Vital Watcher作為一款整潔美觀的監控軟件,它采用了高識別度的圖標與形象符號,所用的綠色明亮鮮活。

b911266dee8a538971b0b61222e35d05 優秀APP加載動畫與進度條設計

案例二十:

Suhaila Baheyeldin 的Study Timer設計表現了時尚和精致的扁平風格。主體采用灰色調,搭配珊瑚色和大號窄字體,使APP界面工整樸素。

ccdd11d86dd81d5beb48596a976e7f54 優秀APP加載動畫與進度條設計

案例二十一:

BLASTAROCKS 創作的 MeloMe音樂播放軟件看起來輕快、干凈、非常令人愉悅。淺色背景、淺色按鈕、淺灰色字體為界面創造了一種獨特的優美。平順光滑的進度條很容易抓住眼球。

7fba3c3f45eb07e638736696852ad1f0 優秀APP加載動畫與進度條設計

案例二十二:

Nikita Abramenkov 的減肥APP設計強調功能與設計上干凈協調地結合。粉色與白色優美地互補,深色字體使得內容容易辨認且易于閱讀。

52df68dececd3fc65d9bf5ca1bc01478 優秀APP加載動畫與進度條設計

案例二十三:

Jeff Rauch 的睡眠APP的扁平風格統計數據十分討喜,還有優雅的粗圓弧,向用戶展示他的睡眠質量信息。

f2c9a5b34a528469f6d24fcac3d153e4 優秀APP加載動畫與進度條設計

案例二十四:

Artua 設計的Gym Genius APP界面有著很重的風格,大量使用光澤與漸變。圓形進度條能瞬間吸引注意力。

ef5886888cbf9cb98e47dfe172d8bb9b 優秀APP加載動畫與進度條設計

案例二十五:

Oktafian Angga Nugraha 的短跑計時 App有著精妙的傳統金屬質感界面,運用了大量有光澤的控制按鈕和深藍色元素。電子樣式的字體,很好辨認,也使界面元素渾然一體

5c95386f39bb58e1a093584dd79162ea 優秀APP加載動畫與進度條設計

案例二十六:

Martin Oberh?user 的公交指引APP Nextr中設計了一個封閉的環形搜索圖標,采用鮮活的漸變樣式和動畫效果

ba97c63abada4bf7568ba51e2d843e4c 優秀APP加載動畫與進度條設計

案例二十七:

Zahir Ramos 的Laundry Master iOS版采用非常規設計來表現進度條。結合了現實主義和動畫效果,使它看起來像洗衣機的一部分

20083309a6fcbd0a6949a591a39a62ea 優秀APP加載動畫與進度條設計

譯者:十萬個為什麼

本文鏈接:http://www.casaleticia.com/mobile-app-loading-progress-bars.html
本文標簽: , , , ,