APP细节打磨绝招 “微交互动画”

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

上次给同学开了个玩笑,“世界上的APP就那么几种页面”。此话包含两个意思:第一,APP设计不难,吃透了哪些页面设计起来挺容易。第二,想把APP设计得比别人好很难,因为细节打磨到最后也没有什么可做的了。今天我们分享的这篇文章就是一个很好的突破点,它从微交互的体验上去优化APP的体验,用得好一定会让你的APP脱颖而出!

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

想要了解微交互到底对你的设计有什么好处,那么你最好将你的设计思路勾勒出来。用来绘制原型和线框图的工具有很多,这里推荐使用近期比较火的Adobe Experience,也就是Adobe XD,它是专门为线框图和交互设计而生的。

关于Adobe XD,你可以从这篇文章《Experience Design CC 体验版使用详细评测》了解它的基本特色。当你有了工具,也有了想法,接下来我们开始进入正题,一起来看看有哪些值得注意的微交互细节设计。

呈现系统状态

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

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

1473319843-3919-1473059465-1482-microtwo1

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

1473319843-3219-1473059466-5089-microtwo2

让按钮和控件容易被感知

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

1473319849-3194-1473059464-5986-microtwo3

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

构建有意义的过渡

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

1473319845-3315-1473059464-7138-microtwo4

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

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

1473319848-5579-1473059465-6968-microtwo5

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

1473319846-8571-1473059465-9139-microtwo6

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

帮助用户快速入门

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

1473319850-8767-1473059466-2694-microtwo7

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

凸显UI中的变化

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

1473319856-4189-1473059466-6547-microtwo8

增加令人愉悦的细节

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

1473319856-4012-1473059466-9212-microtwo9

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

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

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

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

结语

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

原文地址:UISDC

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

(0)
iouedioued
上一篇 2016-09-08 12:21
下一篇 2016-09-08 17:08

相关推荐

  • Interaction Design - Beyond Human-Computer Interaction, 4th Edition 下载 pdf&epub

    “交互设计呈现在交互设计领域的高度需要全面的和当代的视角。第三版再次确立了书作为该领域的基本教材。“

    2016-09-08
  • 优秀的用户体验需要遵守的10种准则

    在网页设计和APP软件中,一个好的排版不仅仅要拥有漂亮的字体。更要有高度的可读性——易于浏览——同时能让用户专注它的内容。这是一个相当艰巨的任务,但是大多数设计师可以通过练习达到这种效果。今天我们将去看看优秀的用户体验需要遵守的10个 “准则”,同时你也可以学习以便帮助你设计出非常棒的设计。(每个规则都配有一个网站的例子)

    2017-05-25
  • 移动应用程序可视化流程图示例

    移动应用程序可视化流程图示例

    2016-06-20
  • 视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

    大多数的人们都熟悉色彩心理学;成百上千的文章、案例研究、甚至是从不同角度进行分析的图表。颜色对我们的影响,将影响我们决策过程中的每一个选择。这点是毫无争议的。但是,我们不应该盲目的遵循某一个原则去辨别。今天,我们就一起来测试对比度在吸引关注中的作用。

    2017-06-04
  • 还原产品的基础属性问题——用户体验

    您真正的了解用户吗?找项目的时候是不是会遇到各种各样的坑?你“以为”和“现实”中究竟有什么区别?我们会不会就是所谓的自嗨型创业者?如何解决以及避免?今天我们即将揭晓!三人行茶学空间打造和谐空间,共享茶文化平台,精准交友,合作共赢。本周日特别邀请我们的会员嘉宾进行主题分享,一起共同成长!本周分享嘉宾:刘岱伦岱伦总2008年创办第一家o2o项目——洗车。到家!2013 年曾创下淘宝细分类目自然搜索排名第一!2015年自主研发无线充电车载净化...

    2018-04-19
  • 国外的视觉设计好在哪里?

    最近为了团队能做好产品首页设计,我研究了很多国外to B类的相关产品设计。发现国外这类设计作品在整体水准上比国内高了不止一个档次(国内to B产品起步较晚,在设计方面的研究几乎空白),而这种差距和设计技法没有太多关系,更多的是对产品个性的把握和传达。

    2017-06-01
  • 译文|Facebook将推"dislike"按钮

    Facebook users will soon be able to 'dislike' posts and pictures on their feeds. Facebook用户很快就可以“dislike”订阅内容里别人发的帖子和图片了。 The social networking site's founder Mark Zuckerberg r…

    交互设计 2015-09-18
  • 交互设计相关岗位-用户研究(实习)——杭州海康威视

    杭州海康威视招聘 用户研究(实习)    职位要求: 1、人机交互、认知心理学、计算机、设计艺术或相关专业研究生在读。 2、熟悉研究方法论,熟悉一般研究步骤,了解各种研究方法,有坚实的统计和数据分析基础 3、较…

    交互设计招聘 2018-03-13
  • 门诊的用户体验,决定患者的选择

    口腔之声每晚8:00与您一起看口腔汇聚国内外口腔专家3000个视频随便您看世界华人牙医聚集地促进行业交流的价值门诊的用户体验,决定患者的选择现今的口腔医疗市场竞争,呈现出来的形态,公立医院的患者,到处挤满了人,号挂的满满的,而民营口腔医疗机构,又是大肆的营销活动,这家公益宣传,那家优惠活动,这家明星站台,那家老外看诊!的的确确呈现出同一个国家,面对两个市场的景象,当然每一个口腔医疗机构,或者说每一个家口腔,都有服务不同的患者层级。最近经...

    2018-05-06
  • Apple Watch界面设计规范之UI设计基础(1/2)

    一、为Apple Watch而设计 Apple Watch体现着如下几个方面的主题思想: 个人。Apple Watch是面向穿戴而设计的,所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digit…

    2015-03-10