推广

几个交互效果的实现,让你的UI更加人性化。

iseeyu3年前 (2023-12-23)推广124

功能性动效(functional animation),是指清晰的、有逻辑、有目的的交互动效。使用得当可以有效的降低用户的认知负担,提高对应用的空间位置认知,避免使用中的盲目性。

动效可以通过灵活变化(形状、大小、位移、融合、重组等)使应用的界面更加充满活力。在应用UI设计中,我们应当巧妙的设计好的功能性动效(functional animation),使用户切换各个功能模块/页面的体验更加流畅,更好地解释一个界面里各元素的变化过程,更好地强化各个元素的层级结构关系。

成功的切换动效设计包含以下6大要素:

1、处处响应,及时反馈 (Responsive)

视觉反馈在UI设计中极为重要,因为它给了用户的自然期望以一个及时而符合逻辑的确认。比如,生活中,按一个按钮,就可以点亮一盏灯;按门铃,门铃就会响……交互过程中,只要人做出了一个操作,系统就应当予以及时的反馈,这符合我们的习惯和对即将发生的事情的预期。

应当根据用户的触发的操作快速给予反馈,同时,应当表明新的界面和触发它产生的UI元素之间的联系,让人总是知道当前的操作将会带来什么变化。

对象对用户的操作作出恰当的反馈,点击项目-展开详情,切换自然,符合预期

2、关联性(Associative)

触发一个动作的UI控件,与即将出现的新面板之间,必须有逻辑上的紧密联系。这样才有助于用户更好的理解这个操作。

下方是两个对比的实例:

第一个例子:触发的菜单和触发它的UI控件隔了较远的距离,打破了触发点和被触发事件之间的联系。

第二个例子:点击菜单图标,菜单从紧贴它位置出现,从视觉格式塔心理学上,靠近的对象之间的联系密切,而远离的对象之间的联系薄弱。体现了它们之间的逻辑关联性。

另一个是播放器"播放"按钮和"暂停"按钮的例子,这两个按钮是紧密关联的,点击其中一个按钮则另一个按钮立马变为可见。所以它们之间也需要具有关联性的过渡变换。下图很好的做到了这一点。

3、过渡流畅自然(Natural)

避免出乎意料的交互动效。任何元素的移动应当遵循现实中的物体运动规律。在现实生活中,一个物体对象的加速或减速一般都受到外力的影响(重力、摩擦力等),而且运动速度的变化是连续而非突变的,所以同样的,在动效设计里,突然的/奇怪的运动模式都会显得不自然,丧失愉悦的使用体验。

下方是一个不错的实例:点击小卡片-> 卡片和圆对象沿着一道平缓的圆弧进行缓动,而非突然闪现,或者沿着奇怪的路径(比如折线),同时卡片平缓的放大,切换自然舒服。

4、带有目的性,而不是看心情(Intentional)

动效在交互中对视觉体验有着显著的影响,界面中的静态图片或者文字内容的导向作用都没有动效抢。因此,好的动效要正确恰当地指引用户进行下一步操作。

第一次使用某个应用的用户一般并不能预测交互何时何地会怎么发生,但是恰当的动效能帮助用户专注当前的目标,而不被干扰,感觉到当前显示对象的突然变化。

Mac OS 的窗口最小化动效,将当前窗口如同纸片一样收纳到下方的工作应用台,告诉用户点击"最小化"按钮的直接作用就是将当前的窗口隐藏到下方的工作台上,并且告知了用户具体的位置,方便他随时可以重新找到再次打开。这个过程也很流畅,用户可以专注于他处理的事件,而不是被突然打断,变得迷茫。

另一个是父子关系转换的例子,用户点击小卡片,小卡片弹开放大显示详细的信息,信息的出现和展示井井有条,一切动效都是为了功能(合理地展示内容),让用户专注于内容本身。

5、快速灵敏(Quick)

界面各个元素在发生位置或状态改变时,变化的速度不能过慢,而导致过长时间的等待。(同样也不能太快,以致于用户看不清、不能理解动效的逻辑含义。)

下方的例子中,各元素的缓动接连发生,且速度过慢,造成了不太必要的延时。是不可取的做法。

6、简明清晰(Clear)

