赞助商
立即赞助

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

交互设计4年前 (2020)更新 流光
7.9K 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 行交互的时候,望度可动性其实高度依赖于这些动效微交互,这设师需设出优秀视觉反馈效果的原因所。

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

相关文章

在提高可用性的建议中,如何优雅、清楚的告知用户哪里出错了是非常重要的。当然,如果能够一开始就避免他们犯错是最好的。 ...
交互设计
网站对于每个企业而言是展现品牌的重要渠道。 当你在为你的用户设计网站的时候,一定要控制好网站的内容量。用户并没有必要...
优秀网页设计
话UI设计中难度最大也最容易被忽略的一点,就是对于「无法匹配」(系统无法识别用户的话)和「没有输入」(用户没有说话)的...
对话式交互
从少年到大叔,只用了5年,还记得我刚入职的第一份工作的导师和我说:「设计没有什么捷径,有的只是多看、多想、多做,逻辑思...
ui设计
你知道吗?按钮位置的设计会影响用户完成任务的速度。更快地完成任务会带来更满意的用户体验。如果你也想带给用户更满意的用...
交互设计
编者按:每天超过1.5亿人使用的抖音,究竟用了哪些设计才让你刷得停不下来?本文中新浪交互设计师总结了3个交互细节,看完才...
上瘾模型
页面跳转在 APP 中属于最常见,也是最基础的一个交互细节点。我们常见的跳转方式有直接跳转、左右跳转、上下跳转、翻转、联动...
交互设计
本文为设计团队内部的模拟项目「医疗魔方」,目的是帮助设计师们在这个过程中学会建立有效的用户画像,掌握产品设计中的全局...
交互设计