keyboard_arrow_right
Your rating
starstarstarstarstar
Average
starstarstarstarstarVR-C v1.1
VR-C v1.1 - Windows
- HTC ViveFREE
- HTC ViveFREE

解锁VR界面设计效果图查看新招
众所周知,传统的VR界面设计效果图查看主要方式有二种:
一、将界面和背景合为一张360度全景图后查看,该方法不能正确获得界面与镜头的距离,设计还原上没有参考性。
二、若想获取真正的还原效果,需要到Unity中查看编辑,操作流程繁琐复杂。
为解决这个FUI设计师日常工作所遇到的问题,团队成员了解VR设备成像原理、舒适可视角度、研究界面空间距离、2D界面转3D场景的设计还原等问题,得出了以下研究结论:
1、舒适角度与距离的综合参考图:
2、VR界面设计尺寸规范:视觉界面设计分辨率=PPD*界面视角
通过计算及测试,同时为了方便计算,我们取值:
空间界面为1m ≈ 视觉界面分辨率1000px
随着VR硬件设备的升级 、PPD值的提高,这个值也会随之提高。
通过上面的计算机公式 ,我们可以知道界面设计分辨率的尺寸只与设备的PPD和界面视角有关,与距离无关。角度尺寸这个单位与二维、三维软件单位并不通用,通过三角函数可以知道,当角度不变,距离(邻边)变大时,显示界面(对边)等比例变大。因此:1000px设计尺寸在三维环境中1m远的距离显示为1m,5m远时显示尺寸为5m。我们把这个简称为距离无关像素。
常用界面设计分辨率建议
3、在2D界面转3D场景的设计还原问题:
在unity中Piexels Per Unity默认100,结合上面的结论1m=1000px,所以这里的默认值可以直接修改为1000,
另一种方法:眼前界面也可以通过层级达到此效果:
最外 Base 层,用于调整所有 UI 元素的视距,以及整体的缩放关系。上面讲过距离无关像素,距离与缩放同时变化。
中间 Canvas 层,用于让各单位统一。Unity 以 m 为单位的,前文我们讲过1m=1000px,所以在 Unity 中需要将其换算成 0.001m。
内部 UI 各元素层,这一层的各物件的尺寸属性和二维软件中的一样。例如,你在 PS里设计了一个 270x150 的矩形,那么到 Unity 里这一层的长宽尺寸也直接写 270x150,完全不用管距离、缩放、单位换算之类的问题了。
经过层层推敲、反复测试后,VR界面查看工具终于VR-C华丽诞生。
该产品可应用于VR终端内预览视觉设计图呈现效果,它将UNITY繁的琐设置流程进行标准化,减少反复设置与测试修改过程,达到快速预览视觉设计图的效果。还能通过实时修改距离、缩放等数据,输出工程师需要的设计还原参数。
VR-C颠覆了传统的VR界面效果图查看方式,简化流程、节省时间、使设计效率大大提升。
想要解锁VR界面设计查看新招,快来下载体验!(手机端暂时提供三星 Gear VR版,PC端暂时提供HTCVive版,其他版本正在研发中,敬请期待!)
Setup Instructions
VR查看器操作使用说明
一、产品基本信息
1、产品介绍
该产品是通过WEB服务器上传视觉设计效果图,即可在VR终端设备上实时预览视觉稿的设计效果,可视觉效果进行比例缩放、调整空间距离、旋转、平移等的细节调试工作,测试视觉稿在终端设备上的还原效果,并根据实际视觉效果进行设计修改。
2、目标用户
针对从业VR行业的FUI设计师、研发人员、UE人员等VR产品开发团队人员。
3、安装环境
(1) VR设备
目前使用的VR设备为三星 Gear VR 4代 、HTC VIVE
(2) 手机设备
三星Galaxy(盖乐世)Note8,S8,S8+,S7,S7 edge,Note5,S6 edge+,S6,S6 edge
(3) 安卓系统
Android版本:6.0.1
(4) WEB资源上传地址
在使用查看器预览效果前,需通过WEB端服务器地址:http://192.168.57.122:8081/UploadPic.aspx。上传需要预览的图片资源,即可在VR设备中进行查看。
二、使用说明
1. 图片信息查看
当需要查看图片信息时,通过对焦选中需要查看的图片,此时图片上方信息栏中即显示当前图片的详细信息(距离、分辨率、缩放比例、旋转方向)。
2. 辅助信息说明
产品界面中的红线为距离参考标线(1圈为1米),绿色横向视角舒适区域,蓝色横向视角辅助区域。
3. 五大功能操作介绍
以理五大功能操作前,需通过WEB端上传图片资源到服务器上后,移动VR端方可显示该 资源,并进行操作。
(1) 平移功能
① 当需要平移对象时,对焦到“平移”功能按钮,开启“平移”功能;
② 再对焦到需要操作“平移”功能的对象上,选定对象;
③ 最后单击/长按触摸板的4个方向键进行平移操作即可。
(2) 距离功能
① 当需要拉近或拉远对象时,对焦到“距离”功能按钮,开启“距离”功能;
② 再对焦到需要操作“距离”功能的对象上,选定对象;
③ 最后单击/长按触摸板的前后方向键进行距离远近操作。
(3) 缩放功能
① 当需要缩放移对象时,对焦到“缩放”功能按钮,开启“缩放”功能;
② 再对焦到需要操作“缩放”功能的对象上,选定对象;
③ 最后单击/长按触摸板的前后方向键进行大小缩放操作。
(4) 旋转功能
① 当需要旋转对象时,对焦到“旋转”功能按钮,开启“旋转”功能;
② 再对焦到需要操作“旋转”功能的对象上,选定对象;
③ 最后单击/长按触摸板的4个方向键进行X轴和Y轴的旋转操作。
(5) 重置功能
① 当需要重置对象时,对焦到“重置”功能按钮,开启“重置”功能;
② 再对焦到需要操作“重置”功能的对象上,选定对象,即可完成重置操作。
Minimum Requirements
Android 6.0.1, SAMSUNG Gear VR 4,HTC VIVE
Playing Instructions
It is free.