August 22, 2017

微交互—数字时代构建极致的用户体验设计

伴随着消费升级新时代的到来,用户体验同样进入升级时代,对于数字化产品的用户体验设计提出更高的要求,而“微交互”就是当前的极佳解决方案。“微交互”特指产品中那些功能性的细节,细节是本质,是评价质量的标准,专注于微交互是创建用户体验的必经之路。
 
数字化产品及平台的设计发展到现在,各类设计规范已经明确,各种设计风格的也比较统一,产品设计同质化现象严重,同一类的产品往往大致结构都是相同的,用户也变的难以选择。同时各种功能的开源代码都比较丰富,功能的实现逐步变为现实,功能的堆砌也能组成一款产品。在这样的环境下,“微交互”的价值显得格外明显。
 
例如:一些个人中心页面的设计
 
 
微交互不是功能,但在功能都能得到满足的时候,“微交互”设计将成为产品的核心竞争力之一。如果产品的结构或功能类似,往往通过产品的体验来扩大宣传或提升产品的品牌忠诚度,而产品的整体体验来自于各种微交互的组成。可以说,微交互就是产品感官中的“感”,就是所谓的用起来,好的微交互组成的产品让用户使用起来轻松爽快。
 
微交互的结构:
 
 
微交互的设计理念
 
首先,想在已经完善功能的产品中融入微交互设计有三种方式
 
一、逐步分析式
 
逐步分析式是一种很考验人细心与耐心的分析方式,具体的做法就是,通过产品的信息结构图,用户流程图等逐步找到用户与软件交流的点。尽可能多地统计这些点,针对这一个个触点进行分析,这里我建议绘制用户流程图的时候采用五线图方法,分析起来会比较明了一些。按照相应地结构周密考虑,让每个交互细节都自然舒畅,甚至是让用户感觉到惊喜。
 
这里要提到一个词,创造“标志性时刻”,即设计成为同类产品差异化标志的微交互,它甚至会被像功能一样宣传,提高产品品牌形象和用户忠诚度,比如B站APP登录页面输入密码时上面的2233娘会闭上眼睛,这种设计,对用户流程,消费,注册率等等都没什么明显帮助,但会让人觉得惊喜并留下深刻印象,甚至有人会将这个有趣的交互分享到社交圈。
 
二、功能抽取式
 
功能抽取式是一种简单暴力的方式,它充分体现了只让用户做一件事的设计原则。“如果你觉得产品应该增加一个功能,那么你应该把这个功能再做成一个产品。”
 
这是一种把产品简化到极致,最小化产品,简化到根本的微交互。可能很多人觉得并不适用,很多产品的设计往往大而全,在往垂直领域发展时显得产品臃肿不堪,且并不能覆盖对应垂直领域的方方面面。比如从美团中分离出来的猫眼,从最早的一个定电影票的功能延伸发展,覆盖了电影相关的方方面面,反观美团中现在的电影订票功能就能得知其中好处。
 
三、网状关系式
 
网状关系式不仅仅是一种方法,它还是一种设计理念,将产品视为微交互的组合,所有的微交互共同组合成了产品。这种方式需要较强的细节与整理把控,需要把所有的细节融合成整体看待,也需要把整理细分成无数细节,其中很有可能会陷入无限细节中。把每个功能当作一组相互联系的微交互,它在你面前,就像一张网,通过你的这张网的控制,让用户在其中得到流畅的体验。
 
细节是设计的含义,一切都是细节,一切都是微交互。


下面分享一些在APP界面设计中常用的动态&交互效果设计技巧:
 
1. APP设计动态效果的外在美
 
一段动态效果首先需要是生动且有趣的,不仅要有好看的外观还要有流畅的体验。要做到这点,需要赋予动态效果以生命力,具体有如下几种方法:
 
1.1 模拟惯性
 
现实中物体的运动是有惯性的,比如公交车突然刹车时乘客会突然往前一倒。仔细观察下面3段动态效果,图像在变化(放大、缩小和翻转)的末端都会“超出”一点再立即“反弹”回来,如此的处理方法使得整个动态效果充满活力,显得生动有趣。
 

 
1.2 模拟重力
 
与惯性一样,重力也是现实中存在的现象,所有物体在无向上的支持力的情况下都会下坠,比如倾倒垃圾。一般APP删除卡片的动态效果就是横向滑动直至消失,但是下面这段动态效果却加入了重力效应。即卡片在横向滑动的同时也在翻转并下坠,就像现实中往垃圾桶中倾倒垃圾一样。在使得整个动态效果生动有趣的同时也便于用户理解操作含义。
 

 
1.3 均匀变速
 
