—»     —»   Адаптивная иконография: адаптивные иконки
  Раздел: Иконки   Нет комментариев  

Адаптивная иконография: адаптивные иконки

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

Что же такое адаптивные иконки?

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

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

Адаптивная иконография: адаптивные иконки
кликните по картинке, чтобы просмотреть анимацию

Почему это так важно?

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

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

Адаптивная иконография: адаптивные иконки

Как нам поможет Iconic?

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

Адаптивная иконография: адаптивные иконки

Iconic недавно запустила и успешно завершила кампанию на Kickstarter, получив 92.624$ (да-да, вы прочитали правильно), что составило 618% от того, что они просили, - на проект требовалось всего 15.000$. Воспользовавшись этими деньгами, у них появилась возможность провести исследования методов и технологий, которые позволили бы нам свободно использовать адаптивные иконки. В основном, они были нацелены на революционизацию веб-иконографии.

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

Что предпринимается сейчас?

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

Media Query

Самый простой и очевидный подход заключается в создании media queries, и привязке их к веб-шрифтам. Суть заключается в том, что хотя каждая иконка – и те, что имеют высокую детализацию, и те, в которых деталей не так уж и много – имеют отдельные уровни плотности шрифта (например, 200, 400 и 600), все они являются частью одного семейства. Следовательно, когда вы изменяете размер окна браузера, вы изменяете и свойство font-weight, которое используется при определенном размере экрана, и таким образом получаете максимально адаптированную по размеру иконку.

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

Адаптивная иконография: адаптивные иконки

polyfills

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

footer[min-width~=”250px”]{
background: #fff;
}

На данный момент этот подход считается сравнительно новым и поэтому поддерживается не во всех браузерах, но отлично работает, если реализовать все посредством javascript. Подробнее об этом можно прочесть здесь.

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

Адаптивная иконография: адаптивные иконки

Точки преломления (breakpoint) в SVG

Это третий и последний подход, который представили Iconic. Суть SVG-точек преломления немного более интересна – здесь вам точно нужно будет мыслить не шаблонно. SVG позволяет нам динамическим образом контролировать элементы и иконки, и это позволяет нам перенести статичную иконографию на новый уровень. Вы можете представить себе данный подход в виде комбинации media queries, где сама иконка может реагировать и изменяться в размере независимо от актуального размера экрана. Однако, этого сложнее добиться ввиду того, что SVG-точки преломления сложно интегрировать с DOM на данный момент.

Чего следует ожидать?

Iconic планируют серьезный скачок инноваций в области иконографии, и мы надеемся, что у них все получится очень скоро! Что же касается их кампании на Kickstarter, они обещают предоставить полноценный набор инструментов (open source), который помог бы с опциями и эффективностью. Этот набор инструментов позволит нам интегрировать любые векторные иконки вдобавок к тем, что они нам предложат.

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

В завершение

Сегодня мы поделились с вами хорошим обзором предстоящего развития технологий, которые помогут сделать интернет более привлекательным. Можете ли вы представить себе что-нибудь новое в этой отрасли? Есть идеи относительно усовершенствования интерфейсов или UX-опыта? Надеемся, что здесь за нас все сделают Iconic. Желаем этой команде успехов, и надеемся вскоре увидеть результат их трудов!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, иконки
Опубликовал Design FactoRy   Прочитано (раз): 8086   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031