发布时间：2023-12-24 分类： 电商动态
这一次带来了WPS Mailbox 4.0运动设计案例，它充分展示了设计概念 - 实施 - 测试过程。设计中有独立的想法，并且已经犯了一些错误。我希望我能激励他人，激发每个人的灵感。
移动终端的动态设计主要分为两类：页面跳转动画和加载动画。前一个功能是在页面之间切换。后者是为了减轻用户在等待时的焦虑。同时，动态设计也是对设计师整体素质的挑战
你没有弄错，交互设计师和你谈论的效果，迎来了职业的第二个春天。几天前，我为WPS邮件制作了新版本的交互式设计。分散工作后，我查看了测试机中的APP界面，发现邮件加载和下拉动画也使用了系统动画。在一瞬间，使命感变为现实。
设计过程如下：
了解需求 - 确定方向 - 入门 - 测试问题
步骤1。了解要求
在了解了要求后，我们可以就目标和需求方面达成共识。起点相同，目标相同，避免了不必要的麻烦。这非常重要和有效。有了这个想法，我去找我姐姐说话。我没想到人们会这么想。经过五分钟的友好交流，我可能得到了她的想法：
要求：我想设计一个新的下拉加载动画而不是系统默认动画。预期值：动画内容拟合列表的下拉刷新操作与邮箱的在线设计风格一致，需要有趣。
第2步。确定方向
当我设计动态效果时，我怎么想？在互联网上有很多很酷的旋转3D作品爆炸。我们如何在有限的时间内确定设计方向？以下图片是我的思维方式：
首先，设计本身是一个添加然后减去的过程。
增加：关键词分歧是我个人的设计方法。在这个阶段，我想到了现实世界中许多与电子邮件相关的单词，绘制了大量的草图，并从许多优秀的作品中汲取灵感。许多奇怪的想法都出现在我心中。
减法：确定要求时，更容易缩小设计范围。回顾要求，动画内容适合列表的下拉刷新操作。下拉动画的内容需要与操作一致。用户下拉此页面以触发刷新行为，即接收我们需要体现的新邮件。再次回顾需求，产品要求与邮箱的在线设计风格一致。在WPS邮箱行发送邮件的按钮样式是飞机：
发送邮件样式
基于以上思考，我的结论是：
下拉刷新=接收新邮件
邮件=飞机
相应地，新邮件可以被认为是飞机飞入，所以我继续设计飞机，围绕邮件和飞机的想法，以飞入邮箱的形式显示“接收新邮件”的主题”。由于动画的大致方向已经确定：纸飞机和邮箱。
第三步。确定方向
我相信每个人都有一个动画脚本：当用户将列表拉到一定高度时，动画被触发，飞机飞入邮箱，下拉动画结束后列表将被折叠。 DEMO如下：
这里不要谈技术问题，分享一些动画片的想法:飞行路线不必太复杂，看起来很累。调整幅度，注意透视，近大小。
使用下拉手势，您可以打开邮箱门：
邮箱门详细信息
您还可以在飞行时稍微改变飞机的角度：
角度细节
注意以下图片：更远的火车更清晰，更接近模糊。每个人都明白这个道理。
超速驾驶火车
模糊细节
Step3.1。设置标志
结合现实世界：站立旗帜是生活中的现实行为。邮件放入邮箱时，将竖立标志以提醒人们查看邮件。所以我们在设计整个动画时专注于这部分，也就是说，这是动画的高潮（害羞的脸）
小组高潮
动态的大部分乐趣取决于高潮。事实上，这种弹性动画并不符合物理原理，但在处理类似细节时，我们不必过多考虑牛顿老人的感受。关于生动性，我们可以看看这两篇文章并表达非常有趣的观点：
请参阅迪士尼动画原理http://www.vccoo.com/v/aaa4bd
中的设计你的用户界面不是迪斯尼电影http://zaodula.com/archives/16963.html
看来这些观点是相反的，但文章的内容是详细的，可以帮助您控制移动端效应的设计原则。回顾和思考，面对需求，我们当然可以从其他作品中找到灵感，但一旦确定方向，我们应该立即将产品特性和需求方面结合起来判断该计划是否可行并做到最好在最短的时间内。选择。
第4步。验证问题
动画结束后，我感到非常高兴。我们需要检查开发的可行性。回想一下上面的动画。你找到了什么吗？您会发现此动画从交互设计的角度来看没有设计加载。我们必须考虑很多问题。 ，网络弱，加载时间过长等等。以上动画分为三个部分。我模拟了平滑网络下的加载方式：当没有触发加载时：用户下拉，但是当它没有被拉到触发位置时，加载时：当飞机加载时，页面反弹结束。如果遇到长期的装载情况，由于动画的限制，我们无法设计一架飞机继续在邮箱中飞行，旗帜设置然后放下，非常不自然。这要求我们让动画“加载”和“结束加载的动画”无缝衔接，但实施过于繁琐，不仅影响动画的大小，还需要制定特殊的判断。
中国队没有多少时间，如何扭转局面！
计划如下：
在现实世界中，收到这封信的邮箱的旗帜会站起来提醒其他人收到这封信。当没有信件时，旗帜会掉落。我们可以制作一个进出的循环动画，并播放直到刷新成功。当加载时间很长时，玩起来只需要很长时间。在短时间内，开发限制了最小加载时间，并且可以完全播放飞机飞行的动画，这减少了开发的工作量并确保了视觉效果。 。
最后，我们来谈谈另一个重要问题：文件质量和大小。此处下拉动画的大小为1080 * 210。质量和帧数不是太高。我的在线动画最终控制在22帧，所以它与上面类似。模糊效应等并不是很明显。由于开发主机通常不使用gif格式，因此它由帧序列实现。这要求我们控制图片每帧的大小。必须重复使用可重复使用的图片。 。一旦沟通不及时，您可能会返工：
总结：
我们在主要设计代购源码网站上看到了很多优秀的设计，但最终我们保持了性能水平，因为在线产品线的设计会受到很多限制，而DEMO和在线效果往往不同。在设计动态效果时，我们不仅要考虑动画本身，还应该考虑交互问题，思考可能发生的事情，而不是让我们的想法从需求开始直到设计过程偏离目标完成了。我必须与程序和产品进行更多沟通，因为我是一名交互设计师，艺术家如何一起工作？
