IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

VR界面设计实践指南

Catherine • 2017-05-07 09:45 • 交互设计

一篇VR实践指导文章。Smashing Magazine好久没有这样新一些的东西了。实践指导性质的内容非常简单易行,个人感觉需要重点关注的是将传统UX设计流程及方法融入VR产品设计的思路,以及作者对于VR设计开发工作前景的观点。新技术,新事物,大风刮去之后留下的一批实践者所始终坚持的那些,才是真实的、有长期价值的东西。这是走心;集体意淫无非走肾而已。

文章目录[隐藏]

  • VR app的类型
  • 传统界面设计流程
    • 传统流程,新领域
  • 设计文档配置
    • 画布尺寸
    • 测试
    • 工具
  • VR界面设计流程
    • 1. 创建360°视图
    • 2. 创建界面视图
    • 3. 设计界面
    • 4. 合并画板并导出文件
    • 5. 在实际设备当中测试
  • 技术缺陷
    • 低分辨率
    • 文本可读性
  • 完善设计流程
    • 流程图
    • 动效设计
  • 环境互动还是界面互动?
    • 新媒介的渐进式普及
    • 是时候起步了

一篇VR实践指导文章。Smashing Magazine好久没有这样新一些的东西了。实践指导性质的内容非常简单易行,个人感觉需要重点关注的是将传统UX设计流程及方法融入VR产品设计的思路,以及作者对于VR设计开发工作前景的观点。新技术,新事物,大风刮去之后留下的一批实践者所始终坚持的那些,才是真实的、有长期价值的东西。这是走心;集体意淫无非走肾而已。

VR界面设计实践指南

下面进入译文。

对于很多设计师而言,VR仍是一片未知领域。在过去的几年当中,我们见证了VR硬件设备与软件产品的爆发式增长。站在体验的角度来看,从枯燥无聊到精彩绝伦,不同类型的VR平台与软件形式所带给我们的也不一而同,其中的复杂度与使用效率方面的差异也相当明显。

作为传统UX设计师,踏入全新领域的第一步是最为困难的。我们知道,因为我们经历过。别担心,在本文中,我们将详细的分享VR app在设计方面的具体流程,包括相应的工具及方法,希望各位读过之后能够掌握到足够的知识去运用到自己的VR项目设计当中。要实现这一目标,你不必成为什么专家,但学习热情以及将能力运用到新领域当中的渴望则是必需的。希望我们最终能够通过更多的分享与交流来最大程度的推进VR的发展速度。

VR app的类型

从设计的角度讲,VR app大致由“环境”与“界面”这两部分所组成。

你可以将“环境”理解为戴上VR头显之后所进入的那个世界,譬如你所身处的那个虚拟行星表面,或是正在带你飞驰的过山车。

“界面”指用户为了游历环境或控制流程体验而必须与之进行互动的一系列虚拟对象。

所有的VR app都可以根据这两个组成部分的复杂度差异而被划分到四个象限当中:

VR界面设计实践指南

左上方象限当中最具代表性的就是模拟器类产品,例如前面提到的提供过山车体验的VR app。这类产品通常会构造出完整的虚拟环境,但不提供任何界面,用户只能全程被动体验。

VR界面设计实践指南

相对应的,归属于右下方象限中的产品通常会提供完善的界面交互体系,但在环境构建方面的笔墨通常较淡,甚至不提供环境。三星Gear VR的首屏就是一个典型的例子。

VR界面设计实践指南

虚拟环境的设计工作需要纯熟的3D建模能力,这使得我们这些2D界面领域的交互或视觉设计师望而却步。但另一方面,VR产品当中的界面设计部分却是我们施展能力的大好舞台。

我们的工作室设计的第一款全界面式的VR产品是为《经济学人》杂志打造的app。我们负责设计,合作方Visualise工作室负责开发实现与内容创作。

VR界面设计实践指南

在本文中,我们将以这款app的设计流程作为案例,首先对VR app的整体设计方式进行了解,然后重点聚焦于界面设计方面。 你也可以到Oculus的官网下载用于Gear VR的《经济学人杂志》VR app。

传统界面设计流程

我们多数人对于移动app的设计流程早已轻车熟路,然而VR界面的设计工作流程仍然没有所谓的标准定义。我们在着手启动第一个VR app项目时,首先做的就是对设计流程进行定义。

传统流程,新领域

我们第一次体验Gear VR时便注意到其中的界面设计与传统移动app有着相似之处,譬如在交互流程方面,用户都是通过与界面元素的互动来实现页面间的跳转。当然这个例子太过笼统,目前只要记得这个结论便好。因此我们多年以来所熟悉的那套“尝试、验证、迭代”的产品设计思维依然可以派上用场,我们这些“传统”设计师距离VR设计其实并没那么远的样子。

