【UXRen译#98】2016年移动设计趋势:神奇的微交互

micro-ixd-trends-2016-00

译者:张越;审校:李福东,来自:UXRen翻译组

 

你已经理解并创造了一个很惊艳的APP,并配套了很酷的故事、令人印象深刻的视觉设计。但仅仅如此还不够——我们还需要更多的东西,那些能真正连接用户、让体验更加生动的东西。而这,就是微交互。

micro-ixd-trends-2016-01

微交互是创造一款富有吸引力的APP的秘籍。它让用户沉浸其中、获得意外之喜,但除了设计师之外,这一切对于所有人来说又几乎是隐形的。

每一天你都会接触到上百次微交互:关掉闹钟、查看屏幕上的消息提醒、游戏提醒、在音乐播放器上切歌、甚至是早上根据警报改变交通路线。每一个这些短暂的时刻都构成了微交互。或许你并没关注它们,但却正是这些细节让你愿意持续使用APP。

 

什么是微交互?

设备中任何一项基于任务的体验都是微交互。绝大多数这些体验都难以察觉,但却让用户感到更加流畅。正如Dan Saffer在书中写的那样:微交互能够实现三大特定功能:

三大特定功能

  • 迅速传达状态或反馈。
  • 可视化操作结果。
  • 帮助用户在屏幕上操作。

micro-ixd-trends-2016-02

Slack是一款极佳的APP,如上图所示,它实现了上述所有功能。这款APP让用户能够在一个封闭的聊天环境中沟通交流、添加附件,给彼此打标签。同时,这款APP实时更新(如:标记已读),以帮助用户浏览。它还通过通知以及其他一些小动作让用户对聊天内容保持同步。

微交互在多个方面影响着用户和APP的功能:

  • 打开或关闭一个东西
  • 在任意数字媒体上发表评论
  • 更改设置或进程
  • 查看消息或通知
  • 在移动设备上下拉刷新内容
  • 与一个数据元素进行交互,如:查看天气
  • 完成孤立的任务
  • 连接设备,如多人游戏、打印电脑里的东西等
  • 在网站上点击分享或喜欢某个图片、视频。

简而言之,微交互就是用户某一行为,触发了设备其他部分的变化。每一个交互都基于以用户为中心的设计理念,其中数字化工具的原理和功能反映了用户会如何做一件事。可用性的秘诀就在于此——交互要符合预期、并与“人的方式”相吻合。

micro-ixd-trends-2016-03

上图中,我们设计了一个用来寻找时尚模特的网站。一张卡片代表一个模特,上面展示有测量指标。当鼠标悬停在人物脸部时,会浮出下载名片的提示。在这个特定的场景中,微交互让信息的展现更加流畅。动画增加了可发现性,设计响应也更贴近用户动作。

 

微交互到底是做什么的?

正如在前文所述——尽管这并不是所有的微交互形势(微交互的形式有很多种)。但简单地说,微交互应当营造参与感。当你思考如何设计微交互的时候,不要仅仅思考特定的手势或动作,而是要将其作为整个用户体验的一部分加以考虑。从本质上说,微交互应当让用户感到或是做到一些事:

  • 触摸屏幕
  • 愉快地微笑
  • 学习或理解
  • 与其它用户进行联系。

micro-ixd-trends-2016-04

上图所示的Elevate,在它的游戏式学习界面中运用了所有这些要素。用户必须触摸屏幕以回答问题、修正答案,而漂亮的动画则用来取悦用户。这款APP是让用户用来锻炼思维的(图片中的游戏是用来教会你语法和用法的)。用户可以和朋友或其他APP用户分享分数和结果。

对于一个简单的游戏来说,这些看起来太多了对吗?但这却正是用户对每一款APP的期望。正如《2015&2016年移动设计趋势》所述,这些动作是微交互的核心所在。这些细小的“数字化时刻”让用户感到一种情感上的连接。微交互或让用户有所感触,或让用户与其他的人和物发生联系。

 

微交互的四要素

Dan Saffer走在微交互的最前沿。Google搜索“微交互”时,他的名字总是出现在此类信息的关键位置。他还写了一本关于微交互的书,阐述了微交互的四个要素,这也的确是理解如何设计微交互的最佳途径。

  • 触发:启动微交互。例如:我点击心形图标标记喜欢的页面。
  • 规则:交互的实现方式。用户看不到规则,只能通过反馈(下一阶段)来理解。在这种情况下,点击心形图标,该页面就是用户接收反馈的窗口。
  • 反馈:设计如何将微交互传达给用户。心形图标会填充颜色并弹跳,伴随着“保存至收藏夹”的提示,告诉用户发生了什么。
  • 循环和模式:决定了微交互的时长以及随着时间流逝,微交互该如何重复或演化。例如:我们现在提到的微交互演化为,在我们喜欢了一个的页面后,提醒我们页面中的内容、或者在6个月后再提醒我们。

以上所述的微交互中的各个部分,共同创造了让事物得以运行的基础。正向Saffer所说的那样,除非遇到问题,否则绝大多数用户永远都不会注意到微交互。

 

你在考虑反馈吗?

反馈是微交互循环中最重要的一环。这是微交互中用户和界面发生连接的部分。反馈决定了微交互应该如何实现。

