Especificaciones de diseño de teléfonos móviles Android

1080*1920

Barra de estado: 24dp

Altura mínima de APPBAR (barra de navegación): 56dp

Altura de la barra de menú (incluida la parte inferior) ):48dp

La unidad mínima del sistema de cuadrícula es 8dp, y la distancia y el tamaño deben ser un múltiplo entero de 8dp. Los siguientes son algunos tamaños y distancias comunes:

Tamaño de ícono y fuente:

a. El tamaño total del ícono de inicio (página de inicio o página de lista de aplicaciones) es 48 x 48 dp. sin espacio en blanco Icono completo de 7" en el área. Por supuesto, también puede ser un icono que contenga un área en blanco igual a 48dp.

b. El icono de la barra de operaciones representa el icono más importante que el usuario puede uso en la aplicación El tamaño total es de 32 x 32 dp, el área gráfica real es de 24 x 24 dp

c. Iconos pequeños/iconos de escena, que proporcionan el estado de las operaciones o elementos específicos. >

Por ejemplo, la marca de estrella de la aplicación Gmail. El tamaño total de algunos íconos de expansión y contracción de contenido es de 16 x 16 dp, y el área gráfica real es de 12 x 12 dp. Si la aplicación tiene notificaciones, debe proporcionar un ícono de notificación que se muestra en la barra de estado cuando hay una nueva notificación. El tamaño total es de 24 x 24 dp y el área gráfica real es de 22 x 22 dp. >

Categorizar y organizar los tamaños de los iconos para facilitar la coherencia general de la interfaz.

La tercera parte, la referencia de especificación de diseño para los botones de Android y las capas emergentes. En el borrador del diseño de 720 x 1280 px, hay dos botones (por ejemplo, inicio de sesión y registro) colocados uno al lado del otro. El rango de tamaño mínimo del botón es 240 x 80 px, que se convierte a la unidad de desarrollo de Android de 120 x 40. dp.

Unidad de fuente de diseño de la aplicación Android: conversión de Sp y Px

La fórmula de conversión entre sp y px: sp*ppi/160 = px

ldpi (240*320): 120

mdpi (320*480): 160 ? La ampliación es 1

hdpi (480*800): 240

xhdpi (720*1080): 320

xxhdpi (1080*1920): 480

xxxhdpi:640 (1440*2560):4

Especificación de fuente

Fuente mínima del comentario 12sp

Fuente del texto 14sp

Título del artículo/nombre del icono 18sp

Título de navegación 22sp

Altura de fuente cuando ppi es 240:

Fuente mínima de nota: 18sp

Texto: 21sp

Título del artículo/nombre del icono: 27sp

Título de navegación: 42sp

Fuente:

La fuente predeterminada del sistema Android es Roboto y las fuentes chinas predeterminadas son droid sans fallback y Siyuan Heidi

Diseño de materiales Especificaciones de fuente: las fuentes en inglés usan Roboto y las fuentes en chino usan Noto.

Roboto tiene 6 pesos de fuente: Delgada, Ligera, Regular, Mediana, Negrita y Negra.

Noto tiene 7 pesos de fuente: Thin, Light, DemiLight, Regular, Medium, Bold y Black.

Coincidencia de color de fuente:

No debe haber demasiados colores. Elige un color principal y un color auxiliar. Sobre esta base, se realizan cambios de brillo y saturación para formar una combinación de colores.

Utilice el color principal para el fondo de la barra de aplicaciones y utilice un color principal más oscuro o negro puro con un 20 % de transparencia para el fondo de la barra de estado.

Utilice colores auxiliares para áreas pequeñas que deben resaltarse

Los colores restantes se muestran a través de los cambios de transparencia de negro puro #000000 y blanco puro #ffffff (incluidos iconos y divisores) Y la transparencia está limitada a varios valores.

