VR界面设计的整个工作流程到底是怎样的
01 产品经理绘制流程图
在开始VR界面设计前，产品经理需要明确两个关键问题：
- 明确目标用户群体：确定是为哪些特定的用户群设计VR应用。
- 明确用户目标与需求：了解用户想在VR应用中达成的目标以及希望满足的需求，在流程图的结尾处应清晰呈现用户将要完成的目标、获得的结果以及满足的需求。
02 产品助理&策划手绘线框图
产品助理和策划人员根据产品经理的流程图，手绘线框图，为后续的设计工作提供初步的框架。
03 产品设计师制作静态低保真原型
原型制作
产品设计师将手绘草图在Unity中实现，例如把平面上的方形转化为Unity中的方块。同时，定义每个产品模块的功能，如添加图片、标题和交互功能等。
效果查看与优化
- 可读性问题处理：由于VR环境中相对像素密集度低且存在一定程度的畸变，直接将界面放入VR中会导致可读性差。因此，需要将页面“卷起来”，使视角到每个页面的距离相等，保证每个字具有相同的“可读性”。
- 布局优化：受FOV（视场角）限制，用户转头、转眼查看整个页面会很不方便。所以要将页面控件和文字放大，然后把整个界面缩小到用户FOV能够一览无余的范围内，将控件集中在该区域。这种布局方式被称为volumetric layout。
04 交互设计师制作保真原型
交互设计师尝试在页面控件上添加材质，贴上可能用到的内容缩略图。但由于分辨率限制，即使使用高质量图片，能显示出具有一定可读性的内容也不多。
05 用户研究员和测试工程师进行用户研究和用户测试
按照《VR中该如何进行用户研究（研究用户是怎么玩的）？》中所述的方法进行：
- 界面查找测试：测试用户能否在360°的球面上找到一块不到100°的弧形平面（即主界面）。
- 功能认知测试：检查用户是否知道icon的功能。
- 操作认知测试：查看用户是否知道如何滚动页面等。
06 视觉设计师进行美术制作
场景适配
VR时代的视觉设计师（如游戏美术师，包括场景设计师、角色设计师等）将界面放入场景中，检查其是否舒适。
性能限制与解决办法
场景设计受手机性能限制，以Daydream为例：
- Draw call限制：draw call要小于100（可参考“为什么应该尽量减少draw call？”）。
- Polygon限制：polygon要小于100K（可参考“如何简化包围多边形？”）。
- Pixel fill限制：pixel fill要低（可参考“三角形填充算法的主要实现细节和注意点是什么？”）。
为解决这些问题，可使用模板着色器（stencil shader）生成ODS（omnidirectional stereo，全方位立体），得到一个球面的mask和一张三自由度的全景图，这也是整个Play Store VR的背景360°图。用全景图代替即时渲染的几何体，能极大降低实时渲染的工作量。不过，这种方法的缺点是只有一张单薄的球形曲面，UI控件只能挡在它前面，而不能放置其上。
实时渲染与全景图区别
实时渲染的三维动画和提前渲染的全景视频在用户看来可能有区别，内行可通过倾斜头部来分辨全景图只是一张单薄的球面。
07 动效设计师设计动效&转场动画
系统层级设定
交互设计师和工程师讨论系统层级的设定，确定不同层级页面的关系，并设定页面滚动方式（可参考“VR的滚动视图‘横向’滚动好还是‘纵向’滚动好？”）。
动效设计
动效设计师根据页面层级设定设计动效，用动效引导用户视线（可参考“VR页面动效设计中如何引导用户视线？”）。例如，正常界面中两个同级页面保持在同一Z轴上（可参考“VR界面设计中为什么前后两个页面之间的Z轴深度差不能过大？”）；当页面被raycast戳中时，页面会有相应的抬起效果；当raycast戳到jump页面的不同角落时，页面会有不同的抬起表现。
交互动效展示
动效设计师展示交互动效，如未hover on的状态，当被cursor选中时，整个icon相对于整个画面向前移动，icon的背景层和图形层分离，icon下面显示出APP的名称。完成这些后，就可以将设计成果交给开发团队。