Что такое визуальный дизайн
Что такое визуальный дизайн
5 принципов визуального дизайна в UX
Аудио перевод статьи
Как применять принципы визуального дизайна для проектирования более удобных интерфейсов.
Резюме: Принципы масштабирования, визуальной иерархии, баланса, контраста и Гештальта позволяют не только создать красивые дизайн-решения, но и повысить удобство использования интерфейса при их правильном применении.
Глядя на визуальное оформление сайта, мы обычно можем сразу сказать, является он привлекательным или нет. Однако лишь немногие могут назвать конкретные причины, по которым макет выглядит красиво. Графика, созданная по принципам визуального дизайна, может усилить вовлеченность пользователей и повысить удобство использования интерфейса.
Принципы визуального дизайна позволяют понять, как элементы дизайна, такие как линия, форма, цвет, сетка или пространство, объединяются вместе для создания хорошо продуманной объемной визуализации.
Рассмотрим 5 принципов визуального дизайна, которые влияют на UX:
Применение этих 5 принципов поможет усилить вовлеченность пользователей и повысить удобство использования интерфейса.
1. Масштабирование
Принцип масштабирования применяется очень часто, почти каждое хорошее дизайн-решение выполнено в соответствии с этим принципом.
Определение: принцип масштабирования предполагает подбор относительного размера элемента для передачи его важности и значения в рамках композиции.
Другими словами, в соответствии с этим принципом размер наиболее важных элементов композиции больше тех, которые менее важны. Причина для этого проста: на более крупные элементы чаще обращают внимание.
Как правило, визуально привлекательный дизайн содержит не более 3-х различных размеров. Использование элементов разного размера не только вносит разнообразие, но и позволяет установить визуальную иерархию (см. следующий принцип) на странице. Не забудьте выделить наиболее важные элементы вашего дизайна, сделав их самыми крупными.
При правильном применении принципа масштабирования и выделении нужных элементов пользователи легко разберутся в визуальном оформлении интерфейса и быстро поймут, как его использовать.
Приложение Medium на iPhone: популярные статьи визуально больше, чем другие. Принцип масштабирования направляет пользователей к потенциально более интересной статье.
На подземной парковке в Кракове элемент с самой важной информацией на указателе (H – это обозначение зоны, в которой вы находитесь в данный момент) является самым большим по размеру (источник изображения: www.behance.com).
2. Визуальная иерархия
Интерфейс с правильно подобранной визуальной иерархией будет понятен и прост для пользователей.
Определение: принцип визуальной иерархии предполагает управление перемещением взгляда по странице таким образом, чтобы пользователь обращал внимание на элементы дизайна в порядке их значимости.
Принцип визуальной иерархии может быть реализован посредством изменения масштаба, значения, цвета, расстояния, расположения и множества других характеристик элементов.
Визуальная иерархия контролирует передачу информации. Если вам трудно найти определенный элемент на странице, то, скорее всего, в ее дизайне отсутствует четкая визуальная иерархия.
Для создания четкой визуальной иерархии используйте 2-3 размера шрифта, чтобы указать пользователям, какие части контента являются наиболее важными. Или подумайте об использовании ярких цветов для более важных элементов и приглушенных — для второстепенных.
Масштабирование также может помочь создать визуальную иерархию, поэтому используйте разный масштаб для разных элементов дизайна. Общее правило гласит, что дизайн должен включать малые, средние и большие элементы.
Мобильное приложение Medium: прослеживается четкая визуальная иерархия заголовков, подзаголовков и основного текста. Каждый компонент статьи имеет размер определенного типа, указывающий на его значимость.
Мобильное приложение Uber: визуальная иерархия также четко прослеживается, экран разделен на две части, в одной из них размещается карта, в другой — форма ввода (нижняя половина экрана). Это позволяет понять, что данные компоненты одинаково важны для пользователя. Взгляд сразу же притягивается к полю «Куда?» (Where to?) из-за его серого фона, а затем перемещается к информации о недавних поездках, которая расположена ниже.
Мобильное приложение Dropbox: визуальная иерархия не настолько хорошо прослеживается. Несмотря на то, что текст с описанием файлов имеет меньший размер, чем их название, разные файлы трудно отличить друг от друга. Миниатюры изображений добавляют еще один уровень иерархии, но их наличие зависит от типа просматриваемых файлов. В итоге пользователям приходится много читать и внимательно просматривать каждый элемент, чтобы найти нужный файл или папку.
3. Баланс
Для лучшего понимания принципа баланса представьте весы, только вместо веса вам нужно “сбалансировать” элементы дизайна.
Определение: Принцип баланса предполагает уравновешенное расположение или соотношение пропорций элементов дизайна. Баланс возникает тогда, когда по обеим сторонам воображаемой оси, проходящей через центр экрана, имеется равномерно (но не обязательно симметрично) распределенное количество визуальной информации. Чаще всего эта ось располагается вертикально, но она может быть и горизонтальной.
Как и при балансировке веса, если по одну сторону оси расположить большой элемент, а по другой – маленький, дизайн будет разбалансированным. При достижении баланса также имеет значение область, занимаемая элементом дизайна, а не только их количество.
Воображаемая ось, которая визуально делит экран на две части, является отправной точкой для организации вашего макета, она поможет вам понять текущее состояние равновесия для визуальных элементов. Если дизайн сбалансирован, ни одна область не привлекает внимание настолько сильно, что вы не можете видеть остальную часть макета (даже если некоторые элементы имеют больший визуальный вес). Можно выделить несколько видов баланса:
Вид баланса, который вам следует использовать, зависит от того, что вы хотите передать. Асимметрия более динамична и увлекательна. Она создает ощущение энергии и движения. Симметрия – более спокойная и статичная. Радиальный баланс всегда привлекает взгляд к центру композиции.
Find a job you love: композиция создает ощущение стабильности, что особенно уместно, если вы в поиске работы, которую любите. Баланс достигается за счет симметричности. Если нарисовать воображаемую вертикальную ось по центру, то можно заметить, что элементы равномерно распределены по обеим сторонам оси (Источник изображения: dribbble.com).
Nike: баланс этой страницы ассиметричен, что создает ощущение энергии и движения, которые соответствуют бренду Nike. Если нарисовать воображаемую вертикальную ось по центру этой страницы, то количество элементов будет примерно одинаковым по обеим сторонам оси. Однако разница заключается в том, что они не идентичны и их расположение не является зеркальным отображением друг друга. Несмотря на то, что слева находится немного больше текста, он сбалансирован более крупным заголовком справа, который занимает больше места и обладает большим визуальным весом, благодаря чему элементы уравновешивают друг друга.
Часы Brathwait: дизайн этих часов сбалансирован радиально. Взгляд сразу же притягивается к центру циферблата, общий визуальный вес распределен равномерно, независимо от того, где находится воображаемая ось.
Расположение текста на этой странице не сбалансировано. Если провести воображаемую вертикальную ось через центр страницы, элементы будут распределены неравномерно (источник изображения: www.behance.net).
4. Контраст
Это еще один широко используемый принцип, который позволяет выделить определенные элементы дизайна и сделать их более заметными пользователю.
Определение: принцип контраста предполагает сопоставление визуально непохожих элементов для того, чтобы указать на их отличие друг от друга (например, на принадлежность к разным категориям, наличие разных функций и т.д.).
Другими словами, контраст позволяет визуально передать разницу (например, размера или цвета) между двумя объектами (или двумя наборами объектов), чтобы подчеркнуть, что они отличаются друг от друга.
Принцип контраста часто реализуется через изменение цвета. Например, красный цвет обычно используется в пользовательском интерфейсе, особенно на iOS, для обозначения удаления. Ярко красный цвет указывает на то, что элемент отличается от остальных.
Приложение Reminders на iOS: красный цвет кнопки сильно выделяется на белом фоне и означает удаление.
В UX термин «контраст» часто относится к контрасту между текстом и фоном. Иногда дизайнеры специально уменьшают контрастность текста, чтобы указать, что он сообщает менее важную информацию. Но такой подход не всегда эффективен — уменьшение контрастности текстазатрудняет чтение и может сделать контент не доступным. Проводите тесты на контрастность текста, чтобы убедиться, что контент может быть прочитан вашей целевой аудиторией.
Greenhouse Juice Co: читаемость текста на бутылке зависит от цвета сока. Хотя белый цвет текста отлично подходит для некоторых соков, этикетки бутылок со светлым соком практически невозможно прочесть (источник изображения: www.instagram.com).
5. Гештальт
Принципы Гештальта были открыты в начале ХХ века в рамках гештальтпсихологии. Это направление, связанное с изучением восприятия человеком образов.
Определение: принципы Гештальта предполагают использование знаний о том, как человек упрощает и организует сложные образы, состоящие из множества элементов, подсознательно объединяя отдельные части в организованную систему, которая воспринимается им как единое целое. Другими словами, принципы Гештальта помогают использовать нашу склонность воспринимать целое, а не отдельные элементы.
Существует несколько принципов Гештальта, к ним относятся: сходство, непрерывность, завершенность, близость, общие области, фигура/фон, симметрия и порядок. Принцип близости особенно важен в UX – в соответствии с ним элементы, которые визуально более близки друг к другу, воспринимаются как часть одной группы.
Именно принцип завершенности позволяет увидеть в картине Пикассо двух целующихся влюбленных, вместо набора случайных фигур. Наш мозг дорисовывает недостающие части, чтобы воссоздать образ поцелуя.
При создании логотипов также часто применяются принципы Гештальта. В логотипе NBC нет павлина на белом фоне, но наш мозг говорит — что он есть.
В форме регистрации Uber также использован принцип близости: названия полей расположены рядом с соответствующими полями, что позволяет легко понять, какой информацией нужно заполнить каждое из них. Если бы между одним полем и названием следующего — было меньше пространства, то вышла бы путаница, и пользователи не смогли бы понять, какая информация от них требуется.
Налоговая форма США 2017: отсутствие пустого пространства между полями затрудняет заполнение формы. Вы легко можете упустить, к чему относится второе поле «Фамилия» (Last Name). Применение принципа близости для разделения полей позволило бы значительно улучшить удобство использования этой формы.
Почему принципы визуального дизайна важны
Почему мы должны применять принципы визуального дизайна и понимать их? Помимо создания чего-то «красивого», их правильное использование и понимание позволяет:
Повысить удобство использования. Применение этих 5 принципов приводит к созданию макетов, которые просты и удобны в использовании. Например, золотое сечение, которое часто используется для создания произведений искусства, также применялось при верстке для определения визуально приятного соотношения между размером шрифта, высотой и длиной строки. Результат, как правило, приводил к укорачиванию длины строк, что создавало баланс (благодаря белому пространству) на веб-странице и делало текст более удобным для чтения. В сочетании с продуманным UX-дизайном правильное визуальное оформление увеличивает скорость выполнения задач и повышает вовлеченность пользователей.
Вызвать эмоции и восторг. Красивые объекты вызывают положительные эмоции, но также нельзя отрицать тот факт, что, когда люди находят дизайн визуально привлекательным, они могут быть более снисходительными к незначительным неудобствам в использовании. Следуя принципам визуального дизайна, вы можете создавать интерфейсы, которые приятно выглядят и дают пользователям возможность чувствовать себя лучше.
Усилить восприятие бренда. Сильная визуальная система повышает доверие и интерес пользователей к продукту и правильным образом представляет и усиливает бренд.
ОСНОВНЫЕ ПРИНЦИПЫ ВИЗУАЛЬНОГО ДИЗАЙНА, ИСПОЛЬЗУЕМЫЕ ДЛЯ УПРАВЛЕНИЯ ВНИМАНИЕМ ПОЛЬЗОВАТЕЛЯ
Аннотация
В статье описываются основные принципы визуального дизайна, которые используются при создании интерфейсов программных продуктов.
Ключевые слова: принципы визуального дизайна, иерархия, акцент, контраст, выравнивание, баланс, пространство
При создании любого программного продукта большое значение имеет разработка визуального дизайна интерфейса.
Интерфейс осуществляет передачу информации пользователю, а также представляет возможности и функции программы. Визуальный дизайн интерфейса влияет на эффективность использования продукта пользователями и его внешнюю привлекательность. Наличие удобного в использовании и внешне приятного интерфейса позволяет увеличить вероятность успеха продукта на рынке программного обеспечения.
Разработка дизайна интерфейса – довольно сложный процесс. Существует множество правил и принципов оформления и расположения различных визуальных элементов, позволяющих создавать простые для понимания и приятные для глаза интерфейсы.
Целью данной работы является рассмотрение основных принципов визуального дизайна интерфейса.
Элементы визуального дизайна
Любой интерфейс состоит из множества элементов визуального дизайна, объединенных между собой в некую визуальную конструкцию. Эти элементы являются основными инструментами, используемыми для создания привлекательного и приятного в использовании программного продукта.
К основным элементам визуального дизайна можно отнести точки, линии, различные фигуры и формы.
Линия является наиболее распространенным элементом. С ее помощью можно предать определенное настроение. Так, например, прямые горизонтальные линии передают ощущение спокойствия, вертикальные линии создают впечатление устойчивости и прочности, диагональные линии подразумевают неустойчивость и движение. Волнистые линии, как правило, создают впечатление спокойствия и мягкости, а зигзагообразные линии – нервозности и тревоги.
Также с помощью линии можно направить взгляд пользователя на какой-то определенный объект и сфокусировать его внимание на нем.
Каждый из элементов визуального дизайна имеет определенные свойства, такие как форма, размер, яркость, цвет, направление, текстура, расположение и т.д.
Принципы визуального дизайна указывают, как элементы и их свойства должны использоваться при создании удобных и привлекательных интерфейсов. К основным принципам визуального дизайна можно отнести следующие: визуальная иерархия, акцент или фокусная точка, контраст, выравнивание, баланс и пространство.
Основные принципы визуального дизайна
1 Визуальная иерархия
Иерархия в дизайне интерфейса четко показывает отношения между элементами визуального дизайна, структурируя информацию так, чтобы пользователь мог быстро разобраться с интерфейсом и отличить в нем главное от второстепенного.
Хорошая продуманная визуальная иерархия позволяет пользователю сэкономить время и усилия необходимые для первоначального восприятия интерфейса или веб-страницы. Она помогает структурировать содержание таким образом, чтобы человек мог довольно быстро понять его. Алан Купер в своей книге «Об интерфейсе. Основы проектирования взаимодействия» отмечает, что пользователи, как правило, не замечают качественную иерархию, однако ее отсутствие сразу же бросается им в глаза.
Основой для визуальной иерархии является ранжирование – выстраивание элементов в порядке их значимости и подчиненности.
Визуальная иерархия создается при помощи таких свойств элементов как размер, цвет, расположение, контраст и выравнивание. Причем, чем важнее элемент, тем заметнее он должен быть. Так, например, заголовок (наиболее важный элемент) чаще всего располагается сверху слева и является очень контрастным: имеет более крупный шрифт, по сравнению с основным текстом, и выделен другим цветом.
Элементы в иерархии, связанные между собой логически (имеющие сходные функции или часто используемые вместе), должны быть визуально связаны. В книге Алана Купера отмечено, что расположение элементов должно принимает во внимание порядок выполнения задач и движение взгляда по экрану, то есть оно должно помогать понять пользователям, каким образом связаны элементы и какие действия стоит выполнять дальше.
2 Акцент
Акцент представляет собой фокусную точку, самую важную деталь в интерфейсе, которая привлекает внимание пользователя. Именно с этой, самой важной детали начинается движение взгляда по интерфейсу.
В любом интерфейсе должна быть фокусная точка, причем она должна быть только одна.
Акцент в основном создается с помощью размера, цвета, формы, контраста и размещения относительно других объектов.
Чаще всего в качестве фокусной точки выступает призыв к действию: нажать на кнопку, перейти по ссылке, заполнить форму и т.д.
3 Контраст
Контраст это степень различия между элементами, используемая для их визуального разделения (позволяющая отличить один элемент от другого).
Контраст задается с помощью следующих свойств: размера, формы, цвета, направления, яркости и т.д.
Наиболее контрастные элементы сильнее притягивают внимание пользователя. Поэтому для привлечения внимания к какому-то конкретному элементу интерфейса стоит сделать его более контрастным по отношению к окружению (сделать на нем акцент).
Данный принцип визуального дизайна имеет большое значение при работе с текстом, оказывая влияние на его разборчивость и читаемость. Именно поэтому необходимо обеспечить хороший контраст между фоном и текстом, расположенном на нем. Легче всего человеческим глазом воспринимается черный текст на белом фоне.
4 Выравнивание
Выравнивание используется для представления информации в систематизированном и упорядоченном виде, удобном для визуального сканирования, а, следовательно, легким для восприятия. В своей книге «Универсальные принципы дизайна» Лидвелл Уильям отметил, что выравнивание элементов объекта относительно других элементов, создается ощущение единства и связности.
Для выравнивания элементов относительно друг друга используется модульная сетка, состоящая из колонок и рядов. Все элементы интерфейса должны быть выровнены, ничто не должно быть размещено произвольно.
Сетка создается дизайнером таким образом, чтобы подчеркнуть наиболее важные элементы и при этом оставить место для менее важных.
Согласно книге Алана Купера использование сетки при создании интерфейсов дает следующие преимущества: удобство применения, эстетическая привлекательность и эффективность. Удобство применения заключается в единообразии расположения элементов, благодаря чему их поиск и обработка пользователем требует меньшего времени и нагрузки. Эстетическая привлекательность заключается в упорядоченности элементов. Эффективность использования сетки состоит в ускорении разработки дизайна и верстки, легкости изменения и расширения дизайна.
5 Баланс
Баланс определяет распределение элементов в интерфейсе. Сбалансированные интерфейсы создают у пользователей ощущение комфорта и простоты ориентирования.
Для создания сбалансированного интерфейса необходимо учитывать визуальный вес элементов и их визуальное направление.
Визуальный вес является некой силой объекта, притягивающей взгляд зрителя к нему. Чтобы изменить визуальный вес элемента следует рассмотреть такие его свойства, как размер, цвет, оттенок, расположение, форму и т.д. Например, более крупные элементы имеют больший визуальный вес, чем мелкие. Также, объекты в теплых тонах кажутся «тяжелее» объектов в холодных тонах. Однако самым «тяжелым» цветом является красный, а самым «легким» – желтый. Темные объекты кажутся «тяжелее» светлых, а объекты правильной формы кажутся «тяжелее» объектов неправильной формы.
Визуальное направление указывает взгляду пользователя, куда двигаться дальше, направляя его внимание на определенные элементы интерфейса. Чтобы изменить визуальное направление следует изменить следующие свойства элементов: форму, положение, смысловое наполнение (направление взгляда, стрелки, указательного пальца), движение и т.д.
В интерфейсах различают следующие типы баланса: симметричный баланс, асимметричный, радиальный, горизонтальный и вертикальный.
Очень часто баланс достигается за счет зеркального расположения элементов в интерфейсе. Такой баланс называется симметричным. В нем легко ориентироваться, и он очень удобен для восприятия информации.
В ассиметричном балансе элементы по разные стороны от центра имеют одинаковую визуальную массу, но при этом не являются зеркальным отражением друг друга. Ассиметричного баланса достичь сложнее, чем симметричного, но зато выглядит более интересно и современно.
Радиальный баланс достигается, когда элементы исходят из одного общего фокуса и размещаются вокруг центра по оси, или в стиле лучей солнца.
6 Пространство
Визуальный шум – это одно из основных препятствий, мешающих восприятию интерфейсов и веб-страниц. Причиной его возникновения является большое количество лишних элементов, которые отвлекают внимание пользователя от тех элементов, что необходимы ему для выполнения поставленной перед ним задачи. Это может вызвать определенные проблемы.
Для того чтобы снизить визуальный шум на странице необходимо использовать больше свободного, не заполненного ничем пространства. А для этого необходимо убрать все лишние элементы и оставить только самые важные. Однако выделение важных, необходимых пользователю, элементов может быть довольно сложной задачей. Как писал в своей книге «Не заставляйте меня думать» Стив Круг при создании интерфейсов нужно исходить из того, что все имеющиеся элементы является визуальным шумом до того момента, пока не будет доказано обратное.
Помимо снижения шума наличие свободного пространства помогает удержать внимание пользователя, подчеркивая значимые элементы, а также повысить читабельность.
Список литературы
Рисунки к докладу
Рис. 1 Пример интерфейса с симметричным балансом
Рис. 2 Пример интерфейса с асимметричным балансом
Рис. 3 Пример интерфейса с радиальным балансом
Вопросы и комментарии к выступлению:
Уважаемая Мария Николаевна!
Напишите мне, пожалуйста, на адрес shatcillo@mail.ru. Хочется обсудить с Вами некоторые вопросы.
Заранее признательна, Л.А.
Уважаемая Людмила Анатольевна!
Мария Николаевна сделала, может быть и не совсем в тему, но очень полезный лично для меня доклад.
С уважением и благодарностью за Ваши очень интересные статьи и точные комментарии Головнин А.А.