Negro: [87 % texto normal] [54 % texto superpuesto] [26 % texto de alerta/estado deshabilitado] [12 % divisor]

Blanco: [100 % texto normal] [70% esquivar texto] [30% deshabilitado/texto rápido] [12% separador]

Espaciado entre líneas

Utilice la relación entre sp y px para convertir.

Espaciado entre elementos:

Tamaño mínimo del área de clic de todos los elementos operables: 48dp X 48dp.

La unidad mínima del sistema de cuadrícula es 8dp, y la distancia y el tamaño deben ser un múltiplo entero de 8dp. Estos son algunos tamaños y distancias comunes:

Altura de la barra de estado superior: 24 dp

Altura mínima de la barra de aplicaciones (barra de navegación): 56 dp

Altura de la barra de navegación inferior: 48 dp

Tamaño del botón flotante: 56x56dp/40x40dp

Tamaño del avatar de usuario: 64x64dp/40x40dp

Área de clic del icono pequeño: 48x48dp

Lado del distancia desde el cajón lateral hasta el lado derecho de la pantalla: 56 dp

Espaciado entre tarjetas: 8 dp

Espacio en blanco encima y debajo del divisor: 8 dp

Espacio en blanco para la mayoría de los elementos: 16dp

Línea base de alineación izquierda y derecha de la pantalla: 16dp

Línea base de alineación izquierda del texto: 72dp

También preste atención al número 56dp, muchos controles con tamaños variables, como cuadros de diálogo, el ancho de los menús, etc., se pueden diseñar como un múltiplo entero de 56.

Hay muchas especificaciones sin enumerarlas en detalle, es fácil encontrar el tamaño y la distancia adecuados siguiendo la cuadrícula de 8dp. Hay más espacio en blanco en tabletas y PC, y la distancia y el tamaño deben aumentarse en consecuencia.

Se debe controlar y regularizar el espacio entre líneas simples y líneas múltiples.

Título 42 puntos (14sp) ? Subtítulo 36 puntos (12sp)

Espaciado entre título principal y subtítulo 12sp

Nota: Interlineado de título principal de varias líneas es 8sp

Título 48 puntos (16sp) ? Subtítulo 42 puntos (14sp)

Espaciado entre título principal y subtítulo (una sola línea) 8sp

Título 42 puntos (16sp) ? Subtítulo 42 puntos (14sp)

El espacio entre el título principal y el subtítulo (una sola línea) es 10sp

El espacio superior e inferior de la lista con líneas divisorias está dividido en partes iguales y la distancia es 16sp

No El espaciado superior e inferior de la lista con líneas divisorias es 32sp.

Explicación: El espaciado superior e inferior de los elementos de la lista de la clase de explicación es 22sp.

La distancia entre el botón flotante y la parte inferior es: 18sp

Diseño del texto

Tamaños de fuente comunes:

. 12sp mensaje en letra pequeña 14sp (13sp en escritorio)

. Texto/texto del botón 16sp (escritorio 15sp)

. Subtítulo 20sp Texto de la barra de aplicaciones 24sp

. Título grande 34sp/45sp/56sp/112sp Texto extra grande

Texto largo, se recomienda que cada línea tenga aproximadamente 60 caracteres (inglés). Para textos breves, se recomienda que cada línea tenga aproximadamente 30 caracteres (en inglés).

Pensamientos y comprensión: al diseñar, puede consultar las especificaciones de diseño para el diseño. Cuando se trata de proyectos específicos, las especificaciones se pueden formular de acuerdo con las condiciones específicas del proyecto.

Prueba con múltiplos de 8. Si no te conviene, puede ser divisible por 3 en múltiplos de 3.

El diseño nace de los detalles, y hasta el más mínimo detalle hay que corregirlo.

ps cc 2017

artefacto de diseño interactivo adobe xd.

¿Adobe Stock?

Fuente en formato SVG

.9 El área mínima de clic de la imagen es inferior a 48dp*48dp