1. 现实里的 2D 界面

1.1 从单位开始

印刷/纸面上的：现实图像单位和 DPI

• 物理长度单位：寸、英尺 foot……公制单位 “米”
• 印刷计量单位：Dot \ 墨点
• 物理打印分辨率：dpi (dots per inch) \ 现实中每英寸所能打印的点数，即打印精度，横纵向均有。

显示/屏幕上的：数字图像单位和 PPI

• 电子屏幕的物理长度

  
  Screen sizes (In inches)
  iPhone 7 采用 4.7 英寸（9.6 * 2.3）的显示屏

• 发光点计量单位：Pixel (px) \ 像素点

  • 
    Resolutions (A width and height - e.g. 320wx480h)
    N70 176×2081

• 数字打印分辨率：ppi (pixels per inch) \ 数字图像中，每英寸所包含的像素数目。

  
  PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数
  = 宽度像素数 / 屏幕宽度英寸数 = 高度像素数 / 屏幕高度英寸数

数字图像升级：布局单位 PT & DP

1.2 高(tōu)效(lǎn)的精髓在于一稿多用

等比缩放

响应式布局

栅格化概念

行、间隔、边距

断点

2. VR 世界里的 2D 界面

2.1 投影单位 DMM

由等比缩放启发，衡量任何距离下影像投射到视网膜上的尺寸。

2.2 VR 常用设计规则

UI 元素尺寸

UI 定位（三维坐标）

• 真实的视平线

• 围绕用户显示的 UI 层，适当平缓曲率更便于阅读

• 操作层和表现层分离，表现层焦点与背景分离

3. UMG 开发指北

3.1 DMM 怎么用？

设计稿使用单位 px。默认1px=1dmm，以便预览效果

UMG 单位 px。各部件填写尺寸按切图尺寸即可

Actor 单位 cm。当 UMG 链入 Actor，DrawSize 按原 px 数值填写，Scale*0.1

拖入场景后，按观测距离（n米）设 Scale*n

3.2 默认 DPI 导致的字号错误

字体排版单位：点(pt)
「点」是目前最常用的排版单位，在中文排版中也称该单位为“磅”
它与英寸及毫米的折算关系是 1 pt = 1/72 inch = 0.3528mm
该单位经常被误认为等同于像素 (pixel) 单位，其实 “点” 并不是 “像素”。
排版单位渲染换算

**UE4 中输入字号数值为原稿的 3/4**
原因是 UE4 默认文字渲染 dpi 为 96
字号单位是点 (pt)，1pt=1/72 inch。
仅在分辨率是 72 dpi 时，1 pt 才与 1 pixel 相同；如果分辨率是 96 dpi，1 pt = 96/72 pixel = 4/3 pixel 。
所以 UE4 中要使显示效果与普通屏幕上相同，需要：UE4 字号 = 原字号 * 3/4

3.3 材质图片的 PPI

「视网膜」效果是一个没有清晰定义的概念。根据Steve Jobs在发布iPhone 4时的定义，它是指在10-12英寸（约30厘米）的距离上，设备的像素密度达到300ppi（每英寸300像素）的水平时的显示效果。然而实际上人眼在12英寸的距离上的分辨率可以超过900ppi。

以设备分辨率为上限，保证运行效率下最大精度。
如 RIFT S: 2560 x1440，5.6寸屏，dpi 524

3.4 多屏幕适配之一：界面 DPI 设置

UE4 Doc - dpi 缩放

3.5 多屏幕适配之二：刘海屏安全区

iOS 设备 Safe Area 示意如图，具体配置参见官方文档。
HIG - Adaptivity and Layout
How iOS Apps Adapt to the various iPhone 12 Screen Sizes

使用 Safe Zone 控件分区。