收藏本站 关于我们

【译】墙外干货:如何入门VR界面设计?(原创文章)

发布时间:2017-04-25 14:23:45   来源:PS教程   人气:0

前言:声明:如需转载,请申请本人授权并保留文章全部信息,严禁私自用于任何商业用途,请尊重作者权益。对于很多设计师来说,虚拟领域还是一块未知领域。我


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


\

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

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


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


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

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


VR App类型


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

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

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

\

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

\

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

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

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

\

下个阶段,我们将用这个做一个工作示例。在进一步了解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.线框图

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

\


2.视觉设计

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

\


3. 行动方案

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

\

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


设置Canvas尺寸


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

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

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

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

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

\

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

\

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

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

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

\

我们来总结一下:

360视图“: 3600 × 1800 像素

UI视图“: 1200 × 600 像素

\


测试


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

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

\


工具


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

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

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

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


    VR界面设计流程


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

    \

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

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


    1. 设置 “360视图”

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

    导入命名为background.jpg"http://img.zcool.cn/community/02292658f81dd9a8012049ef9da1a1.jpg" alt="\" width="781" height="368" style="width: 781px; height: 368px;"/>


    2. 设置画板

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

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

    \


    3. 设计界面

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

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

    \



    4. 整合画板并输出

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

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

    \


    5. 用VR测试

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

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

    \


    技术顾虑


    低分辨率

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

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

    文字可读性

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

    完成触控解决方案

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

    \

    动效设计

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

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

    \

    对应视频地址: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生态系统就越早能被壮大。

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


本文来自PS教程网www.46PS.com,转载请注明!关键词:技巧技巧教程原创自译教程


PS教程