圆形显示面板指南 您所在的位置:网站首页 电脑屏幕圆角怎么调 圆形显示面板指南

圆形显示面板指南

2024-07-15 12:47| 来源: 网络整理| 查看: 265

圆形显示面板指南 项目02/16/2024 概述

作为 Windows 11 独特的新设计语言的一部分,圆角在 UI 的外观中发挥着不可或缺的作用。 对系统中圆角的总体感知由软件圆角(受 OS 控制)和硬件圆角(受 OEM 合作伙伴控制)的共同塑造。 本主题为 OEM 合作伙伴提供了有关硬件显示面板圆角的 Microsoft 指导,以实现最佳用户和开发人员体验。

尽管 OEM 合作伙伴可以通过不同的硬件圆角半径和显示器属性随意区分其硬件设计,但操作系统仅支持随 Windows 11 附带的圆角。 由于系统实现中的高度复杂性,因此我们不支持软件的任意半径与硬件的任意半径匹配,并避免让应用开发人员生态系统承受针对无限数量的软件和硬件半径组合进行编程的负担。 因此,本主题将帮助你计算硬件圆角将基于显示器缩放比例剪裁的有效像素,以便你可以知道可安全使用的硬件半径范围,而不会降低 UI 性能。

注意

本主题中的所有缩放比例都是指桌面缩放。

软件圆角线性缩放

Windows 11 附带了两个可用于圆角的半径 – 4 像素用于控件(如按钮和输入字段),8 像素用于浮出菜单和主应用窗口。 对于本主题,8 像素半径是默认软件圆角半径。

Windows 11 中的软件圆角设计基于 96 DPI 的 8 像素半径,这会如下表所示进行线性缩放:

DPI 缩放比例 圆角窗口像素 100% 8 150% 12 200% 16

这种简单线性关系用于说明 Windows 如何缩放其圆角,但最终进行的剪裁量取决于显示器的本机分辨率和缩放比例。 例如,默认缩放比例为 200% 的显示器对 UI 进行剪裁小于设置为 100% 的相同显示器,因为 100% 会使内容比预期的 200% 更小。 在此示例显示器中,一个有效像素与 100% 时的一个物理像素相同,因而会剪裁更多像素。

计算 Windows 默认缩放比例和有效分辨率

圆形面板产生的 UI 剪裁量受 OS 的缩放比例以及显示器分辨率和大小的影响,系统会基于以下公式和变量选择其默认值。

重要

因为几乎所有用户都不会更改默认缩放比例,所以它应是与圆形面板进行的 UI 剪裁相关的所有计算的基线。

像素密度

Windows 需要知道的默认缩放比例公式中的第一个变量是显示器的每英寸像素密度 (DPI)。 这由以下公式提供,并由显示器制造商预先确定:

查看距离

由于查看距离会影响在与本机 DPI 结合使用时,屏幕上的大型对象如何向用户显示,因此当决定默认缩放比例时,系统会将其纳入到计算中。 显示器的查看距离大致基于其物理大小和设备类型,如下表所示:

注意

此列表并未详尽显示所有可能的设备类型。

设备类型 查看距离(英寸) 小尺寸平板电脑 16.3 平板电脑 20 笔记本电脑 24.5 桌面 28 电视 84 最佳缩放

最佳缩放是 Windows 认为最适合于显示器的精确十进制缩放级别。 这会大致映射到默认缩放比例,这将采用最佳缩放,并在评估范围内舍入为最接近的 25% 增量。 Windows 基于本机 DPI 和查看距离为显示器计算最佳缩放级别。 请注意在系统中,96 是默认 DPI,28 是默认查看距离。

最大缩放比例

Windows 确定默认缩放比例所需的最后信息是显示器的最大缩放比例,或超过之后不会缩放内容以阻止可访问性问题的级别(例如,一个消息框非常大,以至于“确定”按钮不在屏幕上)。 最大缩放比例由显示器的垂直分辨率确定。

