火星网校
UI设计：12种基本指向性动效，让用户体验更出色
发布时间：2024-08-25 11:52:04 浏览量：229次
本文主要介绍了UI设计中的指向性动效，即能有效描述物体间逻辑关系，通过视觉效果展示用户操作时的当前状态，让用户清晰感知物体间的位置或层级关系。
指向型动效的分类
1.滑动
信息列表随用户交互手势移动，卡片到相应位置，保持整齐感，通过指向型转场帮助用户整理页面层级排列情况。
2.扩大
页面中卡片从缩略图转为全屏视图，提示用户点击的内容被放大。
3.最小化
页面元素点击后缩小移动到相应位置，清晰告知用户元素位置。
4.切换对象
当前页面移至后面，新页面移至前面，清晰展示页面切换，不显突兀。
5.展开推叠
展开堆叠元素，告知用户元素排列情况，更有趣。
6.翻页
滑动手势展现翻页效果，展示列表层级信息架构，增加情感。
7.添加到列表
新元素加入原列表，旧元素推开，清晰展现列表重新排列过程，避免用户困惑。
8.导航标签转换
内容转换时，按钮视觉改变，清晰展示标签内容从属关系。
适合场景
1.滑动效果
适用于元素导航呈现列表场景，例如选择明星、款式等。
2.弹出效果
适用于单一交互场景，例如查看图片详情。
3.最小化
适用于用户最小化元素场景，如搜索、添加按钮点击。
4.切换对象
适用于元素切换场景，例如商品款式切换。
5.展开推叠
适用于展开多功能选项场景，方便用户引导。
6.翻页效果
适用于翻页操作场景，如阅读长篇文章。
7.添加到列表
适用于新操作场景，让用户清晰了解自己的动作，如点赞、打赏。
8.导航标签转换
适用于同级页面切换场景，清晰标签内容架构。
9.融合效果
适用于功能操作影响其他功能场景，如健身app开始健身。
10.滚动
适用于用户垂直或水平移动页面场景，如列表、图片。
11.平移
适用于移动大页面场景，如地图、配合滚动产生平移效果。
12.保存指示器
适用于用户添加书签、下载、保存等操作场景。
想要了解更多UI设计师专业知识？欢迎了解火星时代教育的UI设计培训课程，助你成为UI设计专家！
热门课程推荐
热门资讯
-
想要了解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. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
