UI设计第一站 - UI设计师交流学习平台

VR界面设计的整个工作流程是怎样的?

时间:2016-06-01 17:02:00来源:知乎人气:

  视频链接:https://www.youtube.com/watch?v=-mcXAMDch7s

  另外我这篇是界面相关的,如果你想看VR设计相关,可看《VR设计中是如何建立用户模型的?

  —————————————————————————————————————

  1、产品经理绘制流程图:

  给什么样的用户群设计的?

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

  ……

  —————————————————————————————————————

  2、产品助理&策划 手绘线框图:

  —————————————————————————————————————

  3、产品设计师制作静态低保真原型

  把上面的草图在unity中做出来,比如平面上的方形做成unity中的方块。

  定义每个产品模块的功能。

  比如添加图片、标题和交互功能。

  戴上HMD查看效果:

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

  (VR中如何保证文字的『可读性』?)

  将页面『卷起来』:

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

  将整个界面缩小到用户FOV能够一览无余的范围内:

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

  这种布局叫做volumetric layout。

  —————————————————————————————————————

  4、交互设计师制作高保真原型

  尝试着在页面控件上添加材质(贴上可能用到的内容缩略图)。

  可以看到,即使放上高质量的图片,因为分辨率限制,能显示出来具有一定可读性的并不多。

  (理想的VR头显需要达到多少分辨率,才能消除纱门效应?现在做到了什么程度? )

  —————————————————————————————————————

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

  按照《VR中该如何进行用户研究(研究用户是怎么玩的)?》中所说的方法:

  (1)首先测试用户能否在360°的球面上找到一块不到100°的弧形平面?(那块弧形平面就是我们的主界面。)

  (2)用户知道icon的功能吗?

  (3)用户知道如何滚动页面吗?

  ……

  —————————————————————————————————————

  6、视觉设计师进行美术制作

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

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

  draw call要小于100(为什么应该尽量减少draw call?)

  polygon要小于100K(如何简化包围多边形?)

  pixel fill要低(三角形填充算法的主要实现细节和注意点是什么?)

  ……

  是不是听得头都晕了?所以最好的解决办法是用模板着色器(stencil shader)——生成了一个ODS(omnidirectional stereo,全方位立体)。一个球面的mask,最后得到一张三自由度的全景图,这也就是整个play store VR的背景360°图。

  用全景图代替即时渲染的几何体,极大地降低了实时渲染的工作量。

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

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

  —————————————————————————————————————

  7、动效设计师设计动效&转场动画

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

  动效设计师根据页面层级的设定设计动效,并用动效引导用户视线(VR页面动效设计中如何引导用户视线?)

  这是正常的界面,两个同级页面之间保持在同一Z轴上。《VR界面设计中为什么前后两个页面之间的Z轴深度差不能过大?》

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

  这里动效设计师设计了parallel effect(这种交互的特点是,通过动画产生深度错觉):

  当raycast戳到jump页面的左上角时,页面右下角抬起。

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

  动效设计师展示交互动效——

  未hover on的状态:

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

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

作者:胡痴儿2.0

链接:https://www.zhihu.com/question/46658219/answer/102236885

来源:知乎

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文链接地址:http://www.ui001.com/article/548.html

非特殊说明,转载请注明:本文转自UI设计第一站

【特色推荐】

设计尺寸看这里 http://www.ui001.com/chicun/

找素材一站就够 http://so.ui001.com/

UI设计网址导航 http://hao.ui001.com/

官方微博:@UI设计第一站发布干货与设计资讯

官方微信:搜索公众号名称UI设计第一站或微信号:uidiyi关注我们

官方QQ群:群号59411183点击自动加群,与2000名设计师交流设计,分享素材

建议:看到好的文章或素材,记得分享到微博等媒体,让更多的朋友知道,加入收藏夹也可以方便日后查阅。

  • 赞一下又不会怀孕
  • 收藏好文章要收藏噢
分享到:

设计资讯

更多

设计教程

更多

素材下载

更多

阅读排行

更多

服务中心

更多