当前位置:首页> 2019

UI设计中的基本AE动效

发布者:乾学教育 发布时间:2019-6-18 0浏览

    作为一名微商,不会写文案,产品就很难卖得出去;作为一名小编,不会点PS,发文的时候只能干发愁;乾学教育小编想告诉你的是,作为一名UI设计师,如果你还不会AE动效的话, 那就真的离被淘汰不远了!

    一个好的交互设计师可以很容易的解释设计里面的决定背后的逻辑。这包含着信息架构,页面内容的层次结构,流程和所做的解释。

    迟早,动效将会应用到线框图原型中,这个时候,再去对设计做决定或者是解释,将会变的难一些。例如一些这样的理由:太狂拽酷炫了……太潮了……太鸡冻了……这将是设计失去其力度的领域(Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength.)在我们的设计中,动效理应占到更多的比重。我们应该去定义动效,并且阐述他们的目的——像我们阐述一个设计中其他的元素一样。

    使用动效的理由

    动态(英: Motion)在从他的性质上来说,就是用户界面上最突出的元素。相较于文字文本和静止的图像,动态的更容易被发觉。我们的视线会不由自主的追寻着动态的物体,这也可以说是一种条件反射。试着将这个利用在功能性的动效上吧。推荐阅读>>>AE交互动效课即将正式开课,同学们准备好了吗?

对的_看图王.jpg

    什么是功能性的动效

    功能性动效,指的是在UI设计中作为功能的一部分被采用的小动效,有着非常明确和合理的目的。

    - 为了减轻认知的负担。

    - 防止发生变化时看漏(英: Change Blindness)。

    - 在空间关系中确立良好的层级关系。

    - 以用户为中心的设计方法,直观的用户界面,响应性,人性化等等都是必须的。功能性动效,将有助于你实现这些目标。

    也可以这样思考:当一个动效不符合一个功能性的目的,那么这个动效多存在可能会让用户觉得困惑或者恼怒。下面是我目前收集的这一系列的动效。我希望你会在你的设计中对你有所帮助。

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

    指向型动效的分类

    1.滑动

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

    2.扩大

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

    3.最小化

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

    4.切换对象

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

    5.展开推叠

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

    6.翻页

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

    7.添加到列表

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

    8.导航标签转换

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

    9.融合

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

    10.滚动

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

    11.平移

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

    12.保存指示器

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

    适合场景

    1.滑动效果

    适合场景:当你设计的元素需要导航以列表方式呈现的时候可以使用滑动效果。例如一些明星的选择,款式的选择,适合用这样的方式呈现。

    2.弹出效果

    适合场景:当你设计的元素是需要和用户进行单一交互的时候。例如点开图片查看详情,让转场过渡更自然。

    3.最小化

    适合场景:当用户想要最小化某个元素的时候。例如搜索、添加快捷按钮的点击事件,符合从哪来到哪去的原理。

    4.切换对象

    适合场景:当用户在元素之间切换。滑动效果相对来说比较单一和常见,使用动效切换可以让用户产生眼前一亮的效果,例如一些商品款式的切换,就可以使用这样的效果。

    5.展开推叠

    适合场景:当用户打开一堆功能选项的时候。例如一个功能里面隐藏了好几个二级功能时,就可以使用这样的效果,利于用户引导。

    6.翻页效果

    适合场景:当用户进行一些翻页操作时。例如看小说,读长篇文章,使用这样的效果会更贴近现实生活,引起用户共鸣。

    7.添加到列表

    适合场景:当用户需要进行新操作时。有一些页面呈现的是将新的事件替换掉旧的,而使用这样的动效可以让用户更清晰的知道自己做了什么,例如点赞,打赏。

    8.导航标签转换

    适合场景:同一层级页面之间的切换。例如切换导航,或者进度流程。使用动效可以让用户更了解架构,是标签而不是按钮的感觉。

    9.融合效果

    适合场景:当用户操作一个功能点时可能会处罚其他功能。例如运动app开始健身或者跑步的时候,点击开始后会出现暂定或是结束。

    10.滚动

    适合场景:当用户垂直或者水平移动页面时。例如列表,图片,很多场景下都可以使用,也因此过于平凡,可以加一些动效让页面活起来。

    11.平移

    适合场景:移动大于界面的的页面。例如地图,可以配合其他功能滚动产生平移效果。

    12.保存指示器

    适合场景:当用户添加书签、下载、保存,加入等行为的时候使用。

    各种各样的设计趋势层出不穷,这一点足见设计师们的探索之心。漂亮的视觉,舒适的体验,流畅的动效,自然的声音,如今的UI设计的要求真的是越来越高。为了更好的设计,世界范围内的设计师都会不遗余力地前进和发现。

    最后再强调一下,AE到底有多重要呢?它除了可以更加生动的展示产品的功能、界面、交互操作等细节,让设计细节更生动的体现出来。而且还能增加设计的亲和力和趣味性,想要学习AE动效的同学们赶紧来了解一下我们的优行者选秀系列课程之AE交互动效课哦。
    
热门文章

UI设计中的基本AE动效(文章)免费

乾学原创课程1已学习

号外号外!优行者暑期学ui畅享五重礼活动重磅来袭(文章)免费

乾学原创课程44已学习