在单次交互动效中,不宜发生太多样、太多元素的动态变化。交互动效应当清晰、简明、一致。"少即是多"的设计原理在此同样适用。酷炫不是目的,帮助功能的实现,信息的展示,适用的便捷才是目的。

下面这个交互动效中动态的样式过多,没有逻辑性,看起来很炫酷,但实际上干扰视觉,打断了体验

"少即是多"的设计原理在此同样适用。酷炫不是目的,帮助功能的实现,信息的展示,适用的便捷才是目的。改进后的效果好了很多,没有多余的视觉噪声,用户可以沉浸在内容中。

结语

交互运动不应该随机产生,我们在设计每一个交互的时候,要记住背后一定需要一个目的/理由来支撑。动效的关键在于引导用户沿着正确的操作路径快速高效的达到目标,在任务过程中不迷失,不被突然打断。无论你的应用是有趣好玩、是严肃、还是简单商务风格,好的动效设计确实可以为用户提供一个清晰快速的操作体验。

扫描二维码推送至手机访问。

版权声明:本文由西安泽虎代运营发布,如需转载请注明出处。

转载请注明出处https://www.0291.com.cn/post/112742.html

相关文章

从外链、内容方面探索社交媒体对于seo优化的促进作用。

从外链、内容方面探索社交媒体对于seo优化的促进作用。

在社交媒体营销和搜索引擎优化之间,营销人员经常讨论的问题是,社交信号是否被用作搜索引擎优化的排名因素,但无论如何,这两个渠道都是营销人员一直关注的方向。 目前,点瑞网络可以清楚地看到,百度已经能够支持捕捉新浪微博的相关内容,如:长微博,从外部链建设的角度来看,它对SEO优化有积极的影响。 那么,...

锚文本外链对于网站排名有何作用。

锚文本外链对于网站排名有何作用。

谈及网站做外链,不少人都非常感概,发现能带上锚文本的地方实在是太少了,好不容易找到的一个外链渠道都是只能带上锚文本的链接,不少人都是非常泄气,网站排名感觉这种链接非常啥用,感觉也没有啥意义,那么事实真的是这样的吗? 鉴于很多人对此都有这样的一种疑问,SEO网站排名教程接下来介绍下对于锚文本链接的一...

从能量角度看生老病死:《宇宙编年史——真理之书》

从能量角度看生老病死:《宇宙编年史——真理之书》

以下节选自《宇宙编年史——真理之书》(作者贤济华)。人的生老病死与能量的关系是什么?人的生老病死隶属于人体能量医学范畴,生命能级越高,则个体百病不生,衰老进程相对变缓,寿命相对延长; 生命能级越低,则身体羸弱,加速衰老,大多早夭而亡。生命是身心灵三者的合一体,当生命能量过度...

APP推广:新用户哪里来,怎么获取?

APP推广:新用户哪里来,怎么获取?

  没有顾客的商店一定会关门,没有用户的产品也一定会失败。 在互联网世界里,没有用户的产品是没有意义的。 用户是产品持续创造价值的基础,所以获取新用户(拉新)在一家公司里有着举足轻重的作用。 既然拉新如此重要,拉新的过程是怎样的呢? 我们来看一个例子: 小明是一...

外国卖家常用的5个营销方式

外国卖家常用的5个营销方式

出海“泯然众人矣”的现象总是层出不穷,虽说新公司、新品牌的发展长路漫漫,可有没有一些划算的方法及可以帮助卖家进行早期的活动?以下是5个实用的渠道:1、付费搜索(谷歌)当人们在搜索引擎上搜索你的产品或服务时,需要确保他们能够找到你。自然搜索是无法控制的(尽管你应该尽力优化网站...

怎么查看百度关键词排名和权重呢?

怎么查看百度关键词排名和权重呢?

做好一个网站,内容以及都特别重要。想要看一个网站做的好不好可以去看在百度中这个网站所被收录的关键词多不多,那么怎么查看百度关键词排名呢?下面就和小编一起来看看吧。 怎么查看百度关键词排名 还可以查询哦 怎么查看百度关键词排名 1.打开百度搜索,搜索百度关键词排名查询,然后就打开关键词排名查...

现在,非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片