调查显示,人们总是希望看到进度条的,尤其是在各种数据化APP中。充分理解当前状态或进度,对用户来说至关重要。另外,在需要耐心等待的时候,进度条是极为强大的工具。活力四射、有趣且漂亮令人愉快的进度条,绝对会让我们短短数秒的等待时间兴致盎然。

而且,进度条是各种多媒体播放器的基本组成,提供了退后和前进的功能。让用户不只是跟随播放,更能控制它。进度状态的图形表达对于增加用户好感起着至关重要的作用,同时也建立了优秀的人机交互界面。

带有载入动画与进度条的移动界面

妙的背景。轻微半透明的部件、白色风格和淡粉色的注入,为APP增添几分暖意和女性化意味

Miguel Pires 的dB-METER在中央绘制了一个明亮的仪表盘,巧妙地打破了深色硬朗背景的单调。微妙的凹槽和精准的绘制使得界面看起来非常精致

Corey Lui 的充电动画设计看上去优雅醒目,有着令人喜爱的现实主义感染力。用绿意盎然的动画表达充电过程,吸引了所有的注意力

Muhammad Farhan 的iOS7设计练习利用扁平的图形、柔和的色彩和纤细字体,清晰无疑表达了扁平风格的哲学。巨大的环形进度条占据整个界面的主要部分,使得数据看起来跃然纸上。

Breezy 的TICKER通过明快乐观的色系创造出温暖亲切的感觉。纯白色背景和扁平元素相互协调,为APP打造干净轻快的形象。

Andrew Fuller 的音乐APP使用带噪点的灰色背景、明亮的控制按钮,橙色作为主色起强调作用,都使之区别于通常音乐播放器。精细的阴影和渐变使按钮微微凸起。

Leigh Taylor 的Lift概念图基于深色系设计,配上炫目耀眼的亮色点缀。环形进度条很优雅,使用了间断和点状的线条来表达状态。

Miguel Pires 的AudioRec界面设计是拟物派的一款清新之作。两侧设计有冷光指示器,漂亮的光点给音量旋钮增添了几分趣味。

Maximilian 的音乐播放APP概念图有着相当扁平的风格。中央的巨大的环状进度条,同时也是唱片封面图的边框。

MVBen 的计时器。作者设计了一款非常棒的现实主义风格作品,中间的控制按钮与现实中的几乎无差。精致的渐变蓝进度条,在深色背景上非常醒目。

Karol Ortyl 的Statistics Screen用了仿仪表盘的进度条设计,还有附加文字来表示状态。干净的浅灰色背景与扁平图形巧妙地融合。

Patrick N. Lewis 的Dash iOS App。全屏背景图、非正式字体和普通的白色装饰,作者很好地处理了它们之间的平衡。半透明部件构成的环形加载动画,看起来优雅简练。

Corey Lui 的另一款iPhone APP主要采用双色设计(浅灰色与鲜艳的绿色),令界面外观干净且井然有序。

Dario, Morning设计。作者很巧妙地处理了黑色调、微妙的渐变和精细纹理之间的平衡。有光泽、极大的绿色环形进度条被放置在屏幕中心,用户一眼就能看见所需信息。

Ryan Littrell 设计的CLOCKWORK Timer App有很不错的metro格调。干净纯白的巨大矩形、浅蓝色的运用、细字体和整齐排布的数据,都给它创造一种井井有条的形象。

Kiran 的iPhone音乐播放器APP概念图的界面风格以深色、重纹理为主。深色的音量滑块、金属质感按钮和控制按钮的霓虹灯背景光,给界面增添一点粗犷的感觉。

这张播放器界面概念图有着让人惊叹的音乐氛围。紫色与蓝色,和深至纯黑的图形与背景完美结合。柔滑高光和微妙渐变使得按钮看起来非常漂亮。

Lucas Ramos 的Recife FM是个充满正能量的设计。明亮的橙色帆布质地、清晰明确的网格和圆形音乐控制中心,给界面创造了欢乐愉快的氛围。

App Vital Watcher作为一款整洁美观的监控软件,它采用了高识别度的图标与形象符号,所用的绿色明亮鲜活。

Suhaila Baheyeldin 的Study Timer设计表现了时尚和精致的扁平风格。主体采用灰色调,搭配珊瑚色和大号窄字体,使APP界面工整朴素。

BLASTAROCKS 创作的 MeloMe音乐播放软件看起来轻快、干净、非常令人愉悦。浅色背景、浅色按钮、浅灰色字体为界面创造了一种独特的优美。平顺光滑的进度条很容易抓住眼球。

Nikita Abramenkov 的减肥APP设计强调功能与设计上干净协调地结合。粉色与白色优美地互补,深色字体使得内容容易辨认且易于阅读。

Jeff Rauch 的睡眠APP的扁平风格统计数据十分讨喜,还有优雅的粗圆弧,向用户展示他的睡眠质量信息。

Artua 设计的Gym Genius APP界面有着很重的风格,大量使用光泽与渐变。圆形进度条能瞬间吸引注意力。

