UI设计师最该考虑微交互的设计

前言什么是微交互?微交互是用户在完成某个小任务时产生的交互体验。例如,解锁手机就是一个微交互,手机调成震动模式时会震一下也是一个微交互。为什么称为“微交互”呢?所谓的“微”其实就是指的产品的细节设计。微交互正在成为产品设计中越来越重要的部分。正如同Charles Eames曾经所说,“细节并不只是细节,它是构建起整个设计的基本元素。”你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘...

UI设计师最该考虑微交互的设计

 前言 

什么是微交互?

微交互是用户在完成某个小任务时产生的交互体验。例如,解锁手机就是一个微交互,手机调成震动模式时会震一下也是一个微交互。


为什么称为“微交互”呢?所谓的“微”其实就是指的产品的细节设计。微交互正在成为产品设计中越来越重要的部分。正如同Charles Eames 曾经所说,细节并不只是细节,它是构建起整个设计的基本元素。你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘的产品,靠的是这一个个精致到位的细节堆出来的。真正优秀的设计,从功能到元素,从交互到过渡,都是可靠的。


能认真把这文章看到最后的都是很厉害的人

 案例分析 


对比案例1

UI设计师最该考虑微交互的设计

微信的点赞功能,当你手机没有网络或者网络不好时,在朋友圈给好友点赞,会显示点赞成功。但事实上虽然显示已点赞,其实对方并没有收到你的赞,当有了网络后好友才能收到你的赞,这个过程用户全然不知。这其实就是个优秀的微交互设计,产品给用户呈现出优秀的执行力。这个场景就像,领导给下属下达命令,过程我不关心,我只要结果是一样!

微信这种微交互体验,充分的运用了,以用户为中心的设计宗旨!

再看下图,8只小猪app的达人圈,当用户手机没有网络时,点赞是不会成功的,但是它提供即时反馈,“哎呀,网络出问题了”。其实这种即时反馈机制是交符合良好体验的,但是对比微信的洞察人性体验还是差点意思。

还有一些产品当网络不好时,点赞还会出现loading动画!这样就给会用户留下卡顿的印象!

UI设计师最该考虑微交互的设计


对比案例2

UI设计师最该考虑微交互的设计

同样的微信删除好友对话,没网络时也会执行,这样就达到了,快速满足用户的需求,有些场景用户需要快速删掉聊天记录时,就不会出现网络不好删不掉的问题了!


全民k歌app无网络是不可以删除对话的,同样是一家公司的产品,差别怎么就这么大呢!

(当然也不能说这种交互是不可取错误的)

UI设计师最该考虑微交互的设计

对比案例3

UI设计师最该考虑微交互的设计

网易严选的tab导航切换,当选项超出一屏时,左滑动到一定数量,选中效果会停在最中间的位置,这样左边能看到刚浏览过的几个选项,告诉用户刚看过了什么内容,同样右边能看到几个选项告诉用户即将要看到什么内容。

当要返回到第一个选项,右滑动出现第一个选项“推荐”时,选中效果不再停留在中间位置,这样就能告诉用户已经到头了。这个流程有一个非常清晰易懂的规则。


在看下图的一个反例,可以说并没有一个规则。一直往后滑动,会停在倒数第二个,显示的最后一个并没有完全显示出来,这样就没有给用户清晰明了的提示下一个是什么选项。

返回时直接跑到左边第一个,看不到接下来要返回选项!

UI设计师最该考虑微交互的设计

案例4

UI设计师最该考虑微交互的设计

好的产品懂得洞察人性,支付宝支付流程做到了这一点。

点击“立即支付”在指纹识别弹窗出来之前,有个圆圈小动画反馈给用户支付正在进行中...  这其实还不够,指纹识别成功后,立即出现一个正在付款小动画,然后提示支付成功。

整个流程都在与用户交流,注重人性化思考,动效简洁流畅不会给用户带来繁琐的感觉。

 其实很多微交互的设计未必都能让用户感知到,但如果没有一个好的体验,用户真的能感知到。

假设支付宝支付流程,点击“立即付款”咔嚓提示支付成功。你会不会觉得钱怎么这么快就出去了,似乎丢失了什么一样,一种失落感涌上心头!

案例5

UI设计师最该考虑微交互的设计

这种列表页面很多都是有数量限制的,滑动到最后在往上滑动,会有一个弹性的效果,感觉就会很舒服,用户也得到了一个清晰的反馈。但若是滑动到最后,再往上滑不动了,没有任何反馈,用户就会有是不是卡住的疑惑,最后用户才察觉到原来是见底了。

