Векторная графика для начинающих: теория и практика технического дизайна

Рисунок 2.2 – Форма заявки для клиентов компании Platinum Data Recovery выполнена в виде последовательных шагов при заполнения анкеты. Вспомогательные вопросы и ответы сделаны в виде раскрываемого аккордеона с детализацией ответа по выбору из списка FAQ (сокр. от Frequently Asked Questions – часто задаваемые вопросы)

На рис. 2.2 слева используется глиф комментария с подписью FAQ для подсказки пользователю. Источник: https://platinumdatarecovery.com/request-a-quote

Доступность для мультиплатформенного использования – сложный критерий оценки, сходный с адаптивностью интерфейса. Требует правильного решения для масштабирования продукта на другие платформы – с веб-версии в мобильные приложения iOS, Android и стационарные touchscreen-системы информационных помощников (например, в аэропортах). Речь идет о стандартизации файловой структуры и взаимозаменяемости форматов графических файлов с SVG на аналогичные форматы (без потерь): PDF, PNG и т. д. – в зависимости от требований к интеграции веб-интерфейса на другие платформы.

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

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

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

Рисунок 2.3 – Варианты дизайна веб-интерфейса авторизации для приложения Lillup

Функциональная роль глифов в веб-интерфейсах

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

Рисунок 2.4 – Меню стиральной машины на дисплее для управления программами стирки

Рисунок 2.5 – Интерфейс мобильного приложения для заказа такси с выбором типа кузова автомобиля на основе представленных глифов

Рисунок 2.6 – Интерфейс адаптивного меню корпоративного сайта с векторными глифами для визуализации разделов веб-сайта.

Источник: https://n-trade.spb.ru/

Визуальный анализ интерфейсов на рисунках 2.4–2.6 дает понять, что не всегда размеры (ширина и высота) блока навигационного меню выбора позволяют отразить полные наименования функций (и/или состояний) объекта (или продукта) применения. На помощь приходит интуиция технического (в литературе сокр. UI/UX) дизайнера: выбрать и отрисовать поверх устойчиво понятных глифов привлекательные кнопки, опции и состояния элементов веб-интерфейса так, чтобы это не вызывало задержек при выборе следующего шага (нажатием или кликом на экран, кнопку и т. д.).

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

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

Визуальные подсказки для пользователя веб-интерфейса

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

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

Базовое правило гласит: черным по белому – и является приоритетом при выборе стиля визуализации глифов на панели инструментов и навигационного меню.

Рисунок 2.7 – Примеры визуальных подсказок и их значения на экране смартфона.

Слева направо: отключение сигнала вызова (тихий режим); разблокировка доступа к устройству

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

Анимированные векторные элементы интерфейса

На смену статичным элементам постепенно приходит анимированная графика. Диалог между пользователем и цифровым продуктом получает яркую красочную визуализацию и поднимается на новый уровень взаимодействия. Пользователь подсознательно привыкает к высокому уровню визуального комфорта. Это определяет качество сервиса компании – поставщика услуг.

Анимирование статических векторных элементов

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

• HTML + SVG + CSS3 (опционально + PNG/JPG);

• HTML + SVG + JavaScript (опционально + CSS);

• HTML + SVG + SMIL.

Рассмотрим детально каждый вариант.

HTML во всех трех вариантах применения анимации SVG – это веб-страница для вывода графики в содержание источника.

Технологический стек для анимации № 1. HTML + SVG + CSS3

Графика в формате SVG по определению есть масштабируемая векторная графика (Scalable Vector Graphics): отличная четкость отображения при любом масштабе, простота редактирования и легкость кода с точки зрения хранения в каталоге N изображений в SVG с возможностью оптимизации (сжатия) кода для минимизации потерь при загрузке на клиентском устройстве.

• Анимировать глиф в формате SVG можно, применяя каскадные таблицы стилей (CSS). Рассмотрим визуальные эффекты в стилях CSS – согласно спецификации CSS версии 3, актуальной на 2021 г.

• Анимация движения (изменение координат объекта и размеров – приближение или удаление объекта относительно формата макета).

• Поворот rotate.

• Проявление fade in / out.

• 3D-трансформация.

Совмещение фильтров и их последовательное использование (запуск с задержкой в миллисекундах) в цикле воспроизведения анимации в стилях CSS позволяют добиться интересных визуальных эффектов при выборе и нажатии на выбранную функцию в интерфейсе.

Рисунок 2.8 – Пример анимации по клику на кнопку

Технически при нажатии (состояние: target) или при наведении (состояние: hover) происходит обработка стилями в CSS и предоставляет инструкции для вывода графики и анимации в заданных параметрах:

• ширина (width) и высота (height) анимированного блока задаются в пикселях (px) или условных единицах (em или rem) в зависимости от установленного размера шрифта;

• цвет заливки блока:

– однотонная сплошная и плоская заливка:

1. в шестнадцатеричной (НЕХ) палитре:*

