[分享] 为什么需要在移动界面中注意隐喻设计

悠然南山

为什么需要在移动界面中注意隐喻设计


有些时候，我就在想这个简单的问题，而那时我的答案还是：界面是对软件应用解决方案的显性，使用图形化符号，向使用者解释它的功能与任务。
但最近一些认知却让我对这个问题有了新的回答：界面就是软件应用它本身。它不是一份对软件应用功能的图形化说明书，不是对软件应用功能与任务的图形化翻译，它就是软件应用本身，并且与之浑然天成。
一个简单的问题，仅仅从展开的iPad文件夹时界面的呈现，你觉得，有多少种方法，可以收缩起这个文件夹？

方法其实有三种：点击（Tap）文件夹图标或者点击其他区域；向上拖动（Flick）界面；双指在两侧向内滑动（pin close）。
第一种也许你早就知道，但后面两种，你也许会将信将疑地去尝试，相信我的说法。
所以，从我的角度上而言，这也许是人家常说iOS操作简单易懂的原因。在你点击文件夹后，文件夹展开的的这个动画，以及最终他的视觉样式，已经告诉你了，他应该怎么去关闭，你会不由自主的，就学会这些操作。
而这就是隐喻。《iOS Human Interface Guidelines》里面是这样解释隐喻对体验的影响的：当你应用中的可视化对象和操作按照现实世界中的对象与操作仿造，用户就能快速领会如何使用它。（When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app.）

对我而言，iOS的文件夹更多的像一个抽屉的隐喻，并且，它的顶部还是玻璃材质的。从拉开的动画当中，他建立了一个类似抽屉的空间，你一看就明白了。
界面与界面之间，并不是简单的线性关系
我们不得不否认的一点是，界面与界面之间其实是应该纯在联系的，我指的这种联系是说，空间感。存在相互之间的层级和逻辑关系的，而且这种关系，越符合现实的，越好。越容易让别人理解，越来越不用让别人学习。
这就是我们需要做隐喻，我们需要通过它，去表现界面之间的关系。

隐喻给人以可预测性，用户能够轻易的理解你设计的软件应用。这是一种掌握的感觉，是一种控制的感觉。当用户操作时，他们知道下一步即将出现什么、怎么回去——即使是在第一次操作。
为什么需要在移动界面中注意隐喻设计？
1.导航缺失
一个触摸屏手机的物理尺寸在3.7寸左右，与一张信用卡相当。在这么狭窄的空间内，我们则不能秉着PC客户端“在一个主界面内完成大部分的任务”的思想，去设计移动客户端。我们必须把界面分拆。
与之而来的问题是，分拆后的界面是有逻辑的，但我们并不能照搬PC客户端中的方法：使用任务栏，层叠的模态对话框去表现这种逻辑。

因为我们根本就没有空间，所以我们得另辟蹊径。
所以，我们把界面拆分得更多独立化，让界面变成卡片式，一个界面只完成一项任务，保证界面之间联系的单一化，避免界面之间逻辑，或者跳转的混乱。
2.缺乏物理力学反馈
传统的手机上，用户使用键盘，去操作屏幕上的视觉对象，键盘在这个阶段中，扮演的其实是用户操作行为的翻译器。而iPhone的出现砍掉了这种操作行为的翻译，变成直接触摸，这是一项伟大的进步。


iPhone虽然缩短了操作行为的执行阶段，但却给操作行为的反馈阶段带来了麻烦：只有视觉反馈，手指触摸的物理力学反馈消失了。
你的手指不再能够感受到键盘按下的物理力学压力，甚至，假设你手指粗壮一点，你就几乎没法看见按钮是否被按下。而在输入时，这种情况尤甚，键盘手机上有着悠久历史的高效的“盲打”输入方式只能进入历史的存档中。
因此，我们更多的需要利用用户的视觉和听觉，去提供反馈。
隐喻设计内容
对于一个产品来说，隐喻设计不仅仅是动画，各种即时状态细节的设计，更多情况下，我们需要按步骤的去完成整个隐喻的系统性与结构化设计。他包含以下几项内容：
1.拟物化视觉外观与听觉反馈
隐喻设计的第一步，从应用的外观着手，如果可以的话，你应该考虑应用的外观表现出真实物理的肌理材质，以及合理的光影效果，并且，得正确的显示界面的元素的相互之间的空间层次感。


另外我们不能忽视的一种拟物化设计：音效。它不仅是对缺乏物理力学反馈的一种弥补的手段，在某些情况下，也是一种有效的反馈机制，如当屏幕处于关闭状态下时（这是经常的事情），拟物化的音效更能让用户了解当前用户的状态。iOS解锁屏幕的声音你还记得吗？还有敲击键盘的声音，以及照片拍摄的声音。这都很好的拟物化音效。
拟物化的外观很大程度上降低了用户的认知成本，无需阅读额外的文字，用户只要看到软件的样子，就知道它的用途。
2.即时反馈
假设，你在触摸屏的设备上，使用手势执行某项操作，但界面上没有任何的反馈。你就不得不去猜测一下，你遇到的是下面的那种情况：

