发布时间:2023-4-13 分类: 行业资讯
清除系统状态,使按钮和控件精明,创建有意义的过渡,强调界面变化,添加快乐细节和hellip;…今天腾讯设计师@月焱瞳这个翻译总结了6个制作精细动态的微交互技巧,建议阅读。
着名魔术师达里尔·菲茨基(Dariel Fitzkee)曾经说过,“魔术在细节和表现上都是如此。”交互式设计也是如此。设计人员热衷于整体结果,但如果细节处理不当,解决方案将会丢失。所有的魔力都隐藏在细节中。这就是为什么精心设计的微互动使体验看起来很好。
清除系统状态
Jakob Nielsen提出了关于界面设计状态的灵感。 “系统应该在合理的时间通过正确的反馈告诉用户将会发生什么。”这意味着用户界面必须继续提供反馈并使用户保持最新状态。韵律。应用程序不应该让用户继续猜测,但应该告诉用户发生了什么。微交互可帮助您通过正确的视觉反馈实现这一目标。
上传和下载数据是应用动态微交互的绝佳机会。
类似的动画,以及众所周知的“下拉刷新”,这种动画已经导致移动设备上的内容设计的创新。愉快的刷新动画总能赢得用户的微笑。
关键点:对于应用程序的程序状态,动画提供实时通知,以便用户可以快速了解正在发生的事情。
使按钮和控件可触摸
用户界面元素和操作元素应该是有形的,即使它们位于屏幕的底部。视觉和动态指导通过及时响应输入和主观操纵动画来弥补这一差距。界面按钮交互可以模仿自包含的真实对象。简单来说,您可以为用户的输入行为提供视觉反馈,以提高界面感知的清晰度。
要点:视觉反馈有助于用户接收信息的自然愿望。用户在应用程序中,随时都感到放心,这很棒。
创建有意义的过渡
您可以使用动画让用户在导航和内容之间平滑导航,解释屏幕上排列的元素的变化,或者增强界面元素的级别。
图标可以在不同的时间以不同的形状发展,提供双重功能。
动态设计是一种通知和取悦用户的手段,有效地吸引用户的注意力。它在移动设备和智能手表上尤其出色。毕竟,正方形之间没有太多信息。
Apple的iOS用户界面就是一个很好的例子。如下图所示,当用户选择文件夹或应用程序时,视图将放大到详细信息视图或直接转到主应用程序界面。
另一个很好的例子:通过颜色变化或元素流来串联两个状态之间的视觉关联。这种动画使切换变得轻松顺畅。
要点:微交互建立页面之间的可视连接,并阐明用户界面。
过渡效果设计很好:《高手之路!设计漂亮有趣的转场动效》
帮助用户开始使用
微交互在信息加载过程中起着重要作用。出色的加载体验和动画,当用户第一次沉浸在应用程序中时,会对用户产生巨大影响。他们在唤起应用程序时突出了最重要的功能和控制,为他们提供指导和教育。
要点:微交互提供信息并帮助用户有效地实现目标。
强调界面变化
微交互可以引导用户的注意力。在许多情况下,动画用于吸引用户注意重要细节(例如查看“通知”)。但是,必须确保动画服务于功能并且在用户的角度来看是体面的。
要点:微交互可以为用户提供良好的视觉指导。
增加愉悦的细节
微交互动画最基本的应用是过渡。但是,App Animation通过突破标准动作的限制真正让用户满意。下面的按钮可以在满足双重功能的同时无缝切换状态:通知用户并让他们感到放心。
要点:关注用户情感,他们在界面互动中发挥巨大作用
在设计微交互时需要考虑
当您的视觉设计包含上述元素时,请关注以下内容:
使您的微交互几乎不可见且功能完全
确保动画是出于服务功能的目的,不要让用户感到尴尬或不安。对于普通和次要操作,建议的响应是适度的。对于低频率的主要操作,响应应该更加重要。
留在心里
微观互动应该经得起长期使用的考验,一见钟情就会变得越来越无聊。
遵循KISS原则
过度设计的微交互可能是致命的。微交互不应超载屏幕信息,导致长时间负载。相反,它应该通过快速传递有价值的信息来节省时间。
不要从头开始
您始终了解目标受众及其背景。使用此信息可以使您的微交互更加精确和有效。
与其他界面元素建立视觉协调
微交互的风格应该与应用程序的整体外观相匹配,以创造和谐的产品感知。
总结
微交互表明,专注于细节可以带来强大的结果。正如查尔斯·埃姆斯(Charles Eames)曾经说过的那样,“细节并未散布在细节中,它们被系列化为设计。”所有设计元素都至关重要。细节使您的应用在竞争中脱颖而出。它们可能是实用的,不显眼的,或令人印象深刻的,能够提供帮助,甚至逗留。
坚持巧妙的设计,记住伟大的设计是一个完整的存在,从宏观功能到微观互动。