6个技巧帮你做出优秀的UI动态微交互,优秀的U

2019-09-22 11:55栏目:王中王今日开奖结果
TAG:

明确系统状态、让按钮和操控可触知、打造有意义的转场、强调界面的变化、增加愉悦的细节…… 今天腾讯设计师月焱瞳这篇译文,总结了6个做出细腻动态微交互的技巧,建议阅读。

关注互联网,关注硅谷堂。想了解更多关于互联网岗位知识的信息,关注微信公众号:硅谷堂(ID:guigutang)或下载“硅谷堂”APP。

经过精心设计的动画会为用户体验大大加分。设计师秉承以人为本的设计理念,将用户摆在第一位。一旦用户发现了app中的动画,他们会感到非常愉悦。

著名的魔术师 Dariel Fitzkee 曾说,「魔法既身藏于细节,又体现于表演。」交互设计也是如此。设计师热衷于得当的整体结果,但假如没有妥善处理细节,解决方案将付之东流。所有的魔法藏于细节之中。那就是为什么精心设计的微交互使体验显得精雕细琢。

著名的魔术师 Dariel Fitzkee 曾说,「魔法既身藏于细节,又体现于表演。」交互设计也是如此。设计师热衷于得当的整体结果,但假如没有妥善处理细节,解决方案将付之东流。所有的魔法藏于细节之中。那就是为什么精心设计的微交互使体验显得精雕细琢。

作为设计师,设计动画效果固然重要,但同时需要了解动画的“润物细无声”这一特点,因为你需要创建的动画能完成一项任务,充满人性化。

明确系统状态

明确系统状态

动画的好处

移动app中的动画有明确的逻辑意义。它可以减少认知负担,避免应用状态发生改变时产生一片空白,在空间关系上建立更好的回忆机制。还有一点:动画让用户界面栩栩如生。

理想状态下,内置动画应该:

对用户操作提供明确反馈

为用户显示系统状态

引导教育用户如何与界面进行互动

Jakob Nielsen 提出了关于界面设计状态的启发,「系统应当在合理的时间里,通过合适的反馈来保持告知用户将要发生的事情。」这意味着,用户界面必须持续给出反馈,带用户跟上节奏。App 不该引起用户不断的猜测,而应该告诉用户当前发生的事情。微交互通过合适的视觉反馈来帮助你实现这一切。

Jakob Nielsen 提出了关于界面设计状态的启发,「系统应当在合理的时间里,通过合适的反馈来保持告知用户将要发生的事情。」这意味着,用户界面必须持续给出反馈,带用户跟上节奏。App 不该引起用户不断的猜测,而应该告诉用户当前发生的事情。微交互通过合适的视觉反馈来帮助你实现这一切。

视觉反馈

视觉反馈在用户设计中非常重要。在现实生活中,按钮和控件会对我们的动作给出反馈,这也符合我们对于事物的预期。有反馈的交互设计通过对用户的输入给出逻辑式的回应,从而鼓励用户对app进行深层次的探索。当用户输入时,系统应给出即时的视觉确认。

数据的上传与下载场景,是一个应用动态微交互的绝佳机会。

数据的上传与下载场景,是一个应用动态微交互的绝佳机会。

按钮和控件

尽管按钮和控件等用户界面元素被覆盖在屏幕玻璃下方,它们依然是可被感知。为了弥补现实与虚拟之间的鸿沟,动画被用来确认交互效果,看上去就像和现实操作中一样。

采用水波动画确认输入效果

贴士:

视觉反馈效果很好,这是因为它们符合用户对于认知的自然预期。随便点点应用中的这儿哪儿,你都明白现在发生了什么,这种感觉棒极了。

图片 1

同类的动画,还有广为人知的「下拉刷新,」 这类动画引发了移动设备上的内容设计创新。愉悦的刷新动画总会博得用户会心一笑。

系统状态

用户希望掌握应用状态,希望应用的反馈符合心理预期。甚至可以说,用户是不喜欢惊喜的。动画提供了应用进程状态的实时提醒,使用户可以快速了解目前正进行的项目。

来源:dribbble

这种动画中非常著名的一类是“下拉刷新”,一般紧跟着的是一次内容更新的过程。

来源:dribbble

动画对于启动页设计也非常有帮助。在启动页流程中加入流畅的转场效果和精美的动画会给用户留下一个好印象。

小贴士:

为系统状态提供实时反馈,让用户快速了解当前情况,明白自身所处位置。

同类的动画,还有广为人知的「下拉刷新,」 这类动画引发了移动设备上的内容设计创新。愉悦的刷新动画总会博得用户会心一笑。

要点:对于 App 的过程状态,动画提供实时的告知,使得用户可以快速地理解发生的一切。

有意义的转场效果

你应该使用动画来实现平滑的转场效果,让用户从不同的导航之间切换,向用户解释元素编排的变化规律,加强元素层级之间的联系。动效设计可以有效地吸引用户的注意力,既将有用的信息告诉给了用户,又让他们感到愉悦。