一个优秀的APP动态效果设计肯定不会是匀速运动的,匀速运动的物体显得生硬和死板,就像机器人一样。要想让一个图像运动的有活力,就需要对其运动的速度进行“设计”。仔细观察下图所示动态效果,虽然界面中不同元素的运动速度不尽相同,但其运动均遵循一定的原则,其中之一就是均匀变速,切记“急起”。就是说界面元素在运动时的初始速度要为零,以匀加速开始运动,而在运动结束阶段往往是可以急停的。
 

 
1.4 碎片化运动
 
使一款应用变得个性十足的一个好方法就是给它加上炫酷的动态效果,而使一个APP动态效果设计炫酷的常用方法就是碎片化运动。简单说就是把界面中的图像拆解成一个个碎片,然后让它们进行不同步的运动,利用时间间隔和变速产生炫酷的效果。就如下面一则动态效果,图像中的不同元素有节奏的呈现,利用时间差来制造效果。
 

 
2. app动态效果的内在美
 
真正优秀的动态效果不是只有漂亮外表的花瓶,还得具备优化交互和提升体验的作用。下面总结了3个动态效果的“内在美”,分别为引导、简化和增强反馈。
 
2.1 引导
 
APP图形界面本是难懂且抽象的,增强引导是降低软件操作难度和提升用户体验的好方法。
 
2.1.1 动态聚焦
 
通过动态化的处理引导用户聚焦界面的关键部位,以使体验更加的流畅。青蛙能够快速捕捉移动中的物体,人眼也具有相似特征,运动中的物体总能引起下意识的关注。如下图所示动态效果,屏幕上方的数字不是直接显示一个数值,而是从零迅速递增到该数值,特意表现一个动态的效果,目的就是为了吸引用户的目光,起到聚焦的作用。国内的支付宝钱包APP也利用了此类特效。
 

 
2.1.2 示意过渡
 
过渡动态效果就是给界面的变化加上流畅的过渡,目的是引导用户理解到底发生了什么,而不会使其不知所措。如下图所示动态效果,添加卡片的过程进行了生动的模拟,让用户很轻易地理解发生了什么。试想一下,如果该页面没有滑动态效果果,而是直接生硬的跳转,是不是差劲很多?
 
2.1.3 空间转场
 
转场动态效果是被设计师所普遍重视的一种特效,它的作用也是引导用户,让用户更好地理解页面跳转,知道自己身在何方。下图所示一则动态效果就是一个漂亮的转场动态效果,为了避免两个页面之间的跳转过于生硬,利用动态效果填补上了页面跳转的中间过程,使得体验更加流畅和自然。
 

 
2.2 简化
 
有时优秀的设计就是出色的简化。简化界面信息和交互层级可以降低操作难度和提升用户体验。
 
2.2.1 隐藏二级操作项
 
利用动态效果可以使界面中的部分信息隐藏,当进行某些操作后隐藏的内容会动态展开,从而达到简化初始界面的目的,使界面简洁大气。
 

 
2.2.2 按钮动态效果化
 
使按钮动态效果化能够让界面重要信息动态浮现在同一按钮上,使得用户的目光紧紧盯着按钮,弱化了页面跳转带来的干扰,使体验更加流畅。
 

 
2.3 增强反馈
 
软件的反馈对于体验的提高来讲至关重要,增强反馈可以起到更好的提示作用,使体验过程更加轻松和愉悦。抖动是增强反馈的方法之一,用动态效果反馈替代图形文字的静态提示,更加自然和引人注目。下图所示动态效果出自苹果的Pages软件,当进入编辑态后待编辑对象进入不断的抖动状态,起到很好的引导作用。
 

 
3. 总结
 
数字化体验时代,微交互及UI动效的规划,已然成为全新的趋势,如何子啊保障品牌策略的同能,能够提供便捷与印象深刻的体验,成为业内热议的话题。当然切记不能成为华而不实的花架子,而应该将其视为提升数字体验的新方法。

 

  • September 19, 2016

    云华互动专家谈:中国邮政,一家120岁的互联网企业

  • September 19, 2016

    云华互动专家谈:中国邮政,一家120岁的互联网企业

  • 返回列表

  • SHANGHAI · 上海

    TEL: +86 ( 021 ) 3103 7717

    TEL: +86 ( 0 ) 131 2226 9328

    ADD: 上海市长宁区凯旋路1295号

  • BEIJING · 北京

    TEL: +86 ( 010 ) 8602 7818

    TEL: +86 ( 0 ) 151 0168 6075

    ADD: 北京市海淀中街中关村公馆B座

  • JINAN · 济南

    TEL: +86 ( 0531 ) 8235 0508

    TEL: +86 ( 0 ) 176 2150 1709

    ADD: 济南市共青团路25号绿地中心

  • NANJING · 南京

    TEL: +86 ( 025 ) 6691 5688

    TEL: +86 ( 0 ) 180 1858 3887

    ADD: 南京市中山北路95号议事园大厦

Copyright © 2017 CloudOne All Rights Reserved 云华互动版权所有 云华互动网络科技(上海)有限公司   沪ICP备09016870号