Reglas de diseño para interfaces de usuario de Android
El diseño de interfaces es una rama del diseño que embellece, optimiza y estandariza la interfaz de usuario del software para cumplir con los requisitos de especialización y estandarización del software. Específicamente, incluye diseño de portada de inicio de software, diseño de marco suave, diseño de botones, diseño de paneles, diseño de menús, diseño de etiquetas, diseño de íconos, diseño de barras de desplazamiento y de estado, diseño de procesos de instalación, empaque y comercialización.
En el proceso de diseño, hay algunas cuestiones clave a las que se debe prestar atención. Los siguientes son algunos puntos clave:
(1) Diseño de la portada de inicio del software
La portada de inicio del software finalmente debería ser una imagen de alta definición. Si es necesario utilizar la portada de lanzamiento del software en diferentes plataformas y sistemas operativos, se considerarán diferentes formatos y los colores elegidos serán diferentes.
Debe haber más de 256 colores, preferiblemente 216 colores. El tamaño de la cubierta de arranque del software es principalmente 1/6 de la resolución de los monitores convencionales. Si se trata de una serie de software, se considerará la unidad y continuidad del diseño general. El logotipo de la empresa, la marca registrada del producto, el nombre del software, el número de versión, la dirección del sitio web, la declaración de derechos de autor, el número de serie y otra información producida o respaldada deben marcarse de manera destacada para establecer la imagen del software y facilitar que los usuarios o compradores reciban avisos cuando el se inicia el software. Las ilustraciones deben utilizar gráficos que tengan derechos de autor independientes, que sean altamente simbólicos, altamente identificables y que tengan buenos efectos de comunicación visual. Si se utiliza fotografía, también debe procesarse digitalmente para formar las características personalizadas del software.
(2) Diseño del marco de software
El diseño del marco de software es mucho más complicado porque implica la función de uso del software, por lo que es necesario tener una mejor comprensión de Comprenda que esto requiere que los diseñadores tengan cierta experiencia en el seguimiento del software, puedan aprender rápidamente los productos de software, comunicarse con los desarrolladores de programas y los usuarios de programas de productos de software y diseñar un marco de software amigable y único. que se ajuste a los principios de desarrollo del programa. El diseño del marco del software debe ser conciso y claro, con la menor cantidad posible de modificaciones innecesarias. Debería considerar ahorrar espacio en la pantalla, el tamaño de varias resoluciones, el estado y el principio de escalado y reservar espacio para botones, menús, etiquetas, barras de desplazamiento y barras de estado diseñadas en el futuro. En el diseño, el tono general del color debe coincidir bien, la marca del software debe colocarse en una posición destacada, el menú principal debe ubicarse a la izquierda o arriba, la barra de desplazamiento debe ubicarse a la derecha y la barra de estado debe colocarse debajo, que debe ajustarse al flujo visual y la psicología del usuario.
(3) Diseño de botones de software
El diseño de botones de software debe ser interactivo, es decir, debe tener de 3 a 6 efectos de estado: estado de clic donde se coloca el mouse; pero no se hizo clic; el estado en el que el mouse no está sobre él antes de hacer clic; el estado en el que el mouse no está sobre él después de hacer clic; el estado en el que no se puede hacer clic; el estado en el que se cambia de forma independiente y automática; Los botones deben tener efectos de íconos simples y permitir a los usuarios generar reacciones funcionalmente relacionadas. Los botones dentro del grupo deben tener un estilo unificado y los botones con funciones muy diferentes deben ser diferentes.
(4) Diseño del panel de software
El diseño del panel de software debe tener una función de zoom. El panel debe dividir claramente las áreas funcionales y coincidir con el estilo del cuadro de diálogo y la ventana emergente. Caja de montaje para ahorrar espacio, fácil de cambiar.
(5) Diseño de menú
El diseño de menú generalmente tiene un estado seleccionado y un estado no seleccionado. El lado izquierdo debe ser el nombre y el lado derecho deben ser las teclas de acceso directo. Si hay un menú de nivel inferior, debe haber un símbolo de flecha de nivel inferior y las diferentes áreas funcionales deben estar divididas por líneas.
(6) Diseño de etiquetas
Al diseñar etiquetas, preste atención a los cambios en las esquinas y el estado puede hacer referencia a los botones.
(7) Diseño del ícono
El color del diseño del ícono no deberá exceder los 64 colores y el tamaño será de 16x16 y 32x32. El diseño de iconos es un arte cuadrado, en el que se debe prestar atención al impacto visual. Necesita mostrar la connotación del software en un rango pequeño, por lo que muchos diseñadores de íconos usan colores simples al diseñar íconos y usan el efecto de mezcla espacial de colores y puntos con sus ojos para crear muchos íconos maravillosos.
(8) Diseño de barras de desplazamiento y barras de estado
Las barras de desplazamiento están diseñadas principalmente para la transformación de contenido en un espacio de área de tamaño fijo. Deben tener flechas hacia arriba y hacia abajo. marcas de desplazamiento, etc. , algunos todavía tienen marcas de pasar página. La barra de estado se utiliza para mostrar e indicar el estado actual del software.
(9) Diseño del proceso de instalación
El diseño del proceso de instalación tiene como objetivo principal embellecer el proceso de instalación del software, incluida la representación gráfica de las funciones del software.
(10) Empaquetado y comercialización
Finalmente, el empaque de productos de software debe considerar la protección de los productos de software y la mejora de las funciones debe integrarse en la estética de algunas presentaciones de productos. y se pueden imprimir diseños de interfaz de producto.
Especificaciones de diseño de iconos
El diseño digital introduce un nuevo estilo de diseño de iconos. Las siguientes son especificaciones específicas para diseñar y crear íconos con estilo.
El estilo de los íconos debe ser divertido, colorido y vibrante, ya que los sistemas actuales admiten íconos de 32 bits con bordes muy suaves. Después de dibujar cada ícono en un programa vectorial, procesarlo en Adobe Photoshop hará que la imagen sea más perfecta. Esta especificación está escrita específicamente para diseñadores. Al crear imágenes, se recomienda trabajar con un diseñador gráfico de alto nivel, especialmente uno con amplia experiencia en software vectorial y 3D.
El propósito de la descripción general del diseño de íconos es familiarizarlo con el nuevo estilo de Windows XP y prepararlo para crear íconos.
Características del estilo de los iconos
(1) Colores intensos que complementan la apariencia de Windows XP.
(2) Diferentes ángulos y características de perspectiva añaden vitalidad dinámica a la imagen.
(3) Los bordes y esquinas del elemento son muy suaves y ligeramente lisos.
(4) La fuente de luz está ubicada en la esquina superior izquierda del ícono y hay luz ambiental para iluminar otras partes del ícono.
(5) El efecto de degradado le da al ícono una sensación tridimensional, dándole una apariencia más completa.
(6) La proyección hace que el ícono tenga más contraste y sea más tridimensional.
(7) Agregar contornos puede hacer que la imagen sea más clara.
(8) Los artículos cotidianos como ordenadores y dispositivos tienen una apariencia personal más moderna.
Tamaño de los iconos
Los iconos de Windows XP vienen en cuatro tamaños. Se recomienda utilizar los siguientes cuatro tamaños:
(1) 48x48 píxeles
.(2) 32x32 píxeles
(3) 24x24 píxeles
(4) 16x16 píxeles
Compatibilidad con profundidad de color de iconos
Windows XP admite íconos de 32 bits. Un icono de 32 bits es una imagen de 24 bits más un canal alfa de 8 bits. Haga que los bordes del ícono sean muy suaves y se mezclen con el fondo.
Cada ícono de Windows XP debe contener las siguientes tres profundidades de color para admitir diferentes configuraciones de visualización:
Imagen de 24 bits más canal alfa de 8 bits (32 bits)
Imagen de 8 bits (256 colores), más 1 bit de transparencia
Imagen de 4 bits (16 colores), más 1 bit de transparencia.
Paleta
Los colores principales utilizados en el icono.
Ángulo y agrupación de objetos
Cuadrícula de perspectiva utilizada por los iconos de estilo de Windows XP: No todos los objetos utilizan 16?6 para lograr buenos resultados. Algunos objetos suelen mostrarse como imágenes intuitivas: iconos de documentos, iconos de símbolos (como iconos de advertencia o información) e iconos de objetos individuales (como una lupa).
A menos que la creación de objetos auxiliares superpuestos pueda expresar más claramente el significado del icono, se deben utilizar imágenes intuitivas en aras de la legibilidad y la integridad. También debes considerar cómo ves los íconos en grupos para determinar cómo agrupar los objetos.
Proyecto
Después de usar la proyección, los iconos de Windows XP serán más claros y tridimensionales. Puede lograr este efecto en Photoshop, que se trata más adelante en esta guía. Para agregar una sombra paralela a una imagen, haga doble clic en la capa de la imagen en Photoshop y seleccione Sombra paralela. Luego cambia el ángulo a 135, la distancia a 2 y el tamaño a 2. En este punto, la sombra paralela es 75% negra opaca.
Descripción general
Al dibujar íconos de estilo XP, agregar un contorno a la imagen puede hacerla más clara y garantizar que la imagen tenga buenos efectos bajo diferentes colores de fondo.
Concepto
Al diseñar íconos, considere los siguientes factores:
Utilice conceptos existentes para garantizar que las ideas de los usuarios se expresen verdaderamente. Considere cómo aparecen los iconos en el contexto de una interfaz de usuario y cómo se utilizan como parte de un conjunto de iconos. Considere los gráficos
Contexto cultural. Evite el uso de letras, palabras, manos o caras en sus íconos.
Cuando las personas o los usuarios deban estar representados por íconos, haga que los íconos sean lo más populares posible. Si la imagen de su icono se compone de varios objetos, considere cómo hacerla más pequeña. Se recomienda no utilizar más de tres objetos en el icono. Para 16?6, también puedes considerar eliminar algunos objetos o simplificar la imagen para que sea más fácil de identificar.
Herramienta de transparencia
Abre Gif Movie Gear (GMG) en un cuadro de diálogo con tu icono. Utilice la herramienta Cuentagotas para hacer clic en el color de fondo del icono. Este color se convertirá en un amarillo verdoso oscuro (o elija un color de fondo transparente como en GMG). Repita para todos los marcos de 4 y 8 bits. Para guardar el icono, elija Archivo -> Guardar icono como....
Creación de barras de herramientas
Los íconos de las barras de herramientas de Windows usan el mismo estilo que otros íconos, excepto que no usan sombra paralela. Debido a que los íconos de la barra de herramientas son muy pequeños, se recomienda utilizar imágenes simples. Si se muestra de forma intuitiva
La imagen puede transmitir claramente el significado del icono, por lo que no es necesario utilizar otros métodos complicados.
Crear AVI
WindowsXP utiliza AVI de 8 bits. El proceso de creación. Los archivos avi son lo mismo que crear íconos: prepare una imagen en Photoshop y arrástrela a GMG. Siga las instrucciones a continuación para crear un ícono de 8 bits. Para guardar un AVI usando GMG, vaya a Archivo -> Exportar como -> Archivo AVI cuando se cree. avi, tenga en cuenta lo siguiente: Utilice magenta (R255 G0 B255) como color transparente de fondo. En Photoshop, es importante no tener píxeles perdidos. Establezca la capacidad de relleno en 0 y asegúrese de que no esté seleccionado el suavizado.
Software Interfaz Hombre-Computadora
UI es la abreviatura de interfaz de usuario. El diseño de la interfaz de usuario se refiere al diseño general de la interacción persona-computadora, la lógica de operación y la hermosa interfaz del software. Un buen diseño de interfaz de usuario no solo hace que el software sea personalizado y de buen gusto, sino que también hace que su funcionamiento sea cómodo, simple y gratuito, y refleja plenamente el posicionamiento y las características del software.
Las cosas bellas muchas veces son irresistibles. Es por eso que un excelente diseño de producto juega un papel importante en las ventas y promoción de casi todos los productos básicos, como computadoras, automóviles, artículos de primera necesidad, muebles, alimentos, ropa, etc.
Del mismo modo, para las empresas de software, los productos de software son sus mercancías y las interfaces de software son la apariencia de sus productos. Si la interfaz es hermosa o no, está directamente relacionado con el éxito o el fracaso del marketing de productos de software.
Podemos ver claramente que Microsoft concede gran importancia al diseño de la interfaz del software. Recuerde la primera vez que vio win2000. ¿Le sorprende la belleza y facilidad de uso de su interfaz en comparación con nt4.0? ¡Y si ha utilizado el sistema XP, quedará sorprendido e impresionado por su increíble concepto sensorial! Kingsoft PowerWord es un ejemplo exitoso de software doméstico. Los cambios de Kingsoft PowerWord 3.0 a Kingsoft PowerWord 2001 son clásicos. El famoso software de animación web Flash se cambió de 3.0 a 4.0. Sólo se modificaron los iconos y las tablas, y los colores se mejoraron enormemente...
Las empresas de software de éxito en el mundo ahora conceden gran importancia al. diseño de embellecimiento de la interfaz del software, porque Sabemos profundamente que en la feroz competencia del mercado, no basta con tener funciones poderosas y derrotar a oponentes poderosos. Podemos ser similares. A la hora de elegir un teléfono móvil, si tienes dos móviles con las mismas prestaciones y el primero es mucho más bonito que el segundo, ¿cuál elegirás? Por supuesto la bella. Imagine que sus clientes también compararán su software con el de sus competidores.
Todas las empresas de software actuales saben lo importantes que son las actividades de publicidad y marketing para el marketing, y no escatiman esfuerzos en publicidad, actividades y promociones. Pero sabemos que el objetivo final de estas actividades es permitir a los usuarios comprar y utilizar productos de software. Lo que los usuarios finalmente utilizan es su producto, así que ¿por qué no poner más esfuerzo en la estética de la interfaz del software? En mercados maduros, como el de los electrodomésticos, los automóviles y las computadoras, utilizar anuncios muy bonitos para promocionar un producto potente pero feo es simplemente una broma. Sin embargo, este tipo de broma es común en la industria del software. Por eso existe una gran brecha entre la industria del software de China y los países extranjeros, al igual que el fútbol chino.
La práctica ha demostrado que mientras las empresas inviertan poco en el diseño estético del producto, conseguirán grandes resultados. Su relación insumo-producto es mucho mayor que la inversión en desarrollo impulsado por funciones.
Después de que los usuarios vuelven a comprar el software, su conexión con su empresa o la expresión de su imagen corporativa a los ojos de los clientes se transmite en gran medida a través de la interfaz de su software, por lo que una interfaz de usuario hermosa y amigable. Será muy beneficioso para promover su cultura corporativa, inculcar su filosofía corporativa a los clientes y promover su empresa. Especialmente si su empresa se dedica a la contratación de proyectos, una hermosa interfaz brindará a sus clientes confianza y buena voluntad, ya sea durante la licitación o después de la entrega del proyecto.
Para convertirse en un software competitivo, no sólo necesita funciones potentes, sino también un diseño de interfaz amigable. En toda la industria de TI actual, las tendencias de desarrollo del diseño de interfaces de software generalmente incluyen las siguientes tecnologías:
1.
Según las características de su lenguaje, la forma de interacción persona-computadora se divide en
A. Lenguaje formal
B.
C. Lenguaje cuasi natural.
2. Amplia aplicación de interfaz gráfica de usuario.
La interfaz gráfica de usuario y el proceso de interacción persona-computadora dependen en gran medida de la participación de la visión y el control manual, por lo que tienen fuertes características de operación directa.
3. La madurez de la tecnología de interfaz de usuario de operación directa.
Lo que en última instancia le importa al usuario es el objeto que quiere controlar y operar. Sólo le importa la semántica de la tarea y no se distraerá demasiado con la semántica y la sintaxis de la computadora. Para un gran número de tareas físicas, geométricas y visuales, la manipulación directa ha mostrado grandes ventajas.
4. El desarrollo de interfaces de usuario multimedia y de interfaces de usuario multicanal ha enriquecido enormemente las formas de expresión de la información informática.
5. Aplicación de la tecnología de realidad virtual
Los sistemas de realidad virtual proporcionan a los usuarios una experiencia multisensorial inmersiva. Como nueva forma de interacción persona-computadora, se espera que la tecnología de realidad virtual logre una interfaz persona-computadora armoniosa y "centrada en el ser humano" que cualquier forma anterior de interacción persona-computadora.