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

相关推荐

  • 2014年APP分类排行

    纵观全年,在APP应用领域有四大类发展最为迅速,分别是社交、支付、导航以及美化软件。此外,打车软件则是在2014年一新兴产品,该类软件的推出填补了APP领域的一项空白,同时也是用户的一大刚需,在很短时间内就被…

    2015-01-13
  • 2017年8个UI设计流行趋势,你需要知道

    设计趋势变化的理由需要考虑各种各样的因素。让我们来一起看看2017年的设计流行趋势吧。

    2017-05-14
  • 【案例解析】设计思维方法赋能设计落地

    作者:百度UE大讲堂   一、什么是设计思维呢? 顾名思义,设计思维就是设计师用来思考问题和解决问题的方法。如何培养设计思维?今天这篇用两个实战案例帮你一窥设计思维的奥妙。 我们先来看一个小测试:以下的方案…

    交互专题 2017-08-07
  • 异常逻辑梳理与数据处理

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Dschinghis KhanDschinghis Khan - Siegerehrung作者:Glen公众号:更冷吃到老玩到老的故事冰山:异常逻辑梳理也许你用了九牛二虎之力,终于把产品的主流程梳理清楚了,但是你看到的只是产品冰山海面上的那10%,剩下的90%是海面下各种情况的异常逻辑。➀ 10%的冰山和90%的冰山任何一个产品功能逻辑,都分为主逻辑和异常逻辑。产品经理们当然要花...

    2018-04-08
  • 交互设计自查表的建立:思路与项目实例解析

    我习惯从层级的角度由高至低地排查各个交互层面可能存在的问题——首先是信息架构与流程这一最高层级,然后是界面的具体呈现,以及基于界面呈现的交互过程,最后才是以上自查中均未涵括的其他特殊情形。(1)确定当前阶段 → (2)阅读设备、数量、所属项目、请购人员、发起时间等基本信息 → (3)确定自己在本流程中的身份(因为部分场景下,当前用户的身份可能有多种可能性,需要用户再做确认)→ (4)在列表区阅读此前的流程历史,必要时可上下滑动或点击查看附件 → (5)确定当前步骤等待自己完成的是什么任务 → (6)执行该任务。

    2017-05-12
  • 不以用户体验为目标的人工智能都是耍流氓

    上周末,老刘在家整理了一下旧物,忽然发现了这个。估计现在很多人都会觉得这简直是土到爆了,但在当年那可是先进到不行。听歌、拍照、玩游戏、上QQ,绝对是功能最强大的手机,每当老刘拿出来,那内心简直不要太骄傲。曾经把诺基亚这款手机当成宝贝的老刘,绝对没有想到,短短几年后,那些曾值得炫耀的功能,会变得不值一提。看看现在的手机,拍照都是自带PS的,玩游戏都是屏幕上直接操作的,买东西手机是可以直接付钱的,出门迷路了是可以直接导航的。老刘不禁感叹,科...

    2018-02-01
  • 交互设计中的视觉基础-格式塔理论

    爱UI小课堂今天从交互设计开始Interaction design交互设计师是一个理性与感性相结合的职业,既要有严谨的逻辑思维能力还要有良好的审美能力,所要具备的知识涉及方方面面,格式塔理论作为视觉设计的基础知识也是交互设计师必备知识之一。20世纪初奥地利及德国心理学家创立了一套视觉感知的格式塔理论,格式塔理论是我们在心不在焉与没有引入反思的现象学状态时的知觉的最终结果,强调经验和行为的整体性。这个理论为用户界面设计准则提供了相关的基础...

    2018-04-26
  • 交互设计基础 | 聊聊移动APP中反馈提示的设计方法与实例

    给用户及时、恰当的反馈,是交互设计非常重要的一项原则。由搜狐新闻客户端团队撰写的《设计之下》一书中,对操作反馈从形式、内容、位置几个方面做了非常详细的总结,满满干货。今天@青溪Joanna 这篇读书笔记提取了书中的要点并配上实例,分享给大家。

    2017-05-31
  • 成也排版败也排版:一个选择的过程

    作为设计师有一个重要的技能:如何选择文字。这是因为文字是设计师和客户沟通的主要方式之一。那么排版就是决定你设计好坏的重要因素。GoldenRatio (1:1.618)
    1.000x 1.618 = 1.618
    1.618x 1.618 = 2.618
    2.618x 1.618 = 4.236
    4.236x 1.618 = 6.854
    6.854x 1.618 = 11.089GoldenRatio (1:1.618)

    11.089x 1.618 = 17.942
    17.942x 1.618 = 29.03
    29.030x 1.618 = 46.971
    46.971x 1.618 = 75.999
    75.999x 1.618 = 122.966MinorSecond 15:16
    MajorSecond 8:9
    MinorThird 5:6
    Major Third 4:5
    …PerfectFourth (3:4)

    9.969x 1.333 = 13.288
    13.288x 1.333 = 17.713
    17.713x 1.333 = 23.612
    23.612x 1.333 = 31.475
    31.475x 1.333 = 41.956
    41.956x 1.333 = 55.927FontSizes
    Header1: 55px
    Header2: 42px
    Header3: 31px
    Header4: 24px
    Header5: 14px
    Body:17px
    Caption:14px

    2017-05-01
  • 抖音|如何提升广告的用户体验

    最近发现越来越多的人开始分析抖音这款产品。小编接触抖音时间也蛮久了,到现在成为年轻人的标配。今天小编就来跟你唠唠抖音那些事儿。douyin抖音·  正·  文·  来·  啦·从产品的冷启动,到现在的野蛮成长期,抖音这款产品变化不得不说变化很大,当时的抖音很纯净,并没有什么广告,当然这也是符合产品生命周期的特性。以前的抖音技术流占据了大部分江山,如今的抖音变成了生活小百科,网红商品的发源地,产品内容标准也在随着产品所处的阶段在变化。如今...

    2018-05-05