既然如此,我们不妨在正式进入VR界面设计话题之前,先来简单的梳理一下传统移动app的设计流程。

1. 线框稿

我们首先会通过线框稿的快速迭代来定义交互流程与界面布局。

VR界面设计实践指南

2. 视觉稿

在这个阶段,功能与交互方式应该已经得到明确的定义,设计师需要将视觉设计语言以及品牌规范运用到线框稿当中,雕琢出最终的视觉稿。

VR界面设计实践指南

3. 流程图

我们还需要通过界面组织起功能流程,将界面稿串联起来,添加必要的逻辑走向和描述,形成一份流程图,主要目的是帮助开发人员理解产品的功能逻辑。

VR界面设计实践指南

那么,我们应该怎样将这套流程运用到VR设计当中呢?

设计文档配置

画布尺寸

有时,最基础的问题反而会最具挑战性。当你面对着360°的画布时,往往不知应该从何入手,毕竟我们多年来一直习惯于面对那些尺寸固定的2D界面窗口。

我们花费了几个星期的时间去摸索怎样的画布规格最适于承载VR空间。当你设计移动app时,画布规格通常由设备尺寸所决定,譬如750×1334对应着iPhone的基础尺寸,而720×1280则适于Android平台。同理,在试着将传统设计流程融入到VR产品的过程中,我们也需要找到最便于呈现虚拟3D空间全貌的画布尺寸。

下图便是360° VR环境以2D形式呈现出的样子。这种形式叫做“圆柱投影”(Equirectangular Projection)。在3D虚拟环境中,这样的投影图形会被包围在球形空间当中,模拟出真实世界的样子。

VR界面设计实践指南

投影图片的宽度代表着3D世界当中360°的横向视野,高度代表着180°的纵向视野。基于此,以像素为单位,我们将画布的尺寸设定为3600×1800.

VR界面设计实践指南

在如此巨大的画布上工作还是有些挑战性的。不过由于我们主要关注于app当中界面部分的设计,所以在多数时候可以只聚焦在画布的一小部分上。

参考着Mike Alger关于VR视野舒适区域的早期研究,我们可以从整个画布当中割离出一块区域专门用于呈现界面相关的元素。我们选定的区域占据整个画布的1/9,位于正中,尺寸为1200×600.

VR界面设计实践指南

归纳下来,以像素为单位:

  • 360°视图:3600×1800
  • 界面视图:1200×600

VR界面设计实践指南

测试

我们使用两块独立的画布来进行测试,其中一块(1200×600)用于承载界面视图部分,使我们得以更好的聚焦于界面设计流程,而另一块(3600×1800)则专门用于呈现环境的部分。为了验证界面区域的尺寸是否合理,我们必须通过实际的VR设备进行测试体验。

VR界面设计实践指南
使用Avocado,你可以很轻松的通过可视化的方式直接比较不同版本的设计方案。

工具

在讲解实际设计流程之前,我们先来了解一下需要用到的工具:

  • Sketch:我们仍然使用Sketch来设计界面并制作流程图。如果你还没用过Sketch,不妨到官网下载一份试用版;如果你更习惯于Photoshop一类的工具,也无妨,事情可以照做。
  • GoPro VR Player:一款来自GoPro的360°内容播放器,免费。我们通过它在实际VR设备环境中预览设计方案。
  • Oculus Rift:搭配GoPro VR Player进行实境测试。

VR界面设计流程

接下来,我们将进入VR界面的实际设计流程,一起完成一个简单的案例;实际操作时间加在一起也不会超过五分钟的样子。

VR界面设计实践指南

你可以下载案例素材包,其中包含了所有将会用到的UI元素图形及环境背景图片。当然,使用自己的素材也完全没问题。

1. 创建360°视图

首先,我们要创建用来呈现360°环境背景的画布。在Sketch当中新建文档,添加一个画板(Artboard),尺寸为3600×1800像素。

将素材包中的background.jpg拖入Sketch,置于画板正中。如果你在使用自己的素材图片,也要确保2:1的宽高比,并将尺寸设置为3600×1800.

VR界面设计实践指南

2. 创建界面视图

正如前面所说,我们的界面区域实际上是从360°视图当中割离出来的一部分,使我们可以更好的聚焦于界面部分的设计。

添加一个新画板,尺寸为1200×600,然后将“360°视图”画板当中的背景图片复制到新画板中,置于正中,不要进行任何缩放,我们需要的就是这样一块局部区域。

