Especificaciones básicas para el diseño de UI móvil
Todo el mundo sabe que utilizan los teléfonos móviles: uno es el sistema iOS de Apple y el otro es el sistema Android de Google. Aunque el sistema Hongmeng de Huawei ha estado en línea durante mucho tiempo, realmente no se ha utilizado en teléfonos móviles. Xiao A lo espera con ansias y algún día también podrá escribir "las especificaciones de tamaño de la interfaz del sistema Hongmeng de Huawei". p>
Una diferencia obvia entre los dos es que el sistema iOS no es de código abierto. En pocas palabras, no se puede cambiar a voluntad. Incluso los íconos deben tener esquinas redondeadas, lo cual es muy amigable para los diseñadores de interacción.
El sistema Android es de código abierto, la interfaz se puede cambiar a voluntad y no hay especificaciones especiales de tamaño. Hay miles de iconos y tamaños también diferentes según la marca del teléfono móvil. El diseño de interacción es un poco diferente.
Entonces echemos un vistazo a las especificaciones de interfaz específicas para Android e iOS. 1. Especificaciones de la interfaz de iOS
En primer lugar, Apple se divide en dos tamaños, uno es de tamaño mediano, como 6s, 7, 8, etc. Generalmente cortamos el tamaño y lo llamamos @2X. También hay una versión Plus, esta imagen de corte general se llama @3X.
El tamaño de Apple 6s es 750px * 1334px, y el tamaño de 6s Plus es 1242px * 2208 px. La relación entre los dos es 1,5 veces. Cómo decirlo, si un teléfono móvil como el 6s quiere convertirse en un Plus, nuestros diseñadores quieren ser un poco vagos en el diseño, por lo que solo necesitamos expandir el tamaño total 1,5 veces. , como iconos.
Analicemos las especificaciones de tamaño de la interfaz:
La primera es la barra de estado, es decir, la altura de la barra de batería de señal es de 40px. La parte de la barra de navegación es la barra "Configuración" con una altura de 88 píxeles.
La altura de la barra inferior (barra de navegación) a continuación es 98px.
Ten en cuenta que estos tres tamaños son relativamente rígidos. Cuando desarrollemos la versión Plus, solo necesitamos expandir las dimensiones anteriores 1,5 veces. ¿Podemos rellenar el espacio en blanco restante con cualquier contenido, banner o icono?
☆ Acerca de la parte del ícono
El ícono de Apple es muy estético y se ajusta completamente a la proporción áurea de la cuadrícula, por lo que se ve muy coordinado. Debido a que todos usan cuadrículas para un diseño estandarizado, todo el conjunto de íconos mantiene un alto grado de uniformidad.
El tamaño mínimo de todo el icono en el que se puede hacer clic no puede ser inferior a 44 px. El tamaño general es de 58 px y las esquinas redondeadas son de 12 px. Sin embargo, estamos acostumbrados a tomar un número entero de 60 px. . ¿Por qué debe haber un control mínimo? Porque nuestros dedos tienen una superficie de contacto si es menor que el ancho anterior, no se puede tocar. Asegúrese de prestar mucha atención a la experiencia del usuario.
☆ Acerca de la parte de la línea divisoria
Tenga en cuenta que la línea divisoria no es una línea, sino un rectángulo con un ancho de 1 px y el color es mayoritariamente gris.
☆ Acerca de entre placas
El intervalo de la barra gris entre placas está entre 30-70, en general es un número entero. El sistema iOS adopta 70 px, lo que resulta útil para reducir la carga de lectura del usuario. La altura de la lista es generalmente superior a 88 px y la distancia entre listas es de 10 px a 30 px. Si es demasiado pequeña, habrá colisión. Como diseñador de UI, esto es algo que debes considerar, ¿verdad?
☆ Acerca de las especificaciones de tamaño y requisitos de fuente en la lista
☆ Acerca del área segura entre los espacios izquierdo y derecho
Esta área segura también se llama margen blanco. Los márgenes de la página de configuración de la página original de iOS son de 30 px, y se ajustan de manera diferente según los diferentes productos. El ancho generalmente fluctúa entre 16 px y 30 px.
☆ Acerca del tamaño del botón de cambio
☆ Acerca de la fuente
La fuente del sistema iOS es la fuente Pingfang El color y el grosor de la fuente. También son muy particulares el título Otro texto está en negrita, y algún texto explicativo está en color claro sin negrita. El grosor del texto se utiliza a menudo para distinguir información importante de información secundaria y para dividir niveles de información. El color de fuente rara vez es negro puro y generalmente se utilizan gris oscuro y gris claro.
La configuración del tamaño de fuente para el título principal suele ser entre 32 y 36, con negrita y centrado. El texto de la lista será más pequeño, con un tamaño de fuente de 30 y no estará en negrita. Los tamaños de fuente auxiliar son generalmente 24-26.
El texto de descripción generalmente no es menor que 22 y la configuración mínima es 20. Si es menor, no será visible. Otra cosa a tener en cuenta es que todas las configuraciones de tamaño de fuente deben ser números pares y la relación entre los tamaños de fuente del contenido superior e inferior es 2-4.
Esta es la introducción de una pequeña parte de las especificaciones de tamaño de la interfaz de Apple. Presentaré el tamaño de la interfaz de Android en el próximo número.
Como diseñador de UI, debes comprender específicamente el tamaño de la interfaz para adaptarla al punto de vista estético, hacer que las personas se sientan coordinadas y cómodas, y capaces de atraer rápidamente la atención del usuario dentro de un rango efectivo. 2. Especificaciones de la interfaz de Android
Como todos sabemos, el sistema Android es de código abierto y hay muchos fabricantes de teléfonos móviles en China, como Xiaomi, Meizu, Huawei, Oppo, Samsung, etc. Cada marca Tiene sus propias especificaciones de diseño de interfaz de usuario, pero analizamos principalmente las especificaciones de tamaño de la interfaz de usuario.
1. Fuentes
La versión china del sistema Android usa Siyuan Heibo y la fuente en inglés es robot font.
Utilice únicamente tamaños de fuente de unidades pares, como 24 pt, 28 pt, 36 pt, etc.
2. y px significan?
Antes de hablar de íconos, primero analicemos el significado de una fila de palabras en inglés:
mdpi, hdpi, xhdpi, xxhdpi y xxxhdpi representan la densidad de la pantalla. mayor será la densidad de la pantalla. Los más utilizados son xxhdpi y xxxhdpi.
dp es una unidad de longitud específica del sistema Android, lo que significa píxeles independientes del dispositivo. Diferentes dispositivos tienen diferentes efectos de visualización, que están relacionados con el hardware del dispositivo. Se usa principalmente para íconos y sp (píxel ampliado) se usa para texto. Se usa principalmente para mostrar fuentes mejor para el tamaño del texto.
px significa píxel y el efecto de visualización es el mismo en diferentes dispositivos.
La relación de densidad entre las pantallas de Android es la siguiente:
3 Iconos
Los iconos de diferentes marcas de teléfonos móviles tienen diferentes logotipos y los tamaños correspondientes. Los diferentes tamaños de pantalla son los siguientes:
Tamaño del icono del sistema:
Tamaño del icono de acceso directo:
Tamaño del icono de la aplicación:
4. tamaño de la barra
De izquierda a derecha: ① Altura de la barra de la aplicación: 56 dp; el relleno izquierdo y derecho de la barra de la aplicación es 16 dp; el relleno izquierdo superior e inferior del icono de la barra de la aplicación es 16 dp; 72dp; margen inferior del título de la barra de aplicación: 20dp;
② La altura de la barra de título es 128dp;
③ La altura de la barra de título es 56dp; ; altura del área de descripción: 72 dp; relleno inferior del área de descripción: 16 dp.
5. Altura de la lista
El borde vertical, el margen horizontal y los márgenes izquierdo y derecho del borde son cada uno de 16 dp; el contenido con íconos o avatares tiene un margen izquierdo de 72 dp.
Margen vertical
①Barra de estado: 24dp; ②Barra de herramientas: 56dp; ③Subtítulo: 48dp; ④Elemento de lista: 72dp
Borde vertical, márgenes horizontales e izquierdo y derecho. los márgenes del borde son de 16 dp cada uno; el contenido con íconos o avatares tiene un margen izquierdo de 72 dp.
Margen vertical
①Barra de estado: 24dp; ②Barra de herramientas: 56dp; ③Título y elementos de lista: 48dp; 6. Cortar imágenes
La semana pasada mencionamos que la relación entre el iPhone 6 y el iPhone 6 Plus es de aproximadamente 1,5, y la pantalla del teléfono Android xhdpi es exactamente 1,5 veces la relación de la pantalla xxdpi, por lo que el iPhone 6 Plus y. xxhdip también puede utilizar un conjunto de recortes. Dominar la relación de tamaño puede facilitar mucho el trabajo.
7. Adaptación de la interfaz
La base del soporte multipantalla de Android es su capacidad para gestionar el diseño de la aplicación y la representación de objetos dibujables de mapa de bits de una manera adecuada para el momento actual. Capacidad de configuración de la pantalla. El sistema maneja la mayor parte del trabajo escalando los diseños para ajustarlos al tamaño/densidad de la pantalla y escalando los elementos de diseño de mapas de bits para representar correctamente su aplicación en las densidades de pantalla en cada configuración de pantalla, para optimizar el diseño de la interfaz de usuario y generar una mejor experiencia para los usuarios.
¿Cómo adaptar la interfaz de Android? Todos deben comprender claramente la relación entre resolución, tamaño de pantalla y densidad; comprender la relación entre la densidad real y la densidad del sistema, y la diferencia entre dp, sp y px; No daré más detalles aquí. Escribiré un artículo específico más adelante ~
Eso es todo para las especificaciones de la interfaz de Android. Debe comprender que la importancia del diseño de las especificaciones de la interfaz es garantizar la unidad y la racionalidad. diseñar, y estandarizarlo y mantenerlo. Es la unificación del proyecto, con el fin de maximizar los beneficios y la eficiencia del mismo. Por lo tanto, como diseñadores de UI, si no cumplimos con ninguna especificación de diseño y confiamos en nosotros mismos para darlo por sentado, no lo enviemos al personal de front-end, porque no lo entenderán.
Entonces, como diseñador de UI, debes cumplir con las especificaciones de diseño para poder lograr un diseño sólido. Espero que las respuestas anteriores te ayuden a comprender las especificaciones de diseño de la interfaz móvil.