大喜

上海时时乐胆码计划:动效设计也应该有的体验原则

大喜 动效设计 2822浏览

上海时时乐开奖时间 www.q4bq.com.cn ? ? ?来新的项目组后发现我司产品很喜欢加动效,动效需求很多,造成了端内各种互斥以及视觉焦点凌乱的情况出现。

站在交互的角度考虑,动效是用来辅助设计的一种形式,而不是作为一个需求来无脑添加的~

 

下面这句宝强哥哥说的话很恰当的说明动效的作用,就是要精准辅助设计在用户场景恰当使用的。

Image title

于是交互这边写了一套产品设计动效体验设计原则和规范

原则进而也可以演变为设计师自己的走查表。

以后再做动效类的需求时,设计师就可以利用原则进行自我走查,

也可以利用原则驳回产品的无理需求。

 

下面具体讲一下整体的产出过程。

Image title

因为能力有限,首先是看了下官方的原则参考作为整个产品的基础性原则。记录在此算是自己的设计笔记和知识积累。

 

第一个就是经典的iOS人机交互指南

Image title

 

第二个是新版Material Design原则,详细的可以点这里:https://material.io

Image title

 

Material Design专门针对动效也产出了很多细致的内容,具体简单翻译如下

Motion-为什么要做动效

  • 1 不同视图之间的焦点引导。
  • 2 当用户完成了一个手势后,提示用户将会发生什么
  • 3 明确元素之间的层级和空间关系
  • 4 当程序在后台运行时,分散用户的注意力
  • (例如获取内容或载入下一个视图)
  • 5 润色整个app:个性化、令人愉悦

 

1? 响应(Responsive)

迅速精确响应用户用户所触发的内容

Image title

在移动设备上的长动画大约是300-400ms,短动画大概是150-200ms。过长的动画让人感觉迟钝,过短的动画让人觉得难以看明白。

 

2? 自然(Natural)

通过模仿真实世界的力,而展现了自然的运动过程。

Image title

真实世界的物体可以被重量、表面摩擦力影响很快的加速或减速。所以动效设计也是不会发生突然停止或启动,都是会有一个加速度或者减速度。(红色没缓动,蓝色有缓动)

 

3? 可察觉的(Aware)

可以被周围环境察觉的,包括用户和周围其他的元素

Image title

作为过渡元素,和周围元素的运动是精心安排的,可以通过这个过程看出他们之间的关系。

 

4? 有引导意向的(Intentional)

动效能使焦点在对的时间聚焦在对的点

Image title

转场动效有助于引导用户进行下一步的交互。

Image title

动效可以传递不同的信号,例如,一个操作是否不可用。

Image title

动效能使用户关注特定对象。

 

Material Design告诉我们,好的动效设计应该遵从以下3点:

1、速度——不应让用户不必要的等待。

2、明确——转场动画应该明确,简单,一致。应该避免一次有太多的元素动效。

3、统一——动效是由速度、响应性、和意向所统一的。在App中的任何动效体验都应保持一致。

Image title

 

同时,Material Design在动效的时间上也给出了参考

移动设备

移动设备上,动画通?;岢中?00ms左右:

大而复杂的全屏移动设备上,通常需要更长的持续时间,375ms左右。

物体进入屏幕的持续时间大概是225ms。

物体离开屏幕的持续时间大概是195ms。

动画超过400ms会显得慢而拖沓。

 

大屏幕移动设备

在大屏幕移动设备上,同一时间段内,物体移动较长的距离速度比移动较短的距离更快。越大的屏幕物体移动的持续时间应该更长,这样动效不会显得太快。

 

平板设备

平板设备上动效的持续时间应该比移动设备长30%左右。移动设备上300ms的持续时间,在平板设备上应该是390ms左右。

 

可穿戴设备

可穿戴设备上的动效时间应该比移动设备上短30%左右。移动设备上300ms的持续时间,在可穿戴设备上应该是210ms左右。

 

第三个参考原则是:Fluent Design System ??详细网址:https://fluent.microsoft.com

Image title

Image title

根据官方原则的盘点和详细阅读之后,我开始对端内的动效设计进行了总结和归纳

这里就不方便用我们自己的产品来举例了,就直接写出最后的整理总结。

 

Image title

当然除了基础功能动效还有一类就是英雄动效

是在基础功能部分都满足的情况下,辅助其他有趣的动画或功能。能让人眼前一亮,娱乐用户。并让他们一想到动画就能想到该产品或者反之。

这类动效,没有明确的划分,应该按照不同场景配合功能、品牌设计动效。

 

下面就开始讲述我自己最后产出的端内动效体验设计原则

Image title

第一个原则是基础原则,也就是在接到动效类需求时的最基础原则

“目的明确原则”

具体来说也就是明确需求背景,动效的商业价值以及预期目标,防止增加无关动效。

1、明确添加动效的产品背景

设计初期,明确需求,明确数据与业务背景。 综合衡量整个产品,不为设计而设计,不为创新而创新。

2、明确希望到达的预期目标

