MR产品设计中的踩坑实践

需求分析

任何产品设计，最终都还是要回到用户需求、客户需求层面上来，那么提到需求，还是免不了老生常谈的各种需求分析方法。

诸如用户体验五要素、马斯洛需求层次，需求三要素等。

那么对于我们在MR这个行业进行探索，做一个“先驱者”这样的角色时，我会采用的方法是场景式的需求分析法：

一个什么样的用户，在什么样的场景下，产生了一个什么样的需求？

这类的分析方式其实在C端用的非常广泛，并且C端产品有一个特点是，你可以是你自己产品的用户，可以很好的代入到产品中去；但同时这也会带来一个问题，那就是“过强的代入感”，把自己的想法强加给用户。

特别是在MR行业（目前又主要针对B端场景），弄清楚用户/客户的实际的痛点就显得格外的重要。

需求例举

此处以我们的产品DataMesh Director近期一个需求来去做例举：

用户：

• 小明，30岁，企业办公人员，文史类专业出身；能比较熟练的使用office软件，对三维模型有粗浅的认识。

场景：

• 小明在DataMesh Studio中编辑剧本，编辑到一半，小明的电脑突然断电了。

需求：

• 小明重启电脑，能够恢复之前的编辑，不会丢失之前那么长时间编辑的内容。

需求的本质是什么？

我们在收集需求的过程中，会接收到很多零零碎碎细节的意见或者建议，这类的东西往往都带有需求提出者的主观判断或者自身局限性。

这也要说到那个经典的案例，用户告诉我们他想要一辆更快的马车，那么我们就真的应该给他们马车吗？或许不一定，他只是想要更快、更舒服的从A点移动到B点，那么我们应该给他的可能是一辆汽车，一辆火车，或是一张机票。

那么在这种情境下，相比起直接给到方案，我们多问问为什么，搞清楚用户的需求，弄清楚问题的本质，才能够给到更加准确的解决方案。

另外其实很多同学在思考需求的时候，特别是有一定技术背景的产品，会很容易被实现限制，此处的建议是：先想清楚需求，再考虑实现，毕竟研发大大们往往都会说，需求你尽管提，只要它是合理的，总有办法实现的。

需求是否通用？

这个问题其实也是老生常谈了，为什么很多公司做着做着做成了一个外包公司，很多时候就是因为他们没有想清楚这个问题，客户要什么我就做什么，客户怎么想我就怎么想，最后发现做的所有工作都不通用。

我们在思考需求的时候需要有一种抽象思维，有没有什么办法可以同时满足A、B、C、D各种不同客户的相似的需求？

这里其实可以稍微提提”MVP”，很多同学说，如果不清楚需求是否有价值，可以先用MVP来去验证，这里其实有一个很多人经常会犯的问题，产品是可以MVP的，但是需求不能，需求是实际的，是能够满足长期使用，并且具备后续完善迭代的，你必须要实实在在的去解决了用户的问题，找到了他们的痛点，解决方案可以先最小先可用，但是场景不行，否则恐怕就会出现每次都在做MVP做PoC，最后做出来的MVP全都是用后即抛，没有验证到任何有价值的内容。

优先级是什么？

对于产品来说，优先级是一个非常频繁出现的词汇，但这里我想说的不仅仅是产品的优先级，更重要的是对于对方来说的优先级，或者对于不同的用户、不同的需求方的优先级。

此处同样以我司的产品来举例，我们的产品是面向B端客户的企业级产品，所以需要有相应的一些权限控制和License管理，那么就License这一条来说，对研发或者是对产品来说它的优先级其实并不高，我们有很多紧急的Bug需要Fix，有很多技术债需要去还，License这样的东西可以通过合同或者别的方式来去限制，那我们就会往之后去考虑。

但是对于市场部的同事来说就不一样了，License的存在与否，关系到市场的宣传策略，定价模式，另外也关乎到我们SaaS化及向开发者推广或者社区运营，那么在他们那边的优先级就会相当高。

在这种情况下，我们就需要很好的去权衡各方的优先级，并且综合地去做决策。

需求会带来多大的价值或者影响？

最后当所有的东西都想清楚了，开始要去做决策了，那么此时要去衡量的就是价值，或者说是影响了，需要投入类似的人力物力财力的情况下，越是高价值高影响的需求我们越是应该优先考虑。

至于如何来给需求定价值或者影响，办法就很多了，对于B端来说很多时候有个很简单粗暴的办法，看客户的付费意愿：十个客户想要A功能，每个愿意花十万，二十个客户想要B功能，但B功能不会成为他们做决策的关键点；那这个时候我们就认为A功能的价值远比B功能要高，此处仅仅举个例子，实际情况肯定会复杂很多。