用户选择列表中的一块卡片,放大查看详情

图片 2

让按钮和操控可触知

视觉效果连接转场

你应该使用颜色和恒定不变的元素来为不同的转场状态之间创造视觉关联。在两个不同的视觉状态之间切换需要做到简洁、平滑、轻快。

移动一个特定的元素使得转场效果变得清晰

要点:对于 App 的过程状态,动画提供实时的告知,使得用户可以快速地理解发生的一切。

用户界面元素和操控元件应该是可触知的,即使它们身处屏幕下方。视觉和动态指引能够桥接这个间隙,通过及时响应输入以及主观操纵感十足的动画。界面按钮的交互可以模仿自常见的现实物体。简单来说,你可以对用户的输入行为给予视觉反馈,以此提升界面感知的清晰度。

层级计时

动画有助于区分信息层级,通过创建视觉引导曲线来向用户传达哪块内容是最重要的。

避免让人沮丧的转场效果,例如下图所示。

所有的元素有着同样的效果,完全不能提示重点

转场元素的时间顺序应该像下图一样顺滑。

来源:materail design

让按钮和操控可触知

要点:视觉反馈因得体地满足了用户对接收信息的自然欲望而产生作用。用户穿梭于 App 之中,时刻感觉掌控一切,这非常棒。

持续作用的动画效果

转场中的对象应该做有规律的运动。

避免像下图一样做杂乱无章的运动,因为它会分散用户注意力。

毫无规律可循的动画。来源:material design

用户界面元素和操控元件应该是可触知的,即使它们身处屏幕下方。视觉和动态指引能够桥接这个间隙,通过及时响应输入以及主观操纵感十足的动画。界面按钮的交互可以模仿自常见的现实物体。简单来说,你可以对用户的输入行为给予视觉反馈,以此提升界面感知的清晰度。

打造有意义的转场

令人愉悦的细节

动画最基础的应用在于转场,但如果一个app可以在基础功能之外使用一些动画效果,那就会让用户感到愉悦。动画可以存在于所有的组件内,以各种方式表现,如细节处的图标,或关键帧转场等等。

从一张图片转换为另一张图片的图标,在不同状态下提供不同的功能。来源:material design

图片 3

你可以借助动画让用户在导航和内容之间顺滑地穿梭、来解释屏幕中布置的元素的变化、或以此强化界面元素的层级。

有趣

动画效果有着鼓励用户与应用进行交互的功能。它们可以调动用户的同理心,提升用户体验。

行走的菜花

为了动画而动画

为了动画而动画,产出的一般都是不好的设计。当一个动画和功能目标相违背时,它会让人感到厌恶。同时要有时间性的概念——动画播了第100次的时候会不会让人烦,它是否对所有用户都一样清晰明了?

小贴士:带着目标去设计动画效果。不要仅仅为了取悦用户而设计,我们应该更注重动画对用户产生的实际效果。

要点:视觉反馈因得体地满足了用户对接收信息的自然欲望而产生作用。用户穿梭于 App 之中,时刻感觉掌控一切,这非常棒。

图标可以在不同的时间里,演变不同的形状,服务于双重功能。

结论

谨慎对待设计。对每个细节的重视是成功的关键,让我们设计的人机界面更易于使用。精心打磨的动效让设计师可以更高效地传情达意。你设计的产品易用性越好,用户就越有可能去使用。

打造有意义的转场

动态设计以信息告知和取悦用户的手段,有效地吸引用户的注意。在移动设备和智能手表上显得尤其出色,毕竟方寸之间容不下大量信息的堆砌。

你可以借助动画让用户在导航和内容之间顺滑地穿梭、来解释屏幕中布置的元素的变化、或以此强化界面元素的层级。

Apple 的 iOS 用户界面是个优秀的实例,如下图所示,用户选中一个文件夹或者 App,视角会接着拉近到详情视图、或直达 App 主界面。

图标可以在不同的时间里,演变不同的形状,服务于双重功能。

另一个优秀的实例:通过颜色变化或元素的流动,串起两个状态之间的视觉关联。这样的动画让切换显得轻松顺滑。

图片 4

要点:微交互建立页面间的视觉联系,也明确了用户界面。

动态设计以信息告知和取悦用户的手段,有效地吸引用户的注意。在移动设备和智能手表上显得尤其出色,毕竟方寸之间容不下大量信息的堆砌。

转场动效设计好文:《高手之路!设计漂亮有趣的转场动效》

Apple 的 iOS 用户界面是个优秀的实例,如下图所示,用户选中一个文件夹或者 App,视角会接着拉近到详情视图、或直达 App 主界面。

帮助用户开始

图片 5

微交互在信息载入过程发挥了重大作用。出色的载入体验与动画,对用户在初次沉浸于 App 时产生了极大的冲击。它们在唤起 App 时突出最重要的特性和操控,给予用户引导和教育。

