Круговой интерфейс – это графический интерфейс, элементы которого имеют круглую форму, расположены или анимированы по круговой траектории.

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

Рис. 1 – Примеры круговых интерфейсов

Круговые интерфейсы могут применяться с целью:

• разнообразить дизайн проекта или продукта;
• обеспечить компактность при визуализации информации;
• получить цифровой аналог реальных интерфейсов управления или измерительных приборов.

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

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

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

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

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

По назначению можно выделить целый ряд круговых элементов управления:
кнопка (Рис. 2A), индикатор прогресса (Рис. 2B), радар (Рис. 2C).

Рис. 2 – Круговые элементы управления

Используя принципы построения круговых интерфейсов, можно реализовать управление громкостью и эквалайзер, а также тест для распознавания человека и робота — captcha.
Для визуализации информации часто применяются круговые диаграммы. В качестве примера можно привести инструмент «Колесо жизни» (рис. 3).

Рис. 3 – Колесо жизни

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

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

Итак, алгоритм работы следующий:

1. Определить назначение интерфейса и исходные данные.
2. Выполнить поиск готовых работ, которые помогут сформировать образ конечного результата.
3. Идентифицировать элементы дизайна.
4. Путем замены и добавления элементов сформировать подходящую форму.
5. Определить стиль интерфейса. Выбрать цветовую гамму. Настроить градиенты.
6. Продумать анимацию кругового интерфейса.

Рассмотрим предложенный алгоритм более подробно.

Шаг 1. Назначение интерфейса

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

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

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

Шаг 2. Поиск примеров

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

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

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

• round interfaces
• futuristic interfaces
• hud

Также можно искать по названию конкретного фильма или компьютерной игры, в который вы видели интересный круговой интерфейс.

Шаг 3. Анализ примеров

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

• размеры объектов;
• сочетание и повторяемость геометрических форм;
• симметрию и асимметрию;
• сочетание цветов и цветовые градиенты.

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

Рис 4. – Основа кругового интерфейса

Каждое кольцо можно рассматривать в качестве слоя интерфейса, по которому распределены элементы. Разнообразие круговых интерфейсов достигается за счет разницы в количестве, радиусах и толщине таких колец, типе и количестве более мелких элементов. При таком подходе, можно выделить центр интерфейса — точку C, оси симметрии x и y, а также диагонали d1 и d2.
Зачастую, чтобы получить интересный дизайн, достаточно использовать сочетание простых элементов, которые можно называть базовыми (рис. 5).

Рис. 5 – Базовые элементы круговых интерфейсов

Базовыми элементами круговых интерфейсов являются:

• сегмент кольца (рис. 5A). При определенных параметрах сегмент кольца преобразуется в кольцо, сегмент круга или круг;
• группа сегментов – совокупность сегментов, объеденных для совместной анимации и управления (рис. 5B);
• массив сегментов (рис. 5C);
• массив однотипных геометрических фигур, например, окружностей (рис. 5D);
• сегментная шкала, или просто массив отметок (рис. 5E).

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

Шаг 4. Синтез формы

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

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

Если возникает ступор и ничего не получается придумать, то нужно просто поэкспериментировать: набросать несколько вариантов, состоящих из 5-10 элементов, задать размеры и положение объектов случайным образом. В получившемся наборе заготовок необходимо выделить наиболее интересные формы и сочетания. Их и стоит развивать и дорабатывать.

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

Необходимые для построения кругового интерфейса элементы есть в разделе «Фигуры → Дополнительные фигуры → Блоки». Элементы «Концентрический слой» и «Частичный слой» в четырех вариантах каждый. Перетаскиваем на лист, привязываем элементы к единому центру, настраиваем параметры: угол, поворот, толщину. Затем переходим к цвету.

Шаг 5. Стиль кругового интерфейса

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

Круговой интерфейс в стиле «Plain Color»

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

Рис. 6 – Круговой интерфейс типа «Plain Color»

Круговой интерфейс в стиле «Hi-Tech»

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

Рис. 7 – Круговой интерфейс типа «Hi-Tech»

Круговой интерфейс в стиле «Futuristic»

Голографическая основа, виртуальный характер объектов. Электронный, цифровой дизайн. Прозрачные элементы, градиентные заливки. Активно используется наложение элементов друг на друга, висячие элементы. Преимущественно в сине-голубых тонах на темном фоне (имитация космического пространства). Применяется анимация мигания, мерцания, пульсации.

Рис. 8 – Круговой интерфейс типа «Futuristic»

Чтобы настроить градиент в MS Visio используется следующая последовательность действий. Щелчком правой кнопки мыши на нужном графическом элементе вызываем контекстное меню. Выбираем последний пункт «Формат фигуры», затем раскрываем раздел «Заливка → Градиентная заливка». Выбираем тип – «Радиальный», направление – «Из центра».

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

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

Шаг 6. Анимация

Оживить круговой интерфейс можно, хорошо продумав анимацию его элементов.

Анимация круговых интерфейсов похожа на анимацию текста и картинок в презентации Microsoft PowerPoint. Для круговых интерфейсов можно выделить следующие виды анимации:

• появление и исчезание – за счет изменения формы или положения объекта;
• выцветание – появление или исчезание за счет изменения прозрачности объекта;
• вращение;
• поочередная или одновременная трансформация элементов массива.

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

Базовый подход к построению анимации:

1. Выбрать объект анимации.
2. Определить тип и параметры его анимации: длительность, задержка и т.д.
3. Отловить событие для запуска анимации. Например, клик левой кнопки мыши по самому объекту или в центральной области кругового интерфейса.
4. Запустить анимацию объекта и привязать обработчик события завершения анимации.
5. Отловить событие завершения анимации объекта.
6. Запустить следующую анимацию или завершить анимацию всего интерфейса.

Разнообразие при анимации круговых интерфейсов достигается за счет изменения следующих параметров:

• последовательность объектов анимации;
• длительность анимации;
• задержка анимации;
• тип и направление анимации;
• порядок анимации для элементов массива.

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

Рис. 9 – Выцветание объекта с градиентной заливкой

Алгоритм описанного вида анимации выглядит следующим образом:
Шаг 1. Рассчитать коэффициент анимации по формуле:

$\$\$display\$\$k\; =\; \{\; Текущее\backslash \; время\; -\; Время\backslash \; начала\backslash \; анимации\; \backslash over\; Длительность\backslash \; анимации\; \}\$\$display\$\$$

Шаг 2. Для каждой точки остановки изменить цвет:

• заданный цвет преобразовать в текстовую строку вида ‘rgba(255, 165, 0, 0.5)’
• преобразовать строку в объект { ‘r’ = 255, ‘g’ = 165, ‘b’ = 0, ‘a’ = 0.5 }
• применить коэффициент анимации к параметру прозрачности:
  для анимации появления: a = k * a
  для анимации исчезания: a = (1 – k) * a
• собрать обратно из измененного объекта текстовую строку

Шаг 3. Перерисовать объект.

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

Чтобы упростить процесс реализации круговых интерфейсов для веб-проектов, я запустил проект по разработке специализированной библиотеки классов на языке JavaScript.