Принципы проектирования: введение в визуальной иерархии


По мере развития технологий и изменения интерфейсов пользователя, необходимые навыки проектирования в Visual Design продолжает расти. Из свежих примеров типичного пользовательского интерфейса, выходящих каждый год, и наши фундаментальные представления о визуальной иерархии, восприятие, и состав изменился?

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

Основополагающие правила визуального восприятия имеют решающее значение для любого визуального оформления, так как они обучают, как информацию с вложенным смыслом может быть как можно быстрее переданы. Однако, поскольку визуальный дизайн является близким родственником графического дизайна, эти стандарты были установлены для печатных СМИ, и еще должны быть переопределены для цифровой.

Что-то вроде “Цифровая школа Баухауз”, которые потенциально могли бы создать новые принципы проектирования еще не сформировался. Как люди испытывают интерфейс совершенно по-разному из печати, правила визуальной иерархии и композиции не только встречались, они просто рухнут в пользовательском интерфейсе.

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

Большинство иерархических проектов в интернете изначально пришли из печати-на основе дизайна, такие как газетные макеты.

Визуальной иерархии: новое понимание визуальной композиции для интерактивных интерфейсов

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

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

Как дизайнеры используют размер, цвет, форму и ориентацию, чтобы передать смысл и настроение в дизайне?

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

Цвет в визуальной иерархии

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

Рассмотреть вопрос о немедленном коннотации Красного Креста по отношению к черно-белому. Почти повсеместно, Красного креста символизирует нейтралитет и защита. Такой потенциал для немедленной связи с использованием цвета. Цвет также часто используется для выявления групп, так как при одной Красного Креста среди трех монохроматических те-то выделяется как более существенное.

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

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

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

Хорошим примером содержательных, структурных использование цвета в веб-дизайне-это имена для изменения сайта. Сайт сразу сообщает его структуры на основе использования цвет; организация разбросана по умолчанию, но может быть изменен по теме и/или цвет.

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

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

Размер в визуальной иерархии

Давайте представим, иллюстрация одна большая птица сидит рядом с тремя поменьше. Без какой-либо дополнительной информации, это простой графический немедленно взаимодействует взаимосвязь между его элементами: родителей и детей, которые в совокупности общается с семьей.

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

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

Рассмотрим некоторые из наиболее широко используемых визуальных интерфейсов, таких как Instagram. Ничего на экране конкурирует с изображениями и видео-они занимают более 60% от всего экрана. Цель пользовательского интерфейса немедленно.

Примером опровергая типичная структура визуальная иерархия в веб-дизайне является портфолио сайта для арт — /дизайн-студия Ро/Лу. Их необычный сайт, возможно, не самый понятный, но это проблемы визуального оформления типичного интернет-творческого портфолио. Из-за намеренной хаотизации свои разнообразные проекты, другой появляется как доминирующими каждый раз, когда посетитель заходит на сайт, что делает каждое посещение уникальным и интересным.

Работа не организована иерархически в портфелях самых креативных дизайн-студий, так как каждый проект является уникальным и одинаково важны. Дизайн сайта Ро/Лу создает динамичную композицию с различной степенью заинтересованности при каждом посещении и предлагает зрителям исследовать обширное портфолио Студии. Следовательно, эклектического, междисциплинарного характера в дизайн-студии представлено рандомизированное отображение контента.

Сайт для арт — /дизайн-студия Ро/Лу коренным образом изменяет структуру иерархии с большим эффектом.

Выравнивание в визуальной иерархии

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

Твердая композиция может появиться застой и визуально неинтересно, если элемент выделяется из визуального сетки, т. е. из чувства порядка. Рассогласование, или “ломая сетку” — это возможность дать графический элемент больший визуальный вес. Эта концепция имеет фундаментальное значение для визуальной иерархии в дизайне.

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

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

Например, ДНК-проект — это сайт, который использует ряд несвязанных иерархий для общения творческих работ для музыканта. Структура сайта сложна, как строительство альбоме.

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

