当前位置: 首页 >  小程序

微交互:不被用户察觉的小细节提升用户体验

发布日期:2020-05-17

在用户⊙无意识的使用过程中,微交互得以达成用户的心理预期,建立用户的心智模型。

一、微交互是什么?

二、交互设计和微交互的区别

交互设计(Inte△raction Densign,缩写为IXD):是定义、设计人造系统行为的设计领域,它定义了⊕两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达到某种╠╡目的,关注以人为本的用户需求。——来源:百度百科

简单来说交互设计就是人与人、机器、系统和环境等交互行为的外在表现设计。交互设计师通过揣摩用户心理和行为特征,设计出完整可用、易用、符合用户认知模型的用户操作流程和使用界面,使用户顺利∴流畅地使用产品达到目的。

交Г互设计效果图

微交互通常只针对单个任务的操作进行设计,从小细节上提升用户的体验,是产品的功能性细节。一般都简单明了,认知上毫无压力,目的是让用户情感上感到惊喜、愉悦、操作起来更加流畅,更人性化。

有的微交互可能因为体积小巧,操作简单,可以๑适用不同平台┑(iOS、android、web)的展示,相比大型的功能,它能够保持某种一致性,比如点赞。

点赞微交互效果

不管是交互还是微交互,它都不是功能,而是必须依附于某个功能或者场景下存在的,清晰地表达用户的当前状态,遇到问题、操作时或者У操作后都能够及时给出轻松愉悦及时的反馈,在用户毫无察觉的情况下进行交互行为完成功能的操作,达到用户目标。

比如登录页面,我需要输入手╯╰机号才能登录,手机号有正确/错误的验证,那这个必须输入ξ手机号是一个功能,判断对错的展现方式可以是弹窗可以是手机号输入框附近有文案提示,这个是交互。

比如音乐类app,音乐播放器是一个功能,而调节音量的大小就是交互。如下图网易云音乐和QQ音乐的音量调节的交互。

再比如Facebook,用户发的推文,若非默认语言,会有一个“翻译推文”。

支付宝的绑卡功能,会有一个扫描银行卡的选ↂ择,微信的语音转文字等等,这些都是属于微交互。

交互和微交互就如同下面点的链接示意图,很多大小不一的点连接成一个信息流程,点可以是这个流程中的某一个小点,也可以是一些小点链接成的大点,这个小ε点就是微交互,大点就是几个微交互的总和或者是宏观层面的全局交互。

生活中的微交互也有很多,比如:自动感应洗手的水龙头,当把手放到水龙头下面,自动感应到手的存在,水就会$出来,不用做任何其他操作。

三、微交互的适用场景

微交互适用以下场к景:

只完成一项任务 只影响一个数据 ↁ打开或关闭某个功能 连接不同设备 只影响一个数据;比如涨幅价格、天气温度 控制正在进行的过程,如切换电视频道 调整某项设置

四、微交互的实现和组成

要实现微交互,就要先学会观察,搞εїз清楚什么情况,理清逻辑顺序,看别人如何互动。

比如状态显示、提示信息等,一般会在这些信息中暗示下一步操作,为什么不在这一步展示的信息中就包含下一步需要做什么的按钮呢?为什么有的提示弹窗是从页面下方出现,有的直接显示在页←面中部,有的显示在手○触碰的附近?

还要了解产品的@目标用户,包括他们使用产品或者进行这一步功能的目的,前后逻辑步骤的串Ц联顺序,不同情境下交互的操作环境。极强的观察能力、清晰的逻辑、对用户的同理心、对产品的了解等都至关重要。

把微交互集成到产品中有三种方式,分别是逐个设计微交互、把复杂的应用程序简化为基本的微℡交互、把每个功能当作一组相互联系的微交互。

一个好的微交互由四个部分组成:触发器、规则、〣反馈、循环和模式。

触发器启动微交互,规则规定微交互如何起到作用和工作的过程,反馈向用户传达规则信息,循环和模式构成微交︰互的元规则。

1. 触发器

触发器是启动任何微交互的前提条件,它可⿶以是物理/数字控件。

微交互的触发可以是用户触发启动的,也可以是设备或应用监测到某些条件被满足了,由系统自动启动的。

比如提交表单,你点击了“提交”的按钮,才能够把表单信息提交给系统,这是用户主动触发的,是来源用户自身的期待和需求。

