主页 > 洞察 > 设计沙龙 > UI界面设计
  • 界面设计之未来可视化的应用

    adinnet / 2020-04-28 17:02 /UI界面设计

    上海艾艺小编,今天突然畅想了一下未来,尤其是未来用户界面的发展方向在何方?微软告诉我们在于实景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.响应用户的直觉手势

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

    总   结

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


上一篇:法律咨询APP软件开发解决方案和价值分析 下一篇:2020年:上海直播卖货小程序开发流程和成本介绍