Векторная графика для начинающих: теория и практика технического дизайна - страница 11
Источник: https://n-trade.spb.ru/
Визуальный анализ интерфейсов на рисунках 2.4–2.6 дает понять, что не всегда размеры (ширина и высота) блока навигационного меню выбора позволяют отразить полные наименования функций (и/или состояний) объекта (или продукта) применения. На помощь приходит интуиция технического (в литературе сокр. UI/UX) дизайнера: выбрать и отрисовать поверх устойчиво понятных глифов привлекательные кнопки, опции и состояния элементов веб-интерфейса так, чтобы это не вызывало задержек при выборе следующего шага (нажатием или кликом на экран, кнопку и т. д.).
На практике роль глифов – это визуальные подсказки в диалоге между пользователем и системой: запуск, приостановка, изменение, остановка системы.
Например, получив сообщение на панели (красный знак Внимание), пользователь видит, что нужно добавить бумагу в принтер для запуска электронного документа в печать.
Визуальные подсказки для пользователя веб-интерфейса
Форма, стиль и техническое исполнение глифовых подсказок трактуются дизайнером в прототипе интерфейса строго по согласованной спецификации и ТЗ.
Размеры глифов должны быть визуально доступны (не мелкие, контрастные) людям с плохим зрением.
Базовое правило гласит: черным по белому – и является приоритетом при выборе стиля визуализации глифов на панели инструментов и навигационного меню.
Рисунок 2.7 – Примеры визуальных подсказок и их значения на экране смартфона.
Слева направо: отключение сигнала вызова (тихий режим); разблокировка доступа к устройству
Дизайнер переносит сообщения о взаимодействии пользователя с системой на экран веб-интерфейса с помощью анимированной или статичной графики – в зависимости от состояния СМО после вызова, паузы или остановки/отказа функции.
Анимированные векторные элементы интерфейса
На смену статичным элементам постепенно приходит анимированная графика. Диалог между пользователем и цифровым продуктом получает яркую красочную визуализацию и поднимается на новый уровень взаимодействия. Пользователь подсознательно привыкает к высокому уровню визуального комфорта. Это определяет качество сервиса компании – поставщика услуг.
Анимирование статических векторных элементов
Требуется анимировать статические векторные элементы. У этой задачи несколько путей решения. Например, для веб-интерфейсов можно применять следующие технологические стеки (проще говоря,