Requisitos de conversión de unidades de desarrollo de iOS y Android y corte de UI

En el diseño de UI móvil, hay cuatro unidades de uso común: px, pt, dp y sp. Muchas personas no pueden distinguir entre estas unidades y sus relaciones de conversión, así como iOS y Android. Introducción a los requisitos de corte de imágenes aquí. Espero que obtenga algo después de leerlo (si hay algún error, corríjalo).

px es píxel, la unidad más básica que compone una imagen en una pantalla electrónica. Esta unidad también se utiliza para describir la resolución de la pantalla. 1 px representa un píxel. Por ejemplo, el tamaño del iPhone 8 es 750 px × 1334 px, lo que significa que en la pantalla del teléfono hay 750 píxeles en cada fila en dirección horizontal y 1334 píxeles en cada columna en dirección vertical.

pt significa punto, que tiene dos significados: uno es una unidad comúnmente utilizada en la industria de la impresión, que es una unidad estándar de longitud, tamaño absoluto, 1pt = 1/72 pulgada = 0,35 mm; es la unidad básica utilizada para el desarrollo de iOS, cuando el diseñador diseña en tamaño 1x (375pt × 667pt) y proporciona anotaciones, los desarrolladores pueden usarla directamente sin dividirla por 2.

dp es la unidad de referencia para el desarrollo de Android. En una pantalla con un ppp (densidad de píxeles de la pantalla, es decir, píxeles por pulgada) de 160, 1dp = 1px. En aras de la simplicidad, Android divide la densidad de la pantalla en 5 tipos: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi. La relación de conversión se presentará en detalle a continuación.

En Android, sp es similar a dp, excepto que sp escala según las preferencias de tamaño de fuente del usuario, mientras que dp no. Intente utilizar dp como unidad de tamaño del espacio y sp como unidad de tamaño relacionado con el texto. Por ejemplo, para textos grandes como noticias y mensajes de texto, se recomienda utilizar sp como unidad.

En el desarrollo de iOS, diferentes modelos de dispositivos iPhone requieren cortar imágenes con diferentes aumentos. La siguiente tabla compara los parámetros de visualización de cada modelo de iPhone:

Aquí hay una breve explicación de los dos siguientes. Los conceptos son ppi y dpi.

ppi (iOS): píxel por pulgada, densidad de píxeles de la pantalla, que indica el número de píxeles contenidos en cada pulgada. Cuanto mayor sea el valor, más delicada será la pantalla.

dpi (iOS): densidad de píxeles, que indica el número de píxeles por pulgada.

En el desarrollo de iOS, se estipula que ppi = 163 y dpi = 163 se utilizan como punto de referencia de desarrollo.

Cuando ppi = 163 y dpi = 163, entonces 1pt = 1px;

Cuando ppi = 326, dpi = 163, entonces 1pt = 2px;

Cuando ppi = 401, dpi = 154, entonces 1pt = 2.6px ≈ 3px.

(¿Por qué el punto de referencia de desarrollo del iPhone 8+/7+/6+ es 154? Quizás tengas que preguntarle a Apple...)

Por analogía, obtenemos la fórmula de conversión 1:

Si hay decimales, simplemente redondealos.

En el desarrollo de iOS, actualmente solo se necesitan cortes @2x y @3x, por lo que puedes exportar imágenes png 2x y 3x. Antes de exportar, preste atención para verificar si hay medios píxeles, rebabas, etc. en la imagen cortada para asegurarse de que los píxeles estén alineados. Esto puede evitar efectivamente el problema de los bordes virtuales en el ícono de la página después de conectarse y mejorar. la calidad de los detalles.

Otro punto a agregar: desde el tamaño general de desarrollo, el iPhone 8 es 375 × 667 pt (@2x), mientras que el iPhone X es 375 × 812 pt (@3x). Imagen @2x, una que usa imagen @3x, el iPhone X muestra una definición más alta, como se muestra en la Figura 2-1.

En el desarrollo de Android, debido a que los modelos son desiguales, es necesario utilizar la densidad de la pantalla para distinguir los diseños.

Tenga en cuenta que los ppp (Android) aquí y los ppp (iOS) anteriores son conceptos diferentes. ppp (iOS) es la densidad de píxeles de desarrollo, y ppp (Android) es punto por pulgada, lo que significa densidad de píxeles. , similar a ppi en el desarrollo de iOS.

En Android, se estipula que ppp = 160 como punto de referencia de desarrollo.

Cuando ppp = 160, el punto de referencia es 160, 1dp = 1px; ppp = 240, ppp base = 160, 1 ppp = 1,5 px;

Cuando ppp = 320, ppp base = 160, 1 ppp = 2 px.

Por analogía, obtenemos la fórmula de conversión 2:

Al diseñar íconos, para las cinco densidades de píxeles de la pantalla principal (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi), debes seguir la escala a la proporción de 2:3:4:6:8, como se muestra en la Figura 3-1.

Por ejemplo, el tamaño de un icono de inicio es 48 × 48 dp, lo que significa que en una pantalla mdpi su tamaño real debe ser 48 × 48 px, en una pantalla hdpi su tamaño real es 1,5 veces ese; de mdpi (72 × 72 px); en una pantalla xhdpi su tamaño real es 2 veces mayor que el de mdpi (96 × 96 px), y así sucesivamente.

En algunos casos, también es necesario prever un diagrama de corte especial: el diagrama de nueve puntos (que se muestra en la imagen de arriba). Las imágenes Dot-nine son un formato especial de imágenes utilizado en el desarrollo de Android. El nombre del archivo termina en ".9.png".

Este tipo de imagen puede indicarle al programa qué parte de la imagen se puede levantar y qué parte no se puede levantar y necesita mantener la proporción original. El uso del diagrama de puntos nueve puede garantizar que la imagen sea adaptable sin desenfocarse ni deformarse. Por ejemplo, la imagen de fondo del cuadro de diálogo utilizará el diagrama de puntos nueve.

--

Eso es todo, ¡gracias por leer!

Fin