优秀的移动端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

相关推荐

  • 今天的互联网设计师很有“钱途”,如何才能更好地理清自己的发展方向?

    哪种设计师价值更高?如何才能更好地理清自己的发展方向?本文将对交互设计师(或者称UI设计师)发展的三部曲——器、势、人分别进行讲述。全是干货分享,好好吸收吧,因为这三部曲基本会贯穿你的职业生涯。我要不要学XX软件啊?软件要不要报班啊?一个四十岁的土老板,每天最多的事就是接打电话。老板每天可能会打几百个电话,这个频率是你们想象不到的,他可能随时随地都在打电话,而很少用微信、QQ。传统手机接打电话非常方便,按下按钮或翻盖闭眼都能接电话,用智能机反而不方便,所以他希望自己用的还是传统手机。但是传统手机太低端了,老板担心同行和下属嘲笑他,就很纠结——于是我们的手机就诞生了。任何项目第一保证的都是效率。

    2017-05-17
  • Fitbit:一份用户体验案例研究

    当谈论到锻炼时,这个世界上有三类人:每时每刻都在健身的健康达人;那些一天中全部锻炼内容就是从前门走到车里,每天在沙发看电视的人们;在这两者之间,想变的健康强壮但缺少一些动力去健身房的人(又称在屁股上踢一脚才行动的人)。 我,和我知道的大多数人一样,都是第三种类型的人。我们被称为是

    微信热点 2018-03-31
  • 免费 20个设计优秀的HTML网站模板

    在这个互联网时代,很多企业或是个人都搭建有自己的网站,用于宣传营销或个人网站博客等用途。而对于小企业、个人或不懂设计网站的用户来说使用网站模板将是最好的建站方式,设计达人网致力分享高品质免费素材,所…

    2015-03-17
  • 交互设计师之学习需求分析总结

    交互设计师在产品开发的过程中扮演者什么样的角色?需要做什么具体的工作?这是我之前接触到交互设计时的疑问,我想只有清楚了交互设计师的工作流程,才能对交互设计师的职责有一个深入的理解,下面根据自己所涉猎…

    交互设计 2015-08-12
  • 交互设计师,如何建立自己的知识体系?

    高中毕业,我们完成了基础知识的学习。后续要掌握新技能或新知识,主要途径便是自学。每个人自学能力千差万别,这决定了一个人的成长与发展的天花板。

    2017-05-16
  • 算法驱动设计趋势已来,产品设计如何与算法进行创新合作?

    译者:舒舟,阿里巴巴/1688事业部/无线交互   过去的一年,BBC UED团队(原1688UED团队)花费了巨大的资源和精力投入阿里巴巴集团中台DPL(Design Pattern Library)项目,旨在通过设计模式的提炼及抽象,由规则和…

    交互专题 2017-08-07
  • 重温《别让我思考》,这本书到底告诉了我什么【UXRen译#141】

      作者:Nick Kellingley(交互设计基金会社区经理)| 译者:天蛙,审校:xing   《Don’t Make Me Think》是人机交互和易用性工程师Steve Krug写的一本书的书名(中文版本的书名是《点石成金》)。这本书教用户体验…

    交互专题 2017-08-07
  • 超出预期的才叫用户体验

    什么是用户体验?我认为,用户体验其实就是一种心理感觉。拿最简单的吃饭这件事来打一个比方。我在饭店,吃饭付账,这个过程叫作体验吗?肯定谈不上。用户体验,肯定是特殊的,肯定是不正常的,肯定是在你的预期之外的。超出预期才形成用户体验如果做跟别人一样的东西,那这些功能并不叫体验。很多人在抄袭别人产品的时候,经常说某某公司做了什么功能,老板说照着做一个,但是你想没想过,如果做得跟别人一样,是没有机会的。当年我们做的是免费杀毒。当时所有其他品牌的杀...

    2018-04-08
  • 关于2017年的设计趋势,国外已经有了这13个预言

    在未来,当对微小细节的关注渗入用户体验设计的每一寸土壤;当对像素级完美的追求成为设计的基本要求;当将简单便捷的设计理念融入用户的日常生活,那么我们就能够帮助用户体验全新的生活。“庆祝成功自然无可厚非,但学习并反思失败更加重要。” ——比尔·盖茨“他们是种异常必要的无谓存在,他们因为需要被呵护而带给人恰到好处的慰藉。”“差劲的设计团队提供用户要求的UX。伟大的设计团队提供用户需要的UX。”“对于一个优秀的UX设计师来说,他/她最大的责任就是使用户在使用产品 的时候能产生信任感。”“一件好产品就如一部伟大的电影。”“我们逐渐发现这些智能小助手(AI)之间的合作能力可能并没有想象中那么强大。”“Material Design将会目睹它所倚仗的‘笔’与‘纸’之间的枪战——它会发现它的立身之本在面对未来强大多元的互联网时不堪一击。”——Chase Buckley(独立UX设计师)“与真实的纸不同的是,我们的数字材料可以随意伸缩与变形。纸质材料有物理表面与边界。是那些缝隙与阴影告诉你这一切,赋予了你能触碰到的东西意义。”

    2017-05-18
  • 从实际案例出发,说说交互文案设计的几个原则

    想必大家都见过下图所示的著名的“交互文案”反例吧?如果文案写成这样,无论设计师在文案出现方式、时机等方面再怎么优化,这也不可能成为一个合格的设计。因为“看起来重复、读起来绕口、理解起来更是云里雾里”的文案很难让用户获得良好的阅读体验和使用体验。

    2017-05-24