你的操作手势有误，软件无法响应程序当机了，暂时没有响应
对于情况二，很抱歉，我们也许实在无能为力。但是对于情况一，我们得有必要讨论一下，如果反馈用户操作手势有误，并指引或者帮助用户到正确的操作中了。

由此看来，传统网页上使用的反馈方式，移植到触摸屏设备上，实在是水土不服。移动设备最好的错误反馈，应该是即时跟随用户的手势操作的。

如上图示意，这才是一个触摸屏上，应该具备的一种反馈，它即时响应了用户的手势动作(即使可能是错误的)，而当用户释放操作时，又自动回归到正确的操作结果中来。
对于任何一个软件应用来说，他都是有学习成本的。有的成本高到离谱，比如Office，Photoshop之类的生产力软件，但也有低成本的，如计算器，记事本等。当软件应用而行拟物化设计之后，其实这已经降低了一些学习的成本。但如何继续降低学习成本？让用户犯错，并从错误中学习。
即时反馈缩减了操作与反馈之间的距离，有效降低了用户纠正错误的修复成本，也提高了用户学习的效率。
3.流动式动画
传统的软件界面之间的切换表现得较为粗暴，大部分情况下，他只显示命令执行前和执行后两个界面，而忽略了他们之间的那段过程。而在真实世界中，倘若没有这个过程，你甚至很难理解过程两端的界面，是如何联系起来的。

动画有一种无法比拟的表现力，它是与用户的最有效的沟通方式，一个精致，微细的动画，能够友好的衔接两个界面之间的切换，同时他还有以下的作用：

表现软件当前状态提供对用户有用的反馈信息加强用户直接操作的控制感通过视觉表现用户的操作的结果
流动式的动画贯穿在整个iPhone操作系统中，也包括在非沉浸式应用程序中。但作为隐喻设计的一种手段，我们需要留意的是：动画只是常用于提高用户体验，它本身并不是用户体验的焦点。
隐喻设计的评判标准
1.符合现实逻辑的界面空间
流动式的动画成为隐喻设计的最后一块拼图，但是我们仅仅把拼图拼起来是不够的，我们还需要检验，这样的拼图是否符合真实世界的逻辑。


Flipboard始终如一地采用翻页的动画效果，无论是从首页进入，抑或是从某个订阅源中返回。他甚至还精细的制作了三种翻页动画效果：只翻动一页，翻动两页，翻动三页和以上；他给以用户这样一种感觉：

我订阅的所有内容，是一本杂志任何页面都没有互相从属的关系，只有先后秩序的关系在首页上的方块型的东西，等于杂志的目录

而国内的同类产品杂客，他所呈现的界面空间却稍有不同，整体上，他像是一个时刻变换封面的杂志柜。
但个人感觉，从杂志柜进入杂志的过程动画，有点粗暴且难以在现实生活中找到相关性。个人观点，若此过程动画能与iBooks打开书籍的动画类似或相同。也许更加符合现实逻辑。
2.自圆其说
简单来说，你的界面是如何进入用户的视眼，也应该以相反的方式，从界面中消失，并且，这个过程，是能够自圆其说的，且符合真实生活的隐喻的。


3.响应用户的直觉手势
移动设备最大的特点是：直接操作。如果你设置了你的界面是从下方推入，那用户可能会直觉性的认为，我把新界面向下拉，这个界面即可消失。

从图可以看到腾讯爱看成功的照顾到了用户从隐喻设计中所得到的直觉性手势，只需向下拉，用户就可以关闭此界面。

从外观上看，评论界面都处于主界面之下，而动画效果都属于主界面向下拉伸，评论界面向上推至界面顶部。但是杂客的同样响应了用户的直觉性手势，只需在正文界面中，向下拖动，即可激活评论界面，这不得不算是在twitter客户端上的一种进步和超越。
总结
其实理解移动界面的隐喻设计，并不是一件非常困难的事情，因为这是一个化繁为简过程后的结果。而困难的是：设计师应该跳出传统的按钮，点击等交互操作的局限中来，更多了考虑到和现实生活的逻辑结合和用户的直觉手势的响应。
对于移动的软件应用来说，隐喻设计的初衷是为了解决导航缺失和物理力学反馈缺失的问题，但同样，这也是移动产品的竞争力的核心体现。如何帮助用户更快的理解你的软件应用，如何帮助用户更顺畅的使用你的软件应用。这是我们每个设计师，都应该去真实生活中去寻找的答案。