如今的app已经很少会出现这么初级的体验问题了。从0到1的产品可能还是要考虑到这个体验问题!



案例6

UI设计师最该考虑微交互的设计

下拉刷新告诉用户你关注的人更新了几条微博。这里要多说一下,微交互设计要结合产品的结构模式,能洞察用户的心理,给出正确的引导。例如这个更新条数提示也适合新闻类app,因为新闻具有时效性,不适合类似微博榜单的页面,因为它不具备时效性,榜单的微博会长时间不改变!


总结:设计微交互的几个重要的要素!


触发:设计中要有清晰的交互感知,这样用户才会直观的感受到可以触发交互的,例如一个爱心icon,让用户清晰的知道这里是可以点击的。


反馈:当点击爱心icon,能瞬间得到感官上的反馈,这样就让用户有继续操作下去的欲望。一个好的微交互反馈能引起了用户总是想了解更多信息的原始欲望。


KISS原则:KISS 原则是用户体验的高层境界,简单的解释就是:再笨的人也会用。微交互讲究,简单高效、动效流畅、要避免过度设计成为重交互。


最重要是:微交互要结合产品性质、结构模式了解你的用户和使用场景来设计,这样设计的微交互才会更加精准有效。




 趣味性的微交互案例 

案例1

UI设计师最该考虑微交互的设计

facebook的点赞功能,长按小手会越来越大,聊天中就增加它的趣味性,给你一个大大的赞!


案例2

UI设计师最该考虑微交互的设计

新浪微博的点赞,弹出一个小动画,让用户爱上点赞!


案例3

UI设计师最该考虑微交互的设计

趣味性的对商品选择喜欢还是无感,这种微交互就会给用户留下很好的印象!


案例4

UI设计师最该考虑微交互的设计

手指画一个心,形成一个点赞,是不是很有创意很有趣!



总结:趣味性的微交互思考


微交互必须满足长期使用原则,一些起初看起来有趣的微交互也许时间久了反而会使用户讨厌。例如手指画心点赞功能,初次使用,你会觉得很有趣,但是当你用过100次后会不会觉得点个赞好麻烦呢?




最后


为什么说UI设计师最该考虑微交互的设计?因为微交互常常伴随着动效设计,现如今动效设计几乎是UI设计师必备的技能。

UI设计师相对于PM需求、交互设计师原型图、UI界面的产出是最接近落地时候,微交互也常常与视觉相结合,这是交互设计师可能考虑不到的地方。

但是身为UI设计师我们一定要始终在团队中,多与PM、交互设计师沟通,因为他们可能比你更了解产品的框架结构,运营模式。

所以不要盲目设计,只有团队才能从多个维度考虑问题。

多沟通!多沟通!多沟通!

优秀微交互并且能够给用户留下深刻印象,让产品更加富有生命力。设计师不得不重视起来。

看到文章最后的你,肯定是个很厉害的人,也希望这篇文章给你带来一点点的帮助!



UI设计师最该考虑微交互的设计

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36594/

(0)
交互精选交互精选
上一篇 2018-04-20
下一篇 2018-04-20

