微交互的设计案例与思考(上篇)

微交互的设计案例与思考(上篇),第1张

微交互的设计案例与思考(上篇)

作为一个交互设计的爱好者,我在这里自告奋勇,用了6大类大约30个案例,供大家参考。前两部分在本文中分享,即懒人设计和等待设计。

在采访加工品的设计师和主管时,经常会被问到手机上的APP有什么好的。聪明的同学懂得提前准备,比如在网上搜索“XXX设计大神要点”。

众所周知,由于海外UX设计发展趋势的危害,如今国内有很多关于商品设计科学方法论的详细介绍(如用户体验元素的五层实体模型、COOPER的用户实体模型和场景桌面、CUBI的产品模型,以及其最近流行的服务项目设计)。而微交互的资源相对性较差,多为能提高用户理解和应用的动画特效实体模型,涉及用户个人行为较少。

为什么关于微互动的讨论很少?我知道好的微互动不在书本上,不在科学方法论上,而在具体的商品上。好的设计是完全透明的、真实的、优秀的微交互设计,每个人每天都可以使用,却找不到它的存在。

所以现在是时候整理一下当今商品中的微交互设计了。

作为一个交互设计的爱好者,我在这里自告奋勇,用了6大类大约30个案例,供大家参考。

这六个部分是:

为懒而做的设计为等待而做的设计讲礼貌的设计为舒服而做的设计为认知而做的设计因了解你而做的设计一、为懒而做的设计:降低用户负担

从生理学上讲,人的懒惰来自于当人减少热量消耗时,大脑会释放胆碱的奖励系统。也许是因为我们的祖先以狩猎为生,减少热量消耗意味着提高生存几率。

是懒人的天性,所以交互设计的总体目标是帮助用户摆脱繁杂的工作,减少额外的工作。最好是一步到位达到目的。

案例一:淘宝网、手机微信在线充值,一键选购

很多人都用过淘宝或者微信给手机充值,但不知道你大概没注意到,他们之间的网上充值实际 *** 作略有不同。

淘宝的实际 *** 作需要用户选择价格后按在线充值键触发支付,而手机微信点击价格后会立即触发支付。由于充值话费是多选SKU,不需要点击淘宝确认实际 *** 作,增加了用户负担,手机微信完成了一键购买。今天的支付宝钱包明白了两者的区别,套用了手机微信的方式。

案例二:手机转账-智能填充

基本上每个人都有用手机转账的经历。在我们填写姓名和xyk号后,我们发现金融机构是自动选择和填写的。那时候,一定感觉真的很温暖。

根据xyk号对发卡行进行认证,自动为用户添加金融机构,避免了选择过程,减轻了用户的打字负担。

更重要的是,填写后支付宝钱包只显示信息到达时间,默认设置为充电2小时,减轻了用户认知能力和选择过程的负担。

案例三:DOTA2挑选战争,在上一次上做变更

这是一个桌面示例。DOTA2游戏玩家都知道:由于在线游戏玩家较少,游戏模式采用游戏玩家启用各种模式匹配的对策,以减少匹配的等待时间。

所以,有一个问题。游戏玩家每次都要激活好几次,太复杂了。DOTA2并没有那么做,它只是记住了游戏玩家最后的选择,基本上在这一个做了改动,不用重新选择。

因为大部分游戏玩家都有自己固定的偏好,所以在大多数情况下,他们会以最后一种方式立即点击打开。在这种情况下,用户选择的负担被清除,一键匹配完成。

案例四:友宝售卖机和麦当劳点餐付款-不清楚用户选哪些,默认设置大部分人的选择项

这是支付终端设备线下推广的一个例子。很多盆友都在友宝自动售货机买过饮料。选择商品后,屏幕上显示二维码,用户用二维码付款,带走饮料。很多人没有注意到,这其实在选择支付方式的实际 *** 作中省去了一步。

因为中国早就习惯了手机微信和支付宝支付,友宝默认设置支付方式为支付宝支付(这个二维码微信支付也是合理的)。当它必须被改变时,你必须点击以转换其他方法。

麦当劳设计了一个很棒的扫码点餐系统软件,但是这里的支付方式选择好像有错误。用户在形成订单信息时,必须在支付宝微信和银联在线支付之间进行选择。

按照默认设置的最多人的选择,友宝适当减少了大多数人的额外负担,但对于少数人来说,仍然没有增加负担。

案例五:美国亚马逊和值得购-挑选和排序实际上能够融合到一起

电子商务习惯于在列表中选择和排序产品,用户在几个下拉列表中进行选择。但在某些情况下,两者的结合似乎更强。

这来自两个原因。首先,用户不需要实际 *** 作几个下拉控件。第二,大多数情况下,用户看的是全新的、最火的、性价比最高的,而不是最老的、最冷的、更贵的。其实排序可以放的更深。

美国亚马逊APP的商品列表上只有选择,排序在选择里面,但还是下拉的方式。美国亚马逊的设计师们似乎知道这两者可以合二为一,但遗憾的是显示方式仍然效率低下。但是最上面的排序按钮室内空房间没有用好。

掌握这些问题是值得的。在一个目录中,设计师不仅将排序整合到选择中,还将流行的标签放在取消排序的部分。用户甚至完全不需要点击选择,也可以根据logo选择需要的内容,减轻了用户的实际 *** 作负担。