Oktafian Angga Nugraha 的短跑计时 App有着精妙的传统金属质感界面,运用了大量有光泽的控制按钮和深蓝色元素。电子样式的字体,很好辨认,也使界面元素浑然一体

Martin Oberhäuser 的公交指引APP Nextr中设计了一个封闭的环形搜索图标,采用鲜活的渐变样式和动画效果

Zahir Ramos 的Laundry Master iOS版采用非常规设计来表现进度条。结合了现实主义和动画效果,使它看起来像洗衣机的一部分

反思

作为一种完美的方式来表达正在发生的事情,进度条与载入动画是大量APP中最重要且不可或缺的部件。在界面看起来没什么变化时,它可以鼓励用户继续等待,也能展现更多额外功能。

原文:http://designmodo.com/mobile-app-loading-progress-bars/

移动APP界面的加载动画与进度条相关推荐

  1. 8款效果精美的 jQuery 加载动画和进度条插件

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...

  2. php进度条插件,分享8款优秀的 jQuery 加载动画和进度条插件_jquery

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...

  3. 27个优秀APP加载动画与进度条设计案例

    调查显示人们总是希望看到进度条的,尤其是在各种数据化APP中.充分理解当前状态或进度,对用户来说至关重要.另外,在需要耐心等待的时候,进度条是极为强大的工具.活力四射.有趣且漂亮令人愉快的进度条,绝对 ...

  4. 【Unity使用UGUI实现王者荣耀UI界面(一)】加载页面(进度条)

    文章目录 [Unity使用UGUI实现王者荣耀UI界面(一)]加载页面(进度条) 1. 素材准备 2. 界面分析 3. 打开Unity Hub创建项目 4. 开始搭建UI 1. 准备工作 2. 背景图 ...

  5. html加载swf 进度条,Flash加载外部文件创建进度条3种方法

    Flash加载外部文件创建进度条3种方法 互联网   发布时间:2008-10-07 09:36:14   作者:佚名   我要评论 加载外部文件的进度条(看帮助文档整理),只适合那些不愿看帮助文档的 ...

  6. ajax加载进度百分比,在ajax中显示加载百分比的进度条,php

    您好我正在使用ajax加载数据库内容.我想显示加载或图像的总百分比.在ajax中显示加载百分比的进度条,php 这是我的脚本 function name1(str) { if (str.length= ...

  7. 前端资源预加载并展示进度条

    我们经常会看到,一些站点在首次进入的时候会先显示一个进度条,等资源加载完毕后再呈现页面,大概像这样: 然后整个页面的操作就会非常流畅,因为之后没必要再等待加载资源了.尤其是在移动端,或者是页游中,这样 ...

  8. 加载界面(伪加载),进度条制作,让人物图片动起来

    这个加载速度其实是我自己代码控制的,不是真正的资源加载 核心代码: private AsyncOperation asy;public UIProgressBar pro;//public UILab ...

  9. ios首次加载web_ios加载webview显示进度条OC版

    APP中WKWebView 和UIWebView都可以加载网页,平时用到的也不多,习惯了UIWebView,近期公司APP做性能优化,监测内存占用,发现加载一个UIWebView界面内存竟然增加了20 ...

最新文章

  1. POJ1001--Exponentiation(幂计算)翻译
  2. 电脑销售渠道_“新冠”影响下,平板电脑市场再现新商机
  3. 终于找全啦!一二线城市知名互联网公司名单!对着找就对了
  4. (转)java中的 | ^ 分别是什么?
  5. Java 字符串与整数之间的互相转换
  6. VSCode设置命令行终端为Git
  7. 汽车燃料效率分析实例
  8. java简单增删改查_JAVA JDBC 简单的增删改查
  9. Flink 新一代流计算和容错——阶段总结和展望
  10. python打印支票_转账支票、现金支票日期大写对照表(数字大写)
  11. 广义表,广义表的定义和计算
  12. matlab怎么求三次微分,Matlab – 求解三阶微分方程
  13. openpose环境搭建(全教程)
  14. javascript开源电子表格
  15. 海康威视iSC 平台第三方对接门禁权限分享
  16. 地图瓦片:矢量瓦片和栅格瓦片详解
  17. 二维矩阵的常见转换技巧
  18. python爬取站_简单python爬虫练习 E站本爬取
  19. 讲述我一段自己打游戏的感受
  20. 欧洲海运专线:欧洲海运专线需要多久时间到达

热门文章

  1. java代码规范文档
  2. Mac OS X: 共享iPhoto图片
  3. qprocess回调_Qt模块化笔记之core——QProcess控制外部程序
  4. Java自动化测试系列[v1.0.0][自动化测试框架理念]
  5. c语言病房信息管理,c课程设计医院病房信息管理//18.医院病房信息管理//数据描述 爱问知识人...
  6. sigmoid函数,tanh函数,relu函数,softmax函数
  7. 李沐论文精度系列之十:GPT-4
  8. 数据库创建表失败原因
  9. 现代控制工程_19中南控制工程初试388一战上岸经验贴
  10. 谷歌浏览器插件初体验