01 产品经理绘制流程图

• 给什么样的用户群设计的？

• 用户想在你的VR 应用中获得怎样的目标（满足怎样的需求）？在最下面的结尾处则为用户将要完成的目标（获得的结果&满足的需求）

02 产品助理&策划 手绘线框图

03 产品设计师制作静态低保真原型
把上面的草图在unity中做出来，比如平面上的方形做成unity中的方块。

定义每个产品模块的功能。
比如添加图片、标题和交互功能。

戴上HMD查看效果：
因为VR里的相对像素密集度太低了，而且又有一定程度的畸变，所以简单地把界面放到VR里就会看不清，也就是所谓的可读性太低。

将页面『卷起来』：
正如我在《为什么VR的界面要放在一张『弧面』上？》中所说的问题，此时得将页面卷过来一点儿——让你的视角到每个页面的距离相等，从而保证每个字有相同的『可读性』。

将整个界面缩小到用户FOV能够一览无余的范围内：
所以将页面控件放大，字放大，看起来整个显得小了？正如我在《VR中的界面和文字，该怎么排版？受什么因素影响和制约吗？》提到的，因为FOV的限制，用户需要转头、转眼来看到整个页面，那多累啊，于是将控件集中到这一块区域内。

这种布局叫做volumetric layout。

04 交互设计师制作保真原型

尝试着在页面控件上添加材质（贴上可能用到的内容缩略图）。
可以看到，即使放上高质量的图片，因为分辨率限制，能显示出来具有一定可读性的并不多。

05 用户研究员和测试工程师进行用户研究和用户测试

按照《VR中该如何进行用户研究（研究用户是怎么玩的）？》中所说的方法：
（1）首先测试用户能否在360°的球面上找到一块不到100°的弧形平面？（那块弧形平面就是我们的主界面。）

（2）用户知道icon的功能吗？
（3）用户知道如何滚动页面吗？
……

06 视觉设计师进行美术制作

这个时候视觉设计师（注：VR时代的视觉设计师为游戏美术师，比如场景设计师、角色设计师等）将界面放入场景中查看是否舒适。

场景设计中最大的限制在于手机的性能，比如daydream的性能限制是：

• draw call要小于100（为什么应该尽量减少draw call？）

• polygon要小于100K（如何简化包围多边形？）

• pixel fill要低（三角形填充算法的主要实现细节和注意点是什么？）

……
是不是听得头都晕了？所以最好的解决办法是用模板着色器（stencil shader）——生成了一个ODS（omnidirectional stereo，全方位立体）。一个球面的mask，最后得到一张三自由度的全景图，这也就是整个play store VR的背景360°图。
用全景图代替即时渲染的几何体，极大地降低了实时渲染的工作量。

不过它的问题是只有一张单薄的球形曲面（当然普通用户看不出来），所以UI控件只能挡在它前面，而不能放上去。

（那实时渲染的三维动画和一个提前渲染的全景视频，在用户看起来有什么区别呢？小白用户可能看不出来，而我们内行有一种分辨的方法：那就是倾斜你的头部，马上就发现它只是张单薄的球面~）

07 动效设计师设计动效&转场动画

交互设计师和工程师讨论系统层级的设定，将不同层级的页面产生不同的层级关系，并设定页面滚动方式（VR的滚动视图『横向』滚动好还是『纵向』滚动好？）。

动效设计师根据页面层级的设定设计动效，并用动效引导用户视线（VR页面动效设计中如何引导用户视线？）
这是正常的界面，两个同级页面之间保持在同一Z轴上。《VR界面设计中为什么前后两个页面之间的Z轴深度差不能过大？》

当一个页面被raycast戳中时，它微微向前抬起。

这里动效设计师设计了parallel effect（这种交互的特点是，通过动画产生深度错觉）：
当raycast戳到jump页面的左上角时，页面右下角抬起。

当raycast戳到jump页面右上角时，左上角微微抬起。

动效设计师展示交互动效——
未hover on的状态：

当被cursor选中时，整个icon相对于整个画面向前移动，icon的背景层和图形层分离，icon下面显示出APP的名称。

然后就可以交给开发团队了。