试想:你需要早上7点起床,因此在手机上设了闹钟。当闹钟响起的时候你会怎么办?起床关掉闹钟还是继续眯一会?这个简单的动作告诉APP接下来微交互该怎么实现:为下一次起床重设闹钟、还是9分钟以后再次响起。用户和系统之间的反馈闭环由此完成。

如果用户一开始没有反馈,闹铃声就永远不会停止。它没有重置。开放式循环会让它一直响下去。

micro-ixd-trends-2016-05

在待办清单上检查项目也是一样的道理,就像上图中的Wunderlist所示。通过选定一个事项旁的复选标记,你告诉APP触发在待办事项划掉项目的微交互,你知道哪些项目是已完成的,哪些还在进行中。完成一项任务的满足感激励着你完成更多的任务,因此与这款APP的交互还会继续下去。

尽管这是个非常简单的案例,但从中却有很多值得学习的地方。从根本上讲,它告诉我们:用户希望参与到明确创造出下一步(闭环)的微交互中,并且随着时间和使用的演化,它能够直观的工作。

 

微交互的核心在于设计细节

微交互的设计以及如何处理细节的方式将决定你项目的成败。交互是你无法忽视的重要设计元素。

micro-ixd-trends-2016-06

但你该如何设计?又该如何思考呢?

  • 微交互必须经得起重复使用。
    不要仅仅为了噱头或者动画而使用微交互。谨记:在长时间的使用过程中,你的微交互不能让用户感到厌烦。
  • 简洁是关键。
    直白的语言、清晰的字体、充满活力的色彩、结构化的设计,将这些基本要素运用好,不要再添加额外的细节。
  • 微交互一定要贴近用户。
    文本读起来应当像人在说话一样。任何形式的设计都应当能够传达情感。所有的页面都应与此时此地的情境相匹配。运用正确的语气,让文本读起来是有礼貌、有帮助、并尽可能是令人愉悦的。
  • 可以用动画制造一些乐趣,但要适度。
    请回忆一下新程序下载时,OSX系统中的图标是怎么弹跳的。动画让你知道程序有了回应,但却并没有增加你当前的操作步骤。不要仅仅为了视觉上的愉悦,而放弃在你的动画中尝试这种有用性。
  • 寻求和谐。
    参差对照是你的朋友,但也要小心使用。当你为用户体验的某个特定时刻进行设计的时候,色彩之类的细节比你想象的更重要。如果你的APP使用绿色的配色方案,那么确保这类色彩贯穿于你的微交互中。每一个微交互都应与整体的APP设计保持视觉上的关联性。
  • 思考微交互该如何演化。
    是一直保持不变?还是随着时间不断演化?比如你一直点击“打盹”,那么闹钟声音会变得更大。

如果你想有别于其他设计,那么这些细节是你必须要考虑的。但不要太沉溺其中,因为过度设计是微交互的致命伤。一旦你快捷愉悦地传达了信息,就立刻从中抽身,流畅地返回到正常的的任务流中去。

 

结论

微交互是创造令用户留恋的APP的关键要素。它能够营造参与感、为功能增色、让用户感到愉悦。总的来说:你需要创造那些用户看不到,但却需要或想要的细微时刻,这样你的APP才会成为他们日常生活中必不可少的一部分。

想了解更多移动设计的趋势,请查看《2015&2016移动设计趋势》。

 

 

 

 

版权所有:UXRen翻译组

译者:张越

审校:李福东

原文作者:Jerry Cao

发布日期:October 29, 2015

原文地址:http://designmodo.com/mobile-design-trends-2016/
头图来源:http://netdna.webdesignerdepot.com
————————————————————

转载带有【UXRen译】抬头的文章,请务必标明:UXRen翻译组、译者和审校者。如未标注,视为侵权,UXRen社区保留随时追责的权利。

UXRen翻译组链接地址:https://www.uxren.cn/?page_id=7869
本文地址:https://www.uxren.cn/?p=30516

除转载文章外,本站所有文章版权归UXRen社区所有,转载请注明出处:UXRen社区

 

 

8 条回复

  1. 2016-06-16

    […] UXRen翻译组链接地址:http://uxren.cn/?page_id=7869 本文地址:http://uxren.cn/?p=39881 […]

  2. 2016-06-17

    […] UXRen翻译组链接地址:http://uxren.cn/?page_id=7869 本文地址:http://uxren.cn/?p=39948 […]

  3. 2016-07-05

    […] UXRen翻译组链接地址:http://uxren.cn/?page_id=7869 本文地址:http://uxren.cn/?p=40770 […]

  4. 2016-07-05

    […] UXRen翻译组链接地址:http://uxren.cn/?page_id=7869 本文地址:http://uxren.cn/?p=32734 […]

  5. 2016-07-08

    […] UXRen翻译组链接地址:http://uxren.cn/?page_id=7869 本文地址:http://uxren.cn/?p=41196 […]

  6. 2016-07-13

    […] UXRen翻译组链接地址:http://uxren.cn/?page_id=7869 本文地址:http://uxren.cn/?p=41209 […]

  7. 2016-07-22

    […] UXRen翻译组链接地址:http://uxren.cn/?page_id=7869 本文地址:http://uxren.cn/?p=41658 […]

  8. 2016-07-26

    […] UXRen翻译组链接地址:http://uxren.cn/?page_id=7869 本文地址:http://uxren.cn/?p=41686 […]

发表评论

您的电子邮箱地址不会被公开。