相关推荐

  • Axure RP - 专业的原型设计工具

    俗话说的好,不会画原型的设计师不是好的产品经理。产品经理的一大技能就是可以熟练使用原型工具,画出优秀的产品原型。Axure RP是一个专业的快速原型设计工具,是美国 Axure Software Solution 公司旗舰的产品。产品经理能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。它比一般创建静态原型的工具如 Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver...

    2018-03-16
  • “创造完美的用户体验。” 中国最当红工业设计师 —— 杨明洁

    Designer100是+86设计共享平台推出的中国高端设计师第一推广品牌,致力于设计师推广的全球巡展、设计师大奖、视频计划、沙龙论坛的社会公益项目。杨明洁YANG DESIGN及羊舍创始人福布斯中国最具影响力设计师同济大学及南京大学客座教授融合了德意志逻辑思维与中国人文精神的设计理念,也使得杨明洁成为了包括波音、奥迪、宝马、博世、飞利浦、英菲尼迪、可口可乐等众多国际顶尖品牌的合作伙伴,从眼镜箱包到飞机内舱,从消费电子到交通工具,从茶具...

    2018-02-26
  • 想为 iPhone X 做交互设计?你需要读这篇文章

    点击上方“CSDN”,选择“置顶公众号”关键时刻,第一时间送达!作者丨NIELS译者丨陈冬【编者按】尽管 iPhone X 采用的全面屏设计方案已经是当下技术的最优解,但其“刘海”却依然引起了众多吐槽,在无法达到真正全面屏之下,为何苹果会选择使用非主流的“刘海”设计,而不是主流的“窄额头”?这是一个仍然在讨论的问题。对于众多的 iOS 工程师及设计师而言,为 iPhone X 进行屏幕适配以及交互设计才是重中之重。对此,本文作者 —— ...

    2018-02-01
  • 全面提升用户体验,海尔卫玺首个智慧浴室体验店盛大开业!

    随着“智慧家庭”的概念不断深入人心。在智慧浴室空间领域,与以往用户单一追求产品的实用性相比,如今用户更倾向于将浴室打造成一个智能化、人性化的空间。基于用户对美好智慧生活的需求,海尔卫玺首个智慧浴室体验店于4月28日在上海盛大开业。开业地址:上海市浦东新区浦三路1515号同福易家丽6号楼2-108海尔卫浴专卖店卫玺智慧浴室体验店咨询热线:(021)50102530海尔卫玺智能马桶盖全系列闪耀亮相自上市以来,海尔卫玺智能马桶盖以高水准的品质...

    2018-05-04
  • UED新刊 | 承——中国院方案组二十周年

    📌编辑| F.我觉得记录或者回忆方案组这件事……如果说有意义的话,它不应该仅仅是哥几个的一段往事,而是可能还带有某种其他的价值,可以为我们的同行展现中国建筑发展当中的一个小的片段。——崔    愷《城市·环境·设计》UED108期“承——中国院方案组二十周年”专辑现已发售更多互动福利详见文末扫描文末二维码即可购买新刊导读1997 年,当时还是建设部建筑设计研究院(下称建设部院)的中国建筑设计院(下称中国院),由时任总建筑师和副院长的崔愷...

    2018-02-07
  • 选择爱情与用户体验

    用计算机思维的视角来看爱情和用户体验。一、做结婚教练的互联网产品经理最近发现一个心理咨询师现在转型做了一个结婚教练。她是我的一个心理咨询师朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。那么这个结婚教练以前是干什么的呢?她以前也是做过一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何...

    2018-02-03
  • 交互设计之流程设计(1)

    流程设计是将信息架构转变为交互稿的重要步骤,什么是流程设计呢?简单来说,就是用户完成一项任务的步骤流程,用户是怎样一步一步的完成任务的。本文将从流程设计重要性、如何进行流程设计、流程设计与交互工作三个方面来阐述流程设计。一、流程设计的重要性流程设计对于用户体验来说非常重要,一个好的流程设计将会给用户带来非常的体验。在这里从流程设计是什么、流程设计中需要考虑的问题、优秀流程设计的好处三个方便来进行讲解。1 流程设计是什么首先理解交互设计是...

    2018-05-06
  • 微信公众号哪些细节会影响用户体验?

    公众开发运营官网公众运营平台微信公众号哪些细节会影响用户体验?在微信公众号里面,哪些细节会影响大家对公众号的体验呢?下面小编就来为大家讲解一下这些细节,快来看看吧。1.无意义的自定义菜单内容第一个就是毫无意义的自定义菜单内容,很多企业公众号费心费力通过了企业认证,好像不用这个自定义菜单挺可惜的,然后就非得放些东西进去,但是并没有考虑目标用户是否需要。如果把公众号视作一个小应用的话,自定义菜单的功能可以类比App里的Tabbar,主要是实...

    2018-02-12
  • 你们做交互设计都使用哪些权威的工具呢?

    达内UI设计,中国UID课程标准制定者工具是设计师的重要榜首,好的设计离不开好的工具,那么你交互设计都使用哪些权威的工具呢?本文为大家总结一下。哪里能学到企业需要的设计技术?2018学设计到哪里学就业更好?零基础学设计多久能学会?转行学设计学完好就业么?1月达内UI免费训练营火热报名中,全程大咖级讲师亲授,为你解析UI行业发展趋势,就业前景,帮你了解设计,轻松入门,更快一步成为设计大牛!马上阅读原文或者回复:姓名+电话+城市报名吧!好消...

    2018-01-30
  • Axure 原型 | 用Axure画流程图

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放吻得太逼真张敬轩 - Urban Emotions作者:陈张良来源:简书用Axure绘制流程图好处是可以随时预览,比较灵活。不过就是没有Visio那么多模板和强大的功能。Axure默认的流程图控件:其实我们最常用的是:矩形、菱形、箭头。因为这些基本图形其实并没有形象的表明它们是什么,更多的还是需要使用者根据自身的流程实际情况多加注释,所以大部分流程图只需使用这两个控件即可。Axu...

    2018-03-04