VR界面设计实践指南

3. 设计界面

接下来要实际进行界面的设计了。我们会尽量保持练习的简单易行,通过瓷片的形式展示界面选项。如果懒得制作自己的素材,你可以直接从刚刚下载的文件当中找到tile.png,并拖到画布正中,然后复制两份,并排放置。

从素材包中找到kickpush-logo.png,拖到画布中,放置在中间瓷片的上方。

VR界面设计实践指南

看上去还不坏?

4. 合并画板并导出文件

接下来的工作很有趣。在左侧的画板与图层列表当中,确保界面视图画板位于360°视图画板的上方,然后在画布当中将界面视图画板与360°视图画板层叠起来,横向与纵向均保持居中。

选中360°视图画板,导出PNG格式的文件。在最终的实际图片当中,界面视图区域与背景整体是无缝衔接的。

VR界面设计实践指南

5. 在实际设备当中测试

打开GoPro VR播放器,将刚刚导出的PNG文件拖进播放窗口。使用鼠标拖拽窗口中的图片,便能以360°的方式预览整个环境样式。

实际设计流程到这里实际上已经结束了。比想象当中的简单很多?

如果你有Oculus Rift,GoPro VR播放器应该可以检测到,接下来你就能通过实际设备浏览我们制作的VR环境及界面了。如果你使用Mac,那么可能需要在系统当中进行一些设置才能实现预览。

VR界面设计实践指南

技术缺陷

低分辨率

目前VR头显的分辨率还很不理想。当然,对于移动VR来说,具体规格还取决于手机本身。无论怎样,考虑到屏幕与眼睛的实际距离通常不会超过5厘米,显示效果还是很难用清晰二字形容。

要确保最理想的效果,对应每只眼睛的分辨率都需要超过8K,换算成像素就是15360×7680。现实当中的技术水平距离这样的标准还很远,但并非远不可及,未来总会得以实现。

文本可读性

受到显示设备分辨率的局限,你所设计的漂亮界面在实际当中会有明显的像素感,这也意味着文本内容将变得更加难读,锯齿的情况会比较严重。因此,在目前阶段,要尽量为VR界面中的文字使用较大的字号,同时尽可能提升其他界面元素的清晰度。

完善设计流程

流程图

还记得前面提到的移动app界面流程图吗?我们同样可以将其运用到VR界面设计当中。按照功能流程将界面组织成逻辑清晰的流程图,开发人员将很容易理解产品的整体架构。

VR界面设计实践指南

动效设计

完成了漂亮的静态界面设计,接下来的问题是怎样将动态交互效果呈现出来。我们同样从两个维度入手来解决这个问题。

基于Sketch当中的界面设计,我们通过Adobe After Effects与Principle来配合实现动效的展示。虽然最终输出的并非3D形式,但仍然可以很有效的帮助开发团队理解设计意图,或是向客户展示前期的设计愿景。

VR界面设计实践指南

你可能会想:“看上去不错,可是VR当中的实际情况会比这种2D呈现形式复杂很多”,确实是这样,不过这种实践方式的关键在于我们可以将已掌握的设计能力扩展到新领域当中进行尝试。

环境互动还是界面互动?

有些VR体验会在很大程度上依赖于人与虚拟环境之间的互动,对于这类产品来说,传统形式的界面会显得有些蹩脚,你需要更多考虑环境本身的交互特性。

设想你正在为一家高档旅行代理商设计一款VR app,你希望通过最为生动有趣的方式将用户“传送”到他们可能感兴趣的目的地。虚拟旅程的起点可以位于一个类似豪华办公室的场所,用户在其中翻看着漂亮的虚拟旅行杂志,或是摆弄着桌上各式各样的旅行纪念品,通过类似这样的“实体”互动来完成信息选择。

这种方式想象起来会很酷,但在实际当中会遇到一些问题。要获得最理想的体验,你需要最高端的VR及PC设备的支持,并需要搭配手柄一类的控制器来实现环境互动。此外,这样的app在设计与开发成本方面都需要很较高的投入。

新媒介的渐进式普及

在现实当中,不是所有的公司都能承受高额成本去打造如此高度沉浸化的体验。除非你们像Valve或Google那样拥有几乎无限的资源,否则聚焦在这类高端VR体验的产品思路有着太高的风险性。打造这样的产品可能有助于展示你们在科技前沿的技术水平,但无益于将产品真正推向大众市场。

