¿Cómo diseñar la interfaz de usuario de un teléfono móvil?
1. Considere la posibilidad de adaptarse a varias resoluciones complejas de Android, como las principales 1280x720, 800x480, 640x480, 480x320 y varias resoluciones no convencionales.
2.9 artefacto png
3. PNG24+jpg
4. El control interactivo no puede ser más pequeño que el tamaño mínimo operable: la especificación de Android es 48dp.
5. Los elementos visuales de la imagen deben estar lo más centrados posible en el documento para facilitar la alineación y la anotación.
6. Puedes utilizar código para evitar el uso de imágenes, como valores de color monocromáticos, degradados, texto, líneas divisorias, etc.
7. Considerando la versatilidad del control, cortar imágenes es un trabajo técnico. Por lo tanto, amigos, ¡no ignoren el encanto de los recortes!
Diseño de elementos básicos del diagrama tangente de la APP
1. Diseño de botones
1 El área en la que realmente se puede hacer clic debe ser lo más grande posible. Al menos no menos del ancho de un dedo. En ese caso, la tasa de aciertos de clics debe ser alta; de lo contrario, habrá una sensación de "insensibilidad al clic". Por supuesto, no es que sea realmente insensible, es solo que no hay área para la manipulación de puntos. (Los usuarios pueden ignorar estos motivos y pensar más en los usuarios).
2. Para los botones de opción y las casillas de verificación, debe haber al menos tres diagramas de estado: normal, hecho clic y seleccionado. A veces, por conveniencia, no se pueden simplemente hacer dos dibujos: normal y seleccionado. En este caso, también hay una sensación de "respuesta lenta" durante el proceso de hacer clic, porque después de todo, no hay ningún cambio de imagen durante el estado de hacer clic.
2. Diseño de tipografía
Para el diseño general, trate de considerar la usabilidad y la practicidad en lugar de la usabilidad. Mi propia experiencia es esta.
1. Cualquier parte que responda a clics u otros eventos debe intentar mantener una cierta distancia de los bordes alrededor de la pantalla. Si debes colocar esta parte en el borde de la pantalla, lo mejor es ampliar el área de operación. Debido a que tocar el borde de la pantalla no es tan fácil de usar (si el dispositivo está equipado con una cubierta protectora, será muy difícil alcanzar el borde de la pantalla), al menos estoy usando un dispositivo con borde, que significa que la mayoría de las cosas que tocan directamente el borde de la pantalla no se iluminarán.
2. El contraste entre fondo y contenido debe ser adecuado. Cualquiera que tenga una base en el arte lo sabe, pero muchas veces comete ese tipo de errores al diseñar. Su diseño debe tener en cuenta el entorno en el que se utilizará, como por ejemplo a la luz del sol. Si el contraste no es suficiente, el efecto no será bueno en un ambiente con mucha luz y el fondo y el contenido se mezclarán, dificultando la distinción.
3. Utilizar los cuadros de diálogo lo menos posible. En particular, habrá muchos cuadros de diálogo en las páginas web y, con el tiempo, la gente se disgustará con los cuadros de diálogo (al menos eso creo). Si puede solicitar una mejor manera, intente evitar el uso de cuadros de diálogo y, si es necesario, se recomienda no exceder dos interfaces. Las aplicaciones que siempre juegan con cuadros de diálogo terminarán apareciendo para el usuario.
4. La interfaz es muy sencilla. Esto tiene dos significados. En primer lugar, las funciones completadas por la interfaz son claras y concisas y, en segundo lugar, operaciones similares deben completarse en una sola interfaz tanto como sea posible. Parece que hay un conflicto entre estos dos puntos, pero en realidad no lo hay. Si es realmente imposible lograr una interfaz simple y funciones unificadas, entonces bien podría rediseñarse el diseño. Por ejemplo, la primera interfaz en la función de entrada de información del usuario completa la entrada del nombre de usuario y la contraseña. Después de la confirmación, ingresa a la segunda interfaz para configurar el avatar. Personalmente, creo que esta interfaz es demasiado detallada. Debido a que todos implementan la función de información del usuario, pueden diseñarse como una interfaz. Esto puede hacer que toda la función sea más compacta y sencilla con menos interfaces.
5. Utiliza alguna animación. El uso excesivo de animación en la interfaz la hace sentir más suave y accesible. Hay tantas aplicaciones ahora y son poderosas. Si su aplicación necesita destacarse, debe ser diferente. A veces, algunas animaciones simples agregarán mucho color a tu aplicación.
6. Disposición general. No soy un artista profesional, pero he visto muchas aplicaciones excelentes y debería opinar, jaja. Todas las aplicaciones excelentes tienen algunas similitudes, resumámoslas ahora. No importa cuál sea la consideración, debemos evitar un desequilibrio grave en el diseño izquierdo y derecho de la interfaz. Por supuesto, también está diseñado deliberadamente para que sea asimétrico. Por ejemplo, en la barra inferior de la interfaz hay dos botones dispuestos horizontalmente, por lo que lo mejor es centrar los dos botones en su conjunto. Si es de izquierda o de derecha, habrá una sensación de desequilibrio entre la izquierda y la derecha, ya sea pesado en la izquierda y ligero en la derecha, o ligero en la izquierda y pesado en la derecha, y algunos parecen vacíos.
7. Adaptación de pantalla.
Uno de los problemas más problemáticos en el desarrollo de Android es la adaptación de la pantalla. Hay demasiados fabricantes de hardware y demasiados tamaños de pantalla. Una buena aplicación debería caber en tantas pantallas como sea posible. En el proceso de diseño de la interfaz de usuario, debemos considerar cómo la interfaz de usuario debe adaptarse al proceso de ampliación, realce, estrechamiento y acortamiento de la pantalla. En general, existe el principio de que la adaptación de la pantalla no debe cambiar el diseño general, es decir, el diseño permanece sin cambios y solo se estiran los gráficos (la clave es cómo estirar). La adaptación a la pantalla es en realidad un poco de experiencia, tómate tu tiempo, jaja.
3. ¿Cómo recortar el mapa de elementos de diseño de la APP?
Antes de usar la aplicación para cortar imágenes, debe hacer las siguientes seis cosas:
1. Comunicarse bien con la tecnología del cliente Cuando se implemente con diferentes marcos, los gráficos serán. cortar de manera diferente. Por ejemplo, ¿la barra de pestañas debería cortar el fondo o hacer que el icono fuera transparente por separado? ¿Debería colocarse el texto en la imagen o agregarse al final?
2. Hay algunos botones de íconos pequeños. No puedes simplemente cortar hasta el borde del ícono, sino que debes considerar convertir la imagen en un botón para interactuar con el usuario durante la implementación final. Por lo tanto, es necesario dejar bordes más transparentes, para que las imágenes en las que se puede hacer clic estén todas por encima de 88 × 88 y los usuarios puedan garantizar mejores resultados.
3. Trastorno obsesivo-compulsivo personal. Si puedes usar PNG24, no uses PNG32. Si puedes usar PNG8, no uses PNG32. Y utilice Fireworks para optimizar el tamaño.
4. Para gráficos que necesitan expandir el área de clic sin cambiar los gráficos visibles. Luego, se recomienda que al recortar gráficos, agregue 1 píxel de transparencia alrededor de los gráficos visibles para que el área visible pueda ampliarse y estirarse sin distorsión de la imagen.
5. La altura del diagrama tangente. Para imágenes de fondo generales, como texto con bordes redondeados, al recortar la imagen, no es tan alto como en la renderización. Solo necesita la altura de una línea de texto, que es universal. Sin embargo, esto no es absoluto. Para ser precisos, la altura que se debe cortar es H = Padding Top + altura del texto + Padding Bottom, el margen superior del texto con respecto al fondo + la altura de una línea de texto + el margen inferior del texto con respecto al fondo.
6. Ancho de corte. Si se trata de una imagen de fondo general, entonces su ancho debe ser el ancho más pequeño en la representación, lo que significa que el fondo se puede usar en muchos lugares, así que use el ancho más pequeño. Lo más problemático es que al cubrir la pantalla completa, debe observar el ancho de pantalla ancha de las representaciones que realiza, por lo que al realizar representaciones, es mejor hacer representaciones en pantalla pequeña. Algunas personas pueden preguntar: ¿no se puede estirar o comprimir la imagen de las 9 en punto? ¿Por qué necesito hacer referencia al ancho mínimo? Según mi experiencia personal, descubrí que cuando la pantalla es pequeña, la parte estirada de la imagen grande se vuelve más oscura.