La altura de la barra de estado del teléfono móvil
Tenga en cuenta que ppi y dpi son unidades de densidad, no unidades de medida:?
* ppi (píxeles por pulgada): Resolución de imagen (píxeles por pulgada en la imagen)
* dpi (puntos por pulgada): Resolución de impresión (puntos por pulgada), es decir , precisión de impresión).
Dpi se utiliza principalmente para la salida, centrándose en los dispositivos de impresión; Ppi debería ser más familiar para los diseñadores. La resolución del lienzo de Photoshop a menudo se establece en 72 píxeles/pulgada, que en realidad es ppi. Aunque el concepto es diferente, para la pantalla de visualización de dispositivos móviles, se puede considerar como ppi = ppp.
El método de cálculo de ppi es: PPI = √(¿píxeles de largo? ¿píxeles de ancho?)/pulgadas diagonales de la pantalla. Esa es la raíz cuadrada de la suma de los cuadrados del largo y el ancho dividida por el número de pulgadas en diagonal a lo largo de la pantalla.
Tome el iPhone5 como ejemplo, su ppi=√(1136px? 640px?)/4 pulgadas=326ppi (pantalla retina)
Para teléfonos Android, una división inexacta es 720 A x 1280 probablemente esté cerca de 320 ppp (modo xhdpi), un teléfono de 480 x 800 probablemente esté cerca de 240 ppp (modo hdpi) y un teléfono de 320 x 480 esté muy cerca de 160 ppp (modo mdpi) .
2065438 Datos del índice AU en marzo de 2004 (haga clic aquí para obtener los datos más recientes):?
La proporción más alta de teléfonos móviles de 480 x 800 es 31,9, seguida de 16,5 de teléfonos móviles de 720 x 1280, y la más baja es de 1,0 de teléfonos móviles de 240 x 320. La proporción de teléfonos móviles de alta resolución 1080 x 1920 en modo xxdhpi también está aumentando, actualmente 6,1.
2. Método de conversión de unidades
En el desarrollo de Android, la unidad de tamaño de texto es sp y la unidad de tamaño sin texto es dp, pero la unidad que usamos para el borrador de diseño. es px. Es clave que los diseñadores y desarrolladores comprendan cómo convertir estas unidades. ?
* DP: Píxel independiente de la densidad, basado en una pantalla de 160PPI, 1dp=1px. La fórmula de conversión entre dp y px: dp*ppi/160 = px. Para una pantalla de 320ppi, 1dp x 320ppi/160 = 2px.
* sp: píxel independiente de la escala, que es la unidad de fuente de Android, basado en una pantalla de 160 PPI. Cuando el tamaño de fuente es 100, 1sp = 1px. La fórmula de conversión de sp y px: sp*ppi/160 = px. Para una pantalla de 320ppi, 1sp x 320ppi/160 = 2px. ?
En pocas palabras, px (píxel) es lo que nuestros diseñadores de UI usan en PS y también se muestra en la pantalla del teléfono móvil. dp es la unidad de tamaño utilizada al desarrollar y escribir diseños.
¿Por qué sp y dp reemplazan a px? La razón es que no cambian debido a cambios en ppi. Con el mismo tamaño físico y diferentes ppi, su altura es la misma. Es decir, está más cerca del renderizado físico, mientras que px no.
Según el método de conversión de unidades, se puede resumir de la siguiente manera:
Cuando se ejecuta bajo mdpi, 1dp=1px: es decir, el diseñador define un elemento con una altura de 48px en PS, Desarrollo definirá un elemento con una altura de 48dp;
Cuando se ejecuta en modo hdpi, 1dp=1.5px: es decir, si el diseñador define un elemento con una altura de 72px en PS , entonces el desarrollo definirá un elemento con una altura de 48 dp;
Cuando se ejecuta en modo xhdpi, 1dp=2px: es decir, si el diseñador define un elemento con una altura de 96px en PS, entonces el desarrollo definirá un elemento con una altura de 48dp;
Cuando su aplicación necesite adaptarse a múltiples modos de ppp, consulte la proporción de 1 para la conversión.
3. Configuración del tamaño de los elementos básicos del borrador de diseño
Para adaptarse a teléfonos móviles multiresolución, lo ideal es realizar un conjunto de borradores de diseño para cada resolución. , incluidos los iconos utilizados. Anotaciones de borrador de diseño, etc. Sin embargo, en el desarrollo real, este método requiere mucho tiempo y es laborioso. Por eso normalmente elegimos un enfoque de compromiso.
Método 1: comience con un estándar (como xhdpi) y luego aumente o reduzca la escala para adaptarse a otros tamaños. La desventaja es que en teléfonos con mayor resolución, los íconos ampliados darán como resultado una calidad deficiente. ?
Método 2: Diseñar según la resolución más alta y luego reducirla a la resolución pequeña requerida. La desventaja es que si todos los íconos son de mayor tamaño, la velocidad de carga es lenta y el consumo de datos es grande, lo cual no es lo suficientemente bueno para usuarios con resoluciones pequeñas.
Según los datos de relación de resolución de Umeng, y para facilitar la conversión a unidades de tamaño durante el desarrollo de Android, se recomienda que el tamaño del lienzo del borrador del diseño sea 720X1280 y la resolución siga siendo 72ppi (píxeles/ pulgada).
En la especificación de Android, el tamaño de la barra de navegación y de la barra de herramientas no está claramente definido. Pero basándonos en el principio de 48 dp y el análisis de capturas de pantalla de algunas aplicaciones principales de Android, resumamos los requisitos de tamaño:
Alto de la barra de estado: 50 píxeles
Alto de la barra de navegación y barra de acción: 96 px=48dp x 2.
Altura de la barra del menú principal: 96 píxeles
Altura del área de contenido: 1038 px (1280-50-96-96 = 1038)
Recientemente, casi todos los teléfonos Android Se eliminaron las teclas físicas, las teclas de función se movieron a la pantalla y la altura es la misma que la barra de menú: 96 px.
4. Icono y tamaño de fuente (del documento de especificación oficial)
Icono de inicio (página de inicio o página de lista de aplicaciones)
El tamaño total es 48. x 48dp?
b. El ícono de la barra de operaciones representa el ícono más importante que los usuarios pueden usar en la aplicación.
¿El tamaño total es de 32 x 32 dp y el área real del gráfico es de 24 x 24 dp?
C. Los iconos pequeños/iconos de escena proporcionan el estado de una operación o elemento específico.
Por ejemplo, el logo de estrella de la aplicación Gmail, los iconos de arriba y abajo utilizados para expandir y cerrar cierto contenido, etc. Las dimensiones totales son 16 x 16 dp, el área gráfica real es 12 x 12 dp. ?
D. Icono de notificación
Si la aplicación tiene notificaciones, proporcione un icono de notificación que se mostrará en la barra de estado cuando haya una nueva notificación. El tamaño total es de 24 x 24 dp y el área real del gráfico es de 22 x 22 dp. ?
Nota: La unidad de tamaño proporcionada por la especificación de Android es dp. Si el tamaño del borrador del diseño se establece en 720 x 1280, el tamaño del icono debe multiplicarse por 2 hasta la cantidad de dimensiones requeridas por la especificación. Por ejemplo, si el icono de la barra de acciones mide 32 x 32 dp, ¿el borrador del diseño debería tener 64 x 64 px?