如何获取需求？

说了这么多需求的判断，也稍微提提如何来去获取需求了，我在日常工作中主要的收集渠道大致可以分为如下几类，仅供参考：

讲讲MVP/PoC

MVP这个概念自打在《精益创业》中被提出来之后，便被广大产品同学们常常念叨，但实际上MVP到底有什么用，什么是最小、什么是可用？

其实可以举两个实际的案例来帮助大家理解：

·Dropbox

这个其实也是一个非常经典的案例了，Dropbox这款产品的特殊属性，意味着即便是要打造传统意义上的“最小可用产品”，也需要做到各个平台的应用及云端服务器的搭建，需要投入大量的成本，那么Dropbox的创始人是怎么做的呢？

他们用非常低的成本制作了这个视频，然后讲清楚了他们想要做的事情和他们想要实现的功能，最后的结果自然不用说，Dropbox在提交了这个视频之后：

“成千上万的人来网站上去看视频，一夜之间我们的beta等待邮件(email list)从5,000个用户一下涨到75,000个。我们都惊呆了”

·多抓鱼

（此处援引自多抓鱼联合创始人陈拓的一次分享）

多抓鱼是一个二手书交易平台，以一个特定的价格收购二手书，然后清理、消毒、包装之后转卖给另外一部分用户；那么他们在早期是怎样用MVP的方式来探索需求的呢？

其实很简单，就是用微信群+Excel，他们先是将所有对这项服务感兴趣的人都拉到了一个群里面，然后用Excel来做记录交换信息，有人想在群里卖书，然后登记下来，有人想要买书，就在Excel里面进行挑选，非常高效低成本的完成了需求和场景的早期探索。

上诉的内容其实对于多数行业及产品都适用，对于产品来说都需要要有所思考，接下来我们着重来讲讲MR相关的产品设计内容。

首先是MR里面非常基础的概念，3d，什么是3d？

D = dimension 维度，3D指三维坐标系的三个维度，所以相比较我们常用的平面坐标系和平面设计，3D设计中多了一个维度（可以简单理解为深度），所以在MR的设计中，需要多考虑到一个视角及立体感，用户不仅会从正面观察你的产品，还有可能会看到背面、侧面等，我们接下来详细的讲讲 。

3D模型

现阶段MR应用的构建，离不开3D模型，场景的摆放需要3D模型，内容的呈现需要3D模型；3D模型从功能和制作上大致可以分为两类：CG/游戏模型和工业模型。

CG模型

我们在MR应用的构建中，用到的绝大多数都是CG模型或者游戏模型，这类模型的特点是由网格构成；网格的本质是多边形，其中三角形又是网格的最小组成单位，所以我们可以用三角网格来对物体的表面进行一个近似模拟。

这其中每一个三角形就是一个最小的平面，也就引出来了“面数”这个概念；我们常说的面数，实际上就是三角形的数量；目前几乎所有的商用图形加速硬件都是为三角形光栅化而设计的，所以我们在MR应用，或者类似的场景下，需要用到的都是这类模型。

曲面

如果用图片的类型来对比的话，三角网格就是位图，将所有的细节都一一描述了出来，那么同理也存在一种类似于矢量图的模型，就是曲面模型，曲面模型的本质是公式，工业模型或者说CAD模型大都属于这一类，曲面模型只需要很少的数据就可以实现平滑复杂的效果，所以CAD软件大都可以处理非常复杂的形状。

由于3D显示引擎只能使用三角网格模型，所以CAD模型这类的曲面模型要在MR应用中进行使用，必须进行一个转换，转换为三角网格模型才能进行使用，但又由于这种曲面转换会产生大量的细碎的三角形，远远的超越了多数设备的实时渲染能力，我们又需要对模型进行优化，来减面，经过一系列复杂的处理之后，才能够放到MR应用里面来去使用。

性能影响

那么在设计中或者使用中，对我们的硬件设备性能影响比较大的主要都是啥呢？

• 面数：一般来说，一个模型的面数越多，说明它的细节越多，就需要越多的计算资源来完成渲染。

• 贴图数量、透明度、反射光：贴图的数量和大小会影响渲染效能，同理用到透明度或者反射光这类特性的模型相对也会更加费效能。

• 光照、阴影、特效等：MR环境中的实时光照也会很大程度的影响效能，极大的增加渲染压力，同理阴影、粒子特效等等会带来类似的影响。

例举说明一下，在MR应用的设计中可以稍微参考的一个面数限制是：

• PC：数百万~数千万

• 智能手机：数十万~百万

• HoloLens：十万~二十万

• HoloLens2：二十万~五十万

·MR设计和平面设计

边界

