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

相关推荐

  • 用户体验与智能产品设计专业课程研修班

    通知:根据国务院学位委员会(2013)36号文件,原用户体验与智能产品设计在职研究生课程统一更名为“用户体验与智能产品设计在职研修课程”!一培养目标:良好的用户体验是产品成功的关键。在科学技术日益突飞猛进的今天,用户体验与创新设计不仅是国际IT界、设计界和商业界最活跃的热点,甚至成为企业成败的决定因素。随着科技进步和社会发展,人们对产品的需求由满足可用的时代提升到更加重视主观感受和体验。用户在使用产品、服务、系统的前期期望、使用过程中,...

    2018-04-06
  • Axure RP入门第五篇——全局变量实现不同窗口加载

    产品经理入门:Axure RP入门第五篇——全局变量实现不同窗口加载

    2018-03-04
  • 不好意思,简历有了它,你就领跑于820万毕业生

    又临近一年毕业季找工作成为了应届生们的头等大事但今年的就业形势依旧不容乐观来自教育部的数据2018年全国高校毕业生预计上升至820万人再创近10年毕业生人数新高▲教育部官网截图▲中商产业研究院数据显示:2010-2017年的毕业生人数按照2%-5%的同比增长率逐年增长,近7年间累计毕业生人数达到5706万人。年年都是“史上zui难就业季”并且每年的毕业生人数始终呈增长态势800多万的应届毕业生让“你竟是一个大学生”变成“你只是一个大学生...

    2018-03-27
  • 用户体验设计过程方法论的演变

    “用户体验设计”这一概念,是由唐纳德·诺曼(Donald A. Norman)创造出来的。我之所以会发明这个术语,是因为我认为人机界面和可用性太窄了。我想涵盖人们体验系统的所有方面,包括工业设计图形,界面,物理交互和手册。从那个时候开始,这个术语开始广泛传播,以至于它失去了意义。——唐纳德·诺曼但到了 2016 年,唐纳德·诺曼开始对这一术语的滥用大肆批判,他在这段简短的YouTube视频中谈到了这一点。这些天,他说他是一个人民设计师(...

    2018-04-06
  • 《用户体验可视化指南》视频讲书(3)

    《用户体验可视化指南》书中第一章的第二部分。客户旅程是一条线路,用户地图是多条线路的集中展示,专注于服务蓝图的交互可视线之上的部分。心智模型本质是聚类,空间地图用于更复杂的系统去表达信息流和内容之间的关系。点击视频观看(大约10分钟)兰静同学听后分享这节视频有3个内容,其中有个非常重要的内容,解决了我也疑虑已久的问题:客户旅程图和体验地图,到底有什么区别?视频中详细的说明了二者的区别:一条线和多条线。客户旅程图强调了用户是怎么一步一步做...

    2018-04-01
  • UED专访 | 魏娜:设计由情感而生

    📌 编辑 | Belinda.L《漂亮的房子》播至第三阶段,福鼎站的房子即将展现在观众面前,UED采访了“小溪家”的建筑师魏娜,探寻项目背后的情感设计。魏  娜WEI 建筑设计创始合伙人、主创建筑师魏娜于2013年发布过一条微博,感谢UED杂志的建筑师赠刊上精心的小细节。而她与UED的缘分其实从更早之前就已开始了。UED杂志特别赠刊烫印有建筑师姓名 ©魏娜“从2009年我们事务所刚刚成立的时候,UED就开始给予我们很大的支持,在这近9年...

    2018-02-02
  • Axure8.0展开收起

    设置菜单展开收起效果,且联动箭头朝上朝下动效。收起状态:箭头朝下,内容收起。展开状态:箭头朝上,内容展开。【步骤】1)设置展开内容与箭头为两个动态面板,命名2)点击事件设在点击菜单栏,同一个事件下控制两个面板状态。内容面板:箭头面板:设置旋转效果。点击菜单栏:点击运行即可。

    2018-03-15
  • 用户体验设计师是做什么的

    用户体验设计师的责任UX设计师如何每天工作?这个问题的答案,正如许多问题一样,是:这要看情况而定。用户体验设计师的职责从公司到公司,甚至同一公司不同项目各不相同。尽管角色各不相同,但有一些职能是期望用户体验设计师去做的,这与他们所工作的公司无关。下面为总结的用户体验设计师的6个主要职责:1.产品研究产品研究(包括用户和市场研究)是每个用户体验设计师的用户体验设计项目的出发点。它为伟大的设计提供了基础,因为它允许设计师避免假设和做出信息驱...

    2018-03-03
  • 涨姿势 | 这份交互设计纲领,已被我内定!

    最近一个月的电影市场完全被《头号玩家》支配,身边清一色的“自来水”,那票房蹭蹭涨,眼瞅着都十好几亿了!所以斯芬克趁此良机跟大家说说交互这门自带特效的技术!往期内容一览:服装设计出国学?看这一篇就够了!(点击此处查看详情)学平面设计前,给你一份须知!(点击此处查看详情)怎样做准备,才能当上室内设计玩家?(点击此处查看详情)交互设计适合你吗?我们往往会觉得,交互设计不就是做个网站、搞个APP么,最多再玩玩特效啥的……其实咧,交互可不仅仅存在...

    2018-04-27
  • 《王者荣耀》的操作交互设计研究

    《王者荣耀》是国内最成功的手机版MOBA类型游戏。MOBA从PC的辉煌延续到了手游,当时很多人唱衰手机上的MOBA,主要还是操作上的问题,手机上无法实现鼠标的快速精确定位。为了优化手机版MOBA,大家进行了各种尝试,有触摸点击型(虚荣),有双摇杆型、单摇杆型,最终单摇杆+技能副摇杆结合的《王者荣耀》一统江湖,现在很少有人说王者手感不好的,它的很多设定都成了现在MOBA游戏的标杆。这里,我们就一步步地分解看看,王者的操作手感是如何设计的。...

    2018-02-26