场景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.保存指示器
用户一旦进行保存、下载某个物体，物体会复制一份，同时缩小、移动到保存指示器中。这样可以提示用户下载或者是收藏的内容在哪里可以找到，能够告诉用户对象已经被添加。
场景UI交互动效设计法则与12种常见设计相关推荐
- sketch如何做设计稿交互_《动静之美——Sketch移动UI与交互动效设计详解》历程...
随着移动互联网的迅速崛起,对移动产品界面的设计质量和迭代速度都有了更高的要求,市面上开始涌现出一批专门针对移动UI设计的软件,Sketch便是其中的佼佼者.Sketch因其强大的功能以及极低的入门门槛 ...
- html5 交互作品,20个交互动效很棒的网页设计例子
20个交互动效很棒的网页设计例子 11月 19, 2014 评论 (1) Sponsor 不可否认使用FLASH制作的网站确实很有动感,但有利必有弊,它的加载速度相当慢,在移动端的表现很差,导致访客下 ...
- 用墨刀做出的交互动效，10个优秀作品欣赏
本文转自墨刀公众号,已允许转载. 下文的交互动效案例,很高的借鉴价值.收藏住~ 除了一/二/三等奖的获奖者,我们还有以下获得**「优秀奖」的小伙伴,墨墨姐选摘了他们的一些交互动效作品**晒出来供大家欣 ...
- 移动设计需避免四种常见的用户体验失败
为什么80%的码农都做不了架构师?>>> 此文是伊甸网转载移动设计顾问 Mariya Yao 的文章. 2012 年移动应用的下载量超过 300 亿,可是智能手机用户平均每周会 ...
- 架构设计中的6种常见安全误区
自然世界中,先天有缺陷的生物总是容易被细菌病毒入侵,而健壮的生物更能抵抗细菌病毒的攻击,计算机系统也是一样,若有先天的架构设计安全缺陷,那 么在面临网络攻击的时候,就更容易被入侵或者破坏,甚至因为设计 ...
- 网站设计：如何入门和常见设计
英文 | https://ordinarycoders.medium.com/website-design-how-to-get-started-and-common-designs-d36ba321 ...
- 计算机辅助概念设计的内涵,12 计算机辅助概念设计.doc
12 计算机辅助概念设计 第1章 绪 论 1.1 产品创新的核心--产品概念设计 中国已经成为工业生产的大国,但还不是工业生产的强国.我国的产品大多以OEM贴牌加工的方式变成了外国的货品,而即使是我们 ...
- UI素材|让设计有愉悦的体验，app交互动效的重要性！
在探讨产品设计细节的时候,愉悦是一种很美妙的体验.是优秀产品中所潜藏的魔法.在设计时候,如何构建出愉悦的体验,也是需要努力实现的核心要点. 目前,在网站和APP这两类产品当中,设计师主要是通过动效和微 ...
- 改善交互动效设计 实例
前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议. 我们将在下文中,简单探讨如何改善下面的这个交互. UI动效设计的反面案例(线上 ...
最新文章
- 嵌入式学习笔记之二（静态链接与动态链接）
- Python中的反射机制(reflect)
- skimage 学习笔记
- 数据结构-栈(C语言代码)
- mPaas 研发流程和线上运维介绍
- Actor并发模型入门
- test 7 3-22 2021省选模拟赛seven
- jQuery 事件 - bind() 方法
- 和华为杯_华为P50超大杯确认！居中挖孔屏+鸿蒙OS系统：外观颜值感人
- 【MySQL】向已有主键的表附加主键属性的自动编号
- 2016030208 - sql50题练习题
- movebase导航
- MOQL--操作数(Operand) （三）
- mysql中url的格式_MySQL JDBC URL中的格式以及参数介绍
- 线性波传播至垂直壁面反射形成驻波的动画MATLAB程序
- JAVA-final关键字和接口
- Android 无法播放此视频
- 获取本周周一和周末日期、上周周一和周末、下周周一和周末
- 格兰杰因果关系检验（原理及Ｒ语言应用实例）
- 卸载Photoshop