美文网首页UI设计After EffectsUX/UI进阶
12 条动效设计的原理(下)

12 条动效设计的原理(下)

作者: VisualCC | 来源:发表于2018-04-24 00:44 被阅读1322次

    推荐阅读:AE动效插件:Motion2(附有下载链接)

    12 条动效设计的原理(上) - 简书

    原理7:覆盖(Overlay)

    覆盖通过允许用户能让本来有限的空间被更好的利用起来。利用扁平化设计来阐述两个相互独立的元素的位置关系。

    示例中,前景物体向右滑动以显示其他背景物体的位置。我们用图层进行设计,图层的概念深入内部。作为设计师,我们需要非常熟悉我们正在设计的所有对象(包括隐藏片段)。然而,作为用户,这些不可见的部分是定义和实践,隐藏在视觉和认知上。


    原理8:生成(Cloning)

    当元素被生成时,表达元素与元素之间的连续性。这种动画能够非常清晰地表达因某个操作而产生的一个或数个事件发生以及它们之间的关系。

    在以上三个示例中,在用户注意力集中在这些对象的时间内,从现有元素对象创建新对象。 引导注意力,然后通过创建一个克隆的新对象来引导 - 具有传达清晰明确的事件:该行为“x”具有“y”的结果创建新的子对象。


    原理9:蒙层(Obscuration)

    与覆盖原理中的用户体验类似,蒙层既是静态现象,也是时间现象。不完全盖住,简单的不透明度渐变往往不会达到这个结果。通常利用模糊或者变暗保留可视性。

    上面示例中,模糊看起来像透明对象或叠加层,也是一种涉及多个属性的时间交互。各种常见的技术涉及模糊效果和整体对象透明度的减少。用户意识到她正在操作的另一个非主要上下文 - 还有另一个世界,就像它在主要对象层次结构“后面”一样。遮挡使设计师能够补偿用户体验中的单一统一视野或“客观视图”。


    原理10:视差(Parallax)

    作为运动原理中的UX的“视差”描述了以不同速率运动,构成不同的视差效果。

    视差允许用户专注于主要操作和内容,同时保持设计完整性。在视差效果表现空间中个元素的位置及层级关系,引导用户去关注应该应该关注的地方。

    这对用户的影响是为了明确界定交互的持续时间,对象关系。前景对象或“更快”移动的对象对用户来说显得“更接近”。同样,移动“较慢”的背景对象或对象被视为“更远”。

    设计人员可以使用时间本身来创建这些关系,告诉用户界面中的哪些对象具有更高的优先级。因此,将背景或非互动元素进一步推回是有道理的。

    不仅用户感知的界面超出一个层次,其在视觉设计决定的,但现在这个层次可以利用用是自觉意识到在设计之前的用户体验内容。

    原理11:多维化(Dimensionality)

    用户体验的关键是连续性和位置。将界扁平化的界面元素多维化,表达空间中个元素的位置及层级关系。维度提供了一种强大的方法来克服用户体验的平坦性和非逻辑性。人类非常擅长利用空间框架在现实世界和数字体验中进行导航。维度以三种方式呈现 - 折纸维度,浮动维度和对象维度。

    浮动维度为界面对象提供了空间起源和离开,使得交互模型更加直观和高度叙述。  对象维度导致具有真实深度和形式的维度对象。

    这里,多个2D层被安排在3D空间中以形成真实的三维物体。它们的维度在实时和非实时过渡显示。对象维度的用途是用户基于不可见的空间位置开发对象实用程序的敏锐意识。


    原理12:镜头平移与缩放(Dolly & Zoom)

    镜头平移:被拍摄物保持静止而镜头移动或镜头保持静止而被摄物体进行远离或接近镜头的前后移动。

    镜头缩放:镜头与被摄物体在位置上保持静止而被摄物自身进行缩放。

    在某些情况下,无法判断对象是否正在缩放,是否在3D空间中朝向相机移动,或者如果相机正朝3D空间中的对象移动(请参见下面的参考资料)。以下三个例子说明了可能的情况。

    前两张图像是放大的,而最后的图像是放大的。

    在UX中,空间运动可以引用观看者视角的变化,或者当对象改变位置时视角保持静止。还可以结合维度原则,从而产生更多空间体验,更深入,并向用户传达当前视图“前”或“后”的其他区域或内容。并且满足运动原则中用户体验的要求:它们通过运动支持可用性。

    原文

    相关文章

      网友评论

        本文标题:12 条动效设计的原理(下)

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