优秀的移动端UI,应当如何用微交互打磨细节?

你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘的产品,靠的是这一个个精致到位的细节堆出来的。


你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘的产品,靠的是这一个个精致到位的细节堆出来的。

优秀的移动端UI,应当如何用微交互打磨细节?

著名魔术师 Dariel Fitzkee 曾经说过:“魔术是表演和细节的艺术。”而交互设计同样是如此。设计师大多能够很好的控制设计的大方向,但是细节处理不当的话,会让优秀的设计方案功亏一篑,要不怎么说“细节当中藏有魔鬼”呢?也正是因此,那些精心设计的微交互会让用户体验显得精巧而到位。

想要了解微交互到底对你的设计有什么好处,那么你最好将你的设计思路勾勒出来。当你有了工具,也有了想法,接下来我们开始进入正题,一起来看看有哪些值得注意的微交互细节设计。

呈现系统状态

对于UI的状态设计,Jakob Nielsen 曾经说过,“系统应当始终通过合理的反馈告知用户当前正在发生的事情,所处的状态。”这也就意味着界面需要通过反馈让用户明白发生了什么,而无需用户猜测。而带有动效的微交互正是以提供视觉反馈而闻名。

想要展现创意十足的微交互动效,数据的上传和下载过程都是不错的选择。

优秀的移动端UI,应当如何用微交互打磨细节?

另外一个经典的案例就是下来刷新,这是目前移动端UI中内容更新最常见的交互手段,一个畅快的下拉刷新微交互动效能够让用户欲罢不能。

优秀的移动端UI,应当如何用微交互打磨细节?

让按钮和控件容易被感知

即使隔着手机的玻璃屏幕,界面上的按钮和控件也应当是易于被感知,让人觉得它们是真实有形的。运动轨迹和视觉线索能够以即时反馈的形式,弥合这种现实和虚拟图像之间的界限,让人看起来、感觉上都是在直接操作。UI界面中的按钮能够模仿现实中的按钮反馈来强化交互,简单的说来,就是让用户输入和操作的视觉反馈更加明显一些。

优秀的移动端UI,应当如何用微交互打磨细节?

视觉反馈之所以有用,是因为它符合用户对于交互的期望,当用户针对某个控件进行了操作,而它们给予了对应的反馈,这种感觉是非常良好的。

构建有意义的过渡

动效一个很重要的功能,是展现状态和内容的转变与过渡,用来解释屏幕上各种元素的排布和层次。

优秀的移动端UI,应当如何用微交互打磨细节?

图标可能会从一个形状变为另外一个形状,在不同的时间以不同的功能呈现,而这种过渡和转变就是靠动效来表现的。

动效设计的优势不仅仅是单纯的引导,它让转变和过渡的等待过程变得更加有趣,愉悦用户。在移动端设备上,过渡动效显得尤为重要,它使得大量的信息呈现不再那么单调。这种情况在Apple Watch 上表现的尤为明显。

优秀的移动端UI,应当如何用微交互打磨细节?

Apple iOS系统的UI设计中就很好的利用了这些有意义的过渡动效。下面的案例中,用户点击文件夹或者APP,图标当大扩展到整个屏幕,展现出细节和详情。

优秀的移动端UI,应当如何用微交互打磨细节?

另外一个案例则来自Material Design,过渡动效不仅呈现出控件和不同界面之间的关系,还通过色彩点名两者的关系,并且展现出了状态的改变。这样的过渡过程是流畅、轻松且高效的。

帮助用户快速入门

动效和微交互在用户快速入门的时候是非常有用的。当用户初次使用应用的时候,流畅的用户体验和贴心而不繁复的引导对于用户的初次使用和交互有着直接的影响。设计师将最关键、最重要的信息通过引导告知用户,同时还要控制好整个引导流程足够简明而舒适。

优秀的移动端UI,应当如何用微交互打磨细节?

这个过程中,动效和微交互让信息展现更加顺畅,帮助用户更加高效地抵达目标。

凸显UI中的变化

微交互能够直接吸引用户的注意力。在绝大多数情况下,设计师通过动效化的微交互将用的注意力吸引到某个重要的细节上去(比如通知推送)。不过,在这个过程中,要确保动效是功能性的,并且对于用户而言是合理而能接受的。

优秀的移动端UI,应当如何用微交互打磨细节?

增加令人愉悦的细节

动效在APP中的主要是以过渡的形式呈现,而那些真正让用户感到愉悦的动效大多是非标准和非常规的,它们的不同和令人意外的体验是取悦用户的关键。下面的案例中,触发按钮之后,动效提供了两重功能:告知用户按钮已经触发,然后见证一段有趣的动画。

优秀的移动端UI,应当如何用微交互打磨细节?

虽然有人认为这样的动画有炫技之嫌,但是最重要的是照顾到用户的情绪和体验,能够调动用户的情绪,这个动效在整个UI交互中就称职了。

设计微动效中值得思考的问题

当你按照上面提及的思路来设计微交互的时候,有几个问题需要注意:

  • 微交互几乎不可见,但是又是功能性的。确保你所设计的动效和功能、目标是保持一致的,不会让用户感到尴尬或者烦躁。对于频繁的小幅度的操作,尽量让反馈和响应快速而适度,对于较大的变化则应当让动效明显而充实。
  • 有长期的构思。微交互是需要长期、持续使用的,有些看起来好玩的尝试可能会在持续使用过程中让人觉得不舒服。
  • 过度的设计可能会让你的微交互成为致命的缺陷。微交互的加载过程不能耗时过长,不要占据过多的系统资源,展现过程也不要太花费时间。相反,它应当呈现有价值的内容,并且尽量节省时间,降低用户等待的时长。
  • 不要从零开始。对于你的目标用户和受众多少还是有一些了解的,利用好这些信息和知识,确保你的微交互是精准而有效的。