微交互的核心价值在于根据产品的关键点来提升用户的体验。

在第一部分,我们详细介绍了5个为懒惰而设计以减轻用户负担的案例。在下一部分中,我们将关注等待的设计。

二、为等待而做的设计:等待难以避免,但能够提升

研究表明,用户可以承受的最大等待时间是6~8秒:用户可以接受的反馈在0以内。1秒;等待超过一秒的用户会注意到延迟时间;超过8秒后,绝大多数用户会愤然退出。

交互设计虽然不能改变网速和机器设备的特性,但可以改进等待策略,降低等待频率,设计实际等待效果,甚至可以应用虚假反馈来疏导用户的焦虑,最终得到用户的认可。

案例一:人行横道交通信号灯的二种显示信息,提升的前提条件是正确认识方式

一次细心的老同学聚会发现,北京人行横道的红绿灯用两种方式显示信息。选择绿灯时间轴模式,信号灯倒计时。为什么同一个红绿灯采用两种不同的方式?其实这里有一个合适的区域。

交通灯显示的两种信息分别以两种方式传递给使用者:绿灯是等待方式,而信号灯是催促使用者。在绿灯模式下,时间轴是时间的沙漏,路人得不到既定的时间,对等待焦虑麻木,从而防止闯红灯的违规行为。在信号灯模式下,精确的时间让用户可以衡量自己是否还能凑合走主干道,避免行走困难的人停留在路中间造成风险。

更重要的是,设计师恰当地理解了两种方式的区别,设计了一种改进的交通信号,减少了行人闯红灯和在路上停车的发生。

案例二:IOS的airdrop推送和接受,如不必要应尽量减少应用多形式

iPhone的Airdrop是一个非常方便的文件传输功能。在具体的应用中,基本上没有其他更强的替代品可以替代OX机器之间的文件传输。但iPhone用户可能没有意识到,airdrop推送和接受是两个截然不同的页面。

其实推送的等待页面是非多表单的。对外发送数据时,用户可以按返回键或home键进入其他日常任务;但受理确实是多表单等待页面,用户必须等待传输结束(或者取消传输),这时home键无效。

有一次,我等了二十分钟才收到朋友见面的视频。这段时间,我很惊讶我的微信什么都做不了。是因为机器设备读写能力的限制吗?但是人们通常会在appstore上免费下载几百兆的应用,而在手机上并不是这样。在任何情况下,如果没有必要,应该尽可能减少等待的多表单页面。让服务员无所适从的,就是来自以情怀著称的美国苹果公司。

案例三:DOTA2的搭配等待,等待的情况下实际上能够找点事做

在日常生活中,人们会发现自己在等待,讨厌完全无所事事。比如便利店的收银台前排起了长队,很多等待的人都在看手机,刷微信。大家要防止用户等待,尽量找自己喜欢做的事情。其实有一些这样的手机软件设计:

如前所述,由于DOTA2的网游玩家很少,所以一场比赛的等待时间很长(一般在3分钟左右)。DOTA2没有使用多表单等待页面,而是在右下方显示信息,而不是多表单。这时,游戏玩家可以观看英雄的职业技能,阅读攻略百科,或者逛超市。

更重要的是,在自己选择英雄的一分钟内,如果游戏玩家选择的早,剩下的时间可以用来把自己放在显示屏右侧的沙盘模型上,还可以买断衣服。

在等待这件事上,暴雪游戏确实想了很多办法让用户在不可避免的等待中做有趣的事情。

案例四:淘宝闲鱼和饿了么外卖的载入,应用动漫清除用户的焦虑情绪

一般更新目录或形成订单信息的等待时间都在一秒以上八秒以下,让用户体会到时间的延迟和不稳定。优秀的移动端产品会针对这种等待设计专业加载动画,如淘宝闲鱼、饿了么外卖,应用接近体能的有吸引力的d跳动画,进行反馈,麻木和清理用户的等待焦虑,并知道系统软件已经在运行,内容或订单信息马上可用。

商品中有很多类似的案例,也是微交互设计的热门软件之一,这里不再进行。

案例五:微信浏览器的载入时间轴,出示意见反馈,就算是虚报的

在桌面免费下载交付的整个过程中,我们经常会发现,虽然网速会有波动,但是数据信息转换的范围并不太大。众所周知,在手机微信浏览器中,当我们打开一篇微信文章时,往往会发现时间轴的起止速度与完成部分的速度相差很大。

出于好奇,我做了一个实验:我在家里关了网络,但是开了WI-FI。这个时候我的手机是连WI-FI的,我也说不清有没有互联网。在微信微信官方账号打开一篇文章,结果出乎我的意料。我电脑浏览器的祖母绿时间轴很快来到了中间,然后在后半段慢慢向前移动。最后我显示信息打不开,要求刷新页面。

但由于断线,无数据传输,手机微信显示时间线虚假。但是再想想,是微信的错误反馈,让我在黑屏里等了很久,误以为网速快。

是手机微信的对策,旨在清除用户等待的焦虑。

清负担改善等待中的微交互设计案例和思考到此,感谢阅读文章。

[未完待续]

创作者:彩虹猫sir,互动设计师,坚持原创,以文字为友,期待与大家一起感受、思考、发展。

文章作者为@彩虹猫先生,未经批准严禁拦截。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/780686.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-04
下一篇 2022-05-04

发表评论

登录后才能评论

评论列表(0条)

保存