如果你提交的表单中有些信息不符合要求或者系统出错(突然没有网络),系统就会给予提示错误原因或者错误提示(无网络的缺省۩๑页)等。这是满足∣一些条件,系统自动触发的,往往是在无意识中自动完成的。不可见的触发器通常离不开传感器,比如向右滑,摄像头☼、麦克风、摇一摇等等。

为了使界面简洁但又不舍弃这个功能,会采用不可见的触发器,或者在用户执行其他动作时,偶然发现这个微交互。但它一定不是这个应用的直接目标而是结合上下文和技术的副产品,比如列表顶部的重新加载。

系统触发的规则至关重ц要,这个和整体的规则紧密相连,后面的“规则”中详细说明。

2. 手动触发的情况下设计者要遵循七个规则:◢

必须清楚用户想要什么、什么时候做、在什么情境下发生,让触发器的位置跟用户的理想需求相吻合非常重要。 保证触发器每次都触发相∩同的动作,这样才能⺌保证用户对微交互形成准确的心智模型。 提前展示数据,比如区块链类型的app,每种币的列表上可以直接显▼示币的涨幅,如果想了解具体详情,再点击列〖表进入查看详▣▤▥细数据。再比如正在Ш下载的应用,可以在触发器上显示下载进度,不一定非要点进去查看。 控件和视觉使用情景要一致,比如看着像按钮,就一定是可以点击的。用户看到控件就一定会有一个预期≮,或者在其他主流app上养成了类似控件的使用心理模型,要符合这个心理预判,把用户对于触发器的识别成本降到×最低。 使用地越频繁或越重要的触发器一定要引人注目,效果要凸◣显。比如有声音的、动态的要比静态无声的吸引注意力,形状大的、有色彩的肯定要比小的、常规色的更突出。 仅≠在触发器本身无〾法提供相应信息的情况下使用标签,比如电商app首页的金刚区按≯钮,采用图标+文字的表现方式。

手动触发器包含三个部分:控件、控件状态、文本/图形标签〤。

控件:

例如视频快进,可以是向右滑动的一个手势动作就足够●。对于有两个状态的,比如开Φ关,可以是按钮,但前提按钮的状态必须清楚明┛了。对于多种状态的动作,比如手机的打字键盘,每个按钮代表一个选项,还有收起推出的按钮选项。对于一定范围内的连续进行的动作,例如音量的调整,可以使用滑动条,也可以使用两个按钮来改变Ю数值大小的方式,或者固定的手势方向滑动来调整。

有些触发器有多个控件或者表单字段(复选框、文本输入字段)之类的元素组成,比如app登录的手机号码的填写,如果可以自动填充就会方便很多。

控件的状态也至关重要,默认状态、活动状态、悬停状态、※反转状态、鼠标点击/触碰/进行中的状态、切换状态等等,一般从视觉设计方面改变。

标签表达的意思一定要清晰明确,并且使用规范也要统一。不能类似情况下,使用不同文本,比如警告/警示。

这⊥篇文章就先写到这里,关于规则、反馈、循环和模式以及什么是内容为王的轻┕量化设计,下篇文章在做详细介绍。

 