Сайт проекта ДНК с необычным, но ясной визуальной иерархии.

Формы в визуальной иерархии

Когда дело доходит до форм, давайте рассмотрим, как тут же простой в форме сердца передает ее потенциального использования Для » как » в большинстве социальных сетей УИС. Для установления значимости или групп, рассмотрим одно сердце среди четырех кругов. Геометрические формы похожи на цвета в фигуры несет в себе определенные коннотации, которые дают элементы личности или смысл.

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

Цель за «симпатии» изображение, скачивая файл, сделать телефонный звонок, или проверить сообщение передается прямо и просто значки (геометрические фигуры). Эта форма эффективной визуальной коммуникации становится все более важным в глобальном рынке, где цифровые продукты часто служат обширной международной аудитории с несколькими языками.

Газеты пришлось быстро адаптировать свой дизайн для новых технологий. Остальные отрасли содержимого последовал его примеру.

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

Ломая традиционные веб-макеты, знаки дю-хлебе насущном сайт использует базовый квадрат и круг формы в тонкий способ, чтобы представить уникальные визуальное иерархии, которая направляет посетителей через контент. Меню в центре страницы, и когда посетители нажмите на него, четыре цветные точки, представляющие четыре разделы сайта появляются. Затем посетители перетащите одну из точек на площадь, чтобы обратиться к этому разделу.

В знаках повседневной жизни сайт

Движения в визуальной иерархии

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

Что может движения общаются другие, чем буквальный перевод самого? Движение часто используется в пользовательском интерфейсе как понять, что элемент можно взаимодействовать. Может ли движение быть отодвинута еще дальше и использовать как способ общения что-то уникальное? Если визуальная иерархия не только об эффективности коммуникации, а также о внедренных смысл, как может Движение быть использован в качестве основного средства визуальной коммуникации?

На сайте я помню, основной интерфейс (который анимированные) сразу выделяется как бы приглашает взаимодействия. Хотя движения и интерфейс функциональные навигационные инструменты, визуальные дизайнеры использовали потенциальные потери этих элементов как способ общения основной миссии сайта: болезнь Альцгеймера. Просто как то замирания воспоминания пациентов, для которых организация собирает средства, сайт медленно исчезает в ничто без активного взаимодействия.

Звук в иерархии информации

Звук другой инструмент невозможно использовать в печатных СМИ, но еще предстоит разработать в соответствии с принципами иерархии. Т. к. звук совсем не визуально, нет никаких правил для обозначения. Но звук также может быть инструментом дизайна, который позволяет эффективно распространять контент, а также настроение или смысл. Элементы дизайна, которые несут определенные звуки могут быть сгруппированы относительно друг друга, а те, что самые смелые могут показаться наиболее важных или может означать отрыв от группы.

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

Звуки сами по себе могут быть настолько сложными, что они создают целую настроения или сообщение, прежде чем что-нибудь визуально воспринимается. Просто как красочный фон, создает настроение, может сидеть в фоновом режиме, или обеспечивать обратную связь в интерфейсе, например, реагирует на нажатие кнопки на мобильном телефоне. Принцип метода прост, но креативность, благодаря которой он может использоваться, где магия может случиться.

Из-за ее важности в творчестве коллектива, сайт создан для выставки немецкого художника группы Ноль в Музее Гуггенхайма использует звук в качестве атмосферного фона, а также как форма обратной связи при навигации на сайте. Смелые мелодии, создать произведения, которые представляют зачатки тему, в то время как третичные проектов щелкните на заднем плане.

Сайт для группы артиста ноль в Музее Гуггенхайма, где звук играет важную роль

Концепция визуальной иерархии

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

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

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

Первоначально опубликовано на https://www.toptal.com


Принципы проектирования: введение в визуальной иерархии первоначально была опубликована в УБ коллектива на средних, где люди продолжают разговор, выделение и реагирование на эту историю.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.