使用其他的UI元素构建视觉层次。微交互应当与整体界面风格保持一致。

结语

细致的细节设计能够让整个产品更有生命力。正如同Charles Eames 曾经所说,“细节并不只是细节,它是构建起整个设计的基本元素。”你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘的产品,靠的是这一个个精致到位的细节堆出来的。真正优秀的设计,从功能到元素,从交互到过渡,都是可靠的。

 

原文地址:Smashingmagazine

原文作者:Nick Babich

译者:@陈子木

译文地址:http://www.uisdc.com/animated-microinteractions-in-mobile-apps

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27914/

(0)
CatherineCatherine
上一篇 2017-05-19 17:16
下一篇 2017-05-19

相关推荐

  • 如何设计好用的触控手势

    我们生活在一个人机互动频繁,由设备驱动的世界中。 随着触摸屏逐渐成为移动设备的标配,多点触控手势的广泛应用,让我们与手机、平板电脑甚至是笔记本电脑之间建立起了一种更宽广的联系方式。我们通过模拟真实世界…

    2016-05-30
  • 从智能手机说起,看设计风格演变的趋势

    长期以来,大多数人对 UI设计趋势的理解,都是扁平化。可这容易引来两种误解:一群人理解扁平化,是一股潮流,这潮流就像流行时尚一样,会不断更替,原来的拟物风会重出江湖;另一群人,认为扁平化就是平,对设计的理解局限在表达手法上。

    2017-05-17
  • 符合用户直觉的设计,才能更快地获得用户信任

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。

    2017-05-15
  • 和华为交互设计师一起聊聊“如何让别人认可你的设计”

    当你的设计被人否定的时,相信大多数人都会感觉很憋屈。什么鬼?辛苦完成的工作,又要重新改过。这感觉就像自己的价值被否认,没存在感。马斯洛需求层次最高层是自我实现的需要,相信如果长期处于这么一个状态,久而久之可能会迷失自我,失去对设计的敏锐嗅觉,不敢贸然做出决策。甚至慢慢变得上级要求你什么,就做什么,毫无想法,沦为设计的“工具”。

    2017-06-05
  • 设计干货|聊聊设计师玩转Sketch的那些事儿

    点击蓝字关注GOMEOS用户体验设计1调整组内图层父级变换属性新的调整大小选项可以帮助我们更灵活地调整对象与子层之间的响应:1. 默认属性下的成组放大缩小变化,内部的图标跟随组的缩放比例进行变化.2. 锁定图标的固定宽度&固定高度,成组的缩放比例不会影响到图标的比例与尺寸.3. 当锁定上部及右部间距时,成组缩放比例时,图标距离组内上部及右部的距离保持不变.2嵌套样式这个十分强大的功能使得symbols的复用更加的强大,可以同一内容复用多...

    2018-04-04
  • 交互设计五要素

    在交互设计中,我们要了解这一过程的流程是什么?总体可以分为五个要素:目的、用户、场景、媒介、行为。1、目的:首先要弄清楚,这个产品或功能的目的是什么?目的是为了解决用户的某个需求或者给公司带来价值,这…

  • 应届毕业生要从事交互设计,需要具备的3种能力

    这次的文章解决的是一个问题,主要是关于应届毕业生应该具备怎么样的能力才能从事交互设计工作。我从比较浅的入口切入,然后简单谈谈我的认识。(这篇文章会比较有趣)我努力工作,几年后要自己创业。吃得苦中苦,方为人上人。(鸡汤了一下)

    2017-05-08
  • 用交互设计思维分析iOS10新特性

    #交互设计# #iOS10#:本文用交互设计的思维对iOS10的新特性进行分析。撇开平时我们考虑的界面排布,页面元素等问题不谈,将视角转移到屏幕外的东西:如时间维度的,空间维度的,手势操作等等,以提升我们的用户体验…

    2016-10-26
  • Axure RP 8.0软件安装教程及下载地址

    破解文件下载地址在文末,请查看!1.双击AxureRP-Setup.exe安装文件。2.点击Next。3.勾选I Agree,然后点击Next。4.一般是默认安装路径。5.点击Next。6.点击Next。7.等待安装。8.取消勾选!取消勾选!Run Axure RP 8使其处于未选中状态,然后点击Finish。9.在桌面找到Axure RP 8,鼠标右击选择打开。10.点击确定。11.勾选Don’t  show this at star...

    2018-03-27
  • 便宜的指纹锁也会有“便宜”的用户体验

    欢迎关注:CDTV-1周一至周五晚7:30—7:40全国首创电视融商节目《天天橙掌柜》。很多指纹锁在你跟老板杀完价的那一刻是开心的用的时候并不是那么开心的例如说:外观掉漆脱落了把手松动了指纹录不进或不好打开了说好的密码备用关键时刻掉链子了配的机械钥匙太low了电池没过多久就没电了指纹锁没用多久就得找师傅上门维修了等等等等,烦心吗?趁着特价,换吧智能门锁吧超B级锁芯多种开门方式让你的生活更省心省力橙掌柜家庭安全节德施曼小嘀S8云智能门锁只...

    2018-03-09