Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Información general
Como parte del nuevo lenguaje de diseño único de Windows 11, las esquinas redondeadas desempeñan un papel integral en la apariencia de la interfaz de usuario. La percepción general del redondeo en el sistema se forma mediante el redondeo de software, controlado por el sistema operativo y el redondeo de hardware, controlado por los asociados oem. En este tema se proporcionan instrucciones de Microsoft para asociados oem relacionados con el redondeo de biseles de pantalla de hardware para lograr la mejor experiencia de usuario y desarrollador.
Aunque los asociados oem son libres de diferenciar sus diseños de hardware con diferentes radios de redondeo de hardware y propiedades de visualización, el sistema operativo solo admite el redondeo que se distribuye con Windows 11. No se admiten radios arbitrarios para que el software coincida con los radios arbitrarios del hardware debido a una alta complejidad en la implementación del sistema y para evitar colocar la carga en el ecosistema de desarrolladores de aplicaciones para programar en un número indefinido de combinaciones de radios de software y hardware. Por lo tanto, este tema le ayudará a calcular los píxeles efectivos que el redondeo de hardware recortará en función del factor de escala de pantalla para que pueda saber qué intervalo de radios de hardware se usará de forma segura sin degradar la interfaz de usuario.
Nota
Todos los factores de escala de este tema hacen referencia al escalado de escritorio.
Escalado lineal de redondeo de software
Windows 11 incluye dos radios disponibles para redondeo : 4 px para controles como botones y campos de entrada, y 8 px para menús flotantes y ventanas principales de la aplicación. Para los fines de este tema, el radio de 8 px es el radio de redondeo de software predeterminado.
El diseño del redondeo de software en Windows 11 se basa en un radio de 8 px a 96 PPP y se escala linealmente como se muestra en la tabla siguiente:
| Factor de escala de PPP | Píxeles de ventana redondeados |
|---|---|
| 100 % | 8 |
| 150% | 12 |
| 200% | 16 |
Esta sencilla relación lineal sirve para ilustrar cómo Windows escala su redondeo, pero, en última instancia, la cantidad de recorte que se produce depende de la resolución nativa de la pantalla y de lo que es el factor de escala. Por ejemplo, una pantalla con un factor de escala predeterminado de 200 % recortará la interfaz de usuario menos que la misma pantalla establecida en 100 % porque el 100 % haría que el contenido fuera más pequeño en comparación con el 200 %. En esta pantalla de ejemplo, un píxel efectivo es el mismo que un píxel físico al 100 %, por lo que se recortan más píxeles.
Calcular el factor de escala predeterminado de Windows y la resolución efectiva
La cantidad de recorte de interfaz de usuario que incurre en biseles redondeados se ve afectada por el factor de escala del sistema operativo y la resolución y el tamaño de la pantalla, un valor predeterminado para el que elige el sistema en función de las siguientes fórmulas y variables.
Importante
Dado que casi todos los usuarios no cambian el factor de escala predeterminado, debe ser la línea base de todos los cálculos relacionados con el recorte de la interfaz de usuario mediante biseles redondeados.
Densidad de píxeles
La primera variable de la fórmula de factor de escala predeterminada que Windows necesita saber es la densidad de píxeles por pulgada (PPP) de la pantalla. Esto se da mediante la fórmula siguiente y está predeterminado por el fabricante de la pantalla:
Distancia de visualización
Dado que la distancia de visualización afecta al tamaño de los objetos en pantalla que aparecen al usuario cuando se combina con PPP nativo, el sistema lo factores en sus cálculos al decidir en un factor de escala predeterminado. La distancia de visualización de una pantalla se basa aproximadamente en su tamaño físico y tipo de dispositivo, como se muestra en la tabla siguiente:
Nota
Esta lista no es exhaustiva para todos los tipos de dispositivos posibles.
| Tipo de dispositivo | Distancia de visualización (en pulgadas) |
|---|---|
| Tableta pequeña | 16.3 |
| Tablet | 20 |
| Equipo portátil | 24,5 |
| Escritorio | 28 |
| TV | 84 |
Zoom óptimo
El zoom óptimo es el nivel decimal preciso de escalado que Windows cree que es mejor para una pantalla. Esto se asigna aproximadamente al factor de escala predeterminado, que toma el zoom óptimo y se redondea al incremento del 25 % más cercano dentro de un intervalo con ámbito. Windows calcula el nivel de zoom óptimo para una pantalla en función de la distancia nativa de PPP y visualización. Tenga en cuenta que 96 es el valor predeterminado de PPP y 28 es la distancia de visualización predeterminada en el sistema.
Factor de escala máximo
La información final de Windows requiere determinar un factor de escala predeterminado es el factor de escala máximo de una pantalla o el nivel por encima del cual no escalará el contenido para evitar problemas de accesibilidad (por ejemplo, un cuadro de mensaje tan grande que el botón Aceptar está fuera de la pantalla). El factor de escala máximo viene determinado por la resolución vertical de la pantalla.
| Resolución vertical | Factor de escala máximo |
|---|---|
| < 900 | 100 % |
| >= 900 y < 1080 | 125% |
| >= 1080 y < 1440 | 150% |
| >= 1440 y < 1800 | 200% |
| >= 1800 | 250% |
Factor de escala predeterminado
Por último, el factor de escala predeterminado se decide en función del zoom óptimo. De hecho, el factor de escala predeterminado simplemente redondea el zoom óptimo al incremento más cercano del 25 %, con un mínimo del 100 % y un máximo del factor de escala máximo.
| Zoom óptimo | Factor de escala predeterminado |
|---|---|
| < 1.2 | 100 % |
| >= 1,2 y < 1,43 | 125% |
| >= 1,43 y < 1,78 | 150% |
| >= 1,78 y < 2,32 | 200% |
| >= 2,32 y < factor de escala máximo | 250% |
| > Factor de escala máximo | Factor de escala máximo |
Cálculo de la resolución efectiva
Una vez conocido el factor de escala predeterminado, se escala la resolución nativa para determinar la resolución efectiva de la pantalla.
Tutorial: Medición de píxeles efectivos recortados por biseles de hardware redondeado
Al evaluar el impacto de la interfaz de usuario de diferentes curvaturas y radios de esquinas de pantalla redondeadas, el primer resultado para medir es los píxeles físicos recortados por el bisel en la resolución nativa, que luego se puede dividir por el factor de escala. En esta sección, veremos un ejemplo de medición de los píxeles físicos recortados para una presentación hipotética con las siguientes propiedades:
| Propiedad o cálculo | Valor |
|---|---|
| Tamaño de pantalla | 12,4 pulgadas |
| Resolución horizontal | 2560 |
| Resolución vertical | 1600 |
| PPP nativo | 243.46 |
| Distancia de visualización | 24,5 pulgadas (tipo de dispositivo portátil) |
| Zoom óptimo | 2.2 |
| Factor de escala máximo | 200% |
| Factor de escala predeterminado | 200% |
| Radio de redondeo de destino | 2,2 mm |
Círculo formado por el bisel redondeado
En este ejemplo, nos gustaría redondear el bisel en 2,2 mm. El arco generado por esta cantidad de redondeo forma un círculo trimestral que se puede superponer con la esquina del rectángulo de visualización normal, resaltado en rojo en la siguiente imagen:
El radio del círculo completo se calcula con la fórmula siguiente:
25.4 es la conversión de milímetros a pulgadas, ya que las pantallas y PPP se miden en pulgadas mientras que los radios redondeos se miden en milímetros. En nuestra presentación de ejemplo, esto da como resultado un radio de 21,09 px. El área total de este círculo viene dada por la fórmula de área de círculo estándar:
El círculo de bisel redondeado de la pantalla de ejemplo tiene un área de 1395,84 px.
Cuadrado de esquina
El cuadrado que rodea el círculo de redondeo tiene una longitud lateral igual al diámetro del círculo, calculado de la siguiente manera:
El área de este cuadrado viene dada por la fórmula de área cuadrada estándar:
En nuestro ejemplo, el cuadrado tiene una longitud lateral de 42,17 px y un área de 1778,51 px.
Píxeles físicos recortados por esquina
Con el radio del círculo de esquina conocido, podemos calcular el área total recortada por este círculo y dividir entre 4 para obtener los píxeles recortados en la esquina de la pantalla.
El número de píxeles recortados por esquina para nuestra pantalla de ejemplo es de 95,42 px, que incluye píxeles fraccionarios. En la imagen siguiente, el área cuadrante deseada está resaltada por varios colores para ilustrar aproximadamente píxeles enteros recortados por el bisel redondeado. Esta imagen también muestra los contornos del círculo de esquina y el cuadrado de esquina que lo rodea.
El número aproximado de píxeles enteros recortados en este ejemplo es de 92 px para esta esquina de la pantalla.
Píxeles efectivos recortados
Por último, podemos dividir los píxeles físicos recortados por el factor de escala para determinar cuántos píxeles efectivos están ocluidos.
Con un factor de escala predeterminado del 200 %, esto da como resultado 47,72 epx recortado por esquina para nuestro ejemplo.
Radios de redondeo recomendados
La cantidad de interfaz de usuario recortada por los biseles redondeados de una pantalla se ve afectado por el radio de redondeo deseado, que determina el radio del círculo de esquina del bisel.
Advertencia
Según las pruebas internas en un dispositivo con radio de redondeo de 3 mm, el intervalo recomendado de longitudes de radio de círculo de esquina que funciona con el diseño de redondeo de Windows 11 es de 16-24 píxeles efectivos (epx). Cualquier radio por encima de este intervalo puede degradar la interfaz de usuario y no se admite. Cualquier radio por debajo de este intervalo no creará problemas de recorte de interfaz de usuario, pero podría crear tensión de concéntricaidad entre los ángulos de redondeo de la pantalla y la interfaz de usuario. En otras palabras, la diferencia entre el radio de esquina del bisel y el radio de redondeo de la ventana comenzarán a diferir en gran medida y comenzarán a afectar la percepción visual del sistema del usuario.
Teniendo en cuenta el factor de escala predeterminado del 200 %, la presentación del ejemplo de nuestro tutorial tiene un círculo de redondeo con un radio efectivo de 10,55 epx. Por lo tanto, la interfaz de usuario no se recortará excesivamente, pero la diferencia en el ángulo de redondeo betewen el bisel y el Windows 11 esquinas redondeadas de ventana deben tenerse en cuenta.