恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI设计干货:场景UI交互动效设计五大原则
0.0°
2018-04-11 好文转载 教程 原作者: 互联网转载 举报 2901 8 8 0

下面重点跟大家阐述一下关于场景UI 交互动效的6个目的、4项作用以及5大应用法则。希望对各位的场景UI交互动效设计有一定的帮助。

Image title


场景UI 交互动效的首要目标应是支持和增强用户在状态间的转化。


Saffer(2013) 提出使用动效存在下列6个目的:

1、吸引用户注意力在指定区域

2、表现对象和用户操作间的关系

3、维持多窗口或多状态的上下文关系

4、提供持续性事件的认知感

5、创造虚拟空间引导用户在状态和功能间转化

6、创造沉浸感和趣味性 

Image title


场景UI 四项作用:

1、支持微交互

2、显示运动过程

3、解释

4、装饰

Image title


Google 的 Material Design(2017), 提出在 MD 中,动效用来描述空间关系,功能,富有美感和流动性的目标。


动效显示 APP 是如何组织的以及它能够做什么,具体如下:

1、引导窗口切换

2、提示用户接下来发生的事

3、对象间的层级感和空间感

4、减缓用户对等待事件的认知

5、美感和个性化

综上,笔者总结了交互动效的使用目的, SAFRI,游猎法则


对于UI设计,你是否还是处于一知半解,没有头绪,处于迷茫的境界呢?
没关系,无论你是什么基础,无论是把UI作为爱好,还是想转行,都可以加入QQ群【704761523】,和大家一起学习提升自己

每天提供UI设计教程来学习。
无论是软件技能方面,还是设计理论。
大家加油~


1.State

告诉用户对象和窗口的状态是如何变化的

Image title


当界面中对象状态需要发生变化时,可以用动效展示变化的过程,让用户更清楚的感知到该变化。相应的,当窗口发生变化时,可以用动效更清楚展示窗口是如何从一个状态转变到另一个状态的。

2. Attention

吸引用户注意力,告诉用户做什么

Image title


当你想让用户关注某一个区域,或执行某一个操作时,可以通过动效吸引他们的注意力。当用户需要执行操作时,注意 UI 和动效的结合要能告知用户需要进行的操作。

3. Feedback

Image title


告诉用户操作和对象间的关系

当用户执行了某一操作后,动效是一个非常好用的反馈机制。通过动效的适当运用,用户可以清晰感知到自己操作的反馈,让用户知道自己做了什么。

4. Relief

缓解用户对应用处理速度的感知

Image title


当应用执行一个长时间操作时,可以用动效缓解用户对时间的感知,甚至创建一个假的动效效果(其实应用并不用处理这么长时间)。当下许多 APP 下拉时的加载动效运用的便是该原理。对于用户,他们关注的是感受到的速度,而不是应用实际消耗的速度。

5. Individuation

让产品更有趣和个性

Image title


为了让产品更有趣味性,可以在某些场合适当运用动效创造一些让人愉悦的动画效果。两点是笔者觉得需要注意的,一是动效时间要足够短,二是动效要足够流畅。

需要说明的是,这些目的不是独立存在的。设计师可以运用其中任意几条去设计一个动效。比如,两个窗口间的切换动效不仅吸引了用户的注意力,告诉用户面板在切换了。而且还告诉用户两个面板的位置和空间关系,上下,左右还是前后。

更新:2018-04-11

收藏

8人已收藏

百花香

零基础UI设计学习QQ群【808958838】

  • 8

    作品

  • 5

    粉丝

  • 0

    关注

  • 掌握这7个用户行为规则,让你的设计更有效
  • 锤子发布坚果3,全面屏手机时代!设计师该如何优化界面交互呢?
  • UI设计师必转!解析APP设计中最容易混淆的6大组件!
  • 年薪30万UI设计师必须要掌握的视频H5设计

    猜你喜欢

      2018-04-11 好文转载 教程 原作者: 互联网转载 举报 2901 8 8 0

      UI设计干货:场景UI交互动效设计五大原则

      0.0°

      你确定要举报UI设计干货:场景UI交互动效设计五大原则

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年04月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录