Отзывчивая иконографика – подход, с помощью которого отображаются иконки, точность которых базируется на размере для обеспечения оптимальной разборчивости. Почему это актуально? Создаваемый контент всегда рассматривается при многих условиях. Устройство, плотность, экран, разрешение, платформа, браузер. Обо всем нужно позаботиться. Все эти «переменные» в разной степени влияют на разборчивость содержания. В частности, иконки могут быть весьма чувствительными к размерам, в которых они отображаются.
Главное правило иконок – они должны быть понятными. И разборчивость должна быть обеспечена при демонстрации. Мы разберем с вами аспекты, полезны для создания воспринимаемых иконок, особенно при маленьких размерах. Таким образом, процессы в проектировании могут происходить по принципам эстетики. Она играет важную роль в иконографике. К сожалению, эстетика иконки и четкость часто противостоят друг другу. Иконки обычно имеют оптимальный размер, где эти два условия хорошо сбалансированы. Это идеально. Поэтому, если мы хотим сделать их понятными и привлекательными, потребуется несколько их версий.
1. Размер. Понятие не ново.
Данный подход – общий, используемый для разных значков. С проникновением векторных изображений в интернет, дизайнеры иконок используют масштабируемость для удобства чтения/просмотра. Так что же все-таки делает отбор иконок по этому старому правилу столь интересным? Знаковость – сходство трех размеров одной иконки, каждый из которых имеет код для обеспечения оптимально разборчивой версии каждого значка автоматически.
2. Легкий и сложный пути.
Есть два основных способа настройки иконки. Один играет на предложении, другой – более точный. Один – простой, другой сложный. При простом подходе используются медиа-запросы, чтобы подогнать иконки под ширину экрана. Это работает, так как размер содержимого часто перевешивает размер экрана. Из лучших побуждений значок просмотра на экране настольного ПК будет установлен в большем размере, чем на экране мобильного телефона.
Чтобы сделать это правильно, нужно применить отзывчивую функциональность значка к элементу уровня. Имеется ввиду, что отображение «правильной» иконки основывается на ее размерах, а не на размерах экранов. Поэтому, нужно знать о размерах значков и стараться подогнать все под экраны. А это уже более сложный процесс…
Итак, что потребуется для осуществления этой задачи?
3. Гайки и болты
Примечание: приведенные ниже примеры – доказательство правильности концепции прототипов. Ни один из следующих кодов отзывчивой иконографики не является окончательным на данный момент, не говоря уже о бета-тестировании. Итак, первый самый простой. SVG всегда лежал в основе иконок. Но можно легко забыть о том. Порой можно забыть о том, что они всегда поставляются в качестве веб-шрифтов. Веб-шрифты работают в пользу отзывчивой иконографики работают очень хорошо. Причина этому – все иконки добавляются в один шрифт. Это позволяет изменить размер в зависимости от веса. Любую иконку на экране можно изменить, просто изменив начертание шрифта. В приведенном ниже демо иконки реагируют на ширину экрана.
Веб-шрифты и элементы запросов. Регулирование иконок с помощью ширины экрана – не самый лучший способ для обеспечения разборчивости. Иконки при изменении должны реагировать на собственные размеры дисплея. Демо ниже использует элементы запросов и веб-шрифты для динамического регулирования иконок, основываясь на размере дисплея.
SVG Точки прерывания. Второй подход основывается на том, что СМИ запросов в пределах SVG-файла ссылаются на IMG, embed или object используя размеры дисплея SVG.
Таким образом, неразборчивый значок плохо повлияет на работу в целом. Это понятно. Мы должны проектировать иконки, которые приспосабливают различные диапазоны и нам нужны инструменты, которые будут отображать значки в соответствии с размерами дисплея. Наверное, сейчас не имеется окончательного подхода, как это сделать, но все способы – это шаги вперед в правильном направлении.
