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

Детализация и масштабирование растровых и векторных изображений для веба

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

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

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

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

Рисунок 5.1 – Адаптивное меню навигации в использовании

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

Адаптивное меню веб-интерфейса

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

Обычно на широком экране (ПК или ноутбука) меню формируется в виде продольного горизонтального или вертикального инфоблока с ключевыми разделами и дополнительными элементами функционала в виде ассоциативных пиктограмм.

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

Если структура продукта обширная (каталог товаров и/или услуг), дополнительно выпадающее меню предоставляет пользователю выбор.

Рисунок 5.2 – Адаптивное меню в раскрытом виде с использованием пиктограмм разделов для визуализации содержания

Чтобы акцентировать внимание пользователя, создать в каждой категории каталога ассоциации с материальными объектами, используют векторные изображения – глифы.

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

Техническое решение визуализации пунктов меню в веб-интерфейсе

Принципиально существуют два сходных метода технической реализации задачи.

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

Второй – использовать спрайт для всех элементов веб-интерфейса.

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

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

Рассмотрим последовательно каждый из двух вариантов решения задачи. Для четкости визуального отображения разделов по умолчанию используют формат SVG как наиболее подходящий с точки зрения масштабируемости: векторный формат позволяет без потерь отобразить глифы как в минимальном, так и в максимальном масштабе. Альтернативным решением может служить растровая (пиксельная) графика в форматах PNG (8- или 24-битная палитра) или GIF (8-битная палитра).

С технической точки зрения важно уместить в первый рабочий экран до прокрутки фиксированное верхнее меню (ширина: 100%, высота: ~50 px), содержащее слева направо: логотип, пиктограммы телефона для звонка в компанию, поиска по сайту (каталогу продукции), мобильного меню, адаптивного меню с раскрытием подразделов. Более детально вызов мобильного меню представлен на рисунке 5.3.

Рисунок 5.3 – Мобильное меню для представления ключевых разделов веб-ресурса.

Источник: https: //n-trade.spb.ru/ (в мобильном отображении на экранах менее 768 px)

Общий вид адаптивной верстки основного меню навигации в HTML-коде представлен в примере 5.1.

Пример № 5.1. Код HTML основного адаптивного меню навигации

О компании
Услуги компании
Ремонт ТРК колонок
 Восстановленные ТРК
 Филлборды
Трубопровод для топлива
Продукция
Elaflex GmbH
Gilbarco
Rer Jacket
Распродажа
Каталоги
Партнеры
Контакты

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

Код CSS для оформления меню заданными пиктограммами

