Cómo diseñar una interfaz de usuario móvil y recortar imágenes – 25 Academy
Puntos de conocimiento básicos y precauciones para el corte de aplicaciones:
1. Considere la posibilidad de adaptarse a varias resoluciones complejas de Android, como las principales 1280X720, 800X480, 640X480, 480X320 y varias A no estándar. resolución general.
2. .9 artefacto png
3. PNG24+jpg
4. Los controles interactivos no deben ser más pequeños que el tamaño mínimo operable: la especificación de Android. es 48dp
5. Los elementos visuales de la imagen deben estar centrados en el archivo tanto como sea posible para facilitar la alineación y la anotación.
6. Se puede implementar con código y tratar de evitarlo. usando imágenes, como valores de color monocromáticos, degradados, texto, líneas divisorias, etc.
7. Considere la versatilidad del control. En resumen, cortar imágenes es un trabajo técnico. ¡Por lo tanto, los amigos no deben ignorar el encanto de las imágenes recortadas!
Diseño de elementos básicos de corte de APP
1. Diseño de botones
1 El área en la que realmente puedes hacer clic debe ser lo más grande posible. no menos del ancho de un dedo, en ese caso la tasa de aciertos de los clics debe ser alta; de lo contrario, habrá una sensación de "clics insensibles". Por supuesto, no es realmente insensible, sino un área donde no hay clics. operación. (Los usuarios pueden ignorar estos motivos y considerarlos más).
2. Para RadioButton y CheckBox, debe haber al menos 3 imágenes de estado: normal, clicada y seleccionada. A veces no es posible mostrar simplemente dos imágenes por conveniencia: normal y seleccionada. En este caso, también hay una sensación de "respuesta lenta" durante el proceso de clic, porque después de todo, la imagen no cambia durante el estado de clic.
2. Diseño tipográfico
Para el diseño general, debemos intentar considerar la facilidad de uso y la practicidad, más que la usabilidad. Mi propia experiencia es esta.
1. Cualquier parte que necesite responder 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 hacer clic en el borde de la pantalla no es tan fácil de usar (si el dispositivo tiene una cubierta protectora, será difícil hacer clic en el borde de la pantalla), al menos los dispositivos que he usado tienen bordes, lo que significa que puedes hacer clic directamente en el borde de la pantalla con las manos. La mayoría de las veces es un error.
2. El contraste entre el fondo y el contenido debe ser adecuado. Cualquiera con una base en el arte lo sabe, pero muchas veces cometemos 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, será difícil usarlo en un entorno con mucha luz. El fondo y el contenido se mezclarán en uno, lo que dificultará la distinción.
3. Utilizar los cuadros de diálogo lo menos posible. En particular, hay muchos cuadros de diálogo en las páginas web. Con el tiempo, la gente se ha disgustado con los cuadros de diálogo (al menos eso creo). Si puede proporcionar indicaciones de una mejor manera, intente evitar el uso de cuadros de diálogo. utilizar Si esto no es posible, se recomienda que no haya más de dos interfaces. Las aplicaciones que siempre muestran cuadros de diálogo terminarán rechazando al usuario.
4. Interfaz sencilla. Esto tiene dos significados: uno es que las funciones completadas por la interfaz son muy claras y concisas, y el otro es que operaciones similares deben completarse en una interfaz tanto como sea posible. Parece que estos dos puntos están en conflicto, pero no es así. Si es realmente imposible lograr una interfaz simple y funciones unificadas, entonces es mejor rediseñar el diseño. Por ejemplo, en la función de entrada de información del usuario, la primera interfaz completa la entrada del nombre de usuario y la contraseña. Después de la confirmación, ingrese a la segunda interfaz para configurar el avatar. Personalmente creo que una interfaz como ésta es demasiado prolija. Dado que todos funcionan para completar la información del usuario, se pueden diseñar en una interfaz. De esta manera, toda la función se puede hacer más compacta y una interfaz menos se puede utilizar de manera más concisa.
5. Utiliza determinadas animaciones. Usar animación para hacer que la interfaz se sienta más suave y accesible. Hoy en día hay demasiadas aplicaciones con funciones potentes. Si su aplicación necesita destacarse, debe ser diferente. A veces, algunas animaciones simples agregarán mucho color a su aplicación.
6. Disposición general. No soy un artista profesional, pero he visto muchas aplicaciones excelentes, así que debería opinar, jaja. Las aplicaciones excelentes tienen algunas diferencias, resumámoslas ahora. Independientemente de las consideraciones, en la interfaz se deben evitar graves desequilibrios entre los diseños izquierdo y derecho. Por supuesto, también existen diseños asimétricos diseñados deliberadamente.
Por ejemplo, si hay dos botones dispuestos horizontalmente en la columna inferior de la interfaz, entonces lo mejor es que estos dos botones estén centrados como un todo. Si están a la izquierda o a la derecha, habrá una sensación de desequilibrio entre ellos. la izquierda y la derecha, o la izquierda es pesada y la derecha es liviana, o la izquierda es pesada y la derecha es liviana. Es liviana en la izquierda y pesada en la derecha, y parece que parte de ella está vacía.
7. Adaptación de pantalla. Uno de los problemas más problemáticos en el desarrollo de Android es el problema de la adaptación de la pantalla. Hay demasiados fabricantes de hardware y demasiados tamaños de pantalla. Una buena aplicación debe adaptarse al mayor número de pantallas posible. Durante el proceso de diseño de la interfaz de usuario, debe considerar cómo debe adaptarse la interfaz de usuario a medida que la pantalla se vuelve más ancha, más alta, más estrecha y más corta. Existe un principio general: la adaptación de la pantalla no debe cambiar el diseño general, es decir, el diseño permanece sin cambios y solo se trata de estirar los gráficos (la clave es cómo estirarlos). La adaptación a la pantalla es en realidad un poco de experiencia, solo tómate tu tiempo para entenderlo, jaja.
3. Cómo cortar los elementos de diseño de la aplicación
Antes de cortar la aplicación, debes hacer las siguientes 6 cosas:
1. y cuando se implemente utilizando diferentes marcos, los diagramas se cortarán de diferentes maneras. Por ejemplo, ¿se debe cortar la barra de pestañas con el fondo o se debe hacer el ícono por separado con un fondo transparente? ¿Se debe colocar el texto en la imagen o agregarlo al final?
2. Hay algunos botones pequeños con estilo de ícono. No puedes simplemente cortar hasta el borde del ícono. En lugar de eso, debes considerar que en la implementación final, convertirás la imagen en un botón para interactuar. con el usuario. Por lo tanto, es necesario dejar bordes más transparentes para que las imágenes en las que se puede hacer clic estén por encima de 88 × 88, para que los usuarios puedan asegurarse de poder hacer clic más fácilmente.
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 imágenes que no cambian los gráficos visibles pero necesitan aumentar el área de clic. Luego, al cortar la imagen, se recomienda agregar 1 píxel de transparencia alrededor de los gráficos visibles. Esto es para ampliar y estirar la imagen sin causar distorsión en el área visible.
5. La altura de la imagen cortada. Para una imagen de fondo universal, como texto con esquinas redondeadas y un fondo, al cortar la imagen, no es tan alta como se muestra en la representación. Para lograr universalidad, solo es necesario cortarla a la altura de una línea de texto. Sin embargo, esto no es absoluto. Para ser precisos, la altura de corte debe ser H = paddingTop+textHeight+paddingBottom, y el margen superior del texto en relación con el fondo + la altura de una línea de texto + el margen inferior del texto. en relación con el fondo.
6. El ancho de la imagen cortada. Si se trata de una imagen de fondo general, entonces su ancho debe ser el ancho mínimo en la renderización, lo que significa que el fondo se puede usar en varios lugares, así que solo tome el ancho más pequeño. Lo más problemático es que cuando cubre toda la pantalla, es necesario verificar el ancho de pantalla ancha de las representaciones que realiza, por lo que al realizar representaciones, es mejor realizar representaciones en pantalla pequeña. Alguien puede preguntar, ¿no se puede estirar o comprimir la imagen en el punto 9? ¿Por qué necesitamos referirnos al ancho mínimo? Según mi experiencia personal, descubrí que si haces clic en 9 en una imagen grande y la pantalla es pequeña, la parte estirada de la imagen se oscurecerá.