+ 设为首页 + 加入收藏

 
 
2017年都有哪些黑科技让你
2015新捷达怎么样_2
DNA的存在究竟是必然还是
IMDb给出的电影评分的计算
5月5日清晨新闻集体报道是
30平米的房间中放哪些简单
     西安港汇实业有限公司

销售热线:张经理: 15191895022
     白经理: 18109296883
QQ:2355807252 2355807260
技术热线:15191895022
传真:029-86189022 4006388838转00685

 
当前位置:主页 > 新闻中心 >
VR界面设计的整个工作流程是怎样的
发布者:知乎 发布时间:2019-12-03 14:46:03 阅读:402次 
摘要:全文大致参考视频:另外我这篇是界面相关的,如果你想看设计相关,可看《设计中是如何建立用户模型的?》———————————————————
全文大致参考视频:https://www.youtube.com/watch?v=-mcXAMDch7s另外我这篇是界面相关的,如果你想看VR设计相关,可看《VR设计中是如何建立用户模型的?》—————————————————————————————————————1、产品经理绘制流程图:给什么样的用户群设计的?用户想在你的VR应用中获得怎样的目标(满足怎样的需求)?在最下面的结尾处则为用户将要完成的目标(获得的结果&满足的需求)……—————————————————————————————————————2、产品助理&策划手绘线框图:—————————————————————————————————————3、产品设计师制作静态低保真原型把上面的草图在unity中做出来,比如平面上的方形做成unity中的方块。定义每个产品模块的功能。比如添加图片、标题和交互功能。戴上HMD查看效果:因为VR里的相对像素密集度太低了,而且又有一定程度的畸变,所以简单地把界面放到VR里就会看不清,也就是所谓的可读性太低。(VR中如何保证文字的『可读性』?)将页面『卷起来』:正如我在《为什么VR的界面要放在一张『弧面』上?》中所说的问题,此时得将页面卷过来一点儿——让你的视角到每个页面的距离相等,从而保证每个字有相同的『可读性』。将整个界面缩小到用户FOV能够一览无余的范围内:所以将页面控件放大,字放大,看起来整个显得小了?正如我在《VR中的界面和文字,该怎么排版?受什么因素影响和制约吗?》提到的,因为FOV的限制,用户需要转头、转眼来看到整个页面,那多累啊,于是将控件集中到这一块区域内。这种布局叫做volumetriclayout。—————————————————————————————————————4、交互设计师制作高保真原型尝试着在页面控件上添加材质(贴上可能用到的内容缩略图)。可以看到,即使放上高质量的图片,因为分辨率限制,能显示出来具有一定可读性的并不多。(理想的VR头显需要达到多少分辨率,才能消除纱门效应?现在做到了什么程度?)—————————————————————————————————————5、用户研究员和测试工程师进行用户研究和用户测试按照《VR中该如何进行用户研究(研究用户是怎么玩的)?》中所说的方法:(1)首先测试用户能否在360°的球面上找到一块不到100°的弧形平面?(那块弧形平面就是我们的主界面。)(2)用户知道icon的功能吗?(3)用户知道如何滚动页面吗?……—————————————————————————————————————6、视觉设计师进行美术制作这个时候视觉设计师(注:VR时代的视觉设计师为游戏美术师,比如场景设计师、角色设计师等)将界面放入场景中查看是否舒适。场景设计中最大的限制在于手机的性能,比如daydream的性能限制是:drawcall要小于100(为什么应该尽量减少drawcall?)polygon要小于100K(如何简化包围多边形?)pixelfill要低(三角形填充算法的主要实现细节和注意点是什么?)……是不是听得头都晕了?所以最好的解决办法是用模板着色器(stencilshader)——生成了一个ODS(omnidirectionalstereo,全方位立体)。一个球面的mask,最后得到一张三自由度的全景图,这也就是整个playstoreVR的背景360°图。用全景图代替即时渲染的几何体,极大地降低了实时渲染的工作量。不过它的问题是只有一张单薄的球形曲面(当然普通用户看不出来),所以UI控件只能挡在它前面,而不能放上去。(那实时渲染的三维动画和一个提前渲染的全景视频,在用户看起来有什么区别呢?小白用户可能看不出来,而我们内行有一种分辨的方法:那就是倾斜你的头部,马上就发现它只是张单薄的球面~)—————————————————————————————————————7、动效设计师设计动效&转场动画交互设计师和工程师讨论系统层级的设定,将不同层级的页面产生不同的层级关系,并设定页面滚动方式(VR的滚动视图『横向』滚动好还是『纵向』滚动好?)。动效设计师根据页面层级的设定设计动效,并用动效引导用户视线(VR页面动效设计中如何引导用户视线?)这是正常的界面,两个同级页面之间保持在同一Z轴上。《VR界面设计中为什么前后两个页面之间的Z轴深度差不能过大?》当一个页面被raycast戳中时,它微微向前抬起这里动效设计师设计了paralleleffect(这种交互的特点是,通过动画产生深度错觉):当raycast戳到jump页面的左上角时,页面右下角抬起。当raycast戳到jump页面右上角时,左上角微微抬起。动效设计师展示交互动效——未hoveron的状态:当被cursor选中时,整个icon相对于整个画面向前移动,icon的背景层和图形层分离,icon下面显示出APP的名称。然后就可以交给开发团队了。
相关文章
友情链接:
Copyright © 2010-2013 www.gongyezidonghua.com All Rights Reserved. 版权所有 西安港汇实业
地址:西安市未央区大明宫万达广场2号甲写1408 电话:029-86189022 传真:4006358835-00685
陕ICP备13005737号 网站地图