user-interface - guidelines - user interface design pdf
Interfaces de usuario: colores y diseño (8)
Aunque estoy específicamente interesado en la información de aplicaciones web, también me gustaría saber algo 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 guías o reglas generales para cosas como esquemas de color, 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 el conocimiento suficiente 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. .
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.
En cuanto a las aplicaciones de escritorio: haga lo que haga, no use colores recogidos 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.
Para la interfaz de usuario web, me voy a poner en una extremidad 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 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, 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 programador de MS GUI desde hace mucho tiempo)
Por lo general, cada sistema operativo tiene pautas de interfaz de usuario. Para Windows, mira aquí . (Editar: los enlaces en esa publicación están rotos. Pero una búsqueda de " Pautas de interfaz de usuario " en MSDN tiene artículos sobre todo)
Apple también tiene lo suyo. Además, es posible que desee tener en cuenta la accesibilidad .
Soy horrible al encontrar colores que se ven bien juntos, así que hago trampa y uso imágenes de la naturaleza que son principalmente del color que quiero (digamos, verde) y luego uso este sitio web para extraer el esquema de color principal. En general, la naturaleza hace un buen trabajo al establecer sus propios esquemas de color.
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, la Revista Before & After puede brindarle algunos buenos consejos sobre el color, el diseño y temas relacionados. Incluso tiene algunos pdf gratuitos para descargar.
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).
Vea cómo se ve su sitio para una persona daltónica: colorfilter.wickline.org
Aquí hay algunos consejos simples para la usabilidad en su tipografía . Estas cosas abordan principalmente problemas de legibilidad y accesibilidad.
HACER:
- Usa el tamaño relativo de la fuente (em)
- Identificar los cambios de idioma dentro de un documento utilizando el atributo LANG
- Texto negro sobre fondo blanco
- Para los encabezados, use H1, H2, etc. y anótelos apropiadamente
- Recorte el contenido y organícelo con títulos que se ajusten a lo que buscan sus usuarios
- Escribir una copia clara y simple
- Alinear a la izquierda, desigual a la derecha
- El color del texto al fondo debe ser de alto contraste
DONTs:
- Use "haga clic aquí" o "más" como texto de enlace
- Use subrayado para enfatizar
- Más de 2 familias tipo de letra
- Cursiva
- Bloques de texto con todas las mayúsculas
- Utilice texto verdadero rojo o azul verdadero sobre fondo blanco (aberración cromática)