Unity学习笔记 使用DMM(Distance-Independent Millimeter)思想设计VR&AR中的UI

1. 前言

DMM(distance-independent millimeter,也叫距离无关毫米)是由Google Daydream团队于2017年提出的概念单位,尽管已经是几年前的概念,但是对于极其缺乏设计指南的XR领域中来说,对开发协作上起到了非常友好的帮助。
DMM概念及解释请参考阅读下文:
Sizing UIs in VR with Distance-Independent Millimeters
如何设计 VR 界面
该概念的提出很好的解决了开发与设计如何对UI达成统一的问题,这允许设计只需要对UI进行一遍设计,便可做到在任何距离上观看都能显示同样大小的界面,下图是由Pavel Tsenev使用DMM做的UI案例,很好的诠释了DMM的思想。
在这里插入图片描述

2. 创建适合自己应用的设计指南

WHY:Google团队是基于Cardboard的VR形态给出了关于UI字体大小和击中目标大小的指南,一个是VR设备目前已经达到了另一个层次,再一个是使用的字体是基于英文字母,所以参考性不高

WHAT:使用中文字体,匹配出适合自己应用UI的dmm范围

下面以DMM的概念为思想,在Unity中实现如何自定义适用于自己的UI设计
(1)创建DMM画布
一个DMM画布的构成由三层内容组成
在这里插入图片描述

  • Base层:用于根据视距的不同来调整整体界面缩放,以保持视觉上显示的效果一致(下图分别是1m显示、2米显示、5米显示的设置)
    在这里插入图片描述
  • 单位统一层:用于将dmm的单位与Unity中使用的单位统一,dmm的概念指出物体在1m的距离下大小为 (x) mm,因为Unity使用的单位以米(m)为单位,1mm=0.001m,所以这一层的Scale要换算成0.001
    在这里插入图片描述
  • UI内容层:这一层就是UI要显示的内容,与平面设计软件一样,假如设计稿中某一个按钮尺寸为200x100,那在这里就是200x100的大小
    在这里插入图片描述

因为我们的目的是要找到属于自己适用的dmm,所以接下来创建的画布都是以1m的距离为标准(如下图所示)
在这里插入图片描述

(2)创建参考性内容的指南界面

  • Google给出的指南(使用中文字体)
    在这里插入图片描述
  • 中文字体的字重比较显示,字体大小比较显示
    在这里插入图片描述

(3)创建自定义设置界面

  • 针对不同文字类型提供:FontSize的设置,字体类型的选择
  • 针对击中目标提供:击中区域的大小设置,间隔的大小设置
    在这里插入图片描述

(4)创建效果展示界面

  • 根据自定义的设置,将设置运用并显示效果
    在这里插入图片描述

(5)小结
通过这样的一个流程,你就能确定出自己应用想要使用的UI大小为多少dmm了。那么在平面设计软件中,1dmm=1px,假如说一个按钮高度为60dmm最合适,那么所有按钮的高度都以60px为规范来设计,其余UI同理。
在这里插入图片描述

3. 总结

使用DMM的思想对VR、AR应用做UI上的设计,为开发者与设计师之间的协作和沟通带来极大的方便,一次设计,一劳永逸,不需要考虑因距离不同而该如何重新设置UI大小的问题,也不需要做其他的转换,设计稿是多大,Unity开发中对应的画布就设置多大,相当舒服了。

猜你喜欢

转载自blog.csdn.net/weixin_42358083/article/details/127101447
今日推荐