Interfaces de usuario: colores y diseño

Question

Aunque estoy específicamente interesado en información sobre aplicaciones web, también sentiría cierta curiosidad sobre el desarrollo de aplicaciones de escritorio.Esta pregunta está impulsada por mi trabajo en mi sitio web personal, así como por mi trabajo, donde desarrollé algunas características, pero dejé que otros las integraran en la apariencia del sitio.

¿Existen guías o reglas generales para cosas como combinaciones de colores, diseños, formato, etc.?Quiero garantizar la legibilidad y la claridad para los visitantes, pero no ser insulso y aburrido al mismo tiempo.

En cuanto a mis conocimientos en esta área, si me entregas una imagen, tengo suficiente conocimiento para reproducirla en la pantalla, pero si me pides que diseñe una nueva interfaz o rediseñe una existente, no sabría por dónde empezar. .

Answer 1

Por lo general, cada sistema operativo tiene pautas de interfaz de usuario.Para Windows, tenga un mira aquí.(Editar:Los enlaces de esa publicación están rotos.Pero una búsqueda de "Directrices de la interfaz de usuario" en MSDN tiene artículos sobre todo)

Apple también tiene el suyo.Además, es posible que desee conservar accesibilidad en mente.

Answer 2

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

Además, aunque no se trata de interfaces de usuario, Revista Antes y Después puede darle algunos consejos bastante buenos sobre el color, el diseño y temas relacionados.Incluso tiene algunos archivos PDF gratuitos para descargar.

Answer 3

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

Answer 4

Para la interfaz de usuario web, voy a arriesgarme y decir que el color más importante en el diseño web es el blanco o "claro".Este es el color sobre el que se colocan densas extensiones de contenido.

Texto oscuro, fondo claro, siempre, cuando se trata de tus áreas de contenido principales.

Y la regla más importante en el diseño son los espacios en blanco.Deja que el contenido respire.

Seguir estas dos reglas simples 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, observe la estética del diseño de Apple, pero manténgase alejado de la filosofía de texto de la interfaz de usuario del Asistente de 10 puntos de 12 pasos "gris neutro/azul crunchbox" de MS.

(Y lo digo como programador de MS GUI desde hace mucho tiempo)

Answer 5

Soy horrible para encontrar colores que se vean bien juntos, así que hago trampa y uso imágenes de la naturaleza que son en su mayoría del color que quiero (digamos, verde) y luego uso este sitio web para sacar el esquema de color principal.En general, la naturaleza hace un buen trabajo al establecer sus propios esquemas de colores agradables.

Answer 6

Utilice combinaciones de colores de alto contraste;El texto negro sobre fondo blanco es el mejor ejemplo de una combinación de alto contraste.

Una mala combinación es el texto verde sobre fondo rojo.Es horrible para las personas daltónicas (como yo).

Vea cómo ve su sitio una persona daltónica: colorfilter.wickline.org

Answer 7

En cuanto a las aplicaciones de escritorio:Hagas lo que hagas, no uses colores cuidadosamente seleccionados.Quédese con los colores del sistema nombrados, como "Fondo de ventana", "Texto de menú", etc.De lo contrario, las personas que dependen de las funciones de accesibilidad del sistema operativo quedarán bloqueadas con sus opciones de color (por ejemplo, no podrán elegir un tema de alto contraste) y las personas a quienes les gusta personalizar los temas de su escritorio pensarán que su aplicación es fea.

Answer 8

A continuación se ofrecen algunos consejos sencillos para la usabilidad en su tipografía.Estas cosas abordan principalmente problemas de legibilidad y accesibilidad.

HACER:

• Utilice el tamaño de fuente relativo (em)
• Identificar cambios de idioma dentro de un documento usando el atributo LANG
• Texto negro sobre fondo blanco.
• Para títulos, utilice H1, H2, etc.y anidarlos apropiadamente
• Divida el contenido y organícelo con títulos que se ajusten a lo que buscan sus usuarios.
• Escribe una copia clara y sencilla.
• Alinear a la izquierda, irregular a la derecha
• El color del texto al fondo debe tener un alto contraste.

NO HACER:

• Utilice "haga clic aquí" o "más" como texto del enlace
• Utilice subrayado para dar énfasis
• Más de 2 familias de tipos de fuentes
• Cursiva
• Bloques de texto usando todo en mayúsculas
• Utilice texto en rojo verdadero o azul verdadero sobre fondo blanco (aberración cromática)