提高VR设计流程效率的方法

用户头像
上海/UX设计师/5年前/536浏览
提高VR设计流程效率的方法
用户头像
mushan彬

文章主要讲的是解决vr设计过程中“如何与负责开发的同学如何更高效地进行沟通”的问题。


      在过去做设计项目期间,我参与或负责的VR项目里都会遇到一个问题,“如何与负责开发的同学如何更高效地进行沟通”的问题。就项目的结果看,我们同学间完成的项目体量虽然比不上steam里的那种热门vr应用,但是也能解决常见的vr需求问题。几个人的小团队基本能搞出一个可体验的、体验还不错的、体验时间短的小型项目。


      因为有问题,所以才会需要有解决方法。而面对这个问题, 我在自己的设计流程里使用了一些其他领域的方法,尝试提高设计流程的效率。就个人项目结果来说,这些尝试带来的效率提升还不小,能让我负责开发的同学更专注于他的任务。


      这个流程修改主要涉及两个角色:开发、设计。这两个角色可以是单独的个人,也可以是团队,只要职责范围没有完全偏离就行。 主要的方法是利用VR影片制作流程中的后期方法(ae 插件skybox)帮助“设计”建立一个简单的、可体验的VR设计稿,减少和“开发”的琐碎沟通,将真正的沟通时间用在有价值的设计修改和迭代工作上面。



-1-

传统流程中存在的问题点


      传统的VR设计流程是一个不断试错和迭代的流程,这意味着“开发”和“设计”这两个角色是需要不断进行沟通的,才能更快速地完成试错、迭代。这在刚利用VR技术开始进行产品设计的时候是没有问题的。

      为什么?因为刚开始,整个领域都是空白的、全新的。没有可以遵循的经验和准则,这样的工作流程是有利于产品设计工作的。快速试错和迭代可以帮助团队找到合适的方案(合理的交互方式、信息呈现方式、色彩方案等),同时也是创造力的源泉。但是,当团队拥有了一些VR设计的经验后、或者是行业拥有了被大多数从业者认可通用设计准则、又或者是产品设计需要更高难度的技术去支撑时,效率的问题就需要被考虑。

      想象一下,现在的你拥有一个开发团队、一个设计团队,这些能让你产出一个VR数字产品。同时你还有一个项目总时间,这约束着你需要在一定时间里利用已有资源(开发、设计)完成产品设计任务,更进一步是产出多个或更高质量的产品。前面的这些能让你在下一次产品设计项目里获得更多资源和支持。可是,在原有的设计流程上,开发和设计把大部分时间都消耗在沟通以及测试迭代上。而一个项目的时间是有限的,不能在规定时间交出成果,下一次在公司里获得的资源就会变少,甚至项目被砍掉。

      就像谷歌cardboard开发团队说的那样,VR项目就是不断地迭代修改,测试测试测试再测试。因此,带来的问题就是项目过程中经常需要设计师和开发人员一起沟通交流。因为VR环境的特殊性(360度无死角包围的数字环境),设计师没办法在电脑屏幕上完成关于VR设计想法的验证。有经验(或者有认真参考网上已有VR的设计原则)的设计师可以在面对电脑屏幕的时候完成对设计效果的想象,但是依旧不能百分百确定设计在VR环境里的效果。因此,设计师在有了一个设计想法后,需要在电脑上借助各种软件把想法实现出来,做出可以放入VR环境的设计物料。


      此时,设计师就需要对设计想法进行验证,也就到了最重要的一步,和开发的同学对接,请开发的同学把已设计好的设计物料放进游戏引擎(unity / ue4)或别的软件里的vr工程文件中,然后直接用头盔在vr工程文件里看,或者是让开发的同学导出可体验的工程测试文件,然后进行体验和检查。


     按照一般的情况,这个环节需要被不断的重复,以此验证设计的可行性,以及改进或否定设计想法,有时候还会给开发的同学提出新的需求或是修改反馈。


( 反馈循环、沟通循环、修改循环)


      但“开发”有他们的工作,有的基础功能需要大段的、持续的时间去开发和思考。又或者“开发”并不是专属于你这个项目的,还有其他项目的事情需要完成。这个时候,高效的项目沟通就很重要。通常来说, 拿出一个已经被“设计师”验证过设计效果的方案给开发看技术可行性会比拿出一个什么验证都没有做过的方案要更高效。因为一个没有被验证过的方案,既需要验证设计效果,又需要验证技术可行性,而这两个工作都会占用“开发”的工作时间。


      通常情况下,设计师只是需要简单验证一下效果,而一般验证的是“距离、色彩、文字大小、空间位置、朝向、界面样式”等可见性的内容。这里讨论的是类似vr界面的设计过程。验证的东西 一般不涉及到交互效果,也不需要界面动起来。所以,这个情况其实就是对一个低保真模型的验证。在app/网页的设计里,我们对设计方案的验证也是走向了“尽量减少开发人员工作量”的路上,才会有那么多原型软件(axure等)。可用性原则也都是一种帮助设计师在不麻烦其他业务角色的基础上使用的提高工作效率的工具。因此, 尽量把一些简单的验证工作留在设计师团队里,尽快且有效的验证方案效果,减少无意义的沟通,降低项目成本。

      所以,我们需要寻找一种更高效的方法,可以让设计团队可以完成频繁且琐碎的、简单的设计修改验证。这种方法需要是便于掌握的、可营造出vr环境的、高效的,甚至可能是设计师的一种已掌握技能的新用法。



