APP UI动效设计中六个基本原则与最高原则

app动效设计,现在已是各位APP设计师学习和临摹的方向。大家也会收集一些好看的APP动效设计作品。学习app动效设计,不是盲目的让界面动起来那么简单,一定不能滥用。要学会克制。


app动效设计,现在已是各位APP设计师学习和临摹的方向。大家也会收集一些好看的APP动效设计作品。学习app动效设计,不是盲目的让界面动起来那么简单,一定不能滥用。要学会克制。

APP UI动效设计中六个基本原则与最高原则

在优设网当中的一篇文章给我们阐述了 UI设计师必须知道的UI动态设计规则。也就是APP动效设计的六个基本原则。

下面我们先看下一组值得学习的按钮、开关、滑块等控件的动效欣赏,希望能给你设计带来新鲜灵动的感觉。

APP UI动效设计中六个基本原则与最高原则

APP UI动效设计中六个基本原则与最高原则

第一部分:APP动效设计的六个基本原则

1、要保存APP的个性化

也是今天我们重点所讲的APP UI动效设计中最基本的原则:具备个性化的动效设计。也是一款APP特殊身份标识的象征。

2、具备导向的功能

比如APP UI动效就应该如同导游一样,为用户指引方向,防止用户感到无聊,减少额外的图形化说明。

3、背景动效的使用

APP动效应当为内容赋予背景,通过背景来表现内容的物理状态和所处环境。

APP UI动效设计中六个基本原则与最高原则

4、与用户产生共鸣

APP UI动效的目的是与用户互动,并产生共鸣,而非令他们困惑甚至感到意外。UI动效和用户操作之间的关系应该是互补的,两者共同促成交互完成。

5、给动效赋予情感

好的UI动效是能够唤起积极的情绪反应的,平滑流畅的滚动能带来舒适感,而有效的动作执行往往能带来令人兴奋的愉悦和快感。

6、理解此处应用动效的目的,切记乱用

滥用特效会让用户分心,把握好这个微妙的平衡。APP动效是用来保持用户的关注点、引导用户操作的,不要为了动效而动效。

APP UI动效设计中六个基本原则与最高原则

第二部分:APP UI动效设计当中的最高设计原则——具备个性化的动效设计

个性化的动效设计是APP UI动效设计中最基本的原则,甚至可以说是动效设计的最高原则。

APP  UI动效设计就是要摆脱APP“开袋即食”的粗犷设定,设计独特的动效,创造引人入胜的效果。

在确保UI风格的一致性的前提下,表达出APP的鲜明个性,这就是UI动效设计“个性化”要做的事情。同时,还应令动效的细节符合那些约定俗成的交互规则,这样动效就具备了“可预期性”,用户不会有“出戏”的感觉,如此一来,UI动效设计便有助于强化用户的交互经验,保持APP黏度与活跃度。

APP UI动效设计中六个基本原则与最高原则

比如:Dots这款APP 将使用这种轻松愉悦的惯性动效,贯穿在整个APP UI设计的每个角落,让它从同类APP中脱颖而出。

下面我们再看看一组非常有意思的鼠标动效欣赏,都是一些惊人的动效之美。

APP UI动效设计中六个基本原则与最高原则

下面是一个比较活泼,拟人化的下拉刷新的APP动效欣赏。

APP UI动效设计中六个基本原则与最高原则

以上这些个性化的APP动效设计,有没有惊艳到你呢?

 

作者:25学堂

来源:http://www.25xt.com/allcode/13689.html

本文由 @25学堂 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26385/

(0)
CatherineCatherine
上一篇 2017-05-14 06:22
下一篇 2017-05-14 08:10

相关推荐

  • 记忆篇|从心理学理解交互设计原则

    无论是设计网页还是APP,我们必须要满足用户的需求, 用户体验的好坏完全取决于你多了解用户。用户是如何思考,记忆,做决策?什么促使他们点击?知道了这些,对交互设计很有帮助。让我们从了解人记忆的复杂性和弱点开始。

    2017-04-30
  • 真相:到底什么是交互设计

    数十万互联网从业者的共同关注!作者:Mr汤进,微信公共号ID:chuangshe_space作者原创并投稿早读课,转载请联系作者。一、前话5月1日在我和小伙伴们一起维护的原创微信公共号“创设空间”:chuangshe_space中向关注的…

    2017-08-02
  • 交互设计测试评估

    - END-作者  Rachel Xu欢迎将文章分享至朋友圈,拒绝转载~VUI进化论达尔文老爷爷说,你的语音交互设计该进化了~长按指纹 > 识别图中二维码 > 添加关注不关注,怎么进化~

    2018-04-18
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • 看似平淡无奇的Icons,到底什么才是它的正确使用方式?

    了解食材是厨师的基本功课之一,了解器材是摄影师的基本功课之一,了解城管的时间表是卖热干面大叔大妈的基本功课之一,了解各个组件的设计模式和属性是交互设计师的基本功课之一。

    2017-05-08
  • 交互设计师之学习需求分析总结

    交互设计师在产品开发的过程中扮演者什么样的角色?需要做什么具体的工作?这是我之前接触到交互设计时的疑问,我想只有清楚了交互设计师的工作流程,才能对交互设计师的职责有一个深入的理解,下面根据自己所涉猎…

    交互设计 2015-08-12
  • 设计师如何使用用户研究优化A/B测试

    作者:Jennifer Cardello; 编译:霍诗雨@ 点融黑帮   一、A/B 分类测试 A/B分类测试使得网站可以通过比较同一网页的不同设计,来决定其中哪些设计将产生最好的结果。在A/B测试中用到的指标是微观和宏观的转化率。 …

    交互专题 2017-08-07
  • Sketch 4.0 改进矢量编辑&下载地址

    Sketch 4.0 改进矢量编辑&下载地址

    2016-09-22
  • 《交互设计专题二》——华南理工大学设计学院本科教学汇报展 • 第二回

    《交互设计专题二》《交互设计专题二》课程针对智能化产品设计领域,鼓励设计背景的学生学习基本的软硬件技术,发掘产品需求,提出设计概念,开展设计研究,并亲自动手完成功能样机。经过5周的课程,7组共27名学生,完成了7个不同主题的设计和初步的功能样机实现。《交互设计专题二》只是信息与交互设计实验班的初步尝试,在国内也鲜有既有模式可供借鉴,课程内容、教学方式、设计展开过程、样机实现以及最后的课程设计汇报,都有不成熟的地方。因此,诚邀大家前来参观...

    2018-02-21
  • 交互总结篇(一):框架与布局

    上篇文章里面简单介绍了一下关于交互设计分析的三维度,即框架、流程和状态;这里就不做特殊介绍了,详细内容请见《三个维度,解析产品的交互设计》。而本文作为交互设计总结篇的第一篇——框架布局篇,主要是系统地整理一下交互框架设计所需要考虑到的方方面面。框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法。

    2017-04-28