如何手绘表格_【交互mini课】如何使用动效来改善用户体验?-CSDN博客

本文链接：https://blog.csdn.net/weixin_32641973/article/details/112191355

【交互·mini课】 如何使用动效来 改善用户体验

用动效讲故事

不是冗长而复杂的故事，而是简单的故事。

例如“嘿，你需要现在看看”或“嗨，你的任务刚刚成功完成。” 但是，动画的目的不是娱乐用户，而是帮助用户了解正在发生的事情或如何最有效地使用您的应用。 Zurb 的访谈中清楚地表达了这一想法：

“我们不再只是设计静态屏幕。

我们正在设计用户如何

从这些屏幕中实际观看内容。”

动画可以在各种比例和环境中使用，以统一美观和功能：它可以影响行为，传达状态，引导用户注意并帮助用户查看其操作结果。以下是一些示例，用于说明可以在UI中添加一些动效。

动效可以改善体验的地方：

1.加载不必无聊

如果你不能缩短行长，应该使用动效代替烦人的旋转加载指示器，这种加载指示器基本上只是提醒用户他们正在等待，整个体验感并不是很好。加入动效和占位加载会改善这一现状，这种加载动效果呈现一种始终尝试的感觉会使等待更加愉快。从而让等待的过程不那么无聊。

加载内容时，几乎所有站点或应用程序都可以使用框架屏幕以及微妙的动画来保持用户的参与度。

在内容完全加载之前，骨架屏幕会逐步完成UI。图片来源：tandemseven 2.设计状态更改，避免生硬过渡 动效可用于使过渡更加明显，因此很清楚在用户开始和结束之间发生了什么。精心设计的过渡效果使用户可以清楚地了解应将注意力集中在哪里。 Adrian Zumbrunnen有一个很好的例子，说明滚动动画如何帮助用户单击链接时保持上下文。只需比较一下这个静态的即时变化，感觉就像是硬切：

没有什么比突然的更改更不自然了，界面中的此类更改对于用户来说很难处理。图片来源：smashingmagazine 具有动画效果：

进行动画制作是“栩栩如生”。图片来源：smashingmagazine 过渡可以帮助用户了解界面的速度和流程。它还有助于引导用户进行交互的下一步。 3.解释元素之间的关系 动画可以增强直接操纵的感觉例如，菜单图标可以平滑过渡到播放控件，然后再返回。该效果既向用户通知了按钮的功能，又向交互添加了奇迹元素。将播放图标转换为暂停状态也表示这两个动作已连接，并且一个动作不存在而另一个动作存在。

在这种情况下，将使用运动将眼睛吸引到音乐控件所在的屏幕中心。图片来源：材料设计另一个示例-按下浮动操作按钮时，加号将转换为铅笔。这表明铅笔是主要的创建方法。这么小的细节意味着必须猜测接下来会发生什么与知道图标在两种状态下的含义之间的区别。

图片来源：材料设计 4.使用反馈突出显示错误的地方 动画可以增强用户执行的动作。例如，可以通过某些动画大大增强表单输入。如果输入了正确的数据，则可以在完成后引入简单的“点头”动画。拒绝输入时可以使用水平抖动。当用户注意到这种动画时，他们会立即理解其动作。

表格基本上是在向您摇头。图片来源：MichaëlVillar 5.使用反馈来显示已完成的任务 动画可用于帮助人们可视化其行动的结果。通过遵循“ 显示，不说”的原则，你可以使用动画反馈来显示已完成的工作。在下面的Stripe的示例中，当用户单击“付款”时，微调器会短暂出现在应用显示成功状态之前。复选标记动画使用户觉得自己很容易付款，并且用户确实喜欢这些重要的细节。

用于创建动画效果和动作的工具 这是可以用来创建本文中提到的动画效果的工具的集合：?

· Ending · · 推荐阅读 ·

【日本留学院校】东京五美-今天我们来聊武藏野美术大学！做原研哉的学生！【选校攻略】QS艺术与设计全球第一｜英国·皇家艺术学院，你可以pick哪些专业？【关于包豪斯的历史】看这篇就够了！【超高产】Behance当红小哥哥的设计作品合集！【500+张手绘素材】这是什么手绘小天才，宝藏博主的5年手绘记录！比你优秀的人还比你努力要创造出一些优秀的设计，步骤通常是这样的：今日思考·到底什么是设计？原来包豪斯也年轻过-奔涌吧，工业设计，向包豪斯致敬！小朋友你是不是有很多问号？工业设计到底是个什么神仙专业？学了能干嘛呢！