对许多设计师来说, VR 是一个未知领域. 近年来, 我们目睹了 VR 相关硬件和软件的蓬勃发展. VR 的体验从不尽人意到令人惊奇, 他们的复杂性和功能性都有了很大的变化.
作为 UI 或 UX 设计师, 迈向 VR 的第一步是艰难的. 我知道, 因为我们也是这样过来的, 所以无需畏惧! 在这篇文章, 我将分享 VR 界面的设计流程, 希望可以借此为你开启 VR 设计的大门. 你无需成为专家, 只要将自己的设计技能运用在这片新的领域就好.
目前都有哪些类型的虚拟现实应用(VR App)?
一般来说, 从设计师的角度来看, VR App 由两类控件组成: 环境和界面.
环境: 可以理解为你带上 VR 头盔后所进入的世界 -- 可能是一个虚拟的星际世界, 也可能是你坐过山车看到的风景.
界面: 是用户交互元素的集合, 通过它来在环境中导航, 并控制自己的体验. 所有的 VR App 都可以根据这两个维度的复杂程度来定义.
集中在二象限 (环境复杂, 界面简单) 的 App 多为模拟器类, 比如上文提到的过山车体验, 在滑行时你会一直处于这种环境.
与其相对的四象限有丰富的界面和简单的环境, 三星的 Gear VR 主屏幕就是一个很好的例子.
设计地面, 风景等虚拟环境需要设计师熟练运用 3D 模型工具, 将元素绘制得生动逼真. 对于许多 UI 和 UX 设计师来说有些困难, 而 VR 界面设计则是他们更好的选择, 可以运用自身技能.
我们最早的 VR 界面是为 "The Economist" 设计的, 与 VR 产品工作室 Visualise 一同合作. 我们做设计, Visualise 进行研发.
在介绍 VR 界面设计的具体细节之前, 我们先以 "The Economist" 为例, 来阐述 VR App 的设计方法. 你可以通过 Oculus 网站先下载一下 "The Economist".
VR UI 设计过程
虽然大多数设计师对移动端界面设计流程可能已经了如指掌了, 但是对 VR 界面的设计流程却不甚了解. 当我们接到设计 VR 界面的项目时, 我们做的第一步就是设计一套工作流程.
换汤不换药(新领域, 旧流程)
第一次使用三星的 Gear VR 时, 我们发现这和传统的移动端 App 是相似的. 他们有相同的工作原理: 用户通过与界面交互来浏览页面. 这点很重要, 虽然这里只是简单提了一下, 但需要牢记在心.
既然 VR 与传统 App 界面相似, 那么设计师们花费数年时间学习并掌握的传统 UI 经验不会浪费, 同样可以复用于 VR 领域. 事实上, 你比你想象的更擅长 VR App 设计!
在讲解 VR 界面设计流程之前, 让我们先回顾一下传统移动界面的设计流程.
第一步: 线框图
首先, 通过快速多次迭代来定义交互方式和总体布局.
第二步: 视觉设计
在这个阶段, 设计风格和交互方式已经确立. 将品牌风格与线框图相结合, 经过精心设计得到漂亮的界面.
第三步: 流程图
为了表明页面之间的交互流程, 我们会用线把页面连接起来, 并将其称之为流程图. 流程图将作为程序员在开发过程中的主要参考.
那么, 我们如何将传统的设计流程应用于 VR 设计中呢?
初始设置
画布大小
最简单的问题可能是最具挑战性的. 面对 360 度的画布, 用户很难知道从哪里开始交互. 事实上, UX 和 UI 设计师只需要关注空间中的某一部分即可.
我们花了几周时间来弄清楚 VR 设计所需的画布尺寸. 在设计移动端 App 时, 画布尺寸是由设备大小决定的: 比如 iPhone6 的尺寸为 1334*750 像素, Android 为 1280*720 像素.
要想将移动端 App 设计流程应用于 VR, 首先必须确定一个行之有效的画布大小.
下图看起来像是一个 360 度的环境被展开成了平面, 这种表现形式被称为等边投影. 在三维虚拟环境中, 这些投影会包裹在一个球体周围, 来模拟真实世界.
水平 360 度和垂直 180 度代表了投影的全宽. 我们可以以此来定义画布的大小: 3600*1800 像素.
这么大的画布很难顾全, 由于我们主要是为了绘制 VR 界面, 我们可以将注意力只集中在画布的一部分上. 基于 Mike Alger 早期对视觉舒适区域的研究, 我们可以把有用的界面分离出来. 用户感兴趣的区域集中在 360 度环境面积的九分之一, 它位于等矩形图像的中心, 大小为 1200*600 像素.
得出结论:
"360 视角" 画布: 3600 * 1800 像素
"UI 视角" 画布: 1200 * 600 像素
测试
在一块屏幕上使用两种视角的画布是为了测试."UI 视角" 的画布可以使我们的注意力集中在设计本身, 制作流程图也会更便捷. 同时,"360 视角" 画布用于预览 VR 界面, 为了获得真实的比例感, 使用 VR 头盔测试界面是很有必要的.
工具
在正式演练之前, 先了解下所需的工具:
sketch: 我们将使用 sketch 来设计界面和交互流程. 如果没有, 可以下载试用版. sketch 是首选的界面设计软件, 不过如果你更习惯于使用 Photoshop 或其他任何软件, 也是可以的.
GoPro VR 播放器: 它是一个 360 度界面查看器, 由 Gopro 提供, 免费. 可以用来预览设计并测试.
Oculus Rift (译者按: 是一款头戴 VR 显示器, 价格在 399 美元左右): 将 Oculus Rift 连接到 GoPro 播放器来进行测试.
实操演练
在本节, 我们将花费最多五分钟时间, 来练习下 VR 界面设计流程.
下载素材包(https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0), 里面有调整好的 UI 元素和背景图. 如果你想用自己的素材, 也是可以的.
1. 设置 "360 视角" 画布
首先, 创建一个 360 度视角的画布. 打开 sketch, 创建新文件, 并创建一个 3600*1800 像素的画布. 导入名为 background.jpg 的文件, 并将其放置在画布的中间. 如果想用自己的素材, 请确保背景图像的比例为 2:1, 并将其调整为 3600*1800 像素.
2. 设置 "UI 视角" 画布
如上文所述,"UI 视角" 的画布只选取 "360 视角" 的一部分, 并且只专注于 VR 界面设计. 因此, 我们在 360 旁边建立新的 1200*600 像素的画布. 然后, 将 360 视角的背景复制到新画布, 注意, 要放置在新画布的正中间, 并且不要调整大小. 我们要保留背景的裁剪版本.
3. 设计界面
我们将在 "UI 视角" 画布上设计我们的界面. 为了使练习更加清晰直观, 我们添加了一行卡片. 如果你想偷懒, 也可以从素材包里直接把名为 tile.PNG 的文件拖到画布中央. 在同一行复制三个 tile 文件, 然后把 kickpush-logo.PNG 文件拖出来放在 tile 上方.
4. 合并两个画布并且导出
将 "UI 视角" 的画布置于 "360" 画布的中间, 注意 "UI" 的图层要在 "360" 之上. 导出 "360" 画布的 PNG 格式.
5. 用 VR 设备测试效果
把刚刚导出的 PNG 拖进 GoPro VR 播放器的窗口, 用鼠标拖动图像来预览. 做到这一步我们就全部完成了! 很简单吧! 如果你电脑上有设置 Oculus Rift, 那么 GoPro VR 播放器会监测到它, 并且允许你用 VR 设备来预览图像. 根据你电脑的配置, 你可以在 MacOS 中处理显示设置.
技术因素
1. 低分辨率
有人说 VR 头盔的分辨率很差, 这不是完全正确的: 它相当于你手机的分辨率. 只是由于设备距离你的眼睛有 5 厘米远, 显示器看起来就不那么清晰了.
为了获得清晰的 VR 体验, 我们每只眼睛需要显示 8K 分辨率, 这相当于一个 15360*7680 像素的显示器. 目前的技术还做不到, 但是相信最终一定会实现的.
2. 文本可读性
受分辨率所限, 所有漂亮, 清晰的用户界面看起来都是像素化的. 这意味着文本将很难阅读, 并且一条直线上的元素会出现混叠. 设计过程中要尽量避免使用大文本块和过分细节化的 UI 元素.
收尾工作
1. 流程图
在移动端界面中常用的流程图, 也可以应用于 VR 界面. 将 "UI 视角" 界面连接成流程图, 这对于开发人员理解我们设计的总体架构是非常有用的.
2. 动效设计
制作漂亮的界面是一回事, 展示界面如何操作是另一回事. 让我们再一次用二维视角来展示. 用 sketch 设计好界面后, 用 AE 或 principle 来展示动效. 虽然得到的并不是 3D 体验, 但它可以用来作为开发团队的指导方向, 并且可以使客户在项目早期理解我们的想法.
你可能会觉得:"二维动效虽然很酷, 但是 VR 会比这个复杂的多." 是的, 确实是这样. 但问题是我们能多大程度上将我们当前的 UI/UX 设计应用在这个新的媒介上呢?
VR UI 设计可以走多远呢?
1. 虚拟与现实的距离
一些 VR 体验严重依赖于虚拟环境, 这时传统的置于顶部的操作界面并不是用户使用 VR 的最佳方式. 在这种情况下, 我们希望用户直接与环境本身进行交互.
想象一下, 你正在为一个高档旅行社开发一款应用. 你希望用最生动的方式将用户引流至各个潜在的度假目的地. 因此, 你邀请用户戴上头盔, 在你宽敞的办公室开始体验. 要从你的办公室切换到风景区, 用户需要先选择他们想去的地方. 他们可能会拿起一本旅游杂志, 快速浏览, 直到被某一页面吸引. 也可能在你的办公桌上有一些有趣的东西, 选择不同的东西可以把用户带到不同的地方.
显然这种操作很酷炫, 但也有一些缺点. 要达到完整的效果, 需要一个更先进的 VR 头盔和手柄. 另外, 相比以前移动端界面已经设置好了可以选择的选项, 这样的操作需要耗费更多的开发资源.
2. 商业与创新的平衡
事实上, 对大多数公司来说, 这些身临其境的体验在商业上并不可行, 除非拥有像 Valve 和 Google 那样几乎无限的资源, 否则开发出如上文描述的体验对他们而言太昂贵, 太冒险, 也太耗时. 这种体验可以生动的表现出你处于媒体和技术的前沿, 但是要想将你的产品市场化却并不容易. 毕竟, 可操作性是很重要的.
通常, 当一种新的形式出现, 先行者们 (这个世界的创造者和创新者) 会将它推向极致. 随着时间推移, 经过更深入的学习, 以及更多资金投入, 才会被用户广泛接受. 随着 VR 穿戴设备的普及, 更多的企业会发现商机, 将 VR 融入他们与消费者的互动之中.
目前来看, VR 应用程序使用的界面都很直观, 与人们习以为常的可穿戴设备, 手机, 平板和电脑等的应用程序基本无异, 这使得 VR 成为大多数公司可负担和值得投资的项目.
是时候搭上 VR 设计的火箭了!
希望这篇文章可以使 VR 看起来不那么可怕, 并激励你开始自己的 VR 设计.
常言道: 独行者步疾, 结伴者行远, 而我们希望与你一起并肩远行. 在 Kickpush, 我们认为每个公司最终都会有自己的 VR App, 就像如今每个公司都有自己的移动端网站一样. 所以我们制造了这艘关于 VR 的 "火箭", 希望世界各地的设计师可以共同努力, 大胆地去探索未知的领域. VR App 越早实现商业价值, 当下的生态系统就越早进化.
作为电子产品的设计师, 我们的下一个挑战是设计更加复杂的应用, 以及通过手柄进行更多类型的输入. 为了解决这些问题, 我们需要更高效率的原型工具, 来快速轻松地创建及测试设计. 我们团队会持续跟进类似的早期尝试及新工具的开发进展, 并且写在后续文章里.
来源: http://www.tuicool.com/articles/B3Q3M3a