通常,当一种新媒介问世时,那些早期实践者会一次次将其潜力推至极限;经过足够久的学习与尝试,新技术最终会被越来越多的人所接受。随着VR设备的逐渐普及,越来越多的公司开始探寻将VR技术与目标消费需求进行整合的机遇。

从我们的角度看,通过传统界面形式进行操作互动的VR产品 – 所谓“传统”,也就是多数消费者在手机、平板、桌面电脑及可穿戴设备当中早已熟悉的设计范式 – 将能得到更大范围的普及,同时也是那些在新领域当中有所需求的公司最值得投资推广的产品。

是时候起步了

我们希望能够通过本文给到各位设计师一些启发,并帮助大家打消掉一些对于新事物的恐惧,去试着上手VR设计。

人们常说,独自旅行才能走的更快。但要想走的更远,结伴同行才是上策。我们想走的更远,而不是一味的快。我们相信每家公司最终都会推出自己的VR app,就像如今几乎每家公司都有自己的移动版网站一样。

于是我们创建了Kichpush工作室,希望能够将更多设计师联合起来,大胆的去做从前不敢做的事。VR产品越快普及到消费市场,旧有生态体系的深层变革才会越早到来。

作为数字产品设计师,我们接下来的挑战就是打造更为复杂的VR产品,并处理好各类输入设备的互动关系。要实现这样的目标,我们需要更高效、更可靠的原型工具,帮助我们更快的创建和验证设计方案。无论是尝试新方法,还是开发相关工具,我们都会继续努力下去,同时也希望将来能与各位分享更多这方面的经验。

 

原文地址:https://www.smashingmagazine.com/2017/02/getting-started-with-vr-inter…

译文地址:Be For Web

译者:C7210,交互设计师、UX设计热爱者、VR探索者、译者、猫奴、吉他手、鼓手,现就职于腾讯上海

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24070/

GoogleiPhonelogoPhotoshopPSsketchUIUXUX设计师VRWEB交互交互设计交互设计师产品产品经理产品设计产品设计师免费分享动效动效设计原型实践指南用户界面设计素材经验观点视觉视觉设计设计设计师译文话题
赞 (0)
CatherineCatherine
0
生成海报
从用户体验设计的角度,学习服务设计的思考方式和闪光点
上一篇 2017-05-07 08:37
别让措辞毁了你的设计成果
下一篇 2017-05-07 10:49

