Почему значки важны в дизайне веб-приложений и бесплатные библиотеки значков, которые вы можете использовать в своих проектах.
В этой статье рассматривается, почему значки важны в дизайне веб-приложений, а затем приводятся несколько примеров (бесплатных) библиотек с открытым исходным кодом, которые вы можете использовать в своих проектах.
Люди - визуальные существа
Половина человеческого мозга прямо или косвенно предназначена для обработки визуальной информации. Когда мы говорим о дизайне веб-сайтов, ориентированном на человека, понимание важности визуальных подсказок и того, как они влияют на пользователя, использующего веб-сайт, имеет решающее значение.
Иконки
Иконки вносят значительный вклад в улучшение взаимодействия с физическим и цифровым миром. Самый простой пример - подумать об общественных ванных комнатах: взглянув на значок с изображением мужчины или женщины, гораздо проще понять, через какую дверь пройти, по сравнению с обработкой слова. Еще один действительно убедительный пример - дорожные знаки - есть лишь некоторые вещи, которые нужно сообщать с помощью четких значков и изображений вместо слов.
На веб-сайтах значки играют решающую роль в нескольких различных аспектах, в зависимости от типа опыта, который наш веб-сайт дает пользователю. Иконки помогают заполнять формы, предоставляя сложные подсказки о том, какая информация собирается, они помогают сделать навигацию по веб-сайту или приложению более интуитивно понятной (например, панель навигации / значки приложений Facebook) и, как правило, помогают поддерживать пользовательский интерфейс наших веб-сайтов и приложений. менее загроможден.
Библиотеки иконок
1. Перо (v4.28.0)
Простая библиотека с открытым исходным кодом, предоставляющая 286 основных значков при создании интерактивных веб-сайтов / приложений. Руководству по использованию действительно легко следовать, и его можно использовать во многих различных типах приложений. Каждый значок может быть представлен в формате SVG, поэтому проблем с масштабированием или размытием не возникнет. Feather - не самая легкая библиотека, время загрузки библиотеки в сети 2G по-прежнему короткое, но Feather - это хорошая отправная точка, поскольку он полностью открыт.
Подробности использования значков с перьями можно найти по адресу:
2. Font Awesome
Библиотека имеет два разных элемента: аспект с открытым исходным кодом и платный аспект. Его часть с открытым исходным кодом включает более 1000 иконок, каждая из которых определена в SVG. Если вы только начинаете и хотите, чтобы базовые значки не нуждались в гибкости (например, шрифты в предопределенном стиле), это идеальная библиотека. Библиотека также имеет другие ограничения для своего предложения с открытым исходным кодом, которые можно просмотреть здесь.
С точки зрения использования, библиотека снова очень проста в использовании с возможностью загрузки библиотек-оболочек для таких фреймворков, как React, или просто встраивания скрипта в HTML для доступа из любого приложения.
В целом, библиотека действительно мощная, как мы видим ниже, размер загрузки действительно небольшой, что означает, что она загружается быстро и эффективно.
Вы можете найти подробности использования font-awesome ниже:
3. Иониконы (рекомендуется)
Набор значков с полностью открытым исходным кодом из 1300 значков, созданных для веб-приложений, приложений iOS, Android и настольных приложений. Ionicons был создан для Ionic Framework, поэтому иконки имеют как версию Material Design, так и версию для iOS.
Компонент будет динамически загружать SVG для каждого значка, поэтому ваше приложение запрашивает только те значки, которые вам нужны. Применить библиотеку к любому приложению очень просто, они предоставили четкие инструкции о том, как этого добиться. Это одна из самых производительных библиотек для значков, которая обладает большой гибкостью (редактирование, формирование и изменение).
Вы можете найти подробную информацию об использовании иониконов ниже:
4. Иконки React (рекомендуется для проектов React)
Специально для приложений React эта библиотека действительно легкая и хорошо работает при загрузке через более медленные соединения. Библиотека действительно мощная, поскольку она действует как оболочка для множества других библиотек, предоставляя обширный набор коллекций. Обратной стороной этого может быть то, что если кто-то ищет два разных значка из двух наборов, стили могут стать разными, вызывая несоответствия в пользовательском интерфейсе.
Поскольку библиотека использует ES6, мы можем специально импортировать значки, которые нам нужно использовать для каждого конкретного «компонента», и это действительно эффективно. К сожалению, библиотека совместима только с React, что ограничивает ее использование.
Вы можете найти подробную информацию об использовании значков реакции ниже:
В целом, там много разных библиотек значков, и все они имеют разные плюсы и минусы - надеюсь, эта статья помогла сузить ваши варианты. Если у вас есть другая библиотека, которая, по вашему мнению, может быть лучше перечисленных, укажите ее в комментариях!
Больше контента на plainenglish.io
