如何入门VR界面设计(3)

来源:网络   作者:热心网友   发布时间:2017-04-27    浏览次数:340

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 Effects和Principle做界面动效。但是输出效果不是一个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生态系统就越早能被壮大。

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

123共3页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:ui干货

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/5934.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通