background-color: #CCDD33

2. в палитре RGB:*

background-color: rgb(255,255,255)

3. с добавлением полупрозрачности путем включения альфа-канала:*

background-color: rga(255,255,255,0.5)

– многоцветный градиент:

background: linear-gradient (to bottom,#fff 0%, #555 50%,#999 100%);

Задание стиля фона блока возможно как с помощью background-color, так и с помощью background, что дает одинаковый визуальный эффект:

background: #fff,

background-color: rgb(255,255,255),

background-color: rgb(255,255,255).

Равнозначные инструкции для стилей CSS

Для полного овладения всеми возможностями визуального оформления элементов навигации и блоков содержания веб-страницы HTML, включая анимацию для элементов SVG, рекомендуется изучить спецификацию CSS3 (в официальном источнике) и пробовать лично запускать и редактировать примеры анимации SVG и CSS.

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

Технологический стек для анимации № 2. HTML + SVG + JavaScript

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

• подключение внешних библиотек отрисовки векторной графики;

• подключение самописных скриптов обработки событий (по клику/нажатию, при наведении, при выборе определенной опции меню с вызовом функции по уникальному идентификатору ID и т. д.).

Рисунок 2.9 – Пример с выбором раздела сайта в мобильном меню навигации на корпоративном сайте.

Источник: http://markup.inmotus-design.ru/rk/index.php

Особенности этого функционального решения:

• необходим запуск скриптов JavaScript (по умолчанию эта опция подключена в браузерах);

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

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

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

Технологический стек для анимации № 3. HTML + SVG + SMIL

Язык анимации SMIL – специализированное решение для широкого охвата функций анимационных роликов на основе векторной графики в формате SVG. Применяется для мультипликации и веб-анимации (опционально). Это решение – аналог Flash-анимации (в формате SWF), ушедшей с приходом мобильных технологий, не поддерживающих Flash-анимацию по ряду причин, включая безопасность пользователя (от вызова неблагонадежных скриптов-вирусов и т. д.).

Рисунок 2.10 – Пример SMIL-анимации движения объекта карусели

О выборе стека для анимации SVG-графики

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

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

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

Особенности использования SVG-графики для мультиплатформенных систем

Разработка единой экосистемы электронных устройств для удовлетворения основных потребительских запросов – ключевое направление в развитии крупных федеральных ИТ-компаний (Яндекс и Mail.ru).

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

Это возможно отладить путем добавления стилей и вывода их по специальным функциям определения типа и размеров устройства с отладкой по существу проблемы (в тех. литературе эти добавленные стили обозначаются {platform-version}-fix.css (например, ie9-fix.css) и задаются в блоке [1] документа ).

Цветовая схема должна быть четко ограничена фирменными цветами в заданной единой палитре RGB или HEX и наследоваться на всех типах платформ: устройства на iOS, Android, Windows и т. д. с фиксированными параметрами. Это требование и к цветовой схеме глифовых элементов интерфейса в формате SVG. Оно обеспечивает единый визуальный образ продуктов компании-производителя, фирменный стиль на всех поддерживаемых платформах.

Рисунок 2.11 – Наглядная демонстрация смещения элементов веб-интерфейса целевой страницы веб-сайта компании Platinum Data Recovery при адаптивном дизайне (слева – широкий экран компьютера, справа – адаптивный мобильный веб-интерфейс)

Архитектура файловой структуры для размещения графики

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

Пример A

Рисунок 2.12 – Архитектура интернет-магазина в CMS Bitrix

Пример B

Рисунок 2.13 – Архитектура корпоративного сайта в CMS WordPress

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

Потребительская и экспертная оценки качества исполнения веб-интерфейсов

Умение работать с графическими форматами растровой и векторной графики, владение анимацией формируют навыки технического дизайнера (designer’s skills) и делают его востребованным для заказчиков. Особенно в профессиональной среде ценятся работы в портфолио, не только имеющие статус прототипа, но именно доведенные до серийного и единичного (под заказчика) использования. Эти работы характеризуют дизайнера как аналитика, художника, творца – одним словом, профессионала.

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

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

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

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

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

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

Рекомендуемая литература

1. Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз. Якоб Нильсен, Кара Перниче. На англ. языке.

2. Принципы разработки пользовательского интерфейса. Ненси Понг. Статья. Изд. Medium.com. 2017 г. Статья Дж. Портера «Principles of User Interface Design». Перевод: О. Жолудова, Р. Шайхутдинов.

3. Эвристические правила Якоба Нильсена. Источник на англ. языке: https://www.nngroup.com/articles/ten-usability-heuristics/

4. Веб-дизайн. Элементы опыта взаимодействия. Дж. Гаттер.

5. Проектирование веб-интерфейсов. Билл Скотт, Тереза Нейл.

6. Спецификации стандарта анимации SMIL 3.0. Источник на англ. языке: https://www.w3.org/TR/smil/smil-animation.html

7. Официальная спецификация компании Mozilla по поддержке формата SVG в анимации SMIL. Источник на англ. языке: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

8. Ознакомительный урок по использованию векторной графики для виртуальной клавиатуры. Источник на англ. языке: https://bundlespace.com/lessons/lesson-design-of-virtual-keyboard-for-atm-devices

9. Ознакомительный урок по анимации процесса загрузки в веб- и мобильном интерфейсе. Источник на англ. языке: https://bundlespace.com/lessons/lesson-animation-for-svg-loader-using-css3

Лекция № 3

Изометрия в иллюстрировании: наглядные композиции и технические решения

Что такое изометрия

Изометрическая проекция (с греч. ἴσος равный + μετρέω измеряю) – это разновидность аксонометрической проекции, при которой в отображении объемного трехмерного объекта на плоскость коэффициент искажения (отношение длины спроецированного на плоскость отрезка, параллельного координатной оси, к действительной длине отрезка) по всем трем осям один и тот же.

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

Определяющая характеристика слова изометрическая в описании проекции в греческом языке, в сущности, означает равный размер: в этой проекции масштабы по всем осям – OX, OY, OZ – равны. В других видах проекций это условие не действует.

Рисунок 3.1 – Схема представления осей OX, OY, OZ в изометрической прямоугольной проекции

Наряду с прямоугольной изометрической проекцией также применяются косоугольная фронтальная и косоугольная горизонтальная проекции (см. на рис. 3.2).

В эволюции визуальных решений для рекламы и интерфейсов изометрический стиль (isometric) дизайна иллюстраций пришел на смену привычным решениям flat design и 3D.

Рисунок 3.2 – Косоугольная фронтальная и косоугольная горизонтальная проекции (слева направо)

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

Рисунок 3.3 – Рекламная иллюстрация в правильной изометрической проекции для представления ремонтного транспортного шипа в разрезе.

Выполнена техническим дизайнером по чертежу от производителя в псевдообъемном разрезе в графическом редакторе Adobe Photoshop.

На визуализацию этой иллюстрации затрачено всего 8 часов с учетом корректировок заказчика

С точки зрения коммерческой ценности изометрическая иллюстрация позволяет визуализировать технические характеристики объекта (товара) в применении к реальности.

Рисунок 3.4 – Примеры изометрических проекций объектов в реалистичной визуализации на плоскости

Визуальное сравнение стилей: flat design, 3D и isometric design

Рассмотрим основные стили визуализации иллюстраций и пиктограмм для дизайна актуального на 2021 г. веб-интерфейса.

Рисунок 3.5 – Параллельное сравнение иллюстраций в стилях flat design, realistic 3D и isometric design (слева направо)

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

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

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

Рисунок 3.6 – 3D-визуализация ремонтного шипа компании «РемШип» в разрезе шины Michelin X Ice. Источник: https://inmotus-design.ru/portfolio/info/3d-spike-in-tire-michelin-x-ice.

Идея иллюстрации: с точностью до 1 мм выполнить – по аналогии с рекламой Nokian – визуализацию для ремонтных шипов российского производства.

Иллюстрация выполнена в редакторе 3D Max

Всего затрачено около 40 часов рабочего времени с учетом корректировок. Это достаточно много (примерно 1 неделя в зависимости от штатного расписания технического дизайнера). Пример характеризует 3D как трудоемкую технологию с высокой точностью воспроизведения и сложностью в реализации.

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

Качество визуализации изометрической проекции объекта на рис. 3.7 достаточное для применения в рекламной продукции, где нет жестких привязок к размерам (как в примере шипы в шине определенной марки и радиуса).

Рисунок 3.7 – Аналогичный 3D-пример изометрических проекций ремонтных шипов на плоскости (без жестких требований с точностью до 1 мм).

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

Источник: https://inmotus-design.ru/portfolio/info/oshipovka-shipy

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

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

1. Следовать требованиям ТЗ.

• Например, если указана точность 1:1 до мм, это, вероятнее всего, требует 3D-визуализации по чертежу заказчика – со всеми размерами деталей и типами материалов на поверхности объекта в изометрической иллюстрации. Время на реализацию —  ориентировочно от 4 до 40 часов, в зависимости от квалификации технического дизайнера и сложности композиции.

• Если требуется более-менее реалистичная иллюстрация объекта в изометрии, желательно иметь фото объекта в заданной проекции и сделать технический дизайн в Adobe PhotoShop. Ориентировочно от 2 до 10 часов, в зависимости от квалификации технического дизайнера и т. д.

• Если требуется стилизованная изометрическая иллюстрация (в короткие сроки) для полиграфии (при наличии чертежа и фото объекта), этого достаточно для воспроизведения изометрической проекции на плоскости для полиграфической печати на любом размере. Ориентировочно от 2 до 10 часов на реализацию в зависимости от квалификации технического дизайнера и т. д.