赞助商
立即赞助

想让交互更走心?这4种可见状态微交互技巧一定要学会

UI设计3年前 (2021)更新 流光
8.8K 0 0

典的尼尔森十启发式当中,「系统状态可见性」可以如今交互设计领域当中,最为重要的原则之一。通过向户展现当前的状态,户拥有对系统的控制权,建立户对于产的信任感,这是这种设计启发式的最重要的值之一。

但,到可靠、易用,系统状态展的技巧很讲究的。这里梳理了4种常用的方法,结合了不少实用的案例,希望对所帮。

1、展示用户位置、进度的视觉反馈

1.1、户知道自己在哪

没有人会迷失方向,但是无论在现实生还是在数字领域当中,这种情况都会发生。户知道他们在哪里是创建良好导航体验的键。应程序和都应该凸显当前的导航项,帮助户了解他们在的位置。

想让交互更走心?这4种可见状态微交互技巧一定要学会

Google 的导航栏设计

1.2、要经过多步骤来成任务

这是一个非基本的操作,通过展现步骤数量,帮助户来预估成这个过程需要的时间。

想让交互更走心?这4种可见状态微交互技巧一定要学会

Selecto 的调查问卷的设计

2、辅助用户交互的视觉反馈

数字界面毕竟是现实世界中的真实硬件机构,户更多只借助交互过程中的即时视觉反馈来确定是否成了操作,即时的视觉反馈因此显得非重要。

即时的视觉反馈让用户的操作得到了视觉的「认可」,从强化了「确信感」,这样一一回的确认可以避免错误的发,比如可以避免用户因「感觉点下去」反复点击。

这视觉反馈设计,最常见范例是击按钮按下微交互动画,它告知用户「系统已捕捉到点击交互了」。

想让交互更走心?这4种可见状态微交互技巧一定要学会

AliAli 所设的悬停点击动画

是在某些状况下,按钮视觉反馈有很多不呈现形,有更多可见、可理解新形态,可以在原有基础上探索更多可能性,比如下

2.1、单击赞按钮

想让交互更走心?这4种可见状态微交互技巧一定要学会

Spread love, not viruses ,作者  Charles Patterson

2.2、关按钮

这关按钮不仅点击动效,且色彩按钮标识也随之改变,清晰表明状态,甚至兼顾到了视觉障碍用户

想让交互更走心?这4种可见状态微交互技巧一定要学会

Switcher XLIV , 作者 Oleg Frolov

2.3、书签按钮微交互

这书签按钮通过色彩的虚实变化呈书签已添加的状态,颇巧妙。

想让交互更走心?这4种可见状态微交互技巧一定要学会

Bookmark interaction,作者 Oleg Frolov

2.4、添加购车微交互

这种况下,视觉反馈非常明确且优告知用户已添加到购车里面了。

想让交互更走心?这4种可见状态微交互技巧一定要学会

咖啡下单动效,作者 Nhat M. Tran

3、呈现系统状态的视觉反馈

3.1、系统正忙于么事情

当系统正在载,正在执行,正在行的过程中,通过效来告知户系统并没有停止,而是正忙于执行某件事情,是避免户误解的手。在户等待的过程中,通会实无限载的效(一般使在低于10s的操作中):

想让交互更走心?这4种可见状态微交互技巧一定要学会

对于超过10s的更长的执行过程,无限载的效会显得令人沮丧,这个时候实进条会更好:

想让交互更走心?这4种可见状态微交互技巧一定要学会

这些视觉反馈很大程上降低了系统给人的确定感。

对于移动端应用,初始加载阶段所使用的启动动画界面,否精设,决了用户对于整产品的第一印象,优秀的初始加载动画能够将用户的注意力从焦躁的待中解出。

想让交互更走心?这4种可见状态微交互技巧一定要学会

Logo 闪屏 ,作者 Gleb Kuznetsov✈

3.2、内加载

当用户需时间加载内的时候,建议使用一种特殊的的器「界面骨架」展。这种临时的内器不仅能够帮用户速了解界面的整体框架,构建用户预,并且能够后台速加载数据,渐式帮用户获得信息。

想让交互更走心?这4种可见状态微交互技巧一定要学会

内加载,作者 Ginny Wood

这设计于移动端和桌端设计样适用:

想让交互更走心?这4种可见状态微交互技巧一定要学会

界骨架加载动效,作者 Shane Doyle

4、触发事件

4.1、通知提醒

效的通知提醒,能帮用户意识到新的事发。多数时候,我们建议设师使用微妙的动画行通知,因动画效果会自然吸引用户的注意力,人类的眼的动态视觉其实非常强的。

想让交互更走心?这4种可见状态微交互技巧一定要学会

Aleksei Kipin 设的通知动效

4.2、提示用户采取行动

很多况下,用户界面中会很多方会需用户提交信息。比如,需用户提交表单,或者用户创建了一密码,但复杂度不足需修,或者填写邮箱订阅信息的时候,邮箱格式出错,。使用当的视觉反馈总能够加效将问题告知用户。

想让交互更走心?这4种可见状态微交互技巧一定要学会

内联邮箱验证机制,作者 Derek Reynolds

结语

让用户掌控感,就用户创造好的体验。很多设方案中,视觉反馈会因种种原因被削弱了,甚至被忽略了。但当用户 UI 行交互的时候,望度可动性其实高度依赖于这些动效微交互,这设师需设出优秀视觉反馈效果的原因所。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

年前的时候出过一份交互校招题,这里面有偏流程和概念的基础知识考察,也有眼见和互联网行业了解的一些考察,对于在校生来说...
交互设计
不知道大家有没有看过一个影片,影片内容是让 2000 年后出生的孩子接触 1980 年代的计算机,主持人请他们开机并使用计算机,...
ux
按钮是最常使用的组件之一,但是在与人交流时,还是会觉得大家存在很多误区,所以本文将围绕如何使用按钮展开分析,希望能给...
B端设计
UX设计师是一个最近10年随着数字设计崛起的一个职业,它有着相对宽泛的职能范围,相应的,行业对于UX设计师所需要具备的眼界...
UX设计
在这里,我们将研究设计中最简单、因而常常被低估的活动之一,即线框图的设计。了解什么是线框图,为什么需要设计它们以及如...
交互设计
最近看了几篇很不错的机器人文章,就想着一边翻译,再一边写点自己的想法。日常工作时沉浸在机器人平台、多轮场景以及各种解...
AI 智能
编者按:搜索体系由哪些元素组成?有哪些常见的功能模块?如何建立和优化搜索体系?这篇超全面的总结让你系统认识搜索体系。 ...
搜索
@Daidai丶呆 :想要理解「输入框」的校验规则,就要先对「输入框」的框架做好拆解。这篇文章将从框架到校验做全方位的梳理。 ...
交互设计