Todas as culturas lense de arriba a abaixo, e a maioría das culturas lense de esquerda a dereita. Pero aínda que este coñecemento é importante para deseño da páxina, os deseñadores saben que a tarefa é moito máis difícil. Estudos recentes demostraron que a xente escanea primeiro unha páxina para ver se está interesada nela antes de lela. Os patróns de dixitalización tenden a tomar unha das dúas formas, "F" e "Z", e podes aproveitar isto no teu deseño.
Patróns F. Principios da xerarquía visual
Modelos F aplícase a páxinas de texto tradicionais, como artigos ou publicacións de blog. O lector escanea o lado esquerdo páxinas busca palabras clave interesantes en títulos aliñados á esquerda ou frases temáticas iniciais, despois detense e le (á dereita) cando se atopa con algo interesante. O resultado parece unha F (ou unha E, ou algo con franxas aínda máis horizontais; pero o termo "F" pegouse).
Como podes usar isto? Aliña a información importante á esquerda e utiliza títulos curtos e en negra, viñetas e outros elementos similares que chaman a atención para dividir os bloques de parágrafos.
Modelo Z. Principios da xerarquía visual.
Patróns en Z aplícase a outros tipos de páxinas como publicidade ou sitios web onde a información non se presenta necesariamente en parágrafos de bloque. O lector primeiro escanea a parte superior da páxina, onde é probable que se atope información importante, despois móvese á esquina oposta en diagonal e fai o mesmo na parte inferior da páxina.
Os deseñadores web normalmente deseñan as súas páxinas para acomodar este comportamento de forma explícita, colocando a información máis importante nas esquinas e orientando outra información importante ao longo das franxas superior e inferior e conectándose en diagonal. No seguinte No deseño da conferencia, elementos importantes son o logotipo (arriba á esquerda), un botón "rexistrar agora" (arriba á dereita) e unha lista de altofalantes (abaixo), que están estratexicamente situados en bos puntos do patrón Z.
2. O tamaño importa. Principios de xerarquía visual.
É moi sinxelo: a xente le primeiro as cousas grandes. Se os teus ollos están atraídos pola "vista" antes de "dividir" no seguinte publicidade para o Young Vic Theatre, debes contactar inmediatamente cun psicólogo perceptivo: probablemente poidas gañar moito diñeiro ao ser probado como unha anomalía rara.
Curiosamente, esta tendencia é o suficientemente forte como para anular a regra de arriba abaixo. Na imaxe de arriba, "hack" anula o "tempo de actuar" porque é máis grande e está á esquerda (polo que a regra de esquerda a dereita axuda). Pero na seguinte páxina do "Informe Anual: Campaña polos Dereitos Humanos 2012" (desenvolvido na quinta columna de Medios) lemos en grande tipo de letra "A loita pola igualdade no camiño da campaña" antes do texto directamente encima "Eleccións 2012". Principios da xerarquía visual
"Eleccións 2012" é a orde de información de máis alto nivel: indícanos o tema xeral ao que se refire a información a continuación. Pero o deseñador decidiu que o título do artigo era máis interesante para os lectores e, polo tanto, valorouno para que fose lido primeiro.
3. Espazo e textura. Principios da xerarquía visual
Outra forma de chamar a atención é darlle ao contido espazo suficiente para respirar . Se hai un espazo negativo significativo ao redor do botón ou se seguen amplamente as liñas do bloque de texto, estes elementos serán máis facilmente visibles para os lectores. Como podes ver na imaxe de abaixo (parte do sitio de DrawtoClick), o espazado pode ser unha alternativa elegante ou un complemento ao uso do tamaño. Aquí, punto vendas, “Notre agence vouscompagne...”, está escrito en letra moi pequena, pero está rodeado dunha abundancia de espazos en branco, indicando a súa importancia. Abaixo, as frases "Le Compendre", "Le Réaliser" e "Le Partager" reciben un énfase adicional, sendo separadas do espazo circundante.
Cando a xente fala de "textura" en relación coa xerarquía visual, non se refiren aos efectos gráficos da textura. Pola contra, este tipo de "textura" refírese á disposición global ou estrutura do espazo, texto e outros detalles dunha páxina. Isto Un exemplo de Bright Pink ilustra ben o concepto:
Na primeira imaxe, a palabra "Deporte" está máis alta na xerarquía que "bádminton" porque é máis alta, máis grande e máis atrevida. 2 imaxe as dúas palabras son aproximadamente equivalentes, grazas ao rectángulo negro que destaca "badminton" e sitúao no seu propio espazo. Na terceira imaxe, o garabato de fondo interrompe o espazo de 'Deporte' pero non de 'bádminton' e, polo tanto, leva a unha reversión onde o 'bádminton' está máis alto na xerarquía. Este desenvolvemento é difícil de predicir, polo que os deseñadores adoitan asocialo cun sentido holístico de "textura".
4. Peso da fonte e emparellamento. Principios da xerarquía visual
A selección de fontes é fundamental para establecer a xerarquía visual. Entre os atributos máis importantes dunha fonte están o peso, o ancho dos trazos que compoñen as súas letras e o estilo, como serif e sans serif. Outras modificacións, como a cursiva, tamén poden xogar. Fíxate como auriculares afecta a orde da xerarquía de palabras no deseño web que aparece a continuación para The Tea Factory: "os tés perfectos para manterte quente" é o principal, pero as diferenzas no peso da fonte e en cursiva, ademais da colocación das palabras, crean unha experiencia de lectura máis dinámica e menos lineal. «://azbyka.com.ua/foto/tea-factory.jpg" /> Nalgúns casos, o obxectivo é presentar unha variedade de información como igual de urxente. Establecer todo co mesmo tamaño e peso proporcionará equivalencia, pero tamén o fará monótono. Diferenciar fontes é unha forma de evitar isto, como na portada da revista Trendi. Principios de xerarquía visual de aquí abaixo, a páxina en cinco xerarquías iguais. xerarquía, pero logra variedade alternando dúas fontes ben emparelladas: unha cunha serif de peso medio e outra cunha sans-serif lixeira pero alta.
5. Cor e sombra.
Aquí tes outra obvia: as cores brillantes destacan das cores apagadas ou os tons de gris, mentres que os tons máis claros aparecen máis "distantes" e, polo tanto, caen máis baixos na xerarquía que os tons máis ricos e escuros. O sitio web Where Are They contrasta a luz brillante e a retroiluminación de cores cun efecto de cuadrícula en branco e negro co efecto de luminosidade:
O sitio web do Guggenheim usa a cor para enfatizar información importante como a selección de localizacións, unha lista de exposicións que se están vendo actualmente e ligazóns a páxinas especiais. exposicións. Principios da xerarquía visual
O sitio web do Whitney Museum, pola súa banda, establece unha xerarquía dentro dun tipo de letra, peso e ton (negro) usando o matiz (o que significa engadir branco ao ton base, facéndoo máis claro). "Cory Archangel on Pop Culture" está claramente por debaixo de "New on Whitney Stories" na xerarquía visual, non só porque é máis baixo, senón tamén porque a súa sombra é máis clara, o que o fai menos visible sobre o fondo branco. Principios da xerarquía visual
A cor ten un significado especial deseño móbil aplicacións nas que o tamaño de pantalla pequeno limita a túa capacidade de usar outras estratexias como a variación do tamaño e o espazo amplo. Na aplicación Grainger Industrial Supply, o botón "Proceder á compra" ten cor vermella, polo que destaca en calquera páxina onde apareza. O panel Resultados de busca estreitos, pola contra, é gris, polo que é aproximadamente equivalente na xerarquía a outros elementos como a barra de busca e as ligazóns de produtos.
Deseño de aplicacións para Grainger
6. Dirección para deseñadores.
Os deseños de páxina adoitan deseñarse segundo unha cuadrícula de liñas verticais e horizontais, tanto por convención como porque é o formato máis lexible. Neste sistema, aparece unha nova forma de establecer a xerarquía: romper a cuadrícula. O texto que se coloca nunha curva ou en diagonal destácase automaticamente do texto circundante, bloqueado pola grade, tomando o protagonismo. Esta foi durante moito tempo unha estratexia eficaz en publicidade, como este cartel da parada de autobús de Frost Design.FAQ. Principios de xerarquía visual para deseñadores.
1. Que é a xerarquía visual?
A xerarquía visual é un principio de deseño que ten como obxectivo organizar os elementos nunha páxina de forma que subliñe o seu significado e dirixa a atención do usuario. Axuda aos usuarios a comprender rapidamente a xerarquía da información e a interactuar eficazmente co contido.2. Por que é importante a xerarquía visual no deseño?
A importancia da xerarquía visual reside en:- Usabilidade mellorada. Axuda aos usuarios a atopar a información que necesitan máis rápido.
- Mellora da percepción. Fai que o contido sexa máis comprensible e atractivo.
- Estimular a interacción. Chama a atención sobre os elementos clave e fomenta a acción.
- Simplifique a navegación. Facilita a navegación e a navegación pola páxina.
3. Cales son os principios básicos da xerarquía visual?
Os principios básicos inclúen:- Tamaño e escala. Os elementos máis grandes chaman máis a atención e considéranse máis importantes.
- Cor e contraste. Os elementos brillantes e contrastantes destacan e chaman a atención.
- Localización e aloxamento. Os elementos que están máis altos na páxina ou máis preto do centro percíbense como máis importantes.
- Espazo e baleiro. Deixar espazo arredor dos elementos axúdalles a destacar.
- Tipografía. Utilizar diferentes tipos de letra, tamaños e estilos de texto para enfatizar a importancia da información.
- Formas e liñas. Usando formas e liñas para crear pautas e énfase.
4. Como usa o tamaño e a escala para crear xerarquía visual?
Aplicando tamaño e escala:- Títulos e subtítulos: Use tamaños maiores para os títulos e tamaños máis pequenos para os subtítulos para crear unha estrutura clara.
- Elementos clave: Aumenta o tamaño dos botóns ou ligazóns importantes para que destaquen doutros elementos.
- Imaxes e gráficos: Use imaxes grandes para chamar a atención sobre as partes clave do contido.
5. Como afectan a cor e o contraste á xerarquía visual?
Efecto de cor e contraste:- Acentos de cor: Use cores brillantes ou saturadas para resaltar elementos clave.
- Combinacións contrastantes: Use cores contrastantes para o texto e o fondo para mellorar a lexibilidade.
- Harmonía de cores: Asegúrate de que as cores que elixes estean en harmonía entre si e non distraen a información principal.
6. Como utilizar correctamente a disposición e a colocación dos elementos?
Principios de colocación:- Elementos importantes enriba: Coloque a información clave na parte superior da páxina onde sexa inmediatamente visible.
- Ubicación central: Os elementos colocados máis preto do centro tenden a chamar máis a atención.
- Secuencia de colocación: Ordenar os elementos nunha orde lóxica pode mellorar a comprensión da información.
7. Como axuda o espazo en branco a crear xerarquía visual?
O papel do espazo baleiro:- Elementos separadores: Crear un espazo baleiro entre elementos axuda a separalos claramente e mellora a percepción.
- Centrando a atención: Deixar espazo arredor dun elemento importante fai que destaque e chame a atención.
- Limpo e ordenado: O uso de espazos en branco fai que o deseño pareza máis ordenado e organizado.
8. Como usar a tipografía para crear xerarquía visual?
Aplicación da tipografía:- Tipos de letra e estilos: Use diferentes tipos de letra e estilos para títulos, subtítulos e texto do corpo.
- Tamaño e peso do texto: Aumente o tamaño e o peso do texto para obter información importante.
- Selección: Use cursiva, negriña ou subliñado para enfatizar palabras ou frases clave.
9. Como poden influír as formas e as liñas na xerarquía visual?
Influencia de formas e liñas:- Liñas guía: Use liñas para crear guías que axuden o usuario a seguir páxina.
- Formas como acentos: As formas xeométricas poden resaltar elementos importantes ou crear acentos.
- Separación de contidos: Pódense usar liñas para separar diferentes partes do contido, creando unha estrutura clara.
10. Que ferramentas e técnicas se poden utilizar para probar a xerarquía visual?
Métodos de proba:- Proba cos usuarios: Realice probas con usuarios reais para obter comentarios.
- Análise de comportamento: Uso de analíticos instrumentos para estudar o comportamento dos usuarios na páxina.
- Comentarios dos compañeiros: Solicitar que o deseño sexa revisado polos compañeiros para obter opinións e recomendacións adicionais.
- Mapas de calor: Analiza mapas térmicos para determinar que elementos chaman máis a atención.
- Probas A/B: Comparar diferentes versións dun deseño para determinar a mellor opción.
Deixe un comentario
Ten que ser sesión para publicar un comentario.