场景UI交互动效设计法则与12种常见设计

时间：2023-09-06 03:54:01 | 来源：网站运营

时间：2023-09-06 03:54:01 来源：网站运营

场景UI交互动效设计法则与12种常见设计：

场景UI 交互动效的首要目标应是支持和增强用户在状态间的转化，在进行场景UI 交互动效设计时，通常遵循着6个目的、4项作用以及5大应用法则：

动效存在的6个目的：

1、吸引用户注意力在指定区域

2、表现对象和用户操作间的关系

3、维持多窗口或多状态的上下文关系

4、提供持续性事件的认知感

5、创造虚拟空间引导用户在状态和功能间转化

6、创造沉浸感和趣味性




场景UI 的4项作用：

1、支持微交互

2、显示运动过程

3、解释

4、装饰

动效具备描述空间关系，功能，富有美感和流动性的目标。动效显示了 APP 是如何组织的，动效时刻在提示、引导用户：




1、引导窗口切换

2、提示用户接下来发生的事

3、对象间的层级感和空间感

4、减缓用户对等待事件的认知

5、美感和个性化




在进行产品设计时，动效设计应遵循5大法则：




1.State

告诉用户对象和窗口的状态是如何变化的









当界面中对象状态需要发生变化时，可以用动效展示变化的过程，让用户更清楚的感知到该变化。相应的，当窗口发生变化时，可以用动效更清楚展示窗口是如何从一个状态转变到另一个状态的。

2. Attention

吸引用户注意力，告诉用户做什么









当你想让用户关注某一个区域，或执行某一个操作时，可以通过动效吸引他们的注意力。当用户需要执行操作时，注意 UI 和动效的结合要能告知用户需要进行的操作。

3. Feedback

告诉用户操作和对象间的关系









当用户执行了某一操作后，动效是一个非常好用的反馈机制。通过动效的适当运用，用户可以清晰感知到自己操作的反馈，让用户知道自己做了什么。

4. Relief

缓解用户对应用处理速度的感知




当应用执行一个长时间操作时，可以用动效缓解用户对时间的感知，甚至创建一个假的动效效果（其实应用并不用处理这么长时间）。当下许多 APP 下拉时的加载动效运用的便是该原理。对于用户，他们关注的是感受到的速度，而不是应用实际消耗的速度。

5. Individuation

让产品更有趣和个性




为了让产品更有趣味性，可以在某些场合适当运用动效创造一些让人愉悦的动画效果。两点是笔者觉得需要注意的，一是动效时间要足够短，二是动效要足够流畅。

动效能够有效描述物体之间的逻辑关系，同时通过视觉效果，可视化的描述用户操作时候当前的状态，用户可以很清晰的感受到物体与物体之间的位置或者层级关系。




在常见的动效设计案例中，有12种经典动效设计：


1.滑动

信息列表会跟随着用户的交互手势而动，然后卡片到相应的位置上，保持整齐感，它属于指向型动画，物体的滑动取决于用户是用那种手势滑动的。它的作用就是通过指向型转场，有效帮助用户清理页面层级的排列情况。






2.扩大

页面中的卡片会从缩略图转化为全屏视图（一般这个卡片的中心点也会跟随移动到屏幕的中央）。反向动效就是卡片从全屏视图转换为缩略图。它的优点是能清楚的告诉用户点击的地方被放大了。












3.最小化

页面元素点击之后缩小，然后移动到屏幕上相应的位置，相反的动效就是扩大，从缩略图重新变为全屏。这样做的好处是能够清楚的告诉用户，最小化的元素可以在哪里被找到，如果没有动效引导，可能用户需要花时间去寻找。






4.切换对象

当前页面移动到后面，新的页面移动到前面，这样能够清楚解释页面之间是进行切换的，不会显得转换的太突兀和莫名其妙。











5.展开推叠

堆叠在一起的元素被展开。能够清楚的告诉用户每个元素的排列情况，从哪里来到哪里去，也显得更加有趣。






6.翻页

当用户实施滑动手势的时候，出现像现实生活中翻页一般的效果。真正动效转场也能够清晰的展现列表层级的信息架构，并且模仿现实生活中的动效更加富有情感。









7.添加到列表

新的元素加入到原有的列表中，旧的元素被推开而不是替换，从而有现实中腾出位置的感觉，这种转场效果能够清楚的展现列表重新排列的过程，让用户知道新旧信息的位置，不会产生迷惑。



8.导航标签转换

根据内容的转换，按钮相应的在视觉上做出改变，而标题是随着内容移动而改变的，这样能够清晰的展示标签和内容之间的从属关系，让用户能够清晰理解页面之间的架构。






9.融合

元素会根据用户的点击交互而分离或者是结合，用户可以感受到元素与元素之间的关联，比起直接切换，显然用融合动画更加有趣。









10.滚动

根据用户的手势进行滚动操作，非常使用与列表信息的查看。这个交互方式是我们用的最频繁的，我们也可以加入一些动效使这个交互更加的有趣和丰富。






11.平移

当一张图片在我们有限的屏幕里没有办法看完的时候，会使用这样的效果。除了放大效果，这样的平移还可以加上动效配合一些功能使用。












12.保存指示器

用户一旦进行保存、下载某个物体，物体会复制一份，同时缩小、移动到保存指示器中。这样可以提示用户下载或者是收藏的内容在哪里可以找到，能够告诉用户对象已经被添加。