Interfaces de usuario - Colores y diseño

Question

Aunque estoy específicamente interesado en la información de aplicaciones web, también me gustaría tener cierta curiosidad sobre el desarrollo de aplicaciones de escritorio. Esta pregunta es impulsada por mi trabajo en mi sitio web personal y en mi trabajo, donde he desarrollado algunas características, pero dejé que otros se integraran en la apariencia del sitio.

¿Hay alguna guía o reglas generales para cosas como combinaciones de colores, diseños, formateo, etc.? Quiero asegurar la legibilidad y la claridad para los visitantes, pero no ser soso y aburrido al mismo tiempo.

En cuanto a mi conocimiento en esta área, si me das una imagen, tengo los conocimientos suficientes para reproducirla en la pantalla, pero si me pides diseñar una nueva interfaz o rediseñar una existente, no lo haría saber por dónde empezar

Answer 1

Normalmente, cada sistema operativo tiene pautas de interfaz de usuario. Para Windows, tenga un look here. (Editar: Los enlaces en esa publicación están rotos. Pero una búsqueda de "User Interface Guidelines" en MSDN tiene artículos sobre todo)

Apple también tiene lo suyo. Además, es posible que desee mantener accessibility en mente.

Answer 2

Un consejo para comprobar si sus colores tienen un buen contraste es tomar una instantánea del mismo y convertirlo a escala de grises. Si no puedes leer algo, los colores seguramente fueron mal elegidos.

Además, aunque no se trata de interfaces de usuario, Before & After Magazine puede darle algunas pistas bastante buenas sobre el color, el diseño y temas relacionados. Incluso tiene algunos pdf gratuitos para descargar.

Answer 3

El libro Designing Interfaces, de Jenifer Tidwell tiene un capítulo completo sobre el tema (Capítulo 9, extractos accesibles en línea). Vale la pena recomendar todo el libro.

Answer 4

Soy horrible al encontrar colores que se ven bien juntos, así que hago trampas y uso imágenes de la naturaleza que son principalmente del color que quiero (digamos, verde) y luego uso this website para extraer el esquema de color principal. En general, la naturaleza hace un buen trabajo al establecer sus propios esquemas de color.

Answer 5

Para la interfaz de usuario web, voy a dar un paso aquí y decir que el color más importante en el diseño web es blanco o "claro". Este es el color sobre el que coloca tramos densos de contenido.

texto oscuro, fondo claro, siempre, cuando se trata de sus áreas de contenido principal.

Y la regla más importante en el diseño es el espacio en blanco. Deje que el contenido respire.

Seguir estas dos sencillas reglas vale más que la mayoría de las pautas de "usabilidad de la interfaz de usuario".

Y, por cierto, las pautas de la interfaz de usuario de MS son (en general) horribles. Lea a Jakob Nielsen, mire la estética del diseño de Apple, pero aléjese de la filosofía de texto de 12 pasos de la interfaz de usuario Wizard 10pt de MS "neutral gris/azul crunchbox" de 12 pasos.

(y lo digo como un largo tiempo de MS GUI programador)

Answer 6

Use combinaciones de colores de alto contraste; El texto negro sobre fondo blanco es el mejor ejemplo de un combo de alto contraste.

Un combo malo es el texto verde sobre fondo rojo. Es horrible para las personas daltónicas (como yo).

ver lo que su sitio se parece a una persona ciega de color: colorfilter.wickline.org

Answer 7

En cuanto a las aplicaciones de escritorio: Haga lo que haga, no utilizan colores seleccionados a mano. Quédese con los colores de sistema nombrados, como "Fondo de ventana", "Texto de menú", etc. De lo contrario, las personas que dependen de las características de accesibilidad del sistema operativo se bloquearán con sus elecciones de color (por ejemplo, no se puede elegir un tema de alto contraste) y las personas a las que les gusta personalizar sus temas de escritorio pensarán que su aplicación es fugly.

Answer 8

Aquí hay algunos consejos sencillos para la usabilidad en su tipografía . Estas cosas abordan principalmente problemas de legibilidad y accesibilidad.

Dos:

• uso relativo de la fuente de tamaño (em)
• Identificar los cambios de idioma dentro de un documento utilizando el atributo lang
• texto Negro sobre un fondo blanco
• Por rúbricas, utilice H1, H2, etc. y anótelos apropiadamente
• Rompe contenido y organiza con títulos que se ajusten a lo que buscan tus usuarios
• escribir el texto claro y sencillo
• alinear a la izquierda, desigual derecho
• texto a color de fondo debe ser de alto contraste

NOs:

• uso "haga clic aquí" o "más" como texto de enlace
• uso de subrayado para dar énfasis
• Más de 2 familias de tipo de letra
• Ital ics
• bloques de texto utilizando mayúsculas
• Use rojo verdadero o verdadero texto de color azul sobre fondo blanco (aberración cromática)