-2-

VR影片的后期流程对设计的启发

      如果将目光投向影视行业,我们可以发现一种非常棒的替代方法,一种可以营造vr环境的方法。vr电影(或者说是全景视频)就是一种vr环境,也就是说,在他们的生产流程里或许有适合的办法。在全景视频(VR视频)的制作过程中,有一个后期的流程。前期对视频素材进行图像缝合之后就形成了基础的VR视频素材,将素材转入后期处理环节,在素材之上添加内容或进行视频后期。这个环节所添加的东西在最后的成片中,都是vr化的,你会感觉这些内容都在视频拍摄的环境里。



(这个动图里的环境完全可以把界面原型放进去,然后通过体验去验证设计效果)


      而这样的处理是满足“可营造出vr环境”的要求,甚至于借助这样的方法,设计师可以自己输出一个vr版本的设计方案。在输出VR设计相关的方案时,可以借助ae这个软件去营造vr环境。设计师只需要自己在ae里使用skybox这个插件作出一个工程文件即可,后续都可以将文件进行复用,将其变成一种类似ae模版的存在,分发给同组的其他设计师。真正需要做的就是懂一点ae的基本操作,能够把设计物料放进去模版里即可。导入设计好的物料素材,然后将素材图层改成3d的设置,把物料摆放在合适的位置,最后导出成图片格式。



(实际体验环境中的直线,在全景图上展示时会是曲线,这也是为什么不能直接在图上叠加界面原型的原因)


      ae可以导出一个vr图片格式的文件,这个文件就可以是添加了设计物料的设计方案,而这个方案是可以在vr头盔里观看的。




-3-
结论

      至此,提高效率的方法开始变得清晰。其实就是利用AE的插件skybox,将设计物料“后期”进去你的项目环境里(比如房地产展示,将界面原型放入房子环境中)。借此,设计师获得一个简单的低保真原型,同时也不需要麻烦开发。



(新的工作流程展示,黑圈处已经没有蓝色的存在,变成一个红色的循环流程)


      新流程 的核心在于“使用 ae这个软件,替代小规模修改和预览设计效果时需要麻烦“开发”同学的环节,从而形成一个“设计”角色内部的循环流程”



      详细的插件操作教程请复制油(翻)管(墙)链接:https://www.youtube.com/watch?v=pxNTFMtkxWU

      当我们可以做出一个vr版本的设计方案时,我们还不能完整解决问题。我们需要用vr头盔看下实际的效果。但是,普通的图片浏览器是不支持vr模式。这个时候我们可以有两种选择。第一种就是直接用 Gopro VR这样的vr播放器看方案,当然是连上你的vr头盔。第二种方案就是将你的vr设计方案(vr图片)上传到720云这样的全景平台上,还可以将多个图片(设计方案)组合成一个可以简单跳转的方案,验证流程的可行性。自己的手机,配上谷歌的纸板,简便高效,而且你还可以给其他同事体验,得到其他人的反馈。(在不涉及保密的情况下我个人更推荐第二种,便捷且能分享)

(新旧流程对比,黑框部分全红,部分简单任务可被“设计”承担) 



      至此,你产出了一个可体验的设计方案,并且还没有麻烦到开发的同学。后面要做的就是不断的在这个简便流程的支持下,尽可能地完成设计方案、验证设计想法,然后在和开发同学沟通的时候能够拿出一个相对更靠谱的设计方案,甚至可以展示一些效果,降低沟通成本。这种做法既方便自己验证设计效果、设计想法,还能提供效率,减少不必要的沟通。




图片来源:手绘图均为原创、静态图片来源谷歌图片、gif动图为油管视频录屏


原文发于公众号:Mushan设计公园


原创文章,输出不易,有转载需要请征求我同意。

如果觉得有用,那就 ball ball 你点个推荐吧。


公众号阅读链接:https://mp.weixin.qq.com/s?__biz=MzIyMDU3MDQ2Nw==&mid=2247483682&idx=1&sn=3b06e549ac90aa37582923e1df238b93&chksm=97c8b72ea0bf3e38aad6379f897b2dc8aff244dc943e57fddb9742f97c1c011e6ecd80c5c311&token=660710871&lang=zh_CN#rd

2
举报
|
6
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
新拟态风格 UI设计组件库
高级表盘系列UI源文件
手表表盘UI系列
【新年UI图标】钱包icon
【新年UI图标】会员icon
智能家居中心 简约 UI设计组件库
UI通用设计素材1
新能源APP应用UIKit
高级感金属拟物 UI设计组件库
【新年UI图标】珠宝icon
抽象液态渐变UI背景模版
钱包ui模板
UI应用平面图标
3D卡通UI界面图标可爱插画免扣素
我的钱包-UI界面设计-app
【新年UI图标】银行卡icon
【新年UI图标】秒杀icon
【新年UI图标】影音icon
【新年UI图标】汽车icon
盲盒APP UI设计
3D渐变流体抽象矢量UI背景图
UI界面 组件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI 登录界面设计模板包
你可能喜欢
相关收藏夹
大家都在看
登录注册