传统的2D的界面设计和原型绘制相比于3D设计，有一个很大的区别就是边界，平面设计多是限定好边界，设置好屏幕大小：手机、PC、大屏等，可用区域都是有限的。

而MR应用中的设计相比而言就区别大了很多，虽然说现阶段各类设备受多方面影响，视场角还没有办法达到最理想的程度，仍然会有一种“边界感”，不过设计中的排布和摆放已然从平面的逻辑变成了空间的逻辑，你可以在环境的上下左右前后进行元素的摆放及堆叠，用户在使用的时候可以通过转头移动来看到不同的内容。

举个例子，如下图所示：

你可以在桌面上摆放一个三维模型，那么用户在观察的时候，从正面侧面能够看到的内容是不一样的：

纵深

在前文我们也说到了，三维比起二维多了一个维度，也可以简单地理解为多了一个深度，其实我们在传统的平面设计中大家也会用到图层的概念，前面的图层能够将后面的图层遮挡住，那么我们将这个展开来就是怎样呢？如下图：

其实上我们在平面设计中也隐含着一个纵深的概念，只是我们平常不易察觉到，那么我们在MR的设计中就需要刻意地将这个概念再展开来，回到三维空间中去。

这种条件下我们可能会存在一些问题，在此可以给大家简单举例说明一下，抛砖引玉：

• 遮挡和厚度：我们在平面设计中可以很容易的实现遮挡遮罩的效果，但是放到MR领域，这个东西变得不那么简单，因为你观察UI、数据等内容的角度不再是唯一的，你可以从侧面观察，可以从背面观察，那么我们传统的遮挡到侧面可能就会“穿帮”，这个时候我们就需要考虑这个遮挡是否需要有厚度，是否应该制作成为一个“盒子”

• 交互映射：虽然我们在进行的是MR的设计，针对三维空间，但实际上我们在绘制或者操作的过程中大多还是停留在平面阶段，需要靠自己的想象或者经验来判断实际发放到MR设备的效果（当然可以用使用三维引擎来制作真的3D UI设计，不过相对门槛就更高一些），所以抽象和想象就要多一些；另外建议可以做一些快速原型交给研发同学帮忙实现，然后第一时间在MR设备中查看实现效果，帮助我们规避设计中的漏洞。

  
  

规范

规范类的东西就不再一一展开了，相信大家都有所了解，现有的设计逻辑下有很多优秀的设计准则和规范，大家也都有参考和实践。

不过在MR领域，暂时还没有一套非常完善的设计准则，需要我们共同去探索，目前做得比较完善的当属微软的fluent design及MR Guideline，后文有附上链接，可供大家参考。

另外针对我司的跨平台场景，设计规范就显得格外重要，我们需要把同一套应用分发到PC、iOS、Android、HoloLens、HoloLens2、Nreal等等平台、MR设备，我们也在进行积极的设计和学习研究。

那么说到了UI设计，以及现在存在的设计规范不完善的问题，就不得不提一下制作设计规范或者说在实施过程中需要避免的一些坑了，在此稍微讲讲硬件上的内容：

MR眼镜

MR眼镜的底层显示原理有很多，此处不再一一展开了，目前最受巨头关注并获得大量资金投入的当属光波导技术了，原理见下图：

简单来说就是光从侧面发射出来，在镜片中经过全反射到达指定区域，然后直接进入到人眼，人眼接收到了光之后就能看到图像；从本质上来说和我们人眼看见东西是一个原理；那么此时就会有一个特点了，MR眼镜的镜片多是透明材质，可以接受外界光穿过镜片，那么在同一个位置你的眼睛既接受了MR设备发射出来的光，也接受了外界环境发射出来的光，这就会带来透明感，你能够透过虚拟的画面看到外界内容。

同理我们可以根据光的显示原理来看，白色光是由红绿蓝共同构成，那么黑色呢？黑色就是红绿蓝光都不发射，也就是说对于MR设备来说，黑色即不发光，此时我们的眼睛没有接收到设备发射的光，又接受到了外界的光，看起来就是全透明；所以我们在设计中需要注意，应该清楚知道纯黑色在MR设备中会表现成完全透明，如果要表现类似于黑色的内容，需要适当调整为深灰色近黑色。

移动设备

接下来稍微说说移动设备，由于我们的应用是跨平台应用，使用同一套内核来发布到各个平台，所以意味着我们不能直接使用原生的iOS开发，这个时候原生开发封装好的各种组件我们就需要自己去研究一番。

此处也例举讲一讲我们遇到的一些硬件上的问题：

屏幕类型

