美文网首页
场景UI交互动效设计法则与12种常见设计

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

作者: 陪学 | 来源:发表于2022-03-16 09:22 被阅读0次

    场景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.保存指示器

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


     



    相关文章

      网友评论

          本文标题:场景UI交互动效设计法则与12种常见设计

          本文链接:https://www.haomeiwen.com/subject/ffzudrtx.html