路野

随着5G的发展和新冠疫情对整个VR(虚拟现实)行业的影响,商用VR内容迅速崛起,2021年VR在细分垂直行业将快速渗透,随着VR产业链的逐步完善,VR对整个行业的赋能将展现强大的飞轮效应。

图片

 

前言

随着5G的发展和新冠疫情对整个VR(虚拟现实)行业的影响,商用VR内容迅速崛起,2021年VR在细分垂直行业将快速渗透,随着VR产业链的逐步完善,VR对整个行业的赋能将展现强大的飞轮效应。

相信同学们都知道VR/AR/MR/XR这些词汇,但是可能不太了解具体是什么意思,他们的关系是怎么样的呢?简单来说:XR=VR+AR+MR(X也可以理解为一个变量),下图是虚拟现实(VR)、增强现实(AR)、混合现实(MR)和扩展现实(XR)这些概念的关系图,我们的产品(临感)VR界面设计就是基于手机端所呈现的媒体虚拟空间。

图片

手机VR界面(媒体虚拟空间)与扩展现实的关系框架图

a

01.何为奇境

“身临其境,真实之感”是我们临感的slogan,基于展示端视觉探索的方向和品牌融合,我提取了“其境”的谐音,改动了“奇”字,寓意“出奇制胜”,我们赋予它神奇之境的理念是想在这个领域做出不一样的东西,带给大家更神奇的感受和体验。随着B端合作用户的激增、业务的完善及拓展,最初的临感官网在设计风格和框架上,已经无法承载更多业务拖展,同时也无法诠释「VR聚合平台」这个概念的诉求。因此,我们在此契机之下,由设计发起这次临感官网改版项目。 

a

02.VR界面的独特性

我们日常见到的界面,元素基本上都是二维的(图片、图标或者卡片等等)
 

图片

图片来源:Dribbble-Real Estate Mobile-Fireart Studio

 

下面是比较概念性的VR界面,除了常见的按钮图标,所有的UI元素都跟后面的全景空间做了融合,降低了UI元素对全景空间的干扰。
 

图片

图片来源:Dribbble-BuyHome 🏠- Mobile Search App-Natan Jabłoński

 

不难看出VR界面设计的重点在于沉浸感和辅助性,临感展示端的主要业务场景是VR看房和装修,在满足用户基础需求的同时,要站在更高的角度去思考设计,帮助用户获得真实感和舒适的用户体验。

 

03.探索目标          

此次风格探索的核心目标有三个:

1.美观度提升(有美感和有趣的界面会使人产生愉悦感)

2.灵活可拓展(在现有基础上以最小成本去做优化)

3.落地性与概念性结合(做设计探索也要兼顾概念稿的落地性,不然设计的再好看都是空中楼阁,无法落地)

 

图片

 

04.多维度思考探索方向及视觉风格     

确定了目标之后,带着形色字构质这几大核心维度去思考如何将灵感和概念具象化,必不可少的视觉探索三件套(脑暴-提炼关键词-视觉映射)这里就不展开描述了,这个阶段主要是考验我们的检索能力和抽象思维。

图片

 

05.线上效果和风格稿对比 

界面用毛玻璃和线条等元素去塑造科技感和通透感。在视觉探索的部分,我们可以大胆一些,尽可能脑爆出更多的方案,然后再基于现实情况和落地性去动态的调整设计稿。

图片

 

06.功能分层

展示端界面内容分为三个层次:

1.最底层是VR全景图,作为漫游看房的基础容器

2.全景图上一层是3D元素

3.最顶层是2D元素

图片

 

07.预览户型图优化

此模块位于界面左上方,是浏览信息的第一顺位,承载的核心功能是观察用户当前位置以及户型的分布情况。这个模块的优化策略是精简户型图信息,用黑色背板和白色线条来呈现,降低界面上方多余的干扰信息,增加通透感,给用户更良好的漫游体验。

图片

 

08.场景内点位切换优化

在3D的设计场景中,我们的目标是在不打扰用户的前提下,帮助用户充分了解这个空间,这是从2D到3D设计思维上的一个转变,就拿点位切换按钮来说,这个按钮由箭头和文案组成,结构由上下变成左右,箭头的方向会随着房间位置而改变,这样可以引导用户漫游的方向,而且圆角按钮也更有亲和力。

图片

 

09.新方案优势-漫游场景

界面的可视区域增大了,元素更加精简;场景内点位切换按钮的细节和动效也在指引方向的同时提升了用户好感度;功能按钮的模块化可以提升用户的感知度;楼层和房间切换按钮的层级划分也更加清晰;部分按钮改成icon+文字的样式可以让用户更直观地知道这个功能是什么意思,降低了用户的学习成本。

图片

 

10.新方案优势-带看场景

界面整体元素和模块都是基于现有版本做的优化,尽可能降低了开发成本;调整了按钮的高度,可以在元素较多的场景当中无障碍呈现,提示气泡用渐隐的交互样式增加用户的感知度;主要连接区采用遮罩通屏的方案增加展示内容的长度,提升坪效,也可以很好的区分场景的层级关系。

图片

 

11.动态效果

动画地址

 

12.新风格

图片

图片

 

13.结语

之前也提到过,商用VR内容在细分领域的后劲儿十足,设计师也需要站在更高的角度去理解整个行业和拓展更多的可能性;就像是《可能性法则》中提到的“透过波粒二象性发现无限潜能,在量子波塌缩的一刻给自己更多选择;从非此即彼的二元思维跃升到量子思维”这种全新的认知鼓励我们摆脱旧有的局限,拥抱不确定性带来的无限潜能。设计之路从来都是如此,小朋友不要停止思考,共勉。
 
参考文献:螳螂财经、艾瑞咨询、前瞻产业研究院、XR科普(Extended Reality 扩展现实)、手机载体下VR技术的发展及应用-孟凡墨。
 

图片

 

原文地址: 58UXD(公众号)

作者:环铁艺术家

图片

 

转载请注明:学UI网 » 项目总结丨身临“奇境”-VR界面风格探索

登录收藏
 
你可能喜欢的:
HMI设计需要遵循什么设计原则?HMI设计需要遵循什么设计原则?
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
最近访谈了海外用户,总结几点意外收获最近访谈了海外用户,总结几点意外收获
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
改作业 | 有一说一,这个改稿效果真不错!改作业 | 有一说一,这个改稿效果真不错!
15条APP体验设计的思路分析15条APP体验设计的思路分析
设计师如何提升总结力设计师如何提升总结力
淘宝订单页改版分析:如何提高支付转化率淘宝订单页改版分析:如何提高支付转化率
如何高效地进行网页设计?重点关注这些要素如何高效地进行网页设计?重点关注这些要素
工作经验| B 端产品组件设计细节及经验分享(三)工作经验| B 端产品组件设计细节及经验分享(三)