6.3.3 相关问题的解决方案
我们已经大致了解了应该怎样从现有的基本概念出发,来定义全新的交互对象。不过在实际项目当中,我们有可能会在这方面遇到一些潜在的问题,这些问题甚至会导致设计开发工作进入死胡同。在你的设计方案当中,一些高度定制化的交互模型也许很难被准确地实现出来,而另一方面,你也有可能发现它们无法很好地被用在产品的其他地方。面对这些情况,你必须掌握一些最基本的解决方法,才能让自己摆脱困境。
我们曾经在前一章当中了解了一些能够帮助设计师实现设计方案的相关开发技术。其中,核心动画 (Core Animation)为开发者们提供了一系列强大的工具,用于将高度定制化的动画效果整合到交互元素当中。动画的概念,不仅仅是随便为一些元素添加有趣的视觉效果这么简单;对于交互设计来说,它更是一种用来与用户进行互动沟通的强大工具。
在最基础的层面,动画是一种能够使交互对象的某种属性随着时间而发生变化的机制。“时间”是这个概念当中的核心,它可以帮助我们解决交互设计当中的一些关键性的问题。
当你发现交互环境当中的空间过于有限的时候,以时间概念为主导的解决方案往往可以发挥巨大作用。要在狭小的界面当中内呈现大量的信息是很困难的,通常只会出现两种情况,要么是通过缩减字号来提高单位面积当中的内容密度,要么保持字号不变而对内容进行截断处理。这两种方式都是有很大弊端的。高密度的信息很难被用户良好的阅读和理解,而经过截断处理的内容又是不完整的,难以保证信息的准确传达。
我们可以通过之前列表练习当中的实例来直观地理解这一点。当我们以网格的形式改造了单列纵向列表之后,如果列表项的标题文字变长,我们就必须对字号进行必要的调整,才能使内容完整地呈现给用户,正如我们可以在下图左侧屏幕当中看到的。反之,如果不缩减字号,只进行截字处理,那么最终的效果就会是下图右侧屏幕所展示的样子:
图6-7 缩减字号与截断文字的效果对比
那么,以时间概念为主导的方案能否帮助我们解决这个问题呢?我们不妨在这里回忆一下,过去那些小屏幕手机在这方面通常是怎么做的,也许我们可以从它们身上找到一些答案。
图6-8 将被截断的文字以跑马灯的形式完整的呈现出来
跑马灯效果在过去的那些设备当中是非常流行的。在这种解决方案里,“时间”扮演着重要的角色,因为文字会以动画的方式逐步进入可视区域当中,随着文字从右向左的行进,用户最终会阅读到完整的信息(见图 6-8)。在这个实例当中,“时间”作为一个额外的维度,可以在某种程度上帮助我们解决问题。
这种方式确实适用于一些特定的情况,但出于某些原因,它依然无法彻底解决网格布局当中文字空间限制问题。不妨设想,当这个界面加载完成的时候,每一个格子当中的标题文字都在滚动,这种高度密集的文字动画效果对于用户来说是难以接受的。你很难将注意力集中在某个单独的格子当中,而且必须对时间进行准确的把握,才能在最短的时间内,也就是一个循环周期当中完整的阅读一串文字,否则你所能看到的仍然是一些被截断的内容。我们已经在解决方案里加入了以时间概念为主导的动画效果,那么这个模型当中还缺少哪些关键元素呢?答案就是用户控制。
用户控制的概念是很显而易见的。当前话题的重点在于怎样创建交互设计解决方案,而所谓“交互”,自然离不开来自用户的某种控制行为。不过在这里,我们需要从“状态”的角度来思考用户控制这个概念。
对于交互模型来说,“状态”是一个非常重要的概念,它同样可以帮助我们解决在设计过程中遇到的一些棘手的问题。与“时间”类似,以状态概念为主导的解决方案通常可以完成那些对于静态方案来说几乎是不可能实现的任务。从某种程度上讲,它们都可以从另外一个维度上改变交互模型当中的界面元素及信息内容。
状态究竟是什么呢?它所指代的是当某个交互对象正在被用户观察或是被某种控制机制管理的时候所体现出来的属性和特征。
到目前为止,我们所创建出的网格列表交互模型只拥有唯一的一种状态。也就是说,它只有一个形态,目前还不会发生变化。如果我们可以控制它的状态,在必要的时候对交互模型的结构进行调整,那么就可以真正地解决掉我们之前所遇到的问题。
现在可以将状态的概念与用户控制行为联系起来了。前文当中之所以会提到要从“状态”的角度来思考用户控制,是因为我们可以通过用户输入机制来改变界面交互对象的状态。
那么,我们应该怎样从用户控制与状态调整的角度来解决网格列表交互模型当中的问题呢?当前的状况是,我们认为网格状的列表非常符合差异化的交互体验设计思路,而且在这种模式下,用户可以同时看到很多列表项;但同时,每个列表项的尺寸都变小了,狭小的空间无法完整地将其中的文本对象呈现出来。我们试着通过以时间概念为主导的方案,即跑马灯的动画效果来解决这个问题。虽然这种方法确实使文字内容摆脱了空间的限制,但从界面整体的角度来看,动画效果的密度过大,视觉体验非常糟糕。那么接下来,就让我们一同看一看,当用户控制及状态的概念被整合进当前的交互模型之后,事情又会发生怎样的变化。
图6-9 通过轻扫操作,将被遮挡住的文字拖出
如图所示(图 6-9),我们可以保持格子当中的文字静止不动,由用户通过轻扫操作将所需的文字对象拖出被遮挡的区域。这种方式将直接操纵的理念融入到了交互模型当中,我们就不必让用户面对着充满文字动画效果的界面了。他们可以在觉得需要的时候对任意一个格子进行交互操作,浏览其中的完整内容。
在这种解决方案当中,我们为文本对象赋予了一定的交互行为,这是相对简单的一种方式。我们还可以扩展一下思路,去尝试一些更具创意的方式。除了文本对象以外,我们其实还可以通过用户的控制行为使整个格子单元的状态发生变化。
图6-10 通过双指张开的操作来扩展格子,以获取完整信息;结束操作后格子自动收回
我们可以让用户通过双指张开的操作将网格单元进行扩展,从而获取完整的文字信息;当手指离开屏幕之后,格子便会自动恢复到默认的状态。只需要一个简单的手势,我们就可以人为地创造出更大的空间,这使得整个交互模型具有了高度的动态性 (见图 6-10)。通过这种方式,不仅文字内容变得完整可读,而且由于整个格子的空间都被扩大,我们甚至可以在其中加入更多有价值的信息。
曾经一个最普通的单列纵向列表,到目前俨然已经成为在用户体验方面具有高度潜力的交互模型了。交互模型在这方面所体现出的扩展性具有很高的实际运用价值。那么,除了能够在某种特定的需求上下文当中提升对象的交互体验以外,这种扩展性如何帮助我们实现更高层次的设计目标呢?
首先我们需要知道一点,在打造交互模型的过程中,我们不能对其进行子虚乌有的构想。交互模型永远是一个完整系统当中的一部分,产品最终带给用户的交互体验必然是一种整体效应的体现。如果你相信设计方案当中的某个交互模型所具有的强健性足以驱动一款产品,那么你考虑清楚应该以怎样的方式将它整合到产品的其它地方,才能在整体层面上实现最佳的体验效应。这也正是我们在前文当中提到交互模型的弹性与扩展性时所要表达的意思。如果你所打造的各种交互模型确实只能适用于各自的功能情景,而无法很好的运用在产品当中的其他地方,那么你至少要在头脑中建立一个更庞大完整的产品级别的交互模型,其中包含着局部当中的各个独立的交互模型;这个大模型必须为用户提供清晰并且一致的交互体验。然而另一方面,一个拥有太多独特交互模型的应用最终只会导致用户产生迷惑和挫败的感觉,这更是完全地背离了我们的初衷。在这种情况下,其实谈不上任何模型的概念了,整个产品只是一堆怪异交互模式的组合。
要避免这种情况的发生,我们在设计工作中必须始终站在全局的角度对每一个交互模型的适应能力进行考虑。这是一种系统化的设计思路,你需要让自己的思维模式上升到抽象的层面,才能对某个交互模型在上下文环境当中的适应能力进行充分地认知。不要只看某个交互模型能够解决眼下的哪些局部问题,而是要判断它所勾画出的交互模式能否在应用中的其他地方同样适用,有没有可能成为某种具有普遍适用性的多用途交互行为模板。
一款应用产品当中使用到的交互类型越少,其交互模型的健壮性就越强。少即是多的原则在移动应用的设计工作当中是绝对适用的。要以降低用户的认知负荷为目标,尽可能使用那些用户已经在你的产品中接触过并理解了的交互模式。
当然,你也不必为了减少交互类型而将某些模式强加在那些确实不适用的地方。简单一致的交互方式固然是我们所追求的,但同时,你也要了解产品中的哪些地方的确需要相对独特的解决方案,否则在这些地方尝试通过具有普遍性的交互模式进行处理的话只能是浪费时间。可以说,如果某种交互方案在你看来并不是非常明确和易用的,那么在用户看来多半也会如此。
也许你已经注意到了,我们一直在不同的地方反复使用着“交互”、“行为”和“模式”这三个概念。在本书所讨论的话题当中,这些概念各自包含哪些含义,它们之间又具有怎样的关联呢?我们在这里简要地了解一下:
- 交互:单元级的人机互动行为,例如点击一个按钮或是轻扫屏幕当中的某个区域。它的本质是用户在系统的某种提示下所做出的输入操作。
- 行为:包括用户的输入操作以及相应的系统回馈方式。它是“交互”的一种整体化可感知效应,由系统环境呈现出来。
- 模式:若干“行为”在某种特定的组织方式下共同作用所产生的累加效应。
你可以在其中任意一个层面上对交互模型的一致性进行规划。你可以从宏观的角度出发,首先思考具有全局性的交互模式,也可以从细处入手,定义那些相对独立的局部交互模型,并对它们的交互体验一致性进行持续的考量。你在交互模型相关工作当中所做的规划,将决定着最终的产品能否以正确的方式解决某些特定的需求。