垂直行业解决方案 最大缩放比例 < 900 100% >= 900 且 < 1080 125% >= 1080 且 < 1440 150% >= 1440 且 < 1800 200% >= 1800 250% 默认缩放比例

最后,基于最佳缩放确定默认缩放比例。 实际上,默认缩放比例只是将最佳缩放舍入到最接近的 25% 增量,最小值为 100%,最大值为最大缩放比例。

最佳缩放 默认缩放比例 < 1.2 100% >= 1.2 且 < 1.43 125% >= 1.43 且 < 1.78 150% >= 1.78 且 < 2.32 200% >= 2.32 且 < 最大缩放比例 250% > 最大缩放比例 最大缩放比例 计算有效分辨率

知道默认缩放比例后,会缩放本机分辨率以确定显示器的有效分辨率。

演练 - 测量圆形硬件边框截取的有效像素

在评估不同曲率和圆角半径对 UI 的影响时,首先要测量的结果是边框以原生分辨率剪裁的物理像素,然后可以用比例因子除以这些物理像素。 在本部分中,我们将演练一个示例,演示如何使用以下属性测量为假设显示剪裁的物理像素:

属性或计算 值 屏幕尺寸 12.4 英寸 水平分辨率 2560 垂直行业解决方案 1600 本机 DPI 243.46 查看距离 24.5 英寸(笔记本电脑设备类型) 最佳缩放 2.2 最大缩放比例 200% 默认缩放比例 200% 目标舍入半径 2.2 mm 由圆形边框形成的圆圈

在本示例中,我们希望将边框四舍五入 2.2 毫米。 这样的圆弧形成了一个四分之一的圆,可以覆盖在正常显示矩形的角上,如下图中红色突出显示:

完整圆的半径使用以下公式计算:

25.4 是毫米到英寸的转换,因为显示器和 DPI 以英寸为单位测量,而圆角弧度以毫米为单位测量。 对于我们的示例显示,这会产生 21.09 像素的半径。 该圆的总面积由标准圆面积公式给出:

我们示例显示的圆形边框圆的面积为 1395.84 像素。

角方形

环绕圆的正方形的边长等于圆的直径,计算公式如下:

该正方形的面积由标准正方形面积公式给出:

例如,正方形的边长为 42.17 像素,面积为 1778.51 像素。

每个角剪裁的物理像素数

在角圆半径已知的情况下,可以计算出该圆剪裁的总面积,除以 4,得到显示角中剪裁的像素。

示例显示的每个角剪裁的像素数为 95.42 像素,其中包括小数像素。 在下图中,所需象限区域由各种颜色突出显示,以大致说明圆边剪裁的整个像素。 此图像还显示了圆角的轮廓和包围它的角方形。

本例中,对于显示这个角,剪裁的大致整数像素数是 92 像素。

剪裁的有效像素

最后,我们可以将裁剪的物理像素除以缩放系数来确定有多少有效像素被遮挡。

默认缩放系数为 200%,这导致本例中每个角被剪裁了 47.72 像素。

建议的舍入半径

显示器圆角边框剪裁的 UI 数量受所需圆角半径的影响,该半径决定边框角圆的半径。

警告

根据对具有 3 毫米圆角半径的设备进行内部测试,适用于 Windows 11 的舍入设计的建议角圆半径长度是 16-24 有效像素(epx)。超过此范围的任何半径都可能会降低 UI,并且不受支持。低于此范围的任何半径都不会产生 UI 剪辑问题,但可能会在显示和 UI 的圆角之间产生同心紧张关系。换句话说,边框角半径与窗口圆角半径之间的差异将开始出现很大的差异,并开始影响用户对系统的视觉感知。

考虑到 200% 的默认缩放系数,本演练中的示例显示有一个圆圈,有效半径为 10.55 像素。 因此,UI 不会过度剪裁,但必须考虑边框和 Windows 11 窗口圆角在圆角角度上的差异。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有