Loading设计思路分享

Loading作为一个常见,并且带有排他性的动画,已经被各路大神表现的淋漓尽至。那么如何在众优秀作品下,做出一个性化的Loading动画?

Loading种类:

1.状态类(进度条):通常数据量很大,客户端已知加载量,并能根据当前加载速度计算出何时加载完成。

状态型的Loading以进度条类为基准,可以为用户提供预期时间,多伴随百分比进度出现。进度条的形式以线性的形式出现,已知总量,降低用户对期待时间的感受。无聊的等待会让人厌烦,作为一个UI设计师需要关注每一个细节,尤其是用户的情绪并将引导到加载后的页面。

By Piotr Adam Kwiatkowski

2.无状态类(菊花):通常数据量比较小,客户端无法预知加载量。

无状态类的Loaing以菊花为代表,通常都是一组可以无限循环播放的动画。

无状态类的Loaing如有需要可以做的特别一些:

我们的App需要一个无状态的Loading。

我始终相信设计的直觉很重要,抓住直觉的爆发点,是一个成熟设计师必备的素质。于是先按照最初的想法快速做了一版。

相信很多人对这个Loaing眼熟,当然,这肯定不是我们要的效果,不过在制作这Loading的时候不断的推翻自己的想法,时而清醒时而模糊,感觉突然找到了方向但瞬间也可能烟消云散。这种不断反复的过程中还是收获了很多。

既然是无限,循环,表现上就不能过于缺乏趣味,这个度很难把握。形式感上面设计要简单,又要通过最直接的方法创造空间感,偶然间发现马戏团的抛球表演。突然间有了灵感,于是就沿着这个思路开始动手设计:

我尝试去直接模仿抛弃的运动,但是效果并不是很好,但是从Demo中可以看出,值得很入研究。

为此我们搜索了一下现实中的扔球效果:

经过分析我们得出了第一条小球的运动路经是一个无限的符号。

有了草图开始通过规范的制图来推算出最精确的运动轨迹,这一点在动画效果和以后的代码实现上非常重要。

工作路经确定后,导入C4D中进行单球运动轨迹测

由于实例中,小球会受到重力以及加速度的影响,并非匀速运动,但在实际Loading制作过程中,为了视觉效果,我们希望小球做匀速运动

发现问题:小球在中心焦点位置出现明显卡顿

起初我们认为是速度曲线没有调整好所导致的,但我们尝试几版后发现并不是这样,最后我们发现导致这个问题的原因是路经节点问题。

调整节点

通过调整节点后,不难发现,中心焦点处的卡顿明显不见了

为了加强透视效果,我们将球的大小和颜色进行了关键帧处理,这已处理增加的景深对视觉的冲击,使得空间感更强了。

看起来怪怪的。。。。。

为了使整个运动规律更加精准,我们发现运动的起点距离是关键,不懈的追求完美的情况下,总是会有顿悟的时刻,幸运的是找到了问题的所在

三个球匀速运动的情况下,应该保证每相邻两个球之间路经上的距离是相同的。

时间: 2024-10-13 17:51:50

Loading设计思路分享的相关文章

会员管理系统的设计和开发(3)--主界面的设计思路分享

会员管理系统经过一段时间的紧锣密鼓开发,软件终于完成并发布.在这期间,碰到了不少技术难点,并积累了不少开发心得和经验,本篇继续介绍这个开发过程中相关的技术要点,本章主要介绍会员管理里面,列表主界面的一些设计思路分享. 有时候,遵循一些固定的套路做事情,总是很容易,如果每个地方搞一些创新和改进,那么往往需要花费很多时间,但是创新是有积极意义的,虽然可能会遇到困难,但是很值得去做.在Winform的界面设计上,虽然我可以使用代码生成工具生成比较标准的界面了,但是我总是喜欢参考学习,并改进一些界面方面

张左峰的分享 网页游戏制作技术 加密的设计思路与手段

网页游戏制作技术 加密的设计思路与手段 必备工具:Doswf 好朋友Laan开发,请自行百度搜索 今天太晚了,明天再更新内容...咔咔咔

Hybrid APP架构设计思路

原文:Hybrid APP架构设计思路 关于Hybrid模式开发app的好处,网络上已有很多文章阐述了,这里不展开. 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考. 通讯 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开. Native(以Android为例)和H5通讯,基本原理: Android调用H5:通过webview类的loadUrl方法可以直接执行js代码,类似浏览器地址栏输入一段js一样的效果 webvie

web架构设计经验分享(转)

本人作为一位web工程师,着眼最多之处莫过于 性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查看视频 架构设计的几个心得: 一,不要过设计:never over design 这是一个常常被提及的话题,但是只要想想你的架构里有多少功能是根本没有用到,或者最后废弃的,就能明白其重要性了,初涉架构设计,往往倾向于设计大而化一的架构,希望设计出具有无比扩展性,能适应一切需求的增加架构,web开发领

Pongo网页版JavaScript源代码及设计思路

1.游戏背景介绍(写在前面的废话): 五月初的某天,看到某网推荐了这款游戏,Pongo,看着还不错的样子就用ipad下下来试玩了下,玩了两局感觉还错挺过瘾的,因为是手欠类游戏嘛大家懂的. 但是没一会发现游戏在ipad似乎有些bug,玩一会就会卡住然后只能强退了,真是揪心,记录还等着破呢. 怎么办?玩游戏不如玩自己的游戏的念头又邪恶的出现了,然后就把pad丢给了朋友虐心去,我默默回到电脑前开始动手自己写个不会卡的. 大概两小时吧,写出了基本框架,然后扔sinaapp里试了下效果基本能玩就洗洗睡了.

这一设计思路显然降低了新 DBMS 部署方案

数据库管理系统(简称 DBMS)无疑是任何数据密集型应用程序当中最为重要的组成部分,其肩负着处理大量数据以及高复杂性工作负载的重任.然而,数据库管理系统本身却往往难于管理,因为其中通常包含数百种配置"旋钮",用于控制诸如缓存内存分配量以及存储介质数据写入频率等要素.各类企业一般需要聘请专业人士以协助相关调配工作,但对于大多数企业而言,此类专业人才的开价亦相当高昂.而实际上,DBA所面临的挑战还远不止这些. 而今天一则名为"OtterTune"的机器学习DBMS系统刷

[Other]来做一个微信打印机吧 -- 微信打印的设计思路参考

原文地址:来做一个微信打印机吧 -- 微信打印的设计思路参考 最近微信打印机小火了一把,比如印美团,747微信打印机,都是利用微信公共平台实现照片的打印. 具体流程: 扫描二维码关注公共主页 发送图片 发送微信打印机上的打印码 简单三步,实现微信打印照片的功能. 那么它是怎么实现的呢?在此提供一下自己的思路供大家参考. 源码已经写好了,确实可行. 如果大家有好的思路欢迎一起分享^_^ 微信的后台接口 用户把照片发给微信公共账号,在接收到的时候是有图片的url的,所以我们不用考虑图片的存储问题.

[转载] 站内消息DB设计思路

[转载]:点击打开链接  原文标题:两年后,再议“站内信”的实现  注:仅因为在工作中用到相似的东西,故借鉴作者的文章,如有不便请告知,即刻删除 两年前,万仓一黍在博客园发了两篇关于站内信的设计实现博文,<群发“站内信”的实现>.<群发“站内信”的实现(续)>,其中阐述了他关于站内信群发的设计思想,很具有借鉴意义.他在设计时考虑到用户量和存储空间的占用等问题.当然,在他的两篇博文中强调了站内信的设计要考虑具体情况,没有理想的设计方案,他的设计只是对于群发(点到面)的解决方案. 在此

跟张小龙学习做优秀产品经理的设计思路

提起张小龙,大家都非常熟悉这位极度优秀的产品经理,不仅仅是因为Foxmail,更因为目前深刻改变你我移动生活的移动互联网产品 - 微信,其江湖地位的确定已经让众多国内立志于做优秀产品经理的人顶礼膜拜了,我们首先借助互联网材料回顾一下微信的创立历程: 一.微信的演化历程: 2010年11月19日23时58分,张小龙在腾讯微博上写下了这么一句话: 我对iPhone5的唯一期待是,像iPad(3G)一样,不支持电话功能.这样,我少了电话费,但你可以用kik跟我短信,用googlevoice跟我通话,用