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

相关推荐

  • 腾讯高级交互设计师:什么是优秀的设计思维与方法?

    在年轻设计师里普遍存在工作方式和思维方式问题。 编者按:本文系腾讯高级交互设计师秦银(微信公众号“G思维”,ID:DesignG),在Boss直聘主办的直聘学院「对话UI&UX设计」活动上的分享整理,介绍如何把握设计…

    2017-07-28
  • 4个关键词总结,如何把用户体验做到极致?

    作者:@烧包鹿全文共 4530 字 6 图,阅读需要 10 分钟———— / BEGIN / ————上周五约了朋友吃晚饭,提前约的顺风车。由于堵车,司机到了办公区的北门。经过沟通,我从定位地点过去找他。四扇车窗都是开的,他坐在驾驶位,烟刚抽了三分之二,后视镜旁还有未散尽的烟雾。他回头看见了我,我朝他微笑示意。确认了眼神,我是他的乘客。他马上把烟灭了,左手在空中挥了挥,右手向左转了一下空调按钮,抬起头在空中胡乱吹了几口气。隔着车窗看见副...

    2018-04-30
  • 一种强大的交互模式:应用内的手势

    手势是一种强大的交互模式吗?是的,移动设备已经从一块砖头发展成由手指驱动的复杂计算机了。触摸和手势交互具有很大的潜力,使得移动体验更加的轻松和有趣。

    2017-05-09
  • 用户体验设计中最常见的误解

    UX Myths网站收集了很多关于用户体验设计中最常见的误解和解释了为什么他们不适用。现在将这些经验研究整理出来,为各位设计从业者做参考,避免依赖个人的主观经验来做判断。建议你阅读完之后,还是应该结合自身的经验来审视你的设计是否满足用户的需求。

    2017-05-25
  • 【IXD案例】国际第一时尚品牌VOGUE-iPhone端案例高保真原型-抽屉效果案例

    本次分享给大家展现依然是高保真效果的原型,上一次展现的是iPad版本的,这次是iPhone端版本的原型,和上次一样,我们依然以国际第一时尚品牌VOGUE为例:iPhone端的效果比iPad更复杂,难度更高,我们要做的是抽屉效…

    2016-02-26
  • 简单快速的可用性测试

    2014年11月11日   艾欧交互设计-用户体验 导语:可用性测试是改善产品的最佳方式之一,这一点,在内部已经是不争的共识。只是由于用研人手总是不足,所以为了能让各个部门的同事能更快速地展开一些研究和测试的工作…

    2014-11-11
  • 用户体验是家电实体店独享红利

    不可盲目自信,也不能过度自卑。对于众多的家电实体店来说,满足用户的体验、持续带来新的用户体验,是应对一切外来不利因素挑战和冲击的最大筹码,也是生存的底线。蔓欣||撰稿现在,主题乐园正成为现在人们选择度假的方式,在春节旅游大报告中,上海迪士尼赫然位于“最热门景点”第四,而其他像常州中华恐龙园、顺德长鹿农庄、上海长风海洋世界、武汉欢乐谷等也是今年春节期间最热门的主题公园。尽管,现在基本上所有的购物、娱乐和消费,都可以在线上解决。但是,更多的...

    2018-03-09
  • 交互设计的实质是行为塑造

    交互性是信息化和互联网时代工业设计的发展趋势之一,也是用户体验研究的重要范畴。交互作为一种行为动作的研究,旨在把握人体工程学和逻辑思维学的多方位系统工程的发展趋势,以实现用户对操作行为的完美体验的设…

    2016-05-24
  • 阿里设计师:如何做好一场设计提案的Presentation

      作者:鸿影(阿里巴巴,设计师)   在过去很长一段时间,怎么清晰透彻地把自己的设计思路与方案讲述出来,一直是一个比较困扰我的问题(刚开始实习时甚至连做设计方案Review都经常结结巴巴),直到最近几次工作中…

    交互专题 2017-08-07
  • 3000字,详细梳理用户体验要素之核心五要素

    网站看起来如何,它怎样进行运转,它让你执行什么。这些决策都是互相依赖的,它告知并影响用户体验的各个方面。当产品发展到一定阶段,系统化的用户体验设计对于产品在激烈的商业竞争中保持核心竞争力至关重要。比如最近很火的共享单车,开锁是否方便这样一个小细节直接决定着用户选择,用户体验就成为了商机。这里与大家分享用户体验要素的核心五要素。要讨论的事今天跟大家分享的是用户体验的五个核心要素。虽然用户体验要素远不止这五个,但作为梳理一个产品的用户体验开...

    2018-03-20