windows:Visuals/layout/layout-metrics
出自UXGuide.net
布局度量单位
Layout Metrics
目录 |
设备无关布局
当无论使用何种字型、字体大小、DPI、显示器或显卡，布局的外观都能以期望的方式出现时，就称该布局是设备无关的。要理解这一点，我们首先来考虑当对话框布局是基于物理像素时会发生什么。下面的对话框布局是设计师希望在 96 DPI 分辨率下使用 9 点的 Segoe UI 字体显示的样子。
.png)
基于像素布局的对话框在 96 DPI 分辨率下使用 9 点 Segoe UI 字体的显示外观。
但是，当在 120 DPI 下显示时，该对话框就会变小，文本难以阅读：
.png)
同样的基于像素布局的对话框在 120 DPI 分辨下使用 9 点 Segoe UI 字体的显示外观。
而当用 600 DPI 的打印机打印时则变得完全不可读。
.png)
同样的基于像素布局的对话框在 600 DPI 分辨下使用 9 点 Segoe UI 字体的显示外观。
最后，当用 Meiryo 字体显示时，文本与其所在控件不再适合：
.png)
同样的基于像素布局的对话框用 X 点 Meiryo 字体的显示外观。
通过这些例子，我们可以看到，设备无关布局必须无论其他显示参数如何变化都要显示清晰可读的文本，因此对话框布局和尺寸应当与其文本相称。Microsoft® Windows® 传统上是通过使用对话框单位来实现这一目标的。
对话框单位
对话框单位（dialog unit，DLU）是一个设备无关的长度单位。一个水平对话框单位等于当前字体下字符平均宽度的 1/4，一个垂直对话框单位等于当前字体下字符高度的 1/8。由于字符的高度大至上是其宽度的两倍，因此一个水平 DLU 与一个垂直 DLU 的长度基本相等，但我们仍然有必要意识到：DLU 并不是一个正方形的单位。
.png)
一个对话框单位等于当前字体下字符平均宽度的 1/4 及字符高度的 1/8。
DLU 在 Win32 资源文件中被用于标识尺寸与定位。资源文件中的每个对话框模板都定义了字体，这同时也就定义了 DLU。因此，在同一个程序中使用多种字体是没有问题的。
相对像素
就如之前描述的，物理像素并非设备无关度量单位，但它的好处是易于理解和使用。为了达到设备无关性，较新的 UI 技术使用相对像素（relative pixel）。
相对像素是设备无关度量单位，与 96 DPI 下的物理像素相等，但在其他分辨率下会按比例缩放。因此，120 DPI 下的一个相对像素等于 1.25 个物理像素。当然，相对像素是正方形的单位。
相对像素在 Windows Presentation Foundation（WPF）及 WinForm 中用于定义尺寸及对话框布局。
Effective resolution
While historically most Windows-based computers have used 96 dpi by default, today many laptops are using 120 dpi or higher by default. Using a higher dpi causes Windows to use higher fidelity UI elements, such as larger fonts, icons, and graphics, which take more physical pixels to draw. The result is to lower the effective resolution of a display because more pixels are required to render the UI.
To account for different dpis, screen resolutions are expressed in terms of effective resolution, which is the resolution at 96 dpi and is scaled for other dpis. The table below shows the physical resolutions for common dpi settings for the minimum Windows effective resolution of 800x600 pixels and the recommended Windows effective resolution of 1024x768 pixels.
| dpi | Minimum physical resolution (in pixels) | Recommended minimum physical resolution (in pixels) |
|---|---|---|
| 96 dpi (100%) | 800x600 | 1024x768 |
| 120 dpi (125%) | 1024x768 | 1280x960 |
| 144 dpi (150%) | 1200x900 | 1600x1200 |
| 192 dpi (200%) | 1600x1200 | 2500x1600 |
Consequently, stating that the minimum Windows effective resolution is 800x600 pixels means that minimum physical resolution required to support Windows at 120 dpi is 1024x768 pixels. Generally, the effective resolution can be calculated using the following equation:
Effective resolution = Physical resolution x (96 / current dpi setting)
Use effective resolution to refer to screen sizes, but relative pixels to refer to layout sizing and spacing. For example, you could say that the largest window size that will fit in the screen at the minimum Windows effective resolution is 800x600 relative pixels—which is true regardless of the dpi.
.png)
Use effective resolution to refer to screen sizes, relative pixels to refer to windows and controls.
Developers: For more information, check Writing High-DPI Win32 Applications.
在 DLU 及相对像素之间转换
你可能需要在 DLU 和相对像素等单位之间进行布局和尺寸转换。不过，由于 DLU 不是正方形单位，因此该转换是基于不同的坐标轴的。另外，因为 DLU 是基于具体使用的字体，所以转换也是与字体相关的。
|
Conversion for 9 pt. Segoe UI
|
Conversion for 8 pt. Tahoma
|
括号中的数值是精确的转换结果。注意这与其他地方不同，0.5 将被四舍五入为 0 而非 1。
度量控件及文本
如果你使用图形程序来度量控件的尺寸与间距，你可能会感到奇怪，因为测出的数值与你认为的不同。例如，标准命令按钮的尺寸是 75 x 23 像素，但量出来的只有 73 x 21 像素。这个差异是一些控件四周的一个像素的不可见边框造成的，这是为了控件在使用 DLU 时能够正确紧靠排列。确保你在度量控件的尺寸和间距时考虑了不可见边框。
.png)
一些控件具有不可见边框。
在使用图形程序度量文本的尺寸和间距时也存在同样的问题。文本控件的高度包含文本的高度及间距（spacing，又称为 leading），文本高度包括上伸部（ascender）、下伸部（descender）及变音符等。这样，可见的文本尺寸与间距与其实际的尺寸与间距可能会不同。
.png)
字体的上伸部、下伸部、变音符及间距。
.png)
警告：文本的尺寸比看上去要大。
