Os principios de xerarquía visual para deseñadores son un concepto de deseño que se usa para guiar como se moven os ollos do espectador a través dun deseño e determinar cales son os elementos máis importantes ou visualmente atractivos.
Ao principio había táboas de pedra, rolos de papiro e papel. Despois viñeron as pantallas de ordenador e as tabletas electrónicas. A medida que a tecnoloxía de visualización de páxinas evoluciona, os deseñadores quedan cunha forma clara de organizar o contido. Pero cal é mellor? Máis curto , xerarquía visual.
Aquí está a definición de xerarquía visual: A xerarquía visual é a disposición elementos gráficos no deseño por orde de importancia de cada elemento. O peso visual determina importancia do elemento na xerarquía do deseño, dicíndolle ao espectador en que centrarse e en que orde.
Recursos para deseñadores. 50 gratuítos
Esta é unha cuestión cada vez máis importante xa que os marcos sensibles obrigan aos deseñadores a pensar en moitas páxinas diferentes á vez. Ante un texto denso e unha curta duración de atención, os deseñadores desenvolveron 6 principios para dirixir o ollo do lector á información máis importante.
Estes 6 principios de xerarquía visual axudaranche a deseñar todo, desde folletos ata aplicacións, garantindo que o usuario final teña unha experiencia de lectura positiva para os deseñadores.
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 outro tipo de páxinas, como anuncios ou sitios web, onde a información non se presenta necesariamente en parágrafos de bloque. O lector escanea primeiro 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 que coincidan explícitamente con este comportamento, colocando a información máis importante nas esquinas e orientando outra información importante ao longo das barras superior e inferior e conectando a diagonal.
No abaixo No deseño da asemblea da conferencia de 2010, 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 da xerarquía visual
_
É moi sinxelo: a xente le primeiro as cousas grandes. Se os seus ollos están atraídos por "a actuación" antes de "dividir" no anuncio de abaixo para o Young Vic, debe poñerse en contacto inmediatamente cun psicólogo perceptivo: probablemente podería gañar moito diñeiro ao ser probado como unha anomalía rara.
O interesante é que esta tendencia é o suficientemente forte como para rexeitar a regra de arriba abaixo. Na imaxe superior, "hack" anula o "tempo de actuar" porque é máis grande e á 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 dos 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í, o punto de venda, “Notre agence vouscompagne...”, está escrito en letra moi pequena, pero está rodeado de abundante espazo 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. Este 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. Na imaxe 2, as dúas palabras son máis ou menos equivalentes, grazas ao rectángulo negro que fai que “bádminton” destaque e o pon no seu propio espazo.
Na terceira imaxe, o garabato de fondo interrompe o espazo "Deportes" pero non o espazo "bádminton" e, polo tanto, dá lugar a unha reversión onde "bádminton" é o máis alto da 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 inflúe na orde da xerarquía das palabras no deseño web de The Tea Factory a continuación: "tés perfectos para axudarche a quentar" é o nome do xogo, pero as diferenzas no peso da fonte e as cursivas, ademais da colocación das palabras, crean un experiencia de lectura dinámica, menos lineal. "://azbyka.com.ua/foto/tea-factory.jpg" />
Nalgúns casos, o obxectivo é presentar unha variedade de información como igualmente urxente. Establecer a todos co mesmo tamaño e peso garantirá a equivalencia, pero tamén fará que pareza monótono. A diferenciación de fontes é unha forma de evitalo, como a portada da revista Trendi a continuación. Principios da xerarquía visual
Elaboración dun folleto para imprimir.
Aquí, os cinco teasers na periferia da páxina son iguais en xerarquía, pero logran variedade cambiando dous tipos de letra ben emparejados: un serif de peso medio e outro un sans-serif lixeiro pero alto.
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 exposicións especiais. Principios da xerarquía visual
Mellor fonte para embalaxe personalizada
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 para seguir unha cuadrícula de liñas verticais e horizontais, tanto por convención como porque é o formato máis lexible. Neste sistema, hai unha nova forma de establecer a xerarquía: romper a grella.
O texto que se sitúa ao longo dunha curva ou diagonal destaca automaticamente contra o texto bloqueado pola cuadrícula circundante, ocupando o protagonismo. Esta foi durante moito tempo unha estratexia eficaz en publicidade, como o cartel da parada de autobús de Frost Design.
Deixe un comentario