相关推荐

  • 微信热点

    看世界之Google对话式交互设计规范

    目录序言1.对话式用户界面及其重要性2.建立友好用户界面的关键-理解对话如何进行设计实践3.设计原则与方法论4.设计走查5.设计检查表6.用户界面工具包最佳实践7.像你的用户一样...有合作精神(待翻译)8.解锁口语的力量(待翻译)9.通过确认逐渐给用户信心(待翻译)10.对话中是没有错误的(待翻译)1.对话式用户界面及其重要性我们已经进入全新并且充满希望的计算机时代,机器学习和人工智能的进步使得对话式界面和自然语言处理得以兴起,通过技...

    2018-02-24
  • 铃木说马云的双11是错的 交互设计

    铃木说马云的双11是错的

    铃木敏文:“判断项目是否可行,应该由用户立场出发,以用户视点深入考察是否符合需求。一旦决定开拓,就一定要坚持到底。”“海星有一种特殊的能力——再生。它的腕、体盘和管足受损或自切后,都能够重新生成一个新的海星。因此,它对环境的适应能力和生存能力都特别强。”铃木敏文:“冬天,北海道地区的店准备了大量空间贩卖冰淇淋。“
    当地生意人纷纷嘲笑说:“谁会大冬天里吃冰淇淋呀!”
    但是,铃木说:“家里暖气开得很足,如果能吃上冰淇淋,客人应该会很开心吧!”铃木敏文:“红豆糯米的美味之处在软糯口感,但在它刚被研发成型时,试吃过后并没有尝到糯糯的口感,于是找到研发告诉我制作红豆糯米的方法和普通米饭一样是用锅煮熟的,因而导致口感上有所差异。铃木训斥他说,红豆糯米本身应该以蒸笼蒸制,为什么不采用正确的方法呢? 原来,当时的 生产工厂并没有以蒸制大量糯米的工艺和设备,因此选择了和普通米饭相同的做法。 我要求他们改变制作方法,引进新设备,力争做出原汁原味的糯米饭团。开发团队对糯米的种类、 淘洗方法、浸泡时间、红豆的选择、煮法等所有的要素都重新研究,克服了好几个难关,终于让这一 产品 获得了极大的成功。”铃木敏文:“如今已最新的第六版的投资高达500亿日元,这些年IT的总投资金额已达到3000亿日元。商品库存数据、POS数据、缺货数据、报废数据,在第六版系统中,7-Eleven开始为各家加盟门店订货提供三项数据,以作为协助成立假设的参考,分别是立地数据、设施数据和长期数据。“立地数据”是指调查各门店周边(半径350米,徒步5分钟以内的)的家庭数;如果有商户的话,就调查其员工人数。“设施数据”主要了解自家门店周边是否有学校或医院之类的设施,这对于日常订货作业的假设设定都能提供一定的帮助。他们还根据过去的数据呈现出有关趋势及动向的数据,提供“长期数据”。”

    2017-05-02
  • 交互设计真的很难学吗? 从零开始学交互

    交互设计真的很难学吗?

    头几年的时候提到交互设计,大家的脑海里面都会莫名的飘过一张流程图。现在重新提起来交互设计,甲方+老大都会先问你这个产品的场景是什么?为什么大家都开始注重场景,场景究竟是个什么东东?今天给你介绍点干货。…

    2017-08-04
  • 微信热点

    Excel 实现微信动态图表的交互体验

    昨天说的干货贴,文末有下载方法。微信后台有一个不错的动态图表,可以借鉴到我们周报月报的制作中运用:它的交互特征:①鼠标单击上方的扁平化指标选项卡,切换下方的动态图表。②鼠标悬停下方的折线图,会出现小圆点、竖线和提示框突出显示当前数据点。如果用 Excel 仿制,通常是使用窗体控件来制作动态图表,交互效果如下:需要用到的知识点,窗体控件用单选按钮或下拉框,函数用 index 或 offset,这个我们在《让你的图表动起来》课程里已经有专题...

    2018-01-30
  • 从零开始学交互:经验分享之基础阶段一

    【对用户体验设计的理解】 对于我个人而言,喜欢以咬文嚼字的方式去理解一个新的词语,这正是汉字的艺术所在。用户体验设计=用户体验+设计。一说到设计,很多人会联想到绘画、创意、各种漂亮的手稿。这是对艺术和设…

    从零开始学交互 2015-08-02
  • 微信热点

    为什么职场上的印度人总比中国人混得好?

    目前为止我还未有机会到过印度。身边去过的人有大致两边倒的两种观点,一种是这是一个思想自由的国度,人们开心知足、与世无争。一种是这是一个脏乱差效率低下的地方,一条公路几十年也修不整齐。我无从判断,因为每一种观点都主观。有一位曾经生活在帝都的印度女记者倒是写过一本比较中印差异的书叫《烟与镜》,值得一读。因为工作和学习的关系,我与很多印度人一起共事或者正在共事,有的只能算是点头之交,有的成为了挚友。1先说一件趣事,多年前,我没有与印度人近距离...

    2018-03-16
  • Material Design UI质感设计动画交互设计欣赏

    质感设计(Material Design),是谷歌推出的设计语言,可以在用户界面产生动画,并且动画都是仿照真实的物理世界所产生,而且这套设计语言是跨平台和设备的。简而言之,质感设计是一种简单的方法创建很快的应用程序…

    IxD案例 2015-11-16
  • 微信热点

    智能产品的交互设计,不做到这样可不行

    我们终将以自然的方式与机器交流。在2012年圣丹斯独立电影节上,影片《机器人与弗兰克》赢得特别奖,该片讲述机器人Robot照顾患有老年痴呆症弗兰克的故事。在2017年AI大热之年,人们能否像电影里的弗兰克那样,以人对人的方式与机器交流,这在人机交互学科里定义为“人机自然交互”。何为自然交互?简而言之就是以日常交流方式与计算机进行交互。何为日常交流方式?就是人们通过语音、肢体、手势、眼神、表情等形式进行交流互动。人机交互正迈上新台阶人机交...

    2018-02-07
  • 个性化赋能电商转化率的四个基本方法【UXRen译#173】

    作者:DAVID MANNHEIM |  翻译:xiuxiu,校审:Gogi   相关性可以提高用户体验,这不是什么秘密;用户体验的改善能带来转化率的提升,从而进一步提升用户忠诚度和留存。 那么问题来了:如何提升相关性? 答案在于个…

    交互专题 2017-08-07
  • 交互设计三要素–目标、任务、行为 交互设计

    交互设计三要素–目标、任务、行为

    设计文章,交互设计, 基础知识 2014-09-04 来源:阿里巴巴国际UED 作者:zhoudong 编者按:交互设计师是为用户创造好的使用体验,这么纠结出来的方案有时候用户根本不care,看一下这东西不是自己想要的扭头就走,哪怕…

    2014-09-04
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress