在我们日常使用app中,小的交互虽然我们不是经常注意到,但它却发挥着很大的作用。从我们解锁手机到手机调静音或接收信息通知。

在大多数的设计中,一些微小的动画和反馈的小交互对提高用户体验有很大的帮助。作为产品设计师的我们也是应该多些思考:在我们平时的设计中,我们是否有意识地寻找机会用这些小的交互来让我们的用户感到惊喜和高兴呢?

什么是小交互?

小交互到底是什么?小交互通常关注于单个事件或者单个任务,这些交互元素遍布于整个 APP 的各个角落。它们目的是让用户感觉顺畅、愉悦,设计师借此创造出吸引人或者令人高兴的瞬间,或者说,让用户在这一刻感受到人性化。例如,解锁手机就是一个小交互,手机调成震动模式时会震一下也是一个小交互。

为什么称为小交互呢?所谓的其实就是指的产品的细节设计。小的交互正在成为产品设计中越来越重要的部分。

下面让我们看几个案例:

  • 案例一:

 

壹钱包商城首页导航切换,当选项超出一屏时,左滑动到一定数量,选中效果会停在最中间的位置,这样左边能看到刚浏览过的几个选项,告诉用户刚看过了什么内容,同样右边能看到几个选项告诉用户即将要看到什么内容。当要返回到第一个选项,右滑动出现第一个选项”TOP爆款时,选中效果不再停留在中间位置,这样就能告诉用户已经到头了。这个流程有一个非常清晰易懂的规则。

  • 案例二:

 

壹钱包确认订单页给商家留言,点击输入框,键盘弹起时输入框自动上移。这样用户就可以很清楚看到自己输入的内容不易出错。因为手机屏幕高度有限,假设键盘弹出前,输入框已经在屏幕靠近底部的地方了,当键盘弹出后,如果输入框不往上移动,就会被弹出的键盘遮挡,在输入内容的时候,就看不见输入框了。虽然这是很小的一个地方但是会给用户造成很大影响。

  • 案例三:

 

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

  • 案例四:

 

淘宝确认订单页,除了顶部地址栏做成信封边缘之外,还在确认按钮上方再次出现地址信息,下滑至顶部地址栏被遮挡时,底部的地址信息自动出现,以便用户下单前再次核对地址信息。

  • 案例五:

 

哔哩哔哩在登陆页面,输入账号框激活后,2233娘会偷偷看你输入账号,但是当你输入密码的时候,两个小人又会捂住眼睛不看。这样的小细节把情感化设计做到了极致。趣味性这种小交互就会给用户留下很好的印象!

  • 案例六

 

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

总结:

细节设计是这些小交互的灵魂,看似无关紧要,却总会在适当的时候出现,令人怦然心动。小交互,大设计。这些细微瞬间堆砌而成的设计,使用户界面更加人性化,增强了用户体验。

最后需要注意的是:小的交互讲究简单高效、动效流畅,在我们做设计的时候要避免过度设计成为重交互。同时我们还要结合产品性质、结构模式了解我们的用户和使用场景来设计,这样设计的交互才会更加精准有效。