.menu-top, .menu-top a {
  font-family: 'Open Sans','Arial', sans-serif;
  font-size: 16px;
  letter-spacing: 0em;
  line-height:1.5em;
  color: #fff;
}
@media (max-width: 1000px) {
  .nav:hover, .nav:target {
    position: fixed;
    top: 115px;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    min-height: calc(100vh – 100px);
    height: fit-content;
    background: transparent;
    color: #fff;
    box-shadow: none;
    border-top: none;
    transition-delay: 3sec;
  }
  .nav ul.mainMenu:hover, .nav ul.mainMenu:target {
    position: fixed;
    top: 126px;
    left: 0;
    right: 0;
    width:calc(100% – 30px);
    height: calc(100vh – 100px);
    padding: 15px;
    background: #066aab;
    background: -moz-linear-gradient(left, #066aab 0%,
    #0c7ec9 15%, #0c7ec9 85%,#066aab 100%);
    background: -webkit-linear-gradient(left, #066aab 0%,
    #0c7ec9 15%,#0c7ec9 85%,#066aab 100%);
    background: linear-gradient(to right, #066aab 0%,
    #0c7ec9 15%,#0c7ec9 85%,#066aab 100%);
  }
  .menu-top ul {
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    vertical-align: top;
  }
  .nav ul.mainMenu li:first-child {
    display: block;
  }
  .nav ul:hover li {
    display: block;
    min-width: 300px;
    margin: 0;
    padding: 7px 0 7px 20px;
    text-align: left;
  }
  .nav ul li.mainPage, .nav ul li.mainURL, .nav ul li.childURL {
    width: 300px;
    height: 20px;
    margin-right: -20px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .nav ul li.mainPage a, .nav ul li.mainURL a {
    min-height: 1em;
    padding: 0 0 0 25px;
    background-color: transparent;
    font-family: Arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
  }
  .nav ul.mainMenu li a, .nav ul.mainMenu li a:hover,
  .nav ul.mainMenu li a:target {
    display:block;
    text-align: left;
  }
  .nav ul li.mainPage a:hover, .nav ul li.mainPage a:target {
    opacity:0.7;
  }
  .nav ul li.mainPage a.company {
    background-color: none;
    background-image: url('../img/svg/company.svg');
    background-size: 20px 22px;
    background-position: 0 2px;
    background-repeat: no-repeat;
  }
  .nav ul li.mainPage a.services {
    background-color: none;
    background-image: url('../img/svg/services.svg');
    background-size: 20px 22px;
    background-position: 0 2px;
    background-repeat: no-repeat;
  }
  .nav ul li.mainPage a.products {
    background-color: none;
    background-image: url('../img/svg/products.svg');
    background-size: 20px 22px;
    background-position: 0 2px;
    background-repeat: no-repeat;
  }
  .nav ul li.mainPage a.sales {
    background-color: none;
    background-image: url('../img/svg/sales.svg');
    background-size: 20px 22px;
    background-position: 0 2px;
    background-repeat: no-repeat;
  }
  .nav ul li.mainPage a.catalogs {
    background-color: none;
    background-image: url('../img/svg/catalogs.svg');
    background-size: 20px 22px;
    background-position: 0 2px;
    background-repeat: no-repeat;
  }
  .nav ul li.mainPage a.partners {
    background-color: none;
    background-image: url('../img/svg/partners.svg');
    background-size: 20px 22px;
    background-position: 0 2px;
    background-repeat: no-repeat;
  }
  .nav ul li.mainPage a.contacts {
    background-color: none;
    background-image: url('../img/svg/contacts.svg');
    background-size: 20px 22px;
    background-position: 0 2px;
    background-repeat: no-repeat;
  }
}

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

Фрагмент кода CSS

.nav ul li.mainPage a.{class} {
    background-color: none;
    background-image: url('../img/svg/{image}.svg');
    background-size: 20px 22px;
    background-position: 0 2px;
    background-repeat: no-repeat;
  }

Уточнение

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

О компании

Выводы

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

Есть лишь одно знаковое отличие – в скорости загрузки. На клиентском устройстве при обращении по ссылке к веб-ресурсу, где происходит загрузка N файлов графического оформления по методу № 1, это может занять больше времени в секундах с последовательным выводом в рендеринге визуальной структуры интерфейса, нежели чем во втором случае, когда все элементы интерфейса выгружаются из одного файла sprite.svg с незначительной задержкой (при загрузке) по инструкциям оформления, заданным в каскадных таблицах стилей CSS.

Отличие мобильного от адаптивного меню

Существенное отличие мобильного меню от адаптивного в том, что в первом случае приоритетное внимание отдано визуальным объектам ассоциации с сущностью каждого из разделов.

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

По умолчанию для полноцветной PNG-графики пиктограмм используют размерность, кратную 8: от [16 × 16] px (для favicon) до пиктограмм разделов в максимальном качестве [512 × 512] px.

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

Скругление углов пиктограмм для меню

Код HTML верстки мобильного меню

Поиск
Обратный звонок
Задать вопрос
Позвонить в офис
Услуги компании
Elaflex
Gilbarco
Трубы Ecolife
Филлборды
Заказ online
Адрес офиса
Адрес склада
Доставка
Производители
Распродажа
 Фотогалерея

Код каскадных таблиц стилей CSS для оформления меню

nav#mobile:not(:target) {
   display:none;
}
nav#mobile :target {
   display:block;
}
nav#mobile {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
   width: 100%;
   height: 100vh;
   background: linear-gradient(270deg, #255aa8, #26468e, #0c7ec9);
   background-size: 600% 600%;
   -webkit-animation: AnimationName 30s ease infinite;
   -moz-animation: AnimationName 30s ease infinite;
   animation: AnimationName 30s ease infinite;
}
nav#mobile:after {
   content: "";
   position: fixed;
   top: 92px;
   left: 0;
   z-index: 101;
   width: 100%;
   height: 4px;
   background: #1e5799;
   background: -moz-linear-gradient(left, #1e5799 0%, #2989d8
   13%, #7db9e8 22%, #128ae5 36%, #0072bf 48%, #7db9e8 64%,
   #2565ba 78%, #0072bf 95%, #0072bf 95%);
   background: -webkit-linear-gradient(left, #1e5799 0%,
   #2989d8 13%,#7db9e8 22%,#128ae5 36%,#0072bf 48%,#7db9e8 64%,
   #2565ba 78%,#0072bf 95%,#0072bf 95%);
   background: linear-gradient(to right, #1e5799 0%,#2989d8
   13%, #7db9e8 22%, #128ae5 36%,#0072bf 48%,#7db9e8 64%,
   #2565ba 78%,#0072bf 95%,#0072bf 95%);
   filter: progid:DXImageTransform.Microsoft.gradient(
   startColorstr='#1e5799', endColorstr='#0072bf',
   GradientType=1 );
}
nav#mobile:before {
   content: "Выберите интересующий раздел";
   display: block;
   padding: 120px 0 30px 0;
   font-size: 12px;
   color: #fff;
   text-align: center;
   opacity: 0.8;
}
nav#mobile div.grid {
   width: calc(100% – 40px);
   display: block;
   margin: 0 auto;
}
nav#mobile div.grid a {
   display:inline-block;
   width:105px;
   height:100px;
   margin-bottom: 10px;
   color: #fff;
   font-size: 11.7px;
   font-weight: bold;
   letter-spacing:-0.03em;
   text-align:center;
}
nav#mobile div.grid a:before {
   content:"";
   display:block;
   width:75px;
   height:74px;
   background:#999;
   margin:0 auto 5px auto;
   border-radius:12px;
   box-shadow:0 1px 1px #212121;
   border-top:1px solid rgba(255,255,255,0.5)
}
nav#mobile div.grid a.find:before {
   background-image: url('../images/mobile-menu/find.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.backCall:before {
   background-image: url('../images/mobile-menu/back-call.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.askQuestion:before {
   background-image: url('../images/mobile-menu/ask-question.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.callToOffice:before {
   background-image: url('../images/mobile-menu/call.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.elaflex:before {
   background-image: url('../images/mobile-menu/elaflex.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.gilbarco:before {
   background-image: url('../images/mobile-menu/gilbarco.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.ecolife:before {
   background-image: url('../images/mobile-menu/pipes.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.fillboard:before {
   background-image: url('../images/mobile-menu/fillboard.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.order:before {
   background-image: url('../images/mobile-menu/order.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.office:before {
   background-image: url('../images/mobile-menu/office.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.storage:before {
   background-image: url('../images/mobile-menu/storage.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.delivery:before {
   background-image: url('../images/mobile-menu/delivery.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.industry:before {
   background-image: url('../images/mobile-menu/partners.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.sale:before {
   background-image: url('../images/mobile-menu/sale.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.services:before {
   background-image: url('../images/mobile-menu/services.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
nav#mobile div.grid a.photo:before {
   background-image: url('../images/mobile-menu/photos.png');
   background-size: 75px 75px;
   background-position: center center;
   background-repeat: no-repeat;
}
@media (min-width:768px) {
   nav#mobile {
      display:none;
   }
}

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

:

nav#mobile div.grid a:before {
   content:"";
   display:block;
   width:75px;
   height:74px;
   background:#999;
   margin:0 auto 5px auto;
   border-radius:12px;
   box-shadow:0 1px 1px #212121;
   border-top:1px solid rgba(255,255,255,0.5);
}

Свойство border-radius задает визуальное моделирование скругленных уголков для границы и фона. Значением для этого свойства служат любые единицы размерности. Значение по умолчанию: 0. В данном случае скругление на 12 px по всем сторонам задает эффект формы со скругленными уголками.

Вариант № 2. Использование спрайта для визуализации элементов навигации

Спрайт – сборный графический файл, содержащий ряд (или несколько рядов) пиктограмм во всех состояниях:

• по умолчанию :not(:hover), :not(:target);

• при наведении :hover;

• при клике (нажатии) :target.

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

Логично использовать три строки функциональных элементов (в первой – состояние по умолчанию, во второй – при наведении, в третьей – при нажатии). Тогда изменение стиля состояния для конкретной пиктограммы будет отличаться минимально (координатой OX в свойстве background-position: X Y, задающем положение каретки вывода квадратного фрагмента спрайта).

Рисунок 5.4 – Пример спрайта в состоянии по умолчанию с кареткой вывода пиктограммы Распродажа

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

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

Рисунок 5.5 – Визуальная схема соответствия псевдокласса конкретной ссылке

Фрагмент кода CSS

nav#mobile div.grid a.sale:before {
   display:inline-block;
   width: 24px;
   height: 24px;
   margin: 0 5px 0 0;
   background-image: url('../images/mobile-menu/sale.png');
   background-size: auto 24;
   background-position: 102px 0;
   background-repeat: no-repeat;
}

Уточнение к коду

Каретка вывода пиктограммы из спрайта сдвинута по оси OX на 102 пикселя от начальной точки [0;0]. Схематически это отражено на рис. 5.6.

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

Зачем нужен отступ в условные 10 пикселей между пиктограммами в модульной сетке спрайта?

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

Рисунок 5.6 – Схема отсчета положения каретки для вывода выбранной пиктограммы

Также при использовании функции Масштаб (в англ. в браузере функция Scale) при просмотре страницы наличие интервала между пиктограммами в спрайте не даст сместиться каретке текущей пиктограммы с захватом соседней при выводе в псевдоклассе.

Для более четкого понимания процесса реализации визуального меню с акцентом на пиктограммы выбора раздела веб-ресурса, адаптированного под ПК и мобильные экраны, рассмотрим следующий пример: вывод двухрядного меню из 8 пунктов выбора разделов веб-ресурса, удобного для touch screen-экрана (выбор нажатием пальца на интересующий пункт меню навигации).

Рисунок 5.7 – Меню навигации по разделам веб-ресурса с выбором по пиктограммам

В этом примере применим спрайт с двумя рядами состояний:

• состояние № 1 по умолчанию – первый ряд;

• состояние № 2 при наведении и нажатии (клике) – второй ряд.

Формальное отличие в цвете заливки фигур и контуров пиктограмм:

• по умолчанию – черный цвет (HEX: #000000);

• при наведении и нажатии (HEX: #0088CC).

В результате верстки с использованием спрайта получаем адаптированное меню навигации (см. рис 5.8.):

• для широких экранов ПК (более 1000 пикселей по ширине);

• для мобильных экранов смартфонов (менее 480 пикселей по ширине).

А. Вывод меню на широком экране ПК или ноутбука (с размером по горизонтали более 1000 пикселей)

B. Вывод меню на узком экране смартфона с вертикальной ориентацией (с размером по горизонтали порядка 375 пикселей)

Рисунок 5.8 – Меню навигации на основе SVG-спрайта с выделением пункта SSD в навигации

Уточнение к рисунку

Размещение пунктов меню по ширине форматируется в каскадных таблицах стилях CSS в медиагруппах по заданным диапазонам размеров. См. код CSS для данного примера.

Код HTML для вывода адаптивного меню навигации

Menu
Hard Drive
SSD
RAID
External HD
Flash drive
SD card
MicroSD card
CF card

Для воспроизведения стилей форматирования адаптивного меню навигации необходимо задать классы общие и для медиагрупп (@media) в каскадной таблице стилей menu.css.

Код CSS для форматирования адаптивного меню навигации

a {
  color: #08c;
  font: normal 18px "Open Sans", Arial, Helvetica, sans-serif;
  outline: none;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  box-sizing: border-box;
}
.section2 {
  display:block;
  min-height:480px;
  margin:0 auto 0 auto;
  padding: 70px 0 69px;
  text-align: center;
}
.section2#visualMenu {
  padding:30px 0 30px 0;
}
.section2#visualMenu a:not(:target) {
  color:#111;
}
.section2#visualMenu a:hover,.section2#visualMenu a:target {
  color: #08c;
}
.wrap {
  display:block;
  max-width: 1144px;
}
.cat_box {
  display: inline-block;
  width: 160px;
  min-height: 160px;
  margin: 15px;
  text-align: center;
  vertical-align: top;
}
.cat_icon {
  position: relative;
  display: block;
  width: 100%;
  height: 82px;
  padding-top: 0px;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box span.cat_icon {
  display:block;
  width:82px;
  height:82px;
  margin:0 auto 10px auto;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box span.cat_icon.hd {
  background-image: url(sprite.svg);
  background-position: 0 0;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box:hover span.cat_icon.hd,
.section2#visualMenu div.wrap div.rowBlock a.cat_box:target span.cat_icon.hd {
  background-image: url(sprite.svg);
  background-position: 0 -112px;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box span.cat_icon.ssd {
  background-image: url(sprite.svg);
  background-position: -112px 0;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box:hover span.cat_icon.ssd, .section2#visualMenu div.wrap div.rowBlock a.cat_box:target span.cat_icon.ssd {
  background-image: url(sprite.svg);
  background-position: -112px -112px;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box span.cat_icon.raid {
  background-image: url(sprite.svg);
  background-position: -224px 0;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box:hover span.cat_icon.raid, .section2#visualMenu div.wrap div.rowBlock a.cat_box:target span.cat_icon.raid {
  background-image: url(sprite.svg);
  background-position: -224px -112px;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box span.cat_icon.external_hd {
  background-image: url(sprite.svg);
  background-position: -336px 0;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box:hover
span.cat_icon.external_hd, .section2#visualMenu div.wrap div.rowBlock a.cat_box:target span.cat_icon.external_hd {
  background-image: url(sprite.svg);
  background-position: -336px -112px;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box span.cat_icon.flash_memory {
  background-image: url(sprite.svg);
  background-position: -448px 0;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box:hover
span.cat_icon. flash_memory,.section2#visualMenu div.wrap div.rowBlock a.cat_box:target span.cat_icon.flash_memory {
  background-image: url(sprite.svg);
  background-position: -448px -112px;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box span.cat_icon.sd_card {
  background-image: url(sprite.svg);
  background-position: -560px 0;
  background-size: 866px 194px;
мbackground-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box:hover
span.cat_icon.sd_card,.section2#visualMenu div.wrap div.rowBlock a.cat_box:target span.cat_icon.sd_card {
  background-image: url(sprite.svg);
  background-position: -560px -112px;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box
span.cat_icon.micro_sd_card {
  background-image: url(sprite.svg);
  background-position: -672px 0;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box:hover
span.cat_icon.micro_sd_card,.section2#visualMenu div.wrap div.rowBlock a.cat_box:target span.cat_icon.micro_sd_card {
  background-image: url(sprite.svg);
  background-position: -672px -112px;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box span.cat_icon.cf_memory {
  background-image: url(sprite.svg);
  background-position: -784px 0;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
.section2#visualMenu div.wrap div.rowBlock a.cat_box:hover
span.cat_icon.cf_memory,.section2#visualMenu div.wrap div.rowBlock a.cat_box:target span.cat_icon.cf_memory {
  background-image: url(sprite.svg);
  background-position: -784px -112px;
  background-size: 866px 194px;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 1128px) {
  .wrap {
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .cat_box {
    width: 20%;
    margin: 0 2%;
  }
}
@media (max-width: 480px) and (min-width:421px) {
  .section2#visualMenu div.wrap {
    max-width: 100%;
  }
  .cat_box {
    display: inline-block;
    width: 20%;
    min-width: 100px;
    min-height: 140px;
    margin: 0 4% 10px 4%;
    zoom: 80%;
  }
}
@media only screen and (max-width: 420px) {
  .section2#visualMenu div.wrap {
    max-width: 100%;
  }
  .cat_box {
    display: inline-block;
    width: 20%;
    min-width: 100px;
    min-height: 140px;
    margin: 0 4% 10px 4%;
    zoom: 95%;
  }
}

Как должен выглядеть спрайт для корректной интерпретации меню в трех состояниях (по умолчанию, при наведении и при нажатии/клике)?

Подготовка спрайта с векторными элементами по умолчанию выполняется в соответствующем графическом редакторе: Corel Draw, Adobe Illustrator, Figma, Sketch или Adobe XD (на выбор исполнителя).

В данном случае векторный спрайт подготовлен в редакторе Corel Draw. Версия программы не важна (старше 12-й любая из доступных, т. к. отработка спецификации SVG и экспорта работают в ней корректно).

Черные и синие пиктограммы наглядно представлены в два ряда для вывода состояний навигации на рис. 5.9.

Размер спрайта выбран не случайно, а рассчитан эмпирически для данного случая из 8 пиктограмм, каждая размерами 82 × 82 px, контуры толщиной 1 пиксель, отступ между условными блоками пиктограмм (82 × 82) составляет 30 пикселей. Смещение каретки вывода пиктограммы в каждой следующей происходит по ширине по следующей формуле, по высоте по умолчанию: OY=0 и при наведении/клике OY= –112 px.

Рисунок 5.9 – Спрайт для вывода пиктограмм меню навигации по разделам сайта

Формула расчета положения каретки по оси OX для вывода N пиктограммы в ряду вывода в спрайте:

Carriage Offset (OX) = [Image Width + Horizontal Margin] × N,

где N в диапазоне от 0 до 7 при Q = 8,

где

Carriage Offset (OX) – смещение каретки по оси OX для вывода следующей пиктограммы (в спрайте) для следующего пункта меню навигации.

Image Width – фиксированная ширина для каждой пиктограммы.

Комментарий: в данном случае фиксированная ширина пиктограммы составляет 82 px.

Horizontal Margin – горизонтальный отступ между пиктограммами.

Комментарий: в данном случае горизонтальный отступ составляет 30 px.

N – количество смещений от нулевой позиции первой пиктограммы в ряду (при условии задания первой пиктограммы от начала левого верхнего края границы макета).

Комментарий: для первой пиктограммы смещение не требуется при заданном выше условии.

Q (сокр. от англ. Quantity) – общее количество пиктограмм в ряду.

Существует четкая зависимость между N и Q в смещении каретки по OX для вывода следующей пиктограммы (в спрайте) для следующего пункта меню навигации. Данная зависимость представлена в формуле (2).

N = Q – 1 [2]

Размеры спрайта по ширине и высоте исчисляются по следующей системе связанных формул [3]:

Sprite Width = Q × Image Width + N × Margin Width [3]

Sprite Height = Sprite Rows × Image Height + (Sprite Rows – 1) × Margin Height

Sprite Size = [Sprite Width × Sprite Height] px.

где

Sprite Width – целочисленная ширина спрайта (исчисляется в пикселях);

Sprite Height – целочисленная высота спрайта (в пикселях);

Sprite Size = [ширина × высота] px, где px – условное обозначение пикселей;

Q (сокр. от англ. Quantity) – общее количество пиктограмм в ряду;

Image Width – целочисленная ширина условного квадратного блока, вставлена каждая пиктограмма (исчисляется в пикселях);

Image Height – целочисленная высота условного квадратного блока, вставлена каждая пиктограмма (исчисляется в пикселях);

N – количество смещений от нулевой позиции первой пиктограммы в ряду (при условии задания первой пиктограммы от начала левого верхнего края границы макета);

Margin Width – ширина отступа между пиктограммами (исчисляется в пикселях);

Margin Height – высота отступа между пиктограммами (исчисляется в пикселях);

Sprite Rows – количество строк в спрайте, отражающих состояния пиктограммы.

Соответственно проведен расчет для понимания размерной сетки и координат смещений каретки спрайта для вывода каждой последующей пиктограммы в ряду и следующей строке (состояний при наведении, нажатии/клике).

Sprite Width = 8 × 82 + 7 × 30 = 866 px [3]

Sprite Height = 2 × 82 + (2 – 1) × 30 = 194 px

Sprite Size = [866 × 194] px

Размеры применены в исходном коде CSS и в размерах спрайта – для точности и самостоятельного воспроизведения в практической работе студентов.

Для ясности представим модульную сетку с отметками размеров пиктограмм и отступов между ними на рис. 5.10.

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

Для оптимального восприятия лучше всего поэкспериментировать самостоятельно с выводом пиктограмм в меню (приведенные примеры). Это поможет быстрее ориентироваться в координатном исчислении положения каретки для вывода пиктограмм в основном меню.

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

1. Использование отдельных изображений для каждого пункта меню.

2. Использование спрайта для визуализации элементов навигации.

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

• скорость загрузки на клиентском устройстве;

• вес файлов;

• одновременность воспроизведения (всех элементов навигации с графикой);

• сложность реализации.

Проведем краткий факторный анализ заявленных методов по заданным критериям сравнения (см. табл.).

* Вес спрайта меньше, чем 8 отдельных изображений SVG, т. к. в одном документе спрайта структура формата SVG описывается один раз – вместо отдельных 8 повторов в отдельных файлах. Это минимизирует вес векторного файла для загрузки на клиентском устройстве. Эмпирически спрайт SVG меньше, чем отдельные изображения SVG, в данном случае на 55%.

Выводы о методах воспроизведения меню навигации с графикой

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

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

Визуальная интерпретация возможностей веб-ресурса

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

Для примера рассмотрим многослойную иллюстрацию для каталога приложений Android, представленную на рис. 5.11.

Рисунок 5.11 – Многослойная иллюстрация для каталога мобильных приложений на платформе Android

Упрощенно: многоплановая иллюстрация с высокой детализацией в коде HTML-верстки похожа на слоеный пирог, как это представлено на рис. 5.12. Это первое приближение, необходимое для понимания структуры сложной иллюстрации.

Рисунок 5.12 – Слои структуры многоплановой иллюстрации для маркетинговых задач продвижения цифровых продуктов в коммерческих веб-ресурсах

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

Рассмотрим все слои иллюстрации (см. рис. 5.13).

1. Инфоблок, содержащий фон иллюстрации в коде HTML (с динамическими или фиксированными размерами).

Оформление в стилях CSS задает радиальный темный градиент на контраст для инфоблока (слой № 1).

В данном случае с фиксированными размерами квадрата.

2. Графический спрайт с пиктограммами приложений на Android.

Графическая идея: показать разнообразие выбора мобильных приложений в каталоге веб-ресурса. Пиктограммы в модульной сетке спрайта одинакового размера и с равными отступами между ними. Визуально создается эффект множества приложений. Сохраняется в формате PNG с прозрачным фоном (слой № 2).

Рисунок 5.13 – Слои комплексной иллюстрации (слева направо, сверху вниз: от нижнего слоя фона [1] до сборки [6])

Рисунок 5.14 – Создание слоя маски в векторном виде путем выреза из квадратной фигуры белого цвета фигурного глифа в форме символа загрузки (loading) при помощи инструментария векторного редактора Corel Draw

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

4. Слой маска с выемкой глифа загрузки для отображения нижних слоев фона, пиктограмм, освещения (слой № 4).

5. Центральный элемент композиции – это векторная пиктограмма android.svg для позиционирования по середине и центру иллюстрации. Задается стилями CSS с внутренней полупрозрачной тенью, со скругленной формой для качественного воспроизведения в композиции (слой № 5).

Графическая идея: акцентировать внимание на платформе Android с зеленым фирменным символом в виде робота.

6. Результирующая визуализация многослойной иллюстрации представлена на рис. 5.13 – изображение № 6.

Далее рассмотрим представленные слои с точки зрения верстки HTML-кода и оформления стилями CSS для корректного позиционирования элементов и визуализации иллюстративного ряда.

Слой № 1. Инфоблок в коде HTML

Пример кода HTML

    …

Чаще всего разработчики используют конструкцию

для воспроизведения сложных иллюстративных блоков.

В представленном примере кода задана обертка инфоблока для задания формата и оформления иллюстрации. Класс .illustration, по идее, задает положение, размеры и фон блока в содержании HTML-страницы.

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

Пример кода HTML

…

В инфоблоке секции контента в теге

иллюстрация занимает размеры [500 × 500] px.

Пример кода CSS

section.content {

    display: block;

    width: 100%;

    min-height: calc(100vh – 50px);

    height: fit-content;

    margin: 0;

    padding: 20px;

    background: #fff;

    border: 0;

}

section.content div.illustration {

    position: relative;

    z-index: 0;

    display: block;

    max-width: 500px;

    max-height: 500px;

    width: 100%;

    height: 100%;

    margin: 0 auto;

    padding: 0;

    overflow: hidden;

}

div#catalog.illustration:before {

    content: "";

    position: absolute;

    z-index: 1;

    display: block;

    border-radius: 250px;

    width: 498px;

    height: 498px;

    margin: 1px;

    background: #5c6165;

    background: -moz-radial-gradient(center, ellipse cover,

    #5c6165 0%,#515355 100%);

    background: -webkit-radial-gradient(center, ellipse

    cover, #5c6165 0%, #515355 100%);

    background: radial-gradient(ellipse at center, #5c6165 0%,#515355 100%);

    filter: progid:DXImageTransform.Microsoft.gradient

    (startColorstr='#5c6165', endColorstr='#515355',GradientType=1 );

}

Уточнения к коду блоков секции контента и вложенной иллюстрации

1. Заданный блок section.content выводится на всю ширину с минимальной высотой из расчета высоты фиксированного верхнего меню (50 px по высоте), вычитаемой из 100 долей общей высоты экрана пользовательского устройства. Это дает возможность задать оптимальную высоту для вывода содержания даже с минимальным количеством строк. Свойство margin задает внешние отступы: 50 пикселей вертикального отступа сверху от меню до блока контента, т. е. вывод секции содержания именно с точки по OY после воспроизведения основного меню навигации, зафиксированного в шапке сайта.

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

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

Слой № 2. Графический спрайт с пиктограммами приложений на Android

Для корректного восприятия с технической точки зрения слой спрайта с пиктограммами следует рассматривать в коде верстки HTML-документа с детализацией стилей CSS.

Код иллюстрации в HTML

Следующий инфоблок содержит слой с фоновым выводом спрайта пиктограмм.

    …

Код CSS для оформления спрайта пиктограмм

section.content div#catalog.illustration div.appsSprite {
    position: relative;
    z-index: 2;
    display: block;
    min-width: 500px; /* Задает ширину слоя, равную блоку иллюстрации */
    min-height: 500px; /* Задает высоту слоя, равную блоку иллюстрации */
    width: 100%;
    height: 100%;
    background-image: url(../img/apps-sprite.png); /* Источник спрайта */
    background-size: 50% 50%; /* Задает уменьшение размеров спрайта на 50% */
    background-repeat: repeat; /* Задает повторы осям по OX и OY */
    border: 1px solid #fff;
    overflow: hidden;
}

Графическая идея: вывести множество пиктограмм путем уменьшения матрицы спрайта до 50% по ширине и высоте от исходных 100% и повторять по осям OX и OY, чтобы даже при увеличении масштаба иллюстрации функцией Zoom In сохранялось высокое качество и детализация изображения.

Слой № 3. Радиальное освещение блока иллюстрации

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

Слой задается следующим инфоблоком в коде HTML:

    …

Код стилей в CSS

section.content div#catalog.illustration div.appsSprite div.radialFade {
    display: block;
    min-width: 498px; /* Задает min ширину слоя, равную блоку иллюстрации */
    min-height: 498px; /* Задает min ширину слоя, равную блоку иллюстрации */
    width: 498px; /* Задает ширину слоя, равную блоку иллюстрации */
    height: 498px; /* Задает высоту слоя, равную блоку иллюстрации */
    /* Следующие свойства задают радиальный градиент с учетом версий браузеров */
    background: -moz-radial-gradient(center, ellipse cover,
    rgba(0,0,0,0.61) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0.9) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.61) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,0.9) 100%);
    background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.61) 0%, rgba(0,0,0,0) 32%,rgba(0,0,0,0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#9c000000', endColorstr='#e6000000',GradientType=1 );
    border-radius: 250px;
}

Слой № 4. Слой маска с выемкой глифа загрузки

Графическая идея: визуально обрамить и создать эффект визуального сообщения о загрузке множества приложений.

Создается согласно последовательности по рис. 5.13 в векторном графическом редакторе Corel Draw или Adobe Illustrator (на выбор дизайнера) вырезанием из квадратной фигуры белого цвета фигурного глифа в форме символа загрузки (loading).

Желательно соблюсти размеры, равные формату макета и заданного блока иллюстрации (условно [500 × 500] px), но не обязательно: при сохранении результирующей маски с выемкой фигуры в формате SVG получим масштабируемое векторное изображение с возможностью гибких настроек вывода в стилях CSS для фонового изображения (background-image).

Слой маска выводится с помощью кода HTML:

    …

Уточнение

Тег выбран для этого слоя по причине минимального кода. В действительности можно выбрать , или

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

Код CSS для оформления слоя с маской глифа загрузки

section.content div#catalog.illustration div.appsSprite div.radialFade i {
   display: block;
   min-width: 500px; /* Задает ширину слоя, равную блоку иллюстрации */
   min-height: 500px; /* Задает высоту слоя, равную блоку иллюстрации */
   width:100%; /* Задает ширину слоя, равную блоку иллюстрации */
   height:100%; /* Задает высоту слоя, равную блоку иллюстрации */
   /* Следующие свойства задают вывод маски слоя без повтора */
   background-image: url(../img/mask.svg);
   background-size: 100% 100%;
   background-position: center center;
   background-repeat: no-repeat;
}

Слой № 5. Слой вывода центрального графического элемента

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

Центральное изображение желательно сохранять в формате SVG для масштабирования без визуальных потерь при максимальном увеличении. Ключевое изображение композиции важно сделать контрастным цветом на фоне темных слоев подложки.

Код CSS для оформления центрального слоя с роботом-андроидом

section.content div#catalog.illustration div.appsSprite div.radialFade i img {
    float: left; /* Позиционирование в блоке */
    display: block; /* Позиционирование в блоке */
    width: 120px; /* Фиксированная ширина */
    height: 120px; /* Фиксированная высота */
    margin: calc(50% – 80px) auto 0 calc(50% – 80px); /* Позиционирование в блоке */
    padding: 20px; /* Внутренние отступы в изображении для задания тени */
    border-radius: 25px; /* Скругление формы изображения */
    box-shadow: inset 0 10px 20px; /* Для задания внутренней тени */
    vertical-align: top;
}

Рисунок 5.15 – Центральное изображение композиции для иллюстрации

Результирующая композиция из 5 слоев задает оформление иллюстрации с соблюдением требований к масштабированию и детализации изображения на Retina-экранах высокой четкости (для мобильной аудитории веб-ресурса). Важно сопоставить результат технической работы с различных точек зрения.

Лучше ли это решение (в сравнении со статическим изображением в формате PNG или JPG)?

Сравним форматы вывода иллюстрации и проанализируем по весу, объему кода и детализации.

Сравнение форматов вывода иллюстрации

С технической точки зрения комплексная многослойная иллюстрация, реализованная с помощью технологического пирога (SVG + PNG + HTML + CSS), требует на 96% больше кода для вывода иллюстрации высокой четкости по сравнению с форматом JPG. При этом размер на уровне 200+Кб является абсолютно нормальным и допустимым для мобильных пользователей сетей поколения 4G и выше (со скоростью 1Мбит/с).

Описанный метод комплексной многослойной иллюстрации привлекателен с точки зрения мобильного воспроизведения графики без потерь при масштабировании и возможности анимации элементов композиции средствами SVG + CSS. Это повышает визуальную ценность иллюстрации как для пользователя, так и владельца веб-ресурса. Возможность добавить ссылку на центральный элемент композиции или полностью для всего блока также является преимуществом этого метода.

Подведем итоги лекции. Теоретические знания и выработка умений в комплексном подходе к использованию основных функциональных возможностей форматов SVG и PNG – вместе со стилевым оформлением в каскадных таблицах стилей CSS –  позволяют получить высококачественную графику с добавлением анимации и ссылок и управлять поведением пользователя, в том числе и коммерческим поведением.

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

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

1. Спецификация каскадных таблиц стилей CSS. – Режим доступа: https://www.w3.org/Style/CSS/specs.ru.html

2. Спецификация формата масштабируемой векторной графики SVG. – Режим доступа: https://www.w3.org/TR/SVG2/

3. Валидатор кода CSS Validator. – Режим доступа: https://jigsaw.w3.org/css-validator/

4. Руководство по использованию для дизайнеров и фронтенд-специалистов. – Режим доступа: https://platinumdatarecovery.com/wp-content/uploads/guidelines.pdf

Лекция № 6