-
En este video vamos a hablar sobre el diseño de las redes de
-
y el uso de agrupación y la alineación para transmitir la estructura.
-
He aquí un ejemplo de una cuadrícula: Esto proviene de Java Look and Feel Instrucciones de diseño,
-
y es comentada por Sun y es [un] recurso Web.
-
Se trata de un cuadro de diálogo Buscar, y es lo que se puede ver que
-
todos los elementos del cuadro de diálogo se han dispuesto utilizando una cuadrícula.
-
¿Y qué queremos decir con una rejilla es que hay un conjunto de líneas invisibles
-
que todos los elementos de la pantalla para ajustar.
-
Por lo que puede que la parte superior del cuadro de diálogo Buscar y luego el área de búsqueda,s
-
y luego de abajo que son todos los parámetros,
-
y por debajo del que todavía son 'Buscar y cerrar botones.
-
Se dará cuenta de que el borde izquierdo de las líneas de parámetros con el borde izquierdo de la caja de búsqueda,
-
y el borde derecho de las líneas de botones de arriba con el borde derecho de la caja de búsqueda.
-
También te darás cuenta de que el hallazgo, que es el título del cuadro de diálogo,
-
está colgado a la izquierda, por lo que es fácil de identificar el título.
-
Se puede ver que la información más importante se encuentra cerca de la parte superior,
-
y cómo las cosas que están más relacionadas conceptualmente -
-
como los parámetros que parametriza el sistema de búsqueda - están más cerca entre sí que los botones -
-
siendo parte del mismo cuadro de diálogo, pero un poco más separados - y así conseguir más espacio.
-
Fue en la Bauhaus en Alemania en la década de 1920
-
que las estrategias para el diseño de redes realmente entró en su cuenta.
-
La Bauhaus, en ese momento, era una escuela de diseño revolucionario,
-
y su diseñador gráfico, Jan Tschichold, escribió este libro, llamado "La Nueva Tipografía»
-
desembolso a su visión para el diseño gráfico moderno.
-
Se defiende la tipografía asimétrica, sans serif,
-
y un montón de otras cosas que hemos llegado a considerar como Modernismo.
-
Una cosa que es notable sobre el libro de Tschichold sobre tipografía
-
es que se lee como un manifiesto político:
-
Realmente tenía la creencia de que él estaba cambiando lo que el diseño significaba para el mundo,
-
despojándola de todo su exceso y destilando hacia abajo a sus elementos desnudos.
-
Usted puede o no puede optar por seguir sus principios;
-
algunas de estas ideas ahora parecen un poco reductora, o excesivamente didáctico o moralizante también;
-
pero hay mucho aquí que es tremendamente útil.
-
Y esta foto soy yo en la Bauhaus un par de veranos atrás.
-
Así que hay un número de partes que componen un sistema de rejilla. La principal es un conjunto de columnas -
-
en este caso, son de igual anchura, pero no necesariamente tiene que ser.
-
Y la segunda pieza es un conjunto de canales, que es el espacio en blanco entre las columnas.
-
Además de eso, las cosas están generalmente alineadas horizontalmente usando una línea de base.
-
Puede añadir texto jerárquicamente - Así que aquí vemos un título y un subtítulo,
-
o tal vez una línea de autor o algo así.
-
Y no hay necesidad de que las rejillas de ser todo de la misma anchura.
-
Así que aquí está una maqueta, por ejemplo, de una estrecha columna de la izquierda que usted puede utilizar para la navegación,
-
y luego una columna central ancha que puede tener el artículo de cuerpo o el contenido principal de una página
-
Las rejillas se utilizan ampliamente en los periódicos, en libros y en Internet.
-
He aquí un ejemplo de Myspace, que la página de inicio en este momento es un diseño fuertemente reticulada,
-
y se puede ver una buena combinación de imágenes y texto en su página de inicio.
-
Aquí puedes ver la página de inicio de Stanford, y la red invisible apuntala toda esta estructura.
-
Pero eso no quiere decir que todo es una columna de ancho hasta el fondo.
-
Una cosa que me gusta de esta página es ese golpe elementos diferentes a través de varias columnas.
-
Y también se puede ver cómo esta rejilla de cinco columnas va a través de * casi * toda la página:
-
Usted puede ver cómo la navegación en la parte superior tiene cinco columnas;
-
el logotipo de Stanford se centra en las dos primeras de esas columnas;
-
y esos cinco columnas viajar por todo el espacio en blanco mayor parte de la página.
-
La rejilla se rompe un poco en la parte inferior, con el pie de página.
-
Aquí está el New York Times, página web donde, de nuevo, se puede ver una cuadrícula de cinco columnas por el contenido,
-
con una sexta columna para la navegación en el lado izquierdo.
-
Usted puede ver cómo esos cinco columnas viajar invisiblemente toda la página,
-
y que algunos de los contenidos en el medio, por ejemplo, es de dos columnas de ancho,
-
y qué partes son dos columnas de ancho varían a través de la página,
-
y por lo que hace que sea un poco más dinámica, por lo que no se siente demasiado rutinario y aburrido demasiado.
-
Los periódicos han beneficiado de los sistemas de red y realmente empujó el sobre en el que durante mucho tiempo
-
por lo que [nos] vi un par de los tiempos de Nueva York para darle una idea de las diferentes formas que utilizan las redes.
-
He aquí un ejemplo que combina texto e imágenes.
-
Aquí se puede ver un "enfoque más contextual" punto de vista, donde el artículo más reciente en la parte superior es el más grande,
-
y los artículos más bajos son más pequeños hacia abajo.
-
He aquí un ejemplo de una cuadrícula en la página de inicio New York Times que está muy por debajo de la tapa,
-
mostrando las secciones y luego artículos dentro de cada sección,
-
con una imagen en miniatura para cada una de las secciones.
-
Una rejilla no tiene que ser no superpuestas:
-
Usted puede tener diferentes filas de contenido de una página se adhieren a las redes de diferentes -
-
a menudo van a tener algún tipo de relación entre sí.
-
Así que hice un boceto rápido aquí, donde tenemos seis elementos en dos filas,
-
y la cuadrícula está escalonada.
-
Cuando tienes contenido que se presenta en múltiples piezas -
-
por ejemplo, los títulos de las clases y los números de los cursos -
-
¿cómo debe organizarlos para que funcionen bien juntos y son fáciles de leer?
-
Estoy sorprendido por la frecuencia con libros llevará algún contenido como este
-
y poner estos puntos - o de alguna manera van a separar las dos piezas.
-
Obviamente no es imposible de leer, pero creo que podemos hacerlo mejor.
-
He aquí un ejemplo en el que se han alineado a la derecha del elemento más pequeño -
-
que podrían ser los números de página o números de cursos, o la fecha, o algo así -
-
y entonces nos hemos alineado a la izquierda el elemento más grande - que es el título o alguna otra pieza mayor de texto
-
La otra cosa que hemos hecho aquí es que hemos cambiado el peso de la tipografía
-
de modo que el número es un peso diferente del texto.
-
Ahora, ¿cuál es pesada y cuál es la luz? Depende de cuál de ellos desea hacer hincapié.
-
En este caso, el nombre del curso es probablemente más importante - que es lo que va a escanear primero -
-
y luego cuando desee inscribirse, puede que tenga que encontrar el número del curso,
-
y por lo que es un peso más ligero, porque eso es lo que vamos a usar segundo.
-
Si tiene tres trozos de texto - por ejemplo, si se agrega un nombre instructor -,
-
puede compensar esa tipográficamente.
-
Esto es sólo un ejemplo de cómo agregar la vuelta a la derecha.
-
Adición de una tercera columna puede hacer las cosas un poco confuso;
-
[pero] en función de su contenido, que puede funcionar también.
-
Otra estrategia, por supuesto, es que se podría poner ese tercer elemento en una línea aparte.
-
Aquí vemos los instructores figuran a continuación el número del curso.
-
Y si vamos a hacer esto, tener las cosas que pedazos juntos estar más cerca,
-
y los trozos separados estar más separados.
-
Por lo tanto, lo que estamos viendo ahora es que el líder -
-
el espaciado entre líneas entre cada línea - es idéntica
-
y eso es sub-óptimo, porque eso es menos claro que el nombre del elemento instructor acompaña.
-
Si a esto añadimos un poco de espacio entre nuestros elementos
-
se pone de manifiesto que los grupos de instructores con los que por supuesto.
-
También puede ver una desventaja aquí, donde, por tener dos líneas por curso, se lee con toda claridad,
-
pero estamos usando más espacio vertical - tal vez menos espacio horizontal.
-
Dependiendo del espacio en la pantalla o en el espacio de impresión que estás poniendo a cabo dentro,
-
que va a cambiar sus decisiones de diseño.
-
Otra cosa que podría hacer si de verdad queremos restar importancia a los números curso
-
es la escala de nuevo el valor de gris de ese número, para hacerlos retroceder aún más.
-
Un consejo rápido es: ¿cuándo va a crear sistemas de este tipo,
-
asegúrese de trabajar con el mayor bloque de texto en primer lugar.
-
Puede ser fácil de diseñar para un título corto
-
y luego tener un sistema de red o la alineación que se destruye cuando se llega a algo más.
-
Esto es especialmente cierto si usted está diseñando para múltiples idiomas.
-
Por ejemplo, el texto alemán a menudo consume una finca mucho más real
-
que el texto Inglés, español o francés hace.
-
Vamos a ver ejemplos de diferentes estilos de alineación
-
y cuando trabajan en diferentes circunstancias en esta conferencia.
-
En general, una regla de orden general es que para la izquierda-a-derecha-lectura lenguas,
-
texto alineado a la izquierda es el más rápido para skimming.
-
Y se puede ver que aquí me toman el mismo contenido y lo centró,
-
y he dejado todas las fichas, así que por eso tienes la locura novatadas.
-
Parece una especie de fresco, en realidad, y si vas por el dinamismo, esto podría funcionar bastante bien.
-
Sin embargo, si usted quiere ser capaz de analizar rápidamente las cosas,
-
esto será un poco más lento que si todo está alineado.
-
He aquí un ejemplo de una estrategia de diseño común, donde "todo está centrado."
-
Y se puede, por supuesto, obtener la información fuera de esta página [cuando] necesita;
-
pero el centrado hace que sea difícil para buscar las cosas que usted necesita.
-
Además, hay un montón de basura gráfica en esta página -
-
por lo que las cajas de todo el panorama y las publicaciones son bastante innecesario
-
y hace que sea más lento para el ojo para llegar a las cosas que usted necesita.
-
Si esta página se han diseñado utilizando una cuadrícula, y se elimina la basura gráfico,
-
a continuación, el contenido en sí mismo se trasladaría a la palestra con más fuerza.
-
Así que, para resumir, mediante la alineación y ayuda a guiar el ojo y reducir el desorden.
-
Evite ligeras desalineaciones, porque minan su capacidad de faro de la organización.
-
Automáticamente notar patrones y también las desviaciones de los mismos,
-
por lo que los patrones de uso cuando se desea transmitir la coherencia,
-
y se desvían de ellos sólo cuando se desea distinguir intencionalmente ese contenido.
-
Si la desviación de la pauta es accidental o pereza,
-
se saltan a la vista y distraer del mensaje que usted está tratando de transmitir.
-
Y usas proximidad visual - trozos de mantenimiento de juntas y autónomo,
-
y separando trozos más separados - para distinguir qué elementos son.
-
Y puede utilizar la escala y jerarquía - haciendo las cosas importantes más grande
-
y las cosas menos importantes de espalda o menor escala en color -
-
como una forma de enfatizar lo que las partes más y menos importante de la página son.
-
Por lo tanto, cuando hay algunos ejemplos de cuándo se puede utilizar para fines diferentes alineaciones diferentes?
-
Tenemos un buen ejemplo en el sitio web de Amazon.
-
Amazon en realidad tiene diferentes partes de su sitio que utilizan diferentes tipos de alineación para.
-
Y se puede ver el primer ejemplo aquí, donde en la opción "Agregar una dirección" cuadro de diálogo,
-
la forma está alineada de manera que todas las etiquetas están alineados a la derecha y que los campos de entrada están alineados a la izquierda para que,
-
para que pueda obtener este arroyo claro, como lo que vimos en nuestros cursos y títulos de ejemplo.
-
Esto hace que lo que hay que llenar muy claro.
-
Aquí, en la página de su cuenta, usted puede ver todas las etiquetas se alinea a la izquierda.
-
Esta página también ofrece una agradable ejemplo de visual hierarcy,
-
donde la pieza clave de la etiqueta es muy grande,
-
y el sub-encabezamiento - lo que explica en detalle un poco más - es mucho más pequeño
-
y también se redujeron en valor de gris.
-
Y, por último, en la parte derecha de esta misma página, podemos ver un ejemplo de alineación superior,
-
donde los encabezados de la forma están por encima de la celda de la forma.
-
Y esta diversidad no se debe a tres diferentes diseñadores Amazon hizo tres partes diferentes
-
y nunca coordinado - o por lo menos eso supone que no es el caso.
-
Mi corazonada es que Amazon decidió estratégicamente cuál es la parte más importante de cada elemento era,
-
y la manera de dejar claro al espectador lo que debe prestar atención a:
-
Para las cosas que estamos familiarizados,
-
los encabezados pueden ser menos importantes que las cosas que las que estamos familiarizados.
-
Así, por sesión, las cabeceras que sobresalen menos, mientras que para los aspectos de nuestra cuenta,
-
que podemos ir a menos frecuencia como un elemento de la página, tenemos que tener que aguantar más.
-
En este curso introductorio, no vamos a tener la oportunidad de hablar mucho sobre el color,
-
pero me gustaría decir un poco aquí.
-
Lo primero y más importante que decir sobre el color es: Preste atención a él!
-
Y si te puedo dar una estrategia para usar el color efectivamente, es el diseño en escala de grises en primer lugar.
-
A menudo, la gente confía en el color como una muleta para hacer distinciones visuales en los diseños,
-
y, en definitiva, tendrá que utilizar las otras herramientas en primer lugar:
-
Puesta en marcha, trabajando con la escala y el diseño como forma de distinguir los elementos de la página.
-
Luego, una vez que ha utilizado la escala y el diseño tanto como usted puede,
-
puede utilizar luminence como una manera de indicar lo que es más y menos importante-
-
luminence es sólo una palabra elegante para el valor de gris, así que si usted está diseñando en escala de grises,
-
eso significa que algunas cosas es negro, es un poco de materia gris, algunas cosas es blanco.
-
Y una vez que tienes el mejor diseño que se puede en escala de grises - en blanco y negro -,
-
a continuación, añadir el color como una forma de darle una codificación adicionales redundantes para prominencia.
-
Para utilizar Amazon como ejemplo de nuevo, esta es una de sus páginas de resultados en escala de grises.
-
Y se puede ver que toda la información que usted necesita
-
está claramente establecida en términos de la orden visual de la página -
-
qué elementos son más grandes, ¿qué elementos son más pequeños
-
Así que todo funciona en escala de grises - en negro y blanco -, pero si se agrega color, se pone aún mejor.
-
Y eso, creo, es la forma más eficaz de utilizar el color.
-
La otra cosa que decir sobre el color que creo que es útil es: Por lo general, no exagere!
-
Todo lo colores iguales, menos suele ser más potente y menos abrumador que más.
-
Esta es, obviamente, va a depender de su gusto,
-
y esto es, obviamente, va a depender de lo que usted está tratando de transmitir.
-
Una vez más desde el Aspecto y Directrices sentir,
-
he aquí un ejemplo de cómo esta versión de Java utilizado seis colores -
-
tres tonos de gris, tres tonos de morado -
-
como una manera de organizar todos los elementos en su biblioteca del widget.
-
Una manera en que se utiliza el color es que cualquier cosa que usted puede hacer clic en un poco de sombra de color púrpura,
-
y cualquier cosa que usted no puede hacer clic en un poco de sombra de color gris.
-
Y que proporciona una característica agradable organizar,
-
y le da un sentido para el usuario de lo que pueden hacer cuando se ve una pantalla en particular.
-
Y debido a que el color se utiliza de manera consistente - color significa que puede hacer clic -
-
que es muy fácil de aprender, aunque inconscientemente.
-
Y me gustaría terminar con este ejemplo de un libro. He aquí la primera página del libro de Umberto Eco,
-
«La isla del día de antes», y es un libro bellamente componer.
-
Me gustaría señalar un par de cosas sobre este libro.
-
Para empezar, hay una cita de un diario que está al principio de la página
-
que se partió en cursiva para indicar que es diferente.
-
A continuación, cada capítulo comienza con un par de palabras de texto en versales,
-
y hay una buena cantidad de espacio por encima de esa línea de texto.
-
Y, finalmente, hay un montón de espacio en blanco alrededor del texto en general,
-
y proporcionar espacio en blanco es importante.
-
Los libros y textos que tienen un poco de espacio a su alrededor son más fáciles de leer
-
que las que están llenas de atasco de salida a los bordes de los márgenes.
-
Esa es una razón por qué usted verá cubiertas duras tienen más espacio en blanco que más baratos libros de bolsillo.
-
En el caso de libro de bolsillo, que están tratando de ahorrar pasta para que sea un precio más bajo;
-
pero las cubiertas duras, que pueden cobrar un poco más para ofrecer más espacio,
-
y son más fáciles en los ojos para leer.
-
Si usted está interesado en aprender más acerca de las redes y la alineación,
-
hay un montón de buenos libros por ahí, [pero] hay un par que recomiendo:
-
Uno de ellos es clásico Jan Tschichold, «La Nueva Tipografía».
-
Otra es Kevin Mullet y Sano Darrel «Interfaces Visuales Diseño».
-
Y un tercero es Luke Wroblewski «Diseño de formularios Web»;
-
este es uno de los libros Rosenfeld, y toda esta serie es excelente en términos de su HCI.
