浅谈应用动态体验设计(上)
动态设计的重要性
作为,我们正在竭尽所能,用更易阅读、外形更美观的应用,让用户更加方便地找到所需的内容。,一个问题在于,大量新的设备基本都取消了实体键盘的设计,取而代之的则是一个个的触摸屏,于是,用户的举手投足变得越发重要了。没了复杂的硬件按钮,我们究竟要如何在应用里给用户以位置感?我们必须使用新的方法来实现这个目标。动态设计成了重要的组成部分。
页的进化
现在,我们几乎所有的内容(APP & WEB)都是以“页”的方式呈现,我们先来看看这些“页”都是如何进化的。
a.静态到静态
静态到静态是最早也是最常用的页面切换方式。注意,这里所说的静态不是指网页代码上的静态,而是指视觉上的静态。绝大部分的网页为了照顾加载时间和内容,都做成了视觉上的静态效果,尤其是各种门户网站,点击链接后,会直接跳转到下一个。
b.静态到动态再到静态
在这个APP为王的时代里,这种静→动→静的页面的形式也颇为常见,最有代表性的要数iOS系统了。让我们来看看第一个视频,这个是一个iOS上iTunes的界面,在我们不操作时,这个页是静止的,一旦进行操作,页面就会流动起来,而不是硬生生的切换;当我们停下操作,页面就会重新回归静止。我们再看第二个视频,同样的,从静止,到流动,再到静止。第三个视频是我们的APP点滴时光,同样的,静止→流动→静止。
视频1 | iOS设备在
观看
视频2 | iOS设备在
观看
视频3 | iOS设备在
观看
c.流动,流动,再流动
以下视频展示的是电视中常见的纯流动页面的案例,这些页面最常出现在节目导视或者新闻播报中。
视频4 | iOS设备在
观看
在软件领域,有两个比较有代表性的案例,一个是当红炸子鸡Path,另一个则是Windows 8。在Path中,因为页面上的影片是直接动着的,于是我们就看到了一个由流动的界面通过流动的切换进入到另一个流动的页面这样的呈现方式。在Windows 8里也是一样,Metro的流动,点击后的流动,再回到Metro的流动。一切都在动。
视频5 | iOS设备在
观看
视频6 | iOS设备在
观看
看完了这些进化过程,我相信很多朋友都会想知道,为什么我们在设计开发应用的时候要让它动起来,“动态”究竟在背后扮演了怎样的角色?
动态的作用
,动态已经成了一种设计元素,它已融入到了应用中,成为了表达应用的情绪和气质的更加细腻的方式。
视频7 | iOS设备在
观看
视频8 | iOS设备在
观看
上一个视频我们看到的是Windows Phone 7 的LiveTile,微软把WP7系统定位成给潮人、精英和商务人士使用的手机系统,这些人群都较为严谨,所以在动态处理上它呈现出灵动、柔滑,充满理性的感觉。相对的,iPhone的定位是纯消费级产品,更注重让消费者快乐愉悦地使用iOS,所以,它在动态处理上充满着幽默、俏皮,和微妙的喜剧色彩。
,APP设计已经从单纯的功能实现转变到了故事与场景的描述,恰当的动态转换更能突出这种描述的合理性。 我们最近设计的名叫[+]LomoCam 的故事线是拍摄→冲洗(美化)→邮寄,完整地还原了一个经典的分享过程。而我们为它所设计的动态,则为故事的描述提供了非常重要的指引,让用户觉得自然和谐,从而更加相信我们所描述的场景。
动态还有一个功能,就是让用户预期自己的点击行为
每一个陌生的APP都容易让用户感到未知和无助,而动态转换则可以让用户充满自信。因为人们可以通过这些动态转换所产生的物理惯性去预测接下来要发生的事情。这个道理就好像我们最近看的欧洲杯,一脚踢出去,你是一定会知道足球会顺着踢出去的方向飞行。就算踢飞了,你也不会认为球会往球员的脚后跟飞。我们做动态也一样,给用户一个预期,让用户能提前感知到自己的操作会带来什么结果。
我们常说UCD,清晰地传达给用户发生了什么,增强与用户的交流,让用户感受到强烈的代入感,这就是!
动态能做的就是这件事情!整个应用的体验就像一段旅程,而动态就像这个旅程中的向导,你每点一下,她都会告诉你,你从哪儿来,要到哪儿去。