火星网校
提升UI动效的8个设计技巧，让用户体验更上一层楼
发布时间：2024-08-28 13:57:58 浏览量：224次
如今在APP和网页中，动效已成为基本的组成部分，精心制作的UI动效可以显著提升整体界面的表现。
动效展示出元素之间状态切换的过程，展现了它们之间的逻辑关系，吸引用户的注意力，指导用户进行有效的交互。
在设计动效时，Material Motion的设计原则、IBM动画设计规则和UX动效宣言都是不错的参考和指导。遵循这些规范可以显著提升动效的体验和效果，从优秀走向卓越。如今，使用InVision Studio来制作动效已成为主流标准。
1. 标签页切换动效
左侧标签切换采用淡入淡出效果，右侧标签页切换使用滑动效果。
- 淡入淡出的内容切换效果不错。
- 滑动效果展示内容变化过程，呈现了位置关系和逻辑关系，更加出色。
在设计诸如标签页或弹出菜单等控件时，通过动效展示内容位置的变化关系，确保内容可见性，同时避免用户困惑。滑动手势交互和元素位移动效是很好的选择。
2. 卡片的展开动效
卡片是最常见的UI元素，点击卡片后，在左侧界面，展开新页面；右侧界面中，卡片扩展填充整个屏幕。
- 展开动效从卡片直接过渡到详情页是更卓越的设计。
优秀的动效能让人理解两种状态之间的内在关联。在制作不同状态之间的动效时，注意共享元素，并将其作为连接两种状态的桥梁。在InVision Studio中，自动连接前后两屏的控件，构建动效，更加便捷。
3. 列表中的瀑布式展开动效
左侧列表使用迅速淡入淡出动效，右侧列表通过延时淡入淡出展示，呈现瀑布展开效果。
- 淡入淡出带有位移的逐个元素出现，自然且不错。
- 延时出现的元素位移明显，如瀑布一般展开，视觉和体验更为出色。
瀑布式展开动效通过明显延时实现，控制节奏，让加载速度适中，能被用户察觉。如Google建议，每个元素延时不超过20毫秒。在Material Motion中，探索更多原理和实例。
4. 展开时的扩展动效
内容在顶层覆盖列表，或从中间扩展顶开内容。
- 移动、覆盖、展开方式呈现详情页，视觉效果不错。
- 展开顶掉周围元素，与周围元素互动，设计更加卓越。
界面元素应具有"重量感"，UI控件随动效变化，与周围元素互动，增强实体感。
5. 菜单的展开动效
菜单从底部/按钮淡入，或从按钮中扩展展开。
- 菜单从按钮淡入，展示两者关联，设计不错。
- 通过扩展动效展示菜单，加强按钮与菜单的关联，更优秀的设计。
6. 使用按钮展现不同状态
左侧按钮文本和色彩变化指示状态，右侧按钮通过加载控件展示不同事件发生。
- 通过按钮指示状态变化，视觉化展现加载状态，更自然易懂。
尝试使用加载指示器展示状态变化和进度，视觉化、自然地展现状态变化过程，搭配色彩变化效果更佳。
7. 吸引用户注意的动效
色彩、符号、位置吸引注意力，加入微妙动效来吸引用户。
- 使用色彩、标识、位置吸引用户是有效的。
- 使用微妙动效吸引注意力，不干扰用户，设计更优秀。
对于重要组件、事件或信息，使用呼吸式动效强化效果，自然不干扰，让元素重要性凸显。
8. 结语
希望以上设计技巧能帮助你打造更自然、出色的UI动效方案。从微小改变走向卓越，借助工具如InVision Studio，提升动效明显，提供更自然直观的动效。
在设计动效时，注意状态变化指示，加强元素间关系，增添乐趣。遵循这些原则，让动效更上一层楼。
译文地址：点击咨询
题图来源：Pexels，基于CC0协议
火星时代教育致力于数字艺术教育，开设诸如游戏设计、动画培训、影视后期制作等课程，欢迎点击点击咨询咨询报名！
热门课程推荐
热门资讯
-
想要了解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. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
