CC BY
12УДК 004.5
Информационные технологии
Тарасова Наталья Анатольевна, член Союза Дизайнеров России, ведущий арт-директор компании Proscom, г. Москва
ПРИМЕНЕНИЕ ПРИНЦИПОВ ТИПОГРАФСКИХ КАНОНОВ ПРИ ПОСТРОЕНИИ ЭЛЕМЕНТОВ ИНТЕРФЕЙСА
Аннотация: Автор в настоящей статье исследует применение принципов типографии в процессе построения пользовательского интерфейса. Рассмотрены способы наследования сеток печатной продукции на композиционное построение элементов интерфейса. Определено понятие композиции. Рассмотрен канон Ван Де Граафа. Приведены примеры уместного использования типографских канонов в веб-дизайне.
Ключевые слова: пользовательский интерфейс, типография, канон, композиция.
Abstract: The author in this article explores the application of the principles of typography in the process of building a user interface. The methods of inheritance of printed product grids on the compositional construction of interface elements are considered. The concept of composition is defined. The canon of Van De Graaf is considered. Examples of the appropriate use of typographic canons in web design are given.
Keywords: user interface, typography, canon, composition.
Введение
Типография — это основная часть графического пользовательского интерфейса. Хороший дизайн пользовательского интерфейса зависит от понимания того, как работает визуальная система восприятия. В этом исследовании следует обобщить принципы типографии, которые были
разработаны в ходе печатной практики, и показать, как они преобразуются и расширяются в электронной среде.
Определить типографику можно как динамическую систему контрастов, возникающую в результате взаимосвязи шрифта (цвета, формы, ритма и стиля) с его фоном. Верно составленная композиция оказывает существенное влияние на пользовательское восприятие.
Таким образом, психологическое ощущение гармонии от интерфейса влияет на удобство использования и общее впечатление от продукта. Одним из способов создания устойчивой композиции является применение принципов типографических канонов.
Цель исследования
Рассмотреть термин «композиция». Изучить канон построения сетки средневековых книг. Привести примеры возможного наследия характерных принципов композиционного построения сетки Ван Де Граафа в выпадающих и модальных окнах.
Исследование
Понимание того, как работает типография в качестве визуальной системы, является важным фактором в хорошем дизайне пользовательского интерфейса. Письменный язык человека передается с помощью шрифта. Типографика передает и озвучивает сообщение/информацию тем или иным способом.
Графический интерфейс представляет собой комбинацию изображений и слов. Изображения, будь то панели и палитры значков, слои вкладок или каскадные меню, никогда не предоставят полной информации. Значок на экране может сказать, что вы смотрите на программу, но слова под значком расскажут о конкретной программе или документе, на который обратили внимание.
Типография имеет свой собственный метаязык. Его формы и отношения передают смысл даже до того, как расшифруются слова, с помощью которых они придают форму и звучание.
Типография включает в себя упорядочивание и выбор шрифтов с тем, чтобы сделать письменный язык разборчивым. Это вид искусства, который
существует уже много веков, с тех самых пор, как человек изобрел письменность. Хотя типографика требует сложных решений для многих дизайнеров пользовательского интерфейса, затраты времени имеют высокую ценность для того, чтобы сделать дизайн более выдающимся [3].
Согласно знаковой книге 1928 года «Новая типография» Яна Чихольда, наиболее важными характеристиками при использовании шрифта являются четкость и удобство чтения. Однако другие, менее функциональные аспекты, такие как эмоциональное выражение, то есть их настроение или стиль, начинают оказывать большое влияние на пользователя. Поэтому необходимо стремиться к тому, чтобы иметь широкий выбор типографских вариантов для выражения того, что мы хотим.
Правильная типография гармонирует с окружающей средой и другими компонентами интерфейса, сочетается с дизайном и вызывает любопытство, приглашая пользователя продолжить чтение того, что сообщается. Речь идет не о том, чтобы постоянно привлекать внимание человека, а об элегантности и согласованности.
Существует много технических аспектов, связанных с использованием шрифтов, но в этой статье будет исследован более художественный взгляд. Для понимания заданного стиля следует проанализировать термин «композиция».
Последняя представляет фундаментальное требование для любого замечательного произведения искусства или дизайна. Говоря обывательским языком композиция — это акт объединения частей или элементов для формирования целого [2].
Цель хорошей композиции — намеренно расположить элементы и части рисунка/интерфейса с тем, чтобы лучше взаимодействовать с аудиторией, поддерживать ее интерес и вызывать отклик.
При этом нужно понять, что делает композицию притягательной, так как нам необходимо включить пользователя и сознательно направлять его по изображению и, в конечном счете, лучше выразить созданную идею, историю или тему.
Например, можно представить величайший источник вдохновения — природу. Что бы ни приводило в движение силы природы, остается загадкой, но следует согласиться с тем, что нами управляют определенные принципы, которые обычно определяют, что привлекает, а что нет. Эти ключевые основы также влияют на характер эффективного дизайна и композиции. Применение принципов типографских канонов помогут грамотно построить элементы пользовательского интерфейса.
Канон Ван Де Граафа или Метод создания идеальной книги, как описал эту систему сам гениальный дизайнер Ян Чихольд. Не просто хорошая книга, не очень хорошая книга, а идеальная.
Рассматриваемый метод существовал задолго до появления компьютера, печатного станка и даже определенной единицы измерения. Никаких пик или точек, никаких дюймов или миллиметров. Его можно использовать только с прямым краем, листом бумаги и карандашом.
И при этом человек все еще может им пользоваться. Это система, которая по-прежнему остается такой же актуальной, красивой и элегантной с ультрасовременным дизайном, какой она когда-либо была для работы писцов, Гутенберга и Чихольда [1].
Книги когда-то были роскошью, которую могли позволить себе только самые богатые, и для их воплощения требовались месяцы работы. Произведения были гармонично красивы.
Авторы знали секрет идеальной книги. Они разделили между собой систему - канон, согласно которому их блоки текста и страницы, на которых они были напечатаны, согласовывались друг с другом и становились гармоничным целым.
Этот метод создания гармонии настолько элегантен, что многие дизайнеры заново открывают его для себя. Вот как выглядит рассматриваемый канон в своей простейшей форме, рисунок 1.
Рисунок 1. Канон Ван Де Граафа
И вот они здесь, с использованием канона Ван де Граафа и рекомендуемого Чихольдом соотношения размеров страниц 2:3. Рассмотрим рисунок 2.
"V / \ / \ / \ / \ \ ч \ / у
/
\ / /
\ / / \ /
/Ч
/ \\
/ / \ \
/ \ \
/ / у V \
/X Л/ х\ Чл
г N
Рисунок 2. Канон Ван Де Граафа
Красота текстового блока начинает проявляться через его положение, размер и связь, которую текст поддерживает со страницей, на которой он расположен.
Канон Чихольда и его правила не только приводят к тому, что текстовый блок имеет одинаковое соотношение страниц, но и позиционирует его в целых
единицах. Вот где обретается гармония.
Без чего-либо, кроме прямого края и карандаша, этот процесс состоит из текстового блока, который находится в относительно точном положении и размере, с повторяющимися полями, все из которых элегантно рациональны (рисунок 3).
2- 3 3 2-►
4 \ 2 )
о
Рисунок 3. Канон Ван Де Граафа
Независимо от размера страницы, всегда получается сетка размером 9 х 9, с текстовым блоком на 1/9 сверху и внутри, и на 2/9 снаружи и снизу.
Кроме того, существует факт, что на развороте текстовые блоки на обеих страницах будут находиться на одинаковом расстоянии друг от друг. Это происходит потому, что читатели держат книгу за нижний край при чтении.
Кроме этого, текстовый блок находится в верхней части страницы, что больше соответствует положению человеческих глаз на странице. Также высота текстового блока равна ширине страницы.
Это логика, которая уступает место изяществу, что приводит к красоте -графическому дизайну в его самом прекрасном проявлении.
Результаты исследования
Если попробовать обобщить результат деления печатной страницы сеткой Ван Де Граафа, то можно сказать, что самый большой отступ снизу, а следующий по уменьшению отступ, удаленный от линии разворота. В
результате такого деления наименьшее расстояние находится от информационных объектов до линии разворота. Это также объяснятся теории близости Гештальта.
Рассмотрим элемент интерфейса — выпадающее окно. Он позволяет пользователям выбрать одно из значений, например, профильтровать по возрастанию цены или убыванию (рисунок 4).
Рисунок 4. Выпадающее окно
Возможно рассмотреть характерные композиционные черты сетки Ван Де Граафа и увеличить нижний отступ от информационных элементов, до нижнего края выпадающее окна (как на рисунке 5).
По возрастанию По убыванию
По возрастанию По убыванию
Рисунок 5. Выпадающее окно
Левый элемент имеет одинаковые отступы сверху и снизу, тогда как правый содержит нижний отступ больше верхнего. Такое изменение может применяться в интерфейсном дизайне, так как не вызывает технических сложностей и ограничения верстки. Различия в боковых отступах не имеет смысла, поскольку в типографской сетке происходит объедение
информационных блоков разворота в единую информационную группу, а в элементе интерфейса такой необходимости нет.
Рассмотрим элемент интерфейса модальное окно - компонент, который появляется поверх информации, чтобы проинформировать или создать/изменить функционал, дополняющий прежде показанный. Увеличение нижнего отступа также допустимо (рисунок 6).
Рисунок 6. Модальное окно
Выводы
Как и в психологии цвета, элементы типографии имеют много метафорических значений. Даже если пользователь не будет внимательно читать все тексты дизайна, он сможет отсканировать определенные слова, которые при правильном выборе шрифта, интервалов и цвета создадут незабываемые впечатления от чтения. Можно заключить, что буквы и слова -это набор графических элементов, которые следует рассматривать как любой другой элемент пользовательского интерфейса, объединяемых для передачи визуальных целей интерфейса.
Применение принципов остается на усмотрение разработчиков, если это оправдывает цели композиционного построения. Однако в статье было доказано, что некоторые характерные принципы из средневековых канонов возможно использовать в интерфейсе с большим успехом.
Библиографический список:
1. Галкин С.И. Оформление книги: от искусства до художественного конструирования // Вестник Московского университета. Серия 10. Журналистика, 2020. №3. С. 77-84.
2. Лаер С.В., Платунова И.А. Основные виды композиции в методе «Художественного конструирования» // Творчество и современность, 2019. №2 (3). С. 7-12.
3. Пакшина И.А. Семиотический подход к исследованию типографики // Регионология, 2019. №1 (82). С. 45-53.