设计师能够对动效对用户带来的感知有一个大致的预期。 明确日后用何数据来考证动效的价值(如UV 点击率、留存率、满意度、认知度、舆情反?。?/p>

3、明确是否有必要用动效来解决,同时也要明确产品的开发能力

4、明确需要传达的产品信息,

这里的信息会有很多可能,可以是:趋势、来源、去向、结构、情感、属性,等。运用合理的动效传递信息,能大大增强产品的表现力,同时也能减少用户的理解成本

 

Image title

 

第二个原则也属于基本设计的原则,就是“一致性原则”

动效属于整个产品组件的一部分,应该符合产品的一致性。

  • 1、视觉一致性:动效中出现的组件样式、UI样式的一致性
  • 2、交互一致性:逻辑原则、出现消失、用户点击、转场的一致性。

同时也应该紧随市场及设计规范发展,保证动效的适宜。当无法确保用户体验的动效可以采用实验的方法来验证,尝试创新。

Image title

以下的土豆视频,动效设计就充分的展示了品牌的一致性,品牌元素贯彻始终。

Image title

 

第三个原则是效果适宜原则,主要是由视觉设计师把控,完成对动画效果的呈现。

频率不过快或过慢, 动效能否复合用户预期,

动效涉及多个元素或者界面层级时,除了有效表现元素属性变化以外,还应将这些元素之前的关系传递出来:譬如:主次、联动、并列先后、因果,等。

Image title

在此基础上,给视觉同学充分发挥的空间,展示创意。

 

第四个原则是交互同学需要整体把控的,我把它定义为聚焦用户原则,也就是时刻要以用户视角来审视。

1、应顺应用户的操作路径与真实场景。

2、遵循真实的自然物理状态

这个原则上面官方原则也反复的提及过,符合真实物理状态才是符合用户预期和感知的动效。

在宏观物理世界(人类可观测)的所有的运动,都是符合经典物理定律的,动效的如果不自然,也就是源自运动方式并不是人们日常生活中常观察到的,用户就无法从运动想象其背后的物体属性及关系。

动效展现自然且复合物理现象 配合的交互手势自然友好 提示愉快而不突兀 保障多元素的自然衔接与过渡。

Image title

3、给用户以控制感

考虑动效能否被用户关闭且关闭后的场景体现,都是能够在用户把控范围内的。

4、无视觉干扰与障碍

我们客户端因为有多个PM,提的需求太多,累计起来就会出现动效互斥的情况,没有互斥也会出现视觉焦点凌乱,这时候交互要做的就是,?防止动效与其它功能操作发生干扰或冲突,同时也防止与其它动效发生干扰与冲突,在一些场景下多个动效出现时的时间间隔也需要控制。

Image title

 

最后一个原则是情感传达原则,也是动效能够发挥亮点作用的核心, 保持一致性与官方原则的基础上,考虑用户的心理情感,用动效创新体验。

Image title

例如:大众点评这个东西就有很强的感染力~~

Image title

 

原文地址:UI中国

作者:下凡凡

 

转载请注明:上海时时乐开奖时间 » 动效设计也应该有的体验原则

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网上海时时乐开奖时间 www.q4bq.com.cn?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.www.q4bq.com.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.www.q4bq.com.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.www.q4bq.com.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
如何做好微交互,增加产品魅力值?如何做好微交互,增加产品魅力值?
微信App原型资源分享微信App原型资源分享
设计师如何提升文案体验?设计师如何提升文案体验?
5分钟教你学会stardust星尘粒子插件5分钟教你学会stardust星尘粒子插件
移动端搜索,都有什么套路?移动端搜索,都有什么套路?
你的简历没人回?看看是否踩了这些雷?你的简历没人回?看看是否踩了这些雷?
通过这五个方法,让你的产品更值得被用户信任通过这五个方法,让你的产品更值得被用户信任
日样LOGO设计10+(标志+释义+延展)日样LOGO设计10+(标志+释义+延展)
如何让你的“在线设计工具”变得优雅如何让你的“在线设计工具”变得优雅
什么是体验编写师?什么是体验编写师?
?
  • 孙岩的专栏作者中国国家地理网 2018-12-12
  • 那你就写个帖子驳呀!告诉你,我是普通老百姓就是错了也没有啥,你可是论坛“真理化身”呀! 2018-12-05
  • 专家共议粤港澳大湾区发展(声音) 2018-12-05
  • “陪堂妈妈”上课3000多节 班主任:她去中考没问题 2018-11-14
  • 新时代 新气象 新作为 学习宣传贯彻党的十九大精神 2018-11-14
  • 好莱坞环球影城“功夫熊猫”主题剧院开放 2018-10-24
  • 女性之声——全国妇联 2018-10-19
  • 【学习时刻·经济实说①】清华大学国情研究院胡鞍钢:伟大的发展实践产生伟大的思想 2018-10-19
  • 成果转化重要平台 创交会三年落地项目超过140项 2018-10-02
  • 美国在强化国内的经济发展,贸易战只有美国改变的战略方向才会停止,不然就会面对一切有损国家利益的项目打贸易战 2018-09-30
  • 阎良“堵路”神秘机身引猜测 或是运20原型机? 2018-09-11
  • 其中最糟糕的是;以外币收支作为本国货币之“锚”,再加以大开门的资本市场,这为国际资本周期性收割开了方便之门。 2018-09-09
  • 各地又出现狂犬伤人,政府必须做好监管,确保安全。 2018-09-09
  • 港珠澳大桥跨境私家车澳门配额接受申请 2018-08-26
  • 詹皇通知骑士队 准备与其续约 2018-08-26
  • 401| 126| 5| 974| 990| 846| 789| 533| 842| 270| 973| 347| 333| 488| 158|