界面设计之未来可视化的应用

上海艾艺小编，今天突然畅想了一下未来，尤其是未来用户界面的发展方向在何方？微软告诉我们在于实景3D虚拟应用，无独有偶，另外一家公司Bloom Studio也有类似的想法。据国外媒体报道，Planetary是本月推出的一个iPad应用程序，它以一种“太阳系”方式来可视化你的音乐收藏，拥有令人震撼的视觉效果，虽然乍一看似乎有点过于花哨。

“太阳系”是指：恒星是音乐艺术家，行星是专辑，卫星是专辑曲目；你浏览和听音乐，就好像它是一个宇宙似的。这个应用在iTunes上获得的一条评价是“具有视觉吸引力，但没有什么用。”此人给Planetary的评分是2颗星。但这个评价并没有说到点子上，因为Planetary在设计上的炫酷，显示了数据可视化成为新界面的潜力。无论是在你的移动电话还是平板电脑上，你会越来越多地看到使用数据可视化的应用程序。位于旧金山的初创公司布卢姆工作室Bloom Studio于本月初推出了Planetary。该公司称它是“一种新型视觉发现应用程序中的第一个”，并承诺将在未来数月中推出更多这样的应用程序。他们计划使用这种类型的可视化技术“让你用一种全新的方式来探索和参与社交网络、视频流服务，以及基于地理位置的应用！”把信息可视化用作一种新的控制界面

Planetary的与众不同之处在于：它不依赖于传统的软件控制和设计模式（比如播放按钮，向下滚动曲目列表，甚至翻阅专辑封面），而是由数据可视化控制的。

未来学家和作家Bruce Sterling在最近的一个采访中谈到Planetary：“关于Bloom公司的这个软件，我认为最显著的一个地方是，它把信息可视化用作一种新的控制界面。它不是把老式的音乐机按钮翻新一下那么简单。这整个东西是在进行中实时产生的。你可以在上面运行代码，播放音乐，用它制作媒体！这是一个重大进步。”想象一下，把这种技术用在社交网络、地理位置、媒体和现实世界对象（物联网）的数据中会怎样？应用程序设计的“杀手级模式”在Planetary发布之初，CNET公司采访了Bloom的联合创始人Ben Cerveny。他首先解释了公司名字的来历：“我们将把无形的数据变得有形。我们会让这种东西变得花繁叶茂（Bloom）。”Ben Cerveny告诉CNET，如果有有更好的结构化数据，Bloom的数据可视化应用程序会变得更加强大：“……我们也在考虑其他来源的元数据，因为贴在iTunes曲目上的ID3标签有点不太可靠的。更加结构化的数据会带来极多的可能性，让我们以无数种新方式看到音乐的星座。 ”Ben Cerveny称平板电脑带来了用户界面的新时代，并表示Bloom可以帮助定义一个应用程序设计的“杀手级模式”。但最大的问题是，Bloom是否可以创建出超越“一个看上去有点花里胡哨的音乐应用”的东西，真正改变大家的媒体和社交网络体验。打2星的评价者可能有点苛刻，但他说得没错，Planetary其实没那么有用。但它清晰地指示了用户界面的未来，而Bloom也很有可能成为一颗业界明星。

一、接下来我们言归正传，再来说说到底界面是什么？

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

二、方法其实有三种

点击（Tap）文件夹图标或者点击其他区域；向上拖动（Flick）界面；双指在两侧向内滑动（pin close）。

第一种也许你早就知道，但后面两种，你也许会将信将疑地去尝试，相信我的说法。所以，从我的角度上而言，这也许是人家常说iOS操作简单易懂的原因。在你点击文件夹后，文件夹展开的的这个动画，以及最终他的视觉样式，已经告诉你了，他应该怎么去关闭，你会不由自主的，就学会这些操作。对我而言，iOS的文件夹更多的像一个抽屉的隐喻，并且，它的顶部还是玻璃材质的。从拉开的动画当中，他建立了一个类似抽屉的空间，你一看就明白了。界面与界面之间，并不是简单的线性关系我们不得不否认的一点是，界面与界面之间其实是应该纯在联系的，我指的这种联系是说，空间感。存在相互之间的层级和逻辑关系的，而且这种关系，越符合现实的，越好。越容易让别人理解，越来越不用让别人学习。这就是我们需要做隐喻，我们需要通过它，去表现界面之间的关系。隐喻给人以可预测性，用户能够轻易的理解你设计的软件应用。这是一种掌握的感觉，是一种控制的感觉。当用户操作时，他们知道下一步即将出现什么、怎么回去——即使是在第一次操作。

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

1.导航缺失

一个触摸屏手机的物理尺寸在3.7寸左右，与一张信用卡相当。在这么狭窄的空间内，我们则不能秉着PC客户端“在一个主界面内完成大部分的任务”的思想，去设计移动客户端。我们必须把界面分拆。与之而来的问题是，分拆后的界面是有逻辑的，但我们并不能照搬PC客户端中的方法：使用任务栏，层叠的模态对话框去表现这种逻辑。因为我们根本就没有空间，所以我们得另辟蹊径。所以，我们把界面拆分得更多独立化，让界面变成卡片式，一个界面只完成一项任务，保证界面之间联系的单一化，避免界面之间逻辑，或者跳转的混乱。

2.缺乏物理力学反馈

传统的手机上，用户使用键盘，去操作屏幕上的视觉对象，键盘在这个阶段中，扮演的其实是用户操作行为的翻译器。而iPhone的出现砍掉了这种操作行为的翻译，变成直接触摸，这是一项伟大的进步。

3.操作与反馈对比

iPhone虽然缩短了操作行为的执行阶段，但却给操作行为的反馈阶段带来了麻烦：只有视觉反馈，手指触摸的物理力学反馈消失了。你的手指不再能够感受到键盘按下的物理力学压力，甚至，假设你手指粗壮一点，你就几乎没法看见按钮是否被按下。而在输入时，这种情况尤甚，键盘手机上有着悠久历史的高效的“盲打”输入方式只能进入历史的存档中。因此，我们更多的需要利用用户的视觉和听觉，去提供反馈。

四、隐喻设计内容

对于一个产品来说，隐喻设计不仅仅是动画，各种即时状态细节的设计，更多情况下，我们需要按步骤的去完成整个隐喻的系统性与结构化设计。他包含以下几项内容：

1.拟物化视觉外观与听觉反馈

隐喻设计的第一步，从应用的外观着手，如果可以的话，你应该考虑应用的外观表现出真实物理的肌理材质，以及合理的光影效果，并且，得正确的显示界面的元素的相互之间的空间层次感。

2.拟物化外观

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

3.即时反馈

假设，你在触摸屏的设备上，使用手势执行某项操作，但界面上没有任何的反馈。你就不得不去猜测一下，你遇到的是下面的那种情况：

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

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

对于任何一个软件应用来说，他都是有学习成本的。有的成本高到离谱，比如Office，Photoshop之类的生产力软件，但也有低成本的，如计算器，记事本等。当软件应用而行拟物化设计之后，其实这已经降低了一些学习的成本。但如何继续降低学习成本？让用户犯错，并从错误中学习。即时反馈缩减了操作与反馈之间的距离，有效降低了用户纠正错误的修复成本，也提高了用户学习的效率。

4.流动式动画

传统的软件界面之间的切换表现得较为粗暴，大部分情况下，他只显示命令执行前和执行后两个界面，而忽略了他们之间的那段过程。而在真实世界中，倘若没有这个过程，你甚至很难理解过程两端的界面，是如何联系起来的。

5.向上推的界面组

动画有一种无法比拟的表现力，它是与用户的最有效的沟通方式，一个精致，微细的动画，能够友好的衔接两个界面之间的切换，同时他还有以下的作用：表现软件当前状态、提供对用户有用的反馈信息、加强用户直接操作的控制感、通过视觉表现用户的操作的结果

流动式的动画贯穿在整个iPhone操作系统中，也包括在非沉浸式应用程序中。但作为隐喻设计的一种手段，我们需要留意的是：动画只是常用于提高用户体验，它本身并不是用户体验的焦点。

五、隐喻设计的评判标准

1.符合现实逻辑的界面空间

流动式的动画成为隐喻设计的最后一块拼图，但是我们仅仅把拼图拼起来是不够的，我们还需要检验，这样的拼图是否符合真实世界的逻辑。Flipboard始终如一地采用翻页的动画效果，无论是从首页进入，抑或是从某个订阅源中返回。他甚至还精细的制作了三种翻页动画效果：只翻动一页，翻动两页，翻动三页和以上；他给以用户这样一种感觉：我订阅的所有内容，是一本杂志、任何页面都没有互相从属的关系，只有先后秩序的关系、在首页上的方块型的东西，等于杂志的目录、而国内的同类产品杂客，他所呈现的界面空间却稍有不同，整体上，他像是一个时刻变换封面的杂志柜。但个人感觉，从杂志柜进入杂志的过程动画，有点粗暴且难以在现实生活中找到相关性。个人观点，若此过程动画能与iBooks打开书籍的动画类似或相同。也许更加符合现实逻辑。

2.自圆其说

简单来说，你的界面是如何进入用户的视眼，也应该以相反的方式，从界面中消失，并且，这个过程，是能够自圆其说的，且符合真实生活的隐喻的。

3.响应用户的直觉手势

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

总   结

其实理解移动界面设计的隐喻，并不是一件非常困难的事情，因为这是一个化繁为简过程后的结果。而困难的是：设计师应该跳出传统的按钮，点击等交互操作的局限中来，更多了考虑到和现实生活的逻辑结合和用户的直觉手势的响应。对于移动的软件应用来说，隐喻设计的初衷是为了解决导航缺失和物理力学反馈缺失的问题，但同样，这也是移动产品的竞争力的核心体现。如何帮助用户更快的理解你的软件应用，如何帮助用户更顺畅的使用你的软件应用。这是我们每个设计师，都应该去真实生活中去寻找的答案。