Векторная графика для начинающих: теория и практика технического дизайна - стр. 8
Визуальные подсказки для пользователя веб-интерфейса
Форма, стиль и техническое исполнение глифовых подсказок трактуются дизайнером в прототипе интерфейса строго по согласованной спецификации и ТЗ.
Размеры глифов должны быть визуально доступны (не мелкие, контрастные) людям с плохим зрением.
Базовое правило гласит: черным по белому – и является приоритетом при выборе стиля визуализации глифов на панели инструментов и навигационного меню.
Рисунок 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) в зависимости от установленного размера шрифта;
• цвет заливки блока:
– однотонная сплошная и плоская заливка: