header_v0.7.2

【译】墙外干货:如何入门VR界面设计?

99天前发布

原创文章 / 平面 / 教程
狐狸爱设计 原创,如需商业用途或转载请与狐狸爱设计联系,谢谢配合。

对于很多设计师来说,虚拟领域还是一块未知领域。我们见证了VR硬件和应用在过去几年的爆发。本文分享了VR app的设计流程,让你不再惧怕VR界面设计。


声明:如需转载,请申请本人授权并保留文章全部信息,严禁私自用于任何商业用途,请尊重作者权益。


a0f058f81b50a8012049ef8391ef.jpg

对于很多设计师来说,虚拟领域还是一块未知领域。我们见证了VR硬件和应用在过去几年的爆发。VR体验从从普通到让人震惊,有很大的复杂性和实用性。

作为刚入门VR的UX或UI设计师可能会有些担心,我们已经进入了VR时代,但是却不知道如何设计。在这篇文章中,我们会分享设计VR app的流程,希望你会用这个流程开始你的VR设计。


关于设计VR和AR你需要知道的7件事


你不必成为VR领域的专家——你只要愿意把你的技能用到一个新的领域。最终,作为一个社会共同性的工作,我们能加快VR更快实现它的潜力。

“对UX或UI设计师来说,用他们的技能设计VR,这是一个巨大的机会”。


VR App类型


从设计师的角度,通常来说,VR应用是由两个部分组成的:环境和界面。

当你把VR耳机带上,想想你进入的这个环境——你会发现自己处于虚拟星球里,或者你会看到坐过山车时的风景。

界面是用户要与环境产生互动,控制体验的组成元素。根据这两个组成部分的复杂性,所有的VR app都可以被定义为是沿着两条轴线。

beda58f81bcca8012049efbb1fdb.jpg

在第一象限是像加模拟器之类的,比如上面链接中提到的过山车体验。这个有一个全局的场景,但是没有界面。你只是简单地被锁定在车上。

8b0858f81bf1a8012049ef673f61.jpg

在第四象限,是那些被开发了界面的app,但是只有少量环境或者没有环境。三星的Gear VR家庭界面就是一个很好的示例。

c1df58f81c03a8012049efaba40a.jpg设计虚拟环境,比如说场所和风景需要精通3D建模工具,放这些元素超出了许多设计师的能力范围。但是,对于UX或 UI设计师来说用他们的能力设计虚拟世界的用户界面,是一个巨大的机会。

我们做的第一个完整的VR用户界面设计是为《经济学人》设计的一个app,是和VR设计工作室——Visualise联合创作的。我们做了设计,Visualise创建了内容,开发了这个app。

581258f81c2ba8012049ef8dc2fe.jpg

下个阶段,我们将用这个做一个工作示例。在进一步了解VR设计界面的本质之前,我们将给一个设计VR app的方法。你可以从Oculus网站下载经济学人app的Gear VR版。


VR用户界面设计流程


然而大多数设计师已经想出他们设计移动app的流程,设计VR界面的流程还没有被定义。当第一个VRapp设计项目来临时,逻辑上来说第一步是设计一个流程。

传统工作流程在新领域的应用

当我们第一次玩三星的Gear VR时,我们发现和传统的移动app是相似的。基于VR app的界面遵循着和传统app相同的基本动态:用户和界面进行交互,以帮助他们浏览页面。我们在这里只是简要描述,但是当前只要记住这个就好了。

考虑到和传统app的相似性,设计师花很多年去定义的测试移动app的流程将不会被浪费,也能被用在设计VR界面上。你会比想象中容易设计出一个VR app。

在描述如何设计VR界面之前,让我们回过头来看看设计一个传统移动app的流程。

1.线框图

首先,我们会要完成快速迭代,设计交互行为和整体布局。

cd3258f81c66a8012049ef4e055f.jpg


2.视觉设计

这个阶段,功能和交互已经确定。品牌规范被用在了线框图上,漂亮的界面也制作出来了。

50a858f81c83a8012049ef1dc7ea.jpg


3. 行动方案

这里,我们已经把界面组织成了一个流程图,画出了界面之间的跳转链接,并为每个界面描述了交互行为。我们叫这个为解决方案,它会被开发人员作为主要参考。

b46058f81c96a8012049efc81c4d.jpg

那我们现在如何把这个流程应用到虚拟世界里呢?


设置Canvas尺寸


最简单的问题可能是最有挑战性的。面对360度的canvas,你会有些不知从何开始。其实UX和UI设计师只需专注在整个空间的某个特定部分就好了。

我们花了好几周尝试计算出什么尺寸的canvas对于VR来说更合理。当你设计移动app时,canvas的尺寸是由设计的尺寸决定的,比如iPhone 6的1334 × 750像素和安卓的1280 × 720像素。

为了把这个移动app流程应用到VR UI上,你首先要计算出合理的canvas尺寸。

“设计师花很多年定义的移动app工作流程能被用于设计VR界面。”

下面是一个360的环境被扁平化的样子。这个演示被叫做正方形投影。在3D虚拟环境,这些投影被包裹在一个球形领域来模拟真实世界。

afa558f81cbfa8012049efd2a30b.jpg

整个投影的全屏宽度代表着水平方向上360度和垂直方向上180度。我们使用这个定义canvas的像素尺寸:3600 × 1800。

767958f81ccda8012049ef23995f.jpg

用这么大的尺寸是一个挑战。但是,因为我们主要是对VR app界面设计感兴趣,我们可以把精力集中在canvas这个部分。

基于Mike Alger对舒适的可视区域的早期研究,我们可以分离出一个部分让界面呈现得更合理。

这个区域代表着360度环境的九分之一。它正好在球面投影图片的中心区域,尺寸是1200 × 600像素。

eeff58f81cf2a8012049ef48719c.jpg

我们来总结一下:

360视图“: 3600 × 1800 像素

UI视图“: 1200 × 600 像素

79e658f81d02a8012049ef6ec1ee.jpg


测试


为一个界面使用2个canvas的理由是为了测试。“UI视图”的canvas帮助让我们专注在我们正在设计的界面上,让设计流程变得更加简单。

与此同时,“360视图”被用于预览VR环境里的界面。为了获得比例上的真实感受,用VR设备测试界面是很有必要的。

723c58f81dbda8012049ef5c0d78.jpg


工具


在开始演示之前,介绍一些我们需要的工具:

  • Sketch 我们会使用Sketch设计界面和用户流程。如果你没有,你可以下载一个试用版。Sketch是我们更偏爱的用户界面设计软件。

  • GoPro VR Player GoPro VR播放器是一个360度内容可视器。是由GoPro提供的,而且免费。我们使用它来预览和测试我们的设计。

  • Oculus Rift 把Oculus Rift嵌入GoPro VR播放器里能让我们基于场景测试设计效果。


VR界面设计流程


这个部分,我们会演示一个关于如何设计VR界面的简单教程。我们设计了一个简单的示例,不会超过5分钟。

565358f8328ba8012049ef4851ca.jpg

对应视频地址:https://s3.amazonaws.com/blog.invisionapp.com/uploads/2017/03/vr-result-preview.webm

下载资源包(压缩包文件),包含了预先设置了尺寸的UI元素和背景图片。如果你想使用你自己的资源包,没问题。


1. 设置 “360视图”

首先,让我们创建能表示360度视图的canvas。在Sketch新建一个文件,创建一个3600 × 1800像素大小的画板。

导入命名为background.jpg的图片,把它放在canvas中间。如果你使用你自己的球面投影背景,确保它的比例是2:1,并重新设置尺寸为3600 × 1800像素。

f34458f81dd8a8012049ef0fb38b.jpg


2. 设置画板

如上面说到的,“UI视图”是“360视图”的裁剪版,能让你只专注在VR界面上。

在背景投影图片旁边创建一个新的画板:1200 × 600像素。然后,复制刚刚我们添加到360视图的背景,把它放在新画板的中间,不要重新设置尺寸。这里我们想保留背景的裁剪版。

694b58f81e03a8012049ef69eaa3.jpg


3. 设计界面

我们要在“UI视图”的canvas上设计界面了。考虑到是做练习,并且要添加一排砖,我们尽量做得简单点。如果你想偷懒,只要抓取命名为tile.png的图片,把它拖到UI视图中间就可以。复制它,创建3排砖。

从资源包抓取命名为kickpush-logo.png的图片,把它放在3排砖图片的上面

348c58f81e17a8012049ef74b4fc.jpg



4. 整合画板并输出

现在进入有意思的部分。确保“UI视图”画板是在“360视图”画板的上面。

把“UI视图”画板拖到“360视图”画板中间。把“360视图”画板以png格式导出。“UI视图”会出现在它的上面。

441958f81e51a8012049ef1c42a5.jpg


5. 用VR测试

打开GoPro VR播放器,拖动你刚刚导入窗口的“360视图”PNG。用你的鼠标拖动图片,在360度环境下预览。这就完成了!非常简单,不是吗?

如果你的机器设置了一个Oculus Rift,那GoPro VR播放器应该会检测它,能让你通过VR设备预览图片。根据你的配置,可以在MacOS操作演示设置。

295658f81e6ea8012049ef77a1df.jpg


技术顾虑


低分辨率

VR设备的分辨率是非常差的。这样说也不完全正确:其实和你的手机分辨率差不多。但是,考虑到这个设备距离你的眼睛只有5厘米,看起来就不是很清晰。

为了获得更清晰的VR体验,我们需要给每个眼睛K显示,也就是15,360 × 7680像素。我们离这个像素还差得很远,但终究还是要这样做的。

文字可读性

因为显示分辨率的问题,所有漂亮清晰的界面元素看起来都很像素化。这意味着,首先,文字会很难阅读;其次,直线的锯齿很明显。试着避免使用大文本块和高度精细的界面元素。

完成触控解决方案

还记得我们移动app设计流程中的解决方案吗?我们将把这个用到VR界面设计上。我们用UI视图,组织绘制了我们的流程,将其放入一个可理解的方案里,对开发人员而言,很容易理解我们设计的整个app架构。

7fdd58f81ec7a8012049ef8bd098.jpg

动效设计

设计漂亮的用户界面是一方面,如何做动画演示则完全不同。我们决定从一个二维视角去实现动画效果。

使用Sketch做的设计,我们用Adobe After EffectsPrinciple做界面动效。但是输出效果不是一个3D体验效果。是给开发团队的一个指南,帮助客户理解我们的版本还处于流程中的初级阶段。

035d58f831a6a8012049ef2ea020.jpg

对应视频地址:https://s3.amazonaws.com/blog.invisionapp.com/uploads/2017/03/first-vr-ui.webm


我知道你正在想什么:“太棒啦,但是VR app可以做得更复杂”,是可以。问题是什么程度下我们能把当前UX和UI实际应用到这个新媒介上。


VR用户界面能走多远?


有些VR体验严重依赖于虚拟环境,用户用传统界面来控制这个app可能不是最佳选择。这种情况下,你可能想用户能直接与环境本身进行交互。

设想你为一个豪华的旅行社做了一个app。你想以尽可能生动的方式引导用户到潜在的度假地。所以,你邀请用户带上VR设备,开始体验你切尔西的豪华办公室。

为了把办公室转换到更远的地方,用户需要知道如何选择他们想去的地方。他们拿起了一本旅游杂志,开始浏览,看到了一个吸引人的页面。或者,可能你的桌上有一堆有趣物品,引导用户去不同的地方依赖于他们选择哪个。

这是相当酷的,但是也有一些缺点。为了获得这种效果,你需要更加先进的有手持控制器的VR设计。另外,比起传统app界面展示的精美外观的选项,一个像这样的app要花更多的精力开发。


Viva la revolución


事实是这种沉浸式的体验对大多数公司而言并不具有商业可行性。除非你已经获得了几乎无限的资源,比如Valve和Google。创造一个像上面说的那样的体验是需要很大成本的,也太具有风险性,太消耗时间。

这种体验是明智的,显示你正在媒体和科技的边缘,但是把你的产品定位到一个新的媒介不是那么好。可触达性是很重要的。

通常,当一种新的形式产生,是由早期的接纳者——这个世界的创造者和变革者推到极致的。经过一段时间以后,随着充分的学习和投资,会引来大量潜在用户。

基于VR设备变得越来越普遍,公司开始瞄准这个机会,将VR集成到他们的商业决策中。

依我们所见,有直观界面的VR app,也就是说用户界面接近人们已经习惯于的可穿戴设备、手机、平板和电脑——这会让VR成为大多数公司可以支付得起而且有价值的投资。


是时候乘上宇宙船了


希望这篇文章让你对VR有了更多了解,能激发你开始设计自己的VR。

有人说如果你想尽快旅游,就自己去,但你过你想去更远的地方旅游,就和大家一起去。我们想要飞得更远。在Kickpush工作室,我们认为每个公司都可以有一个VR app,就像每个公司现在都有一个移动网站。所以我们建立了一个宇宙船,一个由全球设计师共同努力的结果,让设计师大胆没有的地方。做出的VR app对公司越有意义,整个VR生态系统就越早能被壮大。

作为数码产品设计师,我们接下来的挑战会是:更加复杂的应用和处理通过控制器输出的其他类型。为了处理这个问题,我们需要强有力的原型工具,让我们能简单快速地输出和测试设计效果。接下来我们会写文章来介绍我们早期的一些尝试,以及一些开发中的新工具。


44

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功