本文由 @白白 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

  • 银行大数据价值变现10大...

            DT时代的到来,使得金融数据呈现出爆炸式增长,BCG曾有报告指出,银行业每创收100万美元,平均就会产生820GB的数据。庞大的数据体系所蕴含的价值也在不断体现,金融业对数据的依赖越发加强,众多的金融环节都需要通过对数据的收集和分析后完成。   BCG的研究指出,已有三分之一的海外银行在组织流程中嵌入了匹配大数据的工作方...

  • P2P网贷行业投资人流失...

           报告摘要 为更好刻画网贷投资人的交易行为和偏好,识别不同网贷平台的投资人特性,盈灿咨询基于网贷数据库,运用数据挖掘技术,独家开发“P2P网贷投资人大数据监测系统”,具体的指标模型包括平台网贷投资人的流失率、续投率、新投资人留存率等。 《P2P网贷行业投资人流失率报告》为网贷投资人行为系列报告的第一篇。从定义上,投资人在收回最...

  • ITG:2014年And...

    据国外媒体报道, ITG Investment Research研究公司发布的一份最新调查报告显示:在未来12个月里,苹果iPhone和微软WP手机的市场份额将可能增加,而谷歌Android 和黑莓手机市场份额可能会出现下滑。这份研究报告共调查了1012名美国成年人。 明年安卓将萎缩WP、iOS将增长 报告显示,苹果iPhone是人们在考虑购买新机时的首选移动平台。目前,苹果iPhone在美....

  • NRF:2019年美国情...

            根据美国零售联合会(NRF)发布的最新调查,今年庆祝情人节的美国人比例有所下降,但是支出将创造纪录。         今年情人节,受访者平均花费161.96美元,比去年(143.56美元)上涨了13%,并轻松超过了2016年创下的146.84美元的历史纪录。今年的情人节总支出预计为207亿美元,比去年(196亿美元)增长了...

  • IBM:区块链对电子行业...

    报告下载:添加199IT官方微信【i199it】,回复关键词【区块链对电子行业的意义】即可 报告下载:添加199IT官方微信【i199it】,回复关键词【区块链对电子行业的意义】即可

  • 【丰镇网】手机网站图片如...

        【丰镇网】手机网站图片如何抓取    在网站建设过程中,为了丰富页面布局和内容,网站增加了大量图片,美化网站。但是对于搜索引擎来说,蜘蛛在随机识别网站图片的能力并不强。如果字数少,大量的图片也会给SEO优化带来一些困难。那么,【丰镇网】手机网站图片如何抓取?    【丰镇网】手机网站图片如何抓取?方法如下:   ...

  • 谷歌I/O正式发布And...

    飞象网讯 北京时间5月8日凌晨,一年一度的Google I/O开发者大会在美国加州的海岸线圆形剧场(Shoreline Amphitheater)召开,会上谷歌在推出Google Pixel 3a、Google Pixel 3a XL手机、谷歌智能助理软件之外,还正式发布了全新一代Android Q系统。Android Q系统支持折叠屏、支持5G、增加暗黑模式、更注重安全和隐私等等,都为大家带来了...

  • 百度排名更新阶段哪些事项...

        百度排名更新阶段值得注意几个要点,百度搜索引擎现在有一个固定的更新时刻,在这个特殊的日子里,我们的站长应该会投缘搜索引擎采取一些特殊的优化方法,一方面是给搜索引擎带来良好的形象,另一方面是抓住关键来清理一些负面影响,比如网站实力可能受损等。 &n...

  • 拍拍品牌全面升级 巨头“...

    在经济结构转型的影响下,大众消费观念在持续改变,极具性价比的二手市场迎来蓬勃的发展。近日,二手交易市场再掀波澜,在京东拍拍成立一周年之际,正式宣布启用“拍拍”新品牌标识及APP图标,并将于12月22日成立拍拍“质检研究院”,进一步加强技术监管推进品质二手服务升级,从而促进供给端标准化,让二手买卖交易更具品质,推动二手交易市场进入“品质时代”。聚焦二手需求推三重解决方案 二手市场迎来“品质”Pro时...

  • socialmediat...

    社会化媒体营销,你愿意输在起跑线上吗? 在社会化媒体营销中,哪个企业都不愿意输在起跑线上!那么充分的准备和执行性高的创意是一个线上宣传活动成功开展的关键。就像所有的市场和公关工作一样,一个社会化推广计划应该包含一个战略性基础的所有要素。我们可以从社会化推广和传统媒体推广的相同和区别去探讨如何去开展社会化营销。 传统媒体推广与社会化推广比较 相似点: #1 调研 被称作广告之父的David Og....

  • 商业周刊:数据解读社交媒...

    2012年11月7日据《商业周刊》报道,可以说社交媒体在2012年美国大选中发挥了异常大的作用,网民参与度屡屡刷新。丹佛竞选辩论Twitter共产生1030万条信息,成为美国政治史上讨论最多的事件,超过民主党全国代表大会时的950万条和共和党全国代表大会的400万条。 图1 10月4日丹佛辩论Tweet数量 在今天这个选举日,社交媒体更...

  • 广安seo:本地关键词s...

      广安seo做的是地域性的seo博客,有很多行业因为产品或服务的限制也需要做本地关键词seo排名,在此将个人总结的技术教程分享给大家。一般来讲,地域性的本地关键词的优化难度要低很多,也比较容易实现。 广安se […] 广安seo做的是地域性的seo博客,有很多行业因为产品或服务的限制也需要做本地关键词seo排名,在此将个人总结的技术教程分享给大家。一般来讲,地域...