字体的可读性与 PPD 关系如下:

感觉 急速飞驰 浏览

小编:我们在进行 PC 端的 UI 设计时,不难把控设计内容的宽度、文字大小、排版布局等页面元素,而当我们去做移动端的设计时,就很容易出现文字太小看不清,点击区域太小不易操作等排

  我们在进行 PC 端的 UI 设计时,不难把控设计内容的宽度、文字大小、排版布局等页面元素,而当我们去做移动端的设计时,就很容易出现文字太小看不清,点击区域太小不易操作等排版布局的问题。为什么呢?因为设备的分辨率,屏幕尺寸等硬件参数发生了变化,VR 设计同样也会遇到这个问题。在 VR 世界中,显示媒介不再是平面化的了,显示范围也似乎变得不受局限。这时的界面设计自由度变高了,但这种变化也给设计师带来了前所未有的挑战。应该如何去设计 VR 界面呢?今天我们来探讨下这个问题。

  VR 的界面设计不同于电脑端和移动端的设计,后两者大都以平面设计软件和像素单位为基础,但当我们在设计 VR 界面时,你可能会遇到如下的一些问题:

  • 在 2D 设计软件里是以像素为单位,在 3D 设计软件里以米为单位,他们之间如何换算?

  怎么很好的解决这些问题?Daydream 团队给出了答案,下面结合他们的方法以及我们自己的研究给大家一起分享下。

  我们知道,在现实生活中,由于近大远小的关系,相同画面,不同尺寸的面板,调整他们的远近距离,在某个位置时,它们看起来会变得大小相同。这其实是因为它们有相同的角度尺寸。换言之,角度尺寸相同,它们看起来尺寸大小也相同,不管它们的距离如何。这样我们用平面软件做设计时,就完全不需要考虑物件距离这个变量因素了。

  然而,角度尺寸这个单位与二维、三维软件单位并不通用,而且也不方便记忆,我们需要将它转换成通用的长度尺寸。那如何转换呢?这里引入一个全新的概念单位,dmm(distance-independent millimeter,也叫距离无关毫米)。我们把在 1m 远距离下,观看 1mm 长度的物体,定义为 1dmm。因此,目距 2m 远的 2mm 长度,也为 1dmm,3m 远的 3mm 长度,太阳城娱乐城也为 1dmm。

  举个例子,一个宽 50dmm, 高 100dmm 的物体,就表示在目距 1m 远,它的宽是 50mm,高是 100mm。当把它移动到目距 2m 的位置,为了大小看起来一样,它的宽则需要变成 100mm,高变成 200mm。同理,在 3m 远时,宽高分别得变成 150mm 和 300mm。这样,当我们设计了一个 UI 元素,即使在 VR 中需要调整它的距离,也能快速知道如何缩放这个 UI 元素。dmm 解决了 2D,3D 空间组件尺寸的换算问题。因此,设计的操作步骤就变成了如下 3 步:

  1. 根据实际屏幕参数和人机工程学方法测量确定各组件的最小与舒适尺寸,制定设计规范;

  2. 在二维设计软件里进行 UI 界面设计,规定 1px=1dmm,按 dmm 单位输出设计文档;

  那设计画布应该设置多大, UI 界面应该放在什么区域呢?在此之前,我们需要知道人体工程学方面的一些结论:在不转动脖子的情况,大约 60 度视野范围是人眼舒适观看的区域。若转动脖子,那这个范围大致在水平 120 度内。这就是说,需要用户频繁观看操作、重要的界面元素需要放置在如下图的圆形区域内,次要些的信息元素可在 120 度区域以内,用户轻微转动头部便可获取。另外,正常人眼的视觉焦点不是在水平线上,而是在水平线 度之间。

  这里需要介绍一个 PPI 与 PPD 的概念。对于电脑显示器、平板和手机屏幕,我们习惯用 PPI,(Pixel Per Inch,每英寸像素)来表达屏幕分辨率,PPI 越高,屏幕像素颗粒感越小。当显示屏的分辨率足够高时,人眼视网膜便无法分辨其上的像素颗粒,这种屏幕我们称之为视网膜屏。

  在 VR 中,画面是 360 度呈现的,这时用 PPD 来衡量画面的细腻程度,则会更方便。 PPD,指每一度所包含的像素,Pixel Per Degree(像素每度),在透镜观察系下 PPD= px / fov。其中,fov 是指视场角,PPD 大于 60 度的显示屏,才能称之为视网膜屏(可根据视网膜 PPI 换算得出)。 也就是说,在视场角中的 1 度需要看到 60 个像素,才能分辨不出像素感,60 度才能达到“视网膜”级别的体验。

  Daydream 团队给出了当前屏幕分辨率下,字体的可读性与 PPD 关系如下:

  假定在目距为 1m 的情况下,根据 h= 2*d*tan(px/2*PPD) 得出,最小文字高度为 20.07mm。结合我们前文讲的 dmm 的概念,可以得出最小文字约等于 20 dmm,在二维设计软件里,最小需要 20 号字。

  首先,在 Sketch 中,设计基础界面,让重要的 UI 元素在 60 度眼球舒适区内,假设我们设计了如下的界面布局,除了左右两边浅红色的次要面板外,其余重要元素均在舒适区内。 (Sketch 文件放在文末附件里)

  然后,输出切图以及尺寸标注。再将切图导到 Unity 中,在 Unity 中,我们需要建立三个层级关系:

  1. 最外 Base 层,用于调整所有 UI 元素的视距,以及整体的缩放关系。Transform 面板中的 Position.Z 轴即为视距,Scale 为缩放比例。根据前文讲的 dmm 概念,若要调整视距,这儿的缩放参数也做相应调整,则可让显示效果一致。需要学习软件的同学,大家可以搜索锦子会,去锦子会官网下载更多学习资源!如想要了解我的,请搜索罗锦,欢迎了解更多我的设计之路!

  2. 中间 Canvas 层,用于让各单位统一。在 dmm 的概念中,物体的长度单位是 mm, 而 Unity 以 m 为单位的,所以在 Unity 中需要将其换算成 0.001m。

  3. 内部 UI 各元素层,这一层的各物件的尺寸属性和二维软件中的一样。例如,你在 Sketch 里设计了一个 270x150 的矩形,那么到 Unity 里这一层的长宽尺寸也直接写 270x150,完全不用管距离、缩放、单位换算之类的问题了。因为上面两层已经把这些问题解决了。这样一来,工程师则可完全按原始设计标注尺寸来开发。文字字号也一样,设计稿里选的多大,在这里也设置成多大。是不是觉得 So easy。

  有时,我们需要精确的将 UI 界面置于到场景的某个位置,通过这种方法,可以推算出场景的相应比例大小,就不用老是反复调整修改了。建立好这样的一种层级结构后,则可任性的做设计,和工程师也成好基友了。

  如果你也想成为一名月薪过万的UI设计师,那么现在就要开始学习,不要一直观望等待拖延,这样会错失很多好的机会,学习可以联系老师微信5032692,了解我们的UI设计全能就业培训班VIP课程,从零基础到高薪就业,学习4-6个月。

  如果打算学习我们的UI设计课程,大家可以直接联系我的微信 5032692报名系统学习,如果3999真的一下拿不出来也没有关系,也可以分期报名学习。

  可以,一般 UI 设计工作的公司都为互联网公司,互联网公司卡能力严格一些,学历相对较低,不像传统企业卡的很严格,一般大型互联网公司有大专学历就行了,小型互联网公司有初中毕业就可以了。如果你有足够好的作品,就算学历真的是初中也是可以去大型互联网公司的。而且学历其实也可以提升的,通过成人高考,远程教育,自考等方式都可以提升。

  其它行业都是在六七千左右, 所以大家想学UI设计的,想转行的,想提升自己工资的, 现在是最好的时机, 抓紧时间开始学习,不要再等下去了。 再等下丟行业将会和你不再有缘份。

当前网址:http://www.builder.org.cn/linggan/app/1638.html

 
你可能喜欢的: