从 0 到 1 的 VR 界面设计之路

正文

请到「今天看啥」查看全文

2. 视觉设计

这一阶段的特性和交互体验已大大提升。线框全部应用了《经济学人》的品牌风格，漂亮的界面搞定了。

3. 设计图

将屏幕列成流程图，并将各自的联系和交互表示出来，就有了开发者作为主要参考的设计图。

那么如果把这个流程用于虚拟现实呢?

构建

画布尺寸

看似简单的问题可能最难解决。立体画布很难决定从哪入手。UX/UI设计者其实只需专注做好立体空间中的一部分即可。

我们花了数周才搞清 VR 的合理画布尺寸。移动应用的画布尺寸是由设备屏幕来决定的。比如 iPhone6 是 1334 × 750 像素，安卓大概是 1280 × 720 像素。

移动应用工作流程用于 VR 用户界面的话，首先要知道 VR 画布多大合适。

下图是立体环境压扁之后的样子，即球面投影。3D 虚拟环境下，这些投影围成一个球面来模仿真实的世界。

全宽投影是 360 度水平投影加 180 度纵向投影，可以此定义 VR 画布尺寸应为 3600 × 1800 像素。

这么大尺寸应付起来不容易，但 VR 应用的界面才是最重要的，所以只用在一部分画布上下功夫就够了。

基于 Mike Alger 对舒适可视范围的早期研究，适合做界面的那一块画布应在球面投影的正中间，占立体环境的1/9，1200 × 600像素。

总结：

• “立体视图”：3600 × 1800像素

• “UI视图”：1200 × 600像素

测试

为了更好测试，在同一个屏幕上使用两种视图。“UI视图”只专注于界面，让流程设计更方便；而“立体视图”是为了预览 VR 环境下界面的效果，比对两个视图的比例，需要使用 VR 头盔。

用Avocode软件可以对设计进行快速视觉比对

请到「今天看啥」查看全文