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.

Вот определение визуальной иерархии: Визуальная иерархия — это расположение графических элементов в дизайне в порядке важности каждого элемента. Визуальный вес определяет важность элемента в иерархии дизайна, сообщая зрителю, на чем сосредоточиться и в каком порядке.

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.

Principios da xerarquía visual

Все культуры читаются сверху вниз, а большинство культур читается слева направо. Но хотя эти знания важны для дизайна страницы, дизайнеры знают, что задача намного сложнее.

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 применяются к традиционным текстовым страницам, таким как статьи или сообщения в блоге. Читатель просматривает левую часть páxinas в поисках интересных ключевых слов в выровненных по левому краю заголовках или исходных тематических предложениях, затем останавливается и читает (справа), когда он или она сталкивается с чем-то интересным. Результат выглядит как F (или E, или что-то с еще большим количеством горизонтальных полос; но термин «F» застрял).

Modelos de dixitalización de páxinas de xerarquía visual

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.

Principios do patrón Z da xerarquía visual


 

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.

В приведенном ниже дизайне конференции 2010 года сборки важными элементами являются логотип (вверху слева), кнопка «зарегистрироваться сейчас» (вверху справа) и список ораторов (внизу), которые стратегически расположены в приятных местах 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.

usando o tamaño da fonte para a xerarquía visual

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).

Но на следующей странице « Годового отчета: кампания за права человека 2012» (разработано в пятой колонке СМИ ) мы читаем крупным tipo de letra «Борьба за равенство на следе кампании» перед текстом прямо над ним «Выборы 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.

exemplo de xerarquía visual

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:

Principios de xerarquía visual 2

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.

Обратите внимание, как auriculares влияет на порядок иерархии слов в приведенном ниже веб-дизайне для The Tea Factory : «идеальные чаи, которые помогут вам согреться» — это главное, но различия в весе шрифта и курсиве, в дополнение к размещению слов, создают более динамичный, менее линейный, опыт чтения. «://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.

Principios da xerarquía visual

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:

cor usada para a xerarquía visual


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

Museo Guggenheim

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

Whitney Museum of American Art


 

Цвет имеет особое значение в дизайне мобильных приложений, где небольшой размер экрана ограничивает вашу способность использовать другие стратегии, такие как различие в размерах и широкий интервал. В приложении Grainger Industrial Supply кнопка «Перейти к оформлению заказа» окрашена в красный цвет, выделяя ее на любой странице, где она появляется. Панель «Сузить результаты поиска», напротив, является серой, что делает ее примерно эквивалентной в иерархии с другими элементами, такими как панель поиска и ссылки на товары.

Deseño de aplicacións para Grainger Principles of Visual Hierarchy

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.