现阶段很多移动设备都从LCD屏幕升级到了OLED屏幕，单就硬件指标上来说能够看到屏幕分辨率大幅的上升，那么在实际设计中或者使用中真的有这么大的区别吗？不同的场景下是不一定的。

传统的LCD屏幕，每一个像素都会包含完整的红绿蓝，而OLED不是，例如iPhone X采用的是Pentile排列的OLED屏幕，如上图所示，这种排列方式将会公用像素点，显示图像时可以借用隔壁的红色或者蓝色像素，所以实际上相当于比起RGB的排列少了三分之二的子像素，真实显示的时候实际分辨率和像素密度也会有所阉割，按照这个逻辑来换算的话，iPhone X的458ppi的像素密度实际上相当于LCD的305。

那么在这种场景下，我们使用OLED屏幕来排列3D元素和场景时，就需要清楚这一特性，尽管屏幕像素密度足够高，但是由于会有临近像素协助发光的可能，物体或者模型边缘仍然有可能会出现发虚、杂色等情况。

DPI

另一种情况就是DPI这个东西了，熟悉苹果设计规范和屏幕尺寸的同学肯定清楚，iPad mini和当初的iPad air 1&2这两条产品线上的平板电脑，有着完全相同的物理分辨率，虽然近些年由于屏幕尺寸的调整有所变化（出现了诸如10.2、10.5这样的尺寸），但是使用LCD屏幕的iPad上始终都有两种DPI：326ppi和264ppi，这个就会对适配工作带来不小的影响，同样的一套UI界面，在iPad mini上始终是要比在iPad或者iPad更小的，在设计中需要更多的考虑动态布局，使用pt来进行设计，并在MR系统中换算回真实尺寸，保证各个端应用显示的一致。

对于混合现实来说，如何和真实世界结合是一个非常重要的问题，尤其是以HoloLens2为首的这类设备，带给了我们更多的想象空间；那么MR应用如何能够更好的和真实世界结合呢？我们要怎样设计才能让我们的交互符合直觉符合习惯？

我们在真实世界中交互，点击一个按钮或者开关，会接收到真实世界的多种反馈视觉：按钮的被推进去了；听觉：发出了咔哒的声音；触觉：你的手摸到了按钮并且按钮会给到你一个力的反馈。

现阶段的硬件条件，还没有办法很好的给到用户以触觉的反馈，所以我们的思路将会更多的去优化视觉、听觉的体验，不过相信在不远的未来，我们也能看到力回馈手套这样的外设，来帮助我们更好地完成MR的交互体验。

视觉

下图是微软官方交互设计给出的参考，在视觉上给出相应的变化，可供大家参考：

1.这是一个按钮的正常状态

2.当你的手靠近按钮的时候，按钮上会出现光影，能够把这个按钮照亮，让你知道你正在靠近这个按钮；

3.当你的手“触碰“到按钮的时候，光影完全遮盖住按钮，并且开始给出更多的视觉、听觉反馈；

4.当你的手把这个按钮按下去，它会真的跟随你的手指进行运动，就像在真实空间中点击一个按钮一样。

配合这样一系列的视觉适配，你能够看到随着你的点击操作，按钮给出了符合你的直觉的变化，就像一个真实的按钮一样被按了下去。

听觉

我们在MR设计中会着重的利用到双耳效应，配合3D引擎我们能够实现身临其境的环境立体声；当我们点击一个面前的按钮时，我们能够发出符合这个按钮位置的“咔哒”声，这样就增强了你的点击体验，极大的增强用户的临场感。

空间映射

最后就是空间映射了，这个话题稍微有点大，其实很多同学对AR和MR的区别不是很清楚，在此可以说一下我这边的理解：

AR其实更多的是一个增强，在屏幕上面出现一个三维模型，放置在了真实空间中，但是它和真实空间的关系是有限的，常常会出现一种“贴”在所有东西上“穿帮”的错觉。

那么MR呢？它对真实环境有着一定的认知，知道这里有一张桌子，那里有一把椅子，那么表现起来就可以是，我在桌子前扔一个虚拟的小球，小球能把桌子挡住，我在桌子后扔一个小球，桌子能把小球挡住。

那么在有着这类能力的设备中（目前主要是HoloLens2），我们可以适当的考虑空间映射的问题，对一些特定的场景做一些遮挡和覆盖，能够增加临场感，更符合用户的自然心理预期。

可供参考

现阶段各大厂商也都在发力MR，也各自在这个领域建立了自己的一些规范和建议，大家有兴趣可以复制以下的链接进行查阅：

Microsoft

https://docs.microsoft.com/en-us/windows/mixed-reality/design

Apple

https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/augmented-reality/

Google

https://designguidelines.withgoogle.com/ar-design/

以上就是本期的干货分享啦

欢迎评论转发