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

 前言 

什么是微交互?

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

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

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

 

案例分析 

对比案例1

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

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

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

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

对比案例2

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

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

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

对比案例3

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

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

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

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

案例4

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

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

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

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

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

案例5

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

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

案例6

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

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

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

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

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

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

 

趣味性的微交互案例

案例1

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

案例2

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

案例3

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

案例4

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

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

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


最后

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

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

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

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容