火星网校
揭开UI设计中动效的神秘面纱，你绝对不能错过这3个用途！
发布时间：2024-08-25 12:34:47 浏览量：149次
随着技术和硬件设备性能的提升，动效已经不再是视觉设计中的奢侈品。动效不仅仅是华丽的动态效果，它首先帮助设计师和用户解决了许多界面功能上的问题，让用户更容易理解产品，也让设计师更好地表达。动效本身还让整个界面更加活泼，充满生命力，更加自然地相应让用户和界面之间有了情感的联系。
动效对于UI界面在功能和情感上的强化到底有哪些呢？今天的文章，我们从三个方面来聊聊这个问题。
1、系统状态
每个APP为了保证正常的运行，后台总会有许多进程在进行着，比如从服务器下载数据、初始化状态、加载组件等等。做这些事情的时候，系统总是需要一定的时间来进行，但是用户看着静止的界面并不会明白这些，所以需要借助动效让用户明白后台还在运行，在处理数据。通过动效，从视觉上告知用户这些信息，让用户有掌控感，是很有必要的。
加载指示器
对于许多数字产品而言，加载是不可避免的。虽然动效并不能解决加载的问题，但是它会让等待不再无聊。当我们无法让加载时间更短的时候，我们应该让等待更加有趣。
充满创意的加载指示器能够降低用户对于时间的感知。动效会影响用户对于产品的看法，让界面比实际上看起来更好。
如果一个APP在用户等待的时候，给他们看更有趣的东西，他们自然会忽略等待本身。
下拉刷新
另外一个著名的动效是下拉刷新，当触发这个动效之后，移动端设备会更新相应的内容。
小贴士：下拉刷新动效应该和整个设计的风格保持一致，如果APP是极简风，那么动效也应当如此。
通知
由于动效会自然地引起用户的注意力，所以使用动画的方式来呈现通知是很自然的设计，它不会给用户带来太多颠覆性的使用体验。
2、导航和过渡
动效最基本的功用是呈现过渡状态。当页面布局发生改变的时候，动效的存在会帮助用户理解这种状态的改变，呈现过渡的过程。一个经典的案例就是汉堡图标呈现隐藏菜单的过渡动效。
动效能够有效地吸引用户的注意力，让用户在愉悦的氛围中获取信息。虽然汉堡的动效是用户最期待的，但是能够强化导航的动效并不只有这么一种。
可导航内容之间的过渡
设计师使用动效平滑地让用户在不同的内容之间过渡、切换，而动效也解释了UI的变化是怎么发生的。
过渡动效是UI不同状态的中介环节，它帮助用户理解。
视觉层次和元素的连接
动效可以完美地解释界面元素之间的关系，并且阐明它们是如何完美地进行交互的。
功能变化
在许多案例中，设计师会强行设计一个可点击的按钮，在特定情况下，功能会发生改变。在移动端设计中，由于屏幕空间的限制，我们常常会看到这样的按钮。
“播放”和“暂停”是最常见的多状态切换的实例。
这类动效展示了用户在交互的时候，元素是如何发生转变的。在下面的案例中，用户点击按钮，加号变为铅笔图标。这表明展开后的交互列表中，铅笔所代表的是首要操作。这样的小细节呈现出了可预期的下一步交互。
3、视觉反馈
视觉反馈对于任何UI界面都是非常重要的。视觉反馈让用户觉得一切都尽在掌握，可以预期，而这种掌握意味着用户能够明白和理解目前的内容和状态。
确认
用户界面元素，诸如按钮和控件，应该看起来是可点击的，即使它们实际上是在屏幕背后。在我们的现实生活中，按钮和各种控件都会对我们的交互产生响应，人们期望在界面中获得类似的反馈。
为了解决这个问题，设计师引入了视觉化的动效来提醒用户，让这些虚拟的按钮看起来能像真实的那样有反馈。
视觉化地呈现操作后的结果
动效可以强化每一个交互的结果并且提升用户交互。在下面的Stripe的案例中，当用户点击“支付”的时候，会有一个短暂的过渡动效，这个动效让用户更加欣赏这个过程也让支付显得更加便捷轻松。
结语
动效的强大之处在于，它将设计以更为成熟的方式呈现出来，赋予设计生命力，让产品脱颖而出！
内容来源于网络，作者：Nick Babich 译文：陈子木，如侵权请告知删除
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