另一个优秀的实例:通过颜色变化或元素的流动,串起两个状态之间的视觉关联。这样的动画让切换显得轻松顺滑。

要点:微交互呈现信息并帮助用户高效地抵达目标。

图片 6

强调界面的变化

要点:微交互建立页面间的视觉联系,也明确了用户界面。

微交互可以引导用户的注意力。在许多情况下,动画用于吸引用户对重要细节的关注(例如查阅「通知」)。然而,必须确保该动画服务于功能,并且在用户角度,是个得体的存在。

转场动效设计好文:《高手之路!设计漂亮有趣的转场动效》

要点:微交互对用户而言,可以是良好的视觉指引。

帮助用户开始

增加愉悦的细节

微交互在信息载入过程发挥了重大作用。出色的载入体验与动画,对用户在初次沉浸于 App 时产生了极大的冲击。它们在唤起 App 时突出最重要的特性和操控,给予用户引导和教育。

微交互动画最基础的应用是转场。然而,App 动画在突破标准动作范围的限制下,真切地取悦于用户。下面的按钮无缝地切换状态,同时满足双重功用:告知用户、使其怦然心动。

图片 7

要点:关注用户的情绪,它们在界面交互中发挥了巨大的作用

要点:微交互呈现信息并帮助用户高效地抵达目标。

设计微交互时需要考虑的

强调界面的变化

当你的视觉设计包括以上讨论的元素时,关注以下几点:

微交互可以引导用户的注意力。在许多情况下,动画用于吸引用户对重要细节的关注(例如查阅「通知」)。然而,必须确保该动画服务于功能,并且在用户角度,是个得体的存在。

让你的微交互几乎不可见,并且完全是功能性的

图片 8

确保动画适用于服务功能目的,不要让用户感到尴尬或打扰。对于常用的以及次要的操作,建议响应是适度的。而对于低频的、主要的操作,响应则应该更有份量。

要点:微交互对用户而言,可以是良好的视觉指引。

长驻于心

增加愉悦的细节

微交互应该经得起长期使用的考验,初见倾心也可能日渐厌烦。

微交互动画最基础的应用是转场。然而,App 动画在突破标准动作范围的限制下,真切地取悦于用户。下面的按钮无缝地切换状态,同时满足双重功用:告知用户、使其怦然心动。

遵循 KISS 原则

图片 9

过度设计的微交互可以是致命的。微交互不应该使得屏幕信息过载,造成漫长的载入。相反地,它应该通过迅速地传达有价值的信息来节省时间。

要点:关注用户的情绪,它们在界面交互中发挥了巨大的作用

不从零开始

设计微交互时需要考虑的

你总会了解目标受众以及他们的背景。使用这些信息来让你的微交互更加精确并且有效。

当你的视觉设计包括以上讨论的元素时,关注以下几点:

与其它界面元素建立视觉协调

让你的微交互几乎不可见,并且完全是功能性的

微交互的风格应该与 App 的整体匹配,营造和谐的产品感知。

确保动画适用于服务功能目的,不要让用户感到尴尬或打扰。对于常用的以及次要的操作,建议响应是适度的。而对于低频的、主要的操作,响应则应该更有份量。

总结

长驻于心

微交互表明,关注小细节可以导向强有力的结果。正如 Charles Eames 曾说道,「细节并非散布于细枝末节,它们串成了设计。」所有的设计元素都是至关重要的。细节让你的 App 在竞争中脱颖而出,它们可能是实用的、不起眼的衬托,抑或使人印象深刻、能够给到帮助,甚至,引人流连忘返。

微交互应该经得起长期使用的考验,初见倾心也可能日渐厌烦。

坚持别具匠心的设计,谨记伟大的设计是完整的存在,上至宏观功能,下至细节微交互。

遵循 KISS 原则

过度设计的微交互可以是致命的。微交互不应该使得屏幕信息过载,造成漫长的载入。相反地,它应该通过迅速地传达有价值的信息来节省时间。

不从零开始

你总会了解目标受众以及他们的背景。使用这些信息来让你的微交互更加精确并且有效。

与其它界面元素建立视觉协调

微交互的风格应该与 App 的整体匹配,营造和谐的产品感知。

总结

微交互表明,关注小细节可以导向强有力的结果。正如 Charles Eames 曾说道,「细节并非散布于细枝末节,它们串成了设计。」所有的设计元素都是至关重要的。细节让你的 App 在竞争中脱颖而出,它们可能是实用的、不起眼的衬托,抑或使人印象深刻、能够给到帮助,甚至,引人流连忘返。

坚持别具匠心的设计,谨记伟大的设计是完整的存在,上至宏观功能,下至细节微交互。

版权声明:本文由王中王鉄算盘开奖结果发布于王中王今日开奖结果,转载请注明出处:6个技巧帮你做出优秀的UI动态微交互,优秀的U