Для чего нужны значки
Значок (элемент графического интерфейса)
Значо́к (уменьшительное от знак), иконка (от англ. icon ) — элемент графического интерфейса, небольшая картинка, представляющая приложение, файл, каталог, окно, компонент операционной системы, устройство и т. п. В ответ на щелчок, совершённый мышью или другим указательным устройством ввода на значке, обычно выполняется соответствующее действие (запуск приложения, открытие файла и т. д.).
Значок программы/данных, содержащий только ссылку на эту программу/данные, в русской терминологии именуется «ярлыком».
Содержание
Типы значков
Как правило, значки представляют собой растровые картинки квадратного формата стандартных размеров.
В операционных системах Microsoft Windows и Windows NT наиболее употребимы размеры значков со стороной 16, 32 и 48 пикселов. В различных средах также используются значки с размером 24, 40, 60, 72, 92, 108, 128 пикселов и другие. С ростом разрешения мониторов современные операционные системы включают поддержку всё более крупных размеров значков: до 256×256 для Windows Vista, до 512×512 для Mac OS X.
Многие современные среды и приложения умеют задавать значки по умолчанию. Значок для приложения выбирается стандартным, для файла — в зависимости от типа файла (часто берётся значок приложения, обрабатывающего этот файл по умолчанию). Иногда значки для графических файлов получаются из содержимого самого файла (например, уменьшенная копия изображения, англ. thumbnail ). Некоторые продвинутые интерфейсы умеют делать то же и для неграфических файлов (документов, презентаций). Не все значки статичны. Например значок, представляющий связь с Интернетом, может наглядно показывать, идёт ли в данный момент передача данных, значок диспетчера задач — показывать загрузку процессора и т. д.
Веб-сайты также могут иметь значки, отображаемые в адресной строке и в закладках браузера. Такие значки изготовляются по технологии favicon.
Независимое создание значков
Те значки, которые уже́ включены в операционную среду, не всегда удовлетворяют вкусам и потребностям пользователей, поэтому появилось множество независимых художников и целых творческих групп, специализирующихся на создании новых значков — как отдельных, так и целых серий в единой стилистике или единой тематике.
История названия
В английском языке подобные графические элементы пользовательского интерфейса называются словом «icon» (от греч. είκων — образ, символ, икона).
См. также
Примечания
Ссылки
Кнопка последовательного выбора • Двунаправленный счётчик • Выпадающий список • Комбинированный список • Флажок • Ползунок • Радиокнопка • Список • Таблица (Grid view) • Текстовое поле
Heads-up display (в играх • OSD) • Боковая панель • Заставка • Значок • Индикатор процесса • Информационная панель • Метка • Подсказка • Строка состояния • Тост • Троббер • Экран загрузки
Диалоговое окно • Диалоговое окно-предупреждение • Модальное окно • О программе • Окно инспектора объектов • Окно-палитра • Файловый диалог
WIMP • Библиотека элементов интерфейса • Внешний вид (Look and feel) • Менеджер разметки (Layout manager) • Наведение мыши
Полезное
Смотреть что такое «Значок (элемент графического интерфейса)» в других словарях:
Значок (элемент интерфейса) — Значок (уменьшительное от знак), иконка (от англ. icon) элемент графического интерфейса, небольшая картинка, представляющая приложение, файл, каталог, окно, компонент операционной системы, устройство и т. п. В ответ на щелчок, совершённый мышью… … Википедия
Значок (значения) — Значок (уменьшительное от знак): значок (иконка) картинка, элемент графического интерфейса пользователя нагрудный значок картографические условные знаки устаревшее название малого войскового знамени … Википедия
Значок (GUI) — Значок (уменьшительное от знак), иконка (от англ. icon) элемент графического интерфейса, небольшая картинка, представляющая приложение, файл, каталог, окно, компонент операционной системы, устройство и т. п. В ответ на щелчок, совершённый мышью… … Википедия
Значок — (уменьшительное от знак): значок (иконка) картинка, элемент графического интерфейса пользователя Картографические условные знаки Нагрудный знак Устаревшее название малого войскового знамени … Википедия
Элемент интерфейса — Кроссплатформенный редактор элементов интерфейса Qt designer Элемент интерфейса примитив графического интерфейса пользователя, имеющий стандартный внешний вид и выполняющий ста … Википедия
Элемент управления — Кросс платформенный редактор элементов интерфейса Qt designer Элементы интерфейса примитивы графического интерфейса пользователя, имеющие стандартный внешний вид и выполняющие стандартные действия. Известны также под именем виджеты (англ.… … Википедия
Корзина (элемент интерфейса) — У этого термина существуют и другие значения, см. Корзина (значения). Корзина элемент графического интерфейса пользователя, предназначенный для удаления и, часто, временного хранения удалённых объектов (в некоторых реализациях только… … Википедия
Список (элемент интерфейса программ) — Внешний вид List box Список (англ. List box) элемент (виджет) графического интерфейса пользователя, который отображает прокручиваемый список с элементами. Позволяет пользователю выбрать один или несколько элементов из списка, как… … Википедия
Метка (элемент интерфейса программ) — Эту страницу предлагается переименовать в Надпись (элемент интерфейса программ). Пояснение причин и обсуждение на странице Википедия:К переименованию/7 декабря 2012. Возможно, её текущее название не соответствует нормам современного… … Википедия
Фрейм (элемент интерфейса программ) — Рама, иногда как Рамка или просто Фрейм (англ. Frame) элемент (виджет) графического интерфейса пользователя, который является контейнером для других объектов. Очень схож с окном по своим свойствам, но отличается от него тем, что не… … Википедия
Для чего нужны значки
Все значки в Steam делятся на два типа:стандартные(которые можно получить бесплатно) и нестандартные(которые нельзя получить бемплатно).
Нестандартные значки Steam.
В данную категорию относятся все значки игр(т.к. из них Вам может выпасть только половина необходимого набора) и значки специальных событий Steam,которые можно собрать и бесплатно,но это весьма проблематично.Значки игр бывают обычные и металические.Обычные значки можно повышать только до 5-го уровня,металические же можно создать только один раз,выглялят они более красиво,зачастую используются для оформления профиля Steam вследствие чего необходимые для их создания карточки стоят дороже своиз обычных аналогов.В иллюстрациях предоставлен пример всех уровней значка игры Victoria 2.
Значки специальных событий Steam не имеют ограничения по уровню и при их ковке вместо скидочного купона,чаще всего,даётся одна из карточек,потерянная при ковке данного значка.
Стандартные значки Steam
В данную категорию относятся всего 4 значка,которые можно получить выполнив некоторые задания:
1)Комитет по отбору качественных игр(к сожалению его уже нельзя получить)
2)Создатель самоцветов(необходимо просто распылить коллекционную карточку,смайлик или фон профиля)
3)Лидер сообщества(имеет разные степени в зависимости от количества выполненых заданий сообщества,по типу оставить комментарий и т.д.)
4)Выслуга лет(имеет разные степени,зависимые от возраста вашего аккаунта)
5)Коллекционер игр(имеет разные степени,зависимые от количества игр на вашем аккаунте)
Для чего нужны закатные значки
На сегодняшний день разнообразная графическая атрибутика, представленная в виде значков, используется практически везде: в политике, рекламном бизнесе, туризме. Данные элементы представляют собой весьма действенное средство для повышения рейтингов, распространения нужной информации, а также для предоставления информации о носителе атрибута.
Для многих из нас закатные значки ассоциируются с понятием «реклама». Изначально они появились в США, и нашли широкое применение среди политиков, которые рекламировали свои партии. Такие значки получили название «агитационные». Таким образом, можно смело утверждать, что именно тогда и появился современный закатный значок, который производили в виде пластинки, на которую наносилось изображение, а сверху ее покрывали прозрачным материалом.
В 1916 году изображение научились наносить на металл. При этом крепление значков было достаточно небезопасным – они крепились при помощи острой булавки. На сегодняшний день крепление усовершенствовалось, и для него используют английскую булавку. Вместе с этим закатные значки более не используют для политической рекламы. Их сменили наклейки и интернет-баннеры, стоимость которых на порядок дешевле.
OLYMPUS DIGITAL CAMERA
Давайте рассмотрим, где же используются закатные значки. На сегодняшний день за счет того, что жетоны являются сильнейшим рекламным средством, они используются практически везде. Их стоимость позволяет заказывать небольшой тираж любой компании. Для этого достаточно выбрать изображение и сделать заказ.
Закатные значки, как правило, вручают на различных мероприятиях, таких как тренинги, выставки, памятные события, юбилеи, научные или производственные конференции. Действительно, такие недорогие и красивые жетоны будут на протяжении долгого времени напоминать о прошедшем событии.
Жетоны также нашли широкое использование в туристическом бизнесе. Их изготавливают для туристов, которые отправляются в путешествие. Так, туристы получили возможность привезти к себе домой воспоминание о тех местах, где они побывали, так как на таких значках можно увидеть изображения культовых достопримечательностей. Приобрести значки можно в различных сувенирных магазинах или палатках.
Жетоны пользуются популярностью на молодежных тусовках, где их раздают присутствующим. Значки могут быть различной формы и дизайна.
Иконки для интернет-магазина: какие бывают, зачем нужны и где их брать
Иконки – один из обязательных элементов дизайна и юзабилити любого качественного ресурса. Инструмент помогает организовать и структурировать контент, привлечь внимание особой расстановкой акцентов, улучшить восприятие информации. Это некий маячок для посетителя, благодаря которому можно быстрее сориентироваться на незнакомом сайте. В сегодняшней статье рассказываем, почему стоит использовать иконки в интернет-магазине, какие они вообще бывают, где их взять и как с ними работать.
Зачем нужны иконки в интернет-магазине?
Иконка – графический элемент интерфейса, небольшое изображение, которым отмечают ту или иную составляющую сайта: корзину, метки платежных систем, устройства и многое другое. Их называют favicon.
Существуют отдельные иконки и целые серии, сделанные в единой тематике и стилистике, отражающей общую дизайнерскую концепцию ресурса. Именно такие серии зачастую используют в интернет-магазинах.
Ими дополняют навигацию, заменяют текст в адаптивном дизайне, обозначают функциональные кнопки, мета-информацию или любой элемент контента. При нажатии на кликабельный значок запускается определенное действие. Например, переход на соответствующую страницу.
Что дают иконки:
Разновидности иконок
Иконки на сайте интернет-магазина могут выполнять разные задачи. В зависимости от этого выделяют несколько типов значков.
Информационные
Данный тип иконок передает необходимую информацию. Это могут быть картинки-ссылки или просто иллюстрации. С помощью значков можно рассказать о ключевых ценностях компании, преимуществах товара и других важных аспектах, которые касаются деятельности интернет-магазина.
Для этого нужно подобрать подходящее изображение и добавить к нему краткое описание. К примеру:
Здесь важно придумать подходящие ассоциации и сформулировать сообщение, которое необходимо транслировать посетителю, буквально в 2-3 предложениях.
Навигационные
Этот тип иконок дополняет навигационную систему сайта. Главная задача – помочь пользователю сориентироваться. На некоторых сайтах они полностью заменяют текст в меню, что дает возможность избежать перегруженности страниц и упростить их структуру.
Примеры навигационных иконок:
CTA – призывы к действию
Эти иконки представляют собой кнопки с призывом. Кликабельные значки побуждают к определенному целевому действию и обеспечивают основную конверсию в интернет-магазине. Их оформляют в ярких цветах, добавляя определенный символ. Например, стрелку, «+», значок скачивания.
Для большей ясности к таким иконкам-символам прикрепляют короткие подписи с активным глаголом:
Кроме того, иконками обозначают социальные доказательства, разделы каталога, фильтры для поиска товаров.
Приведенная классификация довольно условная. Она отражает ключевые задачи графических элементов интерфейса на коммерческом сайте. Существуют также и другие варианты разделения по типам. Например, некоторые специалисты выделяют иконки меню, переходов и быстрого доступа.
Если углубляться в техническую часть, можно классифицировать элементы с учетом типа графики:
Значки оформляются в различных стилях и бывают плоскими, контурными, объемными в 3D. Для информационных и навигационных блоков чаще всего подбирают элементы, состоящие из линий и контуров. Это лаконичные однотонные иконки, которые встречаются в строгом минималистичном дизайне.
В более оживленных вариантах оформления используют цветные иллюстрированные изображения, выделяющиеся среди основного контента. Зачастую их разрабатывают индивидуально, отрисовывая под конкретный проект.
Объемные значки – это отдельные изображения в виде иконок, сделанные из частей фотографий или тематических картинок. С ними нужно быть осторожным, поскольку они могут сильно загромождать дизайн.
Еще вариант – подвижные картинки-анимации, простые геометрические фигуры, шрифтовые иконки, которые меняют цвет, размеры и тени.
Правила использования элементов
При выборе иконок для интернет-магазина стоит соблюдать такие правила:
Нельзя использовать значки на сайте просто для красоты. На их расшифровку не должно уходить слишком много времени. В идеале иконки – равноценная замена тексту. Там, где они не нужны, непонятны, неуместны, лучше написать обычный текст.
Где брать иконки?
Иконки для интернет-магазина можно разработать самостоятельно, заказать у дизайнера, скачать в специализированных сервисах или воспользоваться генераторами. Первый вариант – трудоемкий и затратный по времени, второй – довольно дорогостоящий. А вот сервисы и генераторы – то, чего вполне достаточно большинству онлайн-предпринимателей. Рассмотрим несколько подходящих вариантов.
В бесплатной медиатеке редактора Wix есть множество изображений для сайта, в том числе и иконок. Это всевозможные стрелки, формы, боксы, пиктограммы, значки.
Их можно переносить в интернет-магазин в первоначальном виде или же менять на свое усмотрение: обрезать изображение, вставлять необходимые визуальные эффекты, менять цвет и форму, добавлять ссылку или анимацию.
Iconfinder
В этом сервисе можно выбрать отдельные значки или целую коллекцию для сайта. В базе хранится более 5 миллионов элементов в форматах svg и png. Около 300 тысяч доступны бесплатно. Также есть 2 платных тарифа с доступом к премиальным иконкам. Цены начинаются от 2 долларов за значок.
Выбранные элементы можно редактировать в онлайн-редакторе: перекрашивать в цвета бренда, добавлять текст, настраивать форму, размер и прочие параметры.
Flaticon
В каталоге сервиса Flaticon около 4 миллионов векторных иконок в форматах svg, png, psd, eps, Base64. Для удобства поиска они распределены по категориям. Загружать можно отдельные картинки и коллекции, также есть возможность создать свой значок с помощью шаблонов.
Онлайн-редактор позволяет менять цвет и размер, экспортировать изображение в нужный формат. Еще одно преимущество сервиса – подробное руководство по выбору стилей значков для проекта. Премиум-наборы и эксклюзивный контент продаются по цене от 9,99 евро в месяц.
Noun Project
Сервис предлагает более 3 миллионов иконок в различных тематиках. Они доступны для бесплатного скачивания, но при этом отключена функция редактирования и нужно обязательно указывать авторство. Чтобы получить больше, необходимо покупать неограниченную подписку (39,99 долларов в год) или отдельную иконку стоимостью от 2,99 долларов.
Icons8
На платформе есть много различных инструментов для веб-дизайна, включая иконки, фото, иллюстрации и музыку. Пользователям доступны около 160 тысяч бесплатных картинок в 36 стилях. Поддерживаются форматы png и svg.
В каталоге собраны иконки-персонажи, логотипы, стрелки, инфографика и многое другое. Перед скачиваем их перекрашивают, добавляют к ним нужные элементы, настраивают отступы, выбирают оптимальный размер в редакторе.
Если нужны какие-то особые значки, можно запросить их разработку, заполнив специальную форму в соответствующем разделе меню сервиса.
Перечисленные инструменты способны полностью закрыть потребность бизнеса в иконках для сайта.
Заключение
Передавая четкие образы, иконки значительно упрощают восприятие информации на сайте. Но только в том случае, если они расположены в правильном месте, содержат очевидные привычные ассоциации и доносят нужные смыслы. Значки следует тщательно продумывать и подбирать, а не использовать первый приглянувшийся набор. Для этого не обязательно обращаться к профессиональному дизайнеру: зачастую достойные варианты можно найти в одном из рассмотренных в статье сервисов.
Иконки для сайта: какие бывают, зачем нужны и где их брать?
Иконки плавно и основательно стали обязательным атрибутом любого качественного сайта. Поговорим о том, какие бывают иконки, когда и в каких целях их стоит применять и где их брать.
Содержание
Какие бывают иконки?
В этом материале мы не станем рассматривать иконочные шрифты, а поговорим об иконках в формате изображений.
В зависимости от типа графики иконки делятся на:
Векторные (формат SVG).
Такие иконки масштабируются без потери качества и поддерживают канал прозрачности.
Растровые (формат PNG).
Растровые иконки в веб-дизайне целесообразно применять именно в PNG-формате: он имеет канал прозрачности и лучше подходит для картинок с относительно небольшим количеством цветов, чем формат JPG.
Символьные (форматы шрифтов).
В веб-дизайне нередко применяются иконочные шрифты (например: FontAwesome, IcoMoon), содержащие множество иконок в качестве символов. Минус таких иконок в ограничении цвета и стиля: это всего лишь символы.
Существуют основные следующие стили оформления иконок:
Иконка с одинаковым значением в разных стилях:
Зачем нужны иконки на сайте?
Как все мы помним из детства: любая книга интереснее, если в ней есть картинки. Сайтов это касается в значительно большей степени, ведь пользователи не столько читают контент веб-страниц, сколько просматривают, а иконки способствуют улучшению восприятия представленной информации.
Иконкам можно найти применение на любом сайте:
В дополнение к пунктам навигации.
Благодаря единому размеру, иконки в навигации способствуют скорейшему запоминанию каждого пункта. В меню сайта иконки могут полностью заменять текст в адаптивном дизайне или других случаях изменения интерфейса. Такой подход применяет в интерфейсе панели управления Joomla 4:
Для функциональных кнопок.
Не будем далеко ходить и вспомним интерфейс админки Joomla 3, в котором также активно применяются иконки для обозначения функциональных кнопок и не только их.
Для обозначения любого элемента контента.
Особенно это касается лендингов, где почти каждый элемент страницы сопровождается графическим объектом. В частности, иконки практически всегда применяются для блоков преимуществ и в призывах к действию:
Для обозначения мета-информации.
Иконками можно помечать любые мета-данные на веб-страницах: дату создания, изменения и публикации, имя автора, категорию, рейтинг, комментарии и т. д.
Во всех этих случаях можно применять иконки любого формата графики, но в первых трех чаще всего применяются именно иконочные шрифты, т. к. один шрифт может содержать весь необходимый набор иконок.
Где взять иконки для сайта?
Иконочные шрифты
Существуют следующие популярные иконочные шрифты, ознакомиться с которыми и скачать вы можете на соответствующих сайтах:
Самый популярный иконочный шрифт, который изначально создавался для Bootstrap.
Иконки из этого шрифта применяются в админке Joomla 3.x.
Этот бесплатный шрифт включает более 320 контурных иконок.
Это не шрифт, а веб-сервис, позволяющий создавать наборы нужных к применению на сайте иконок из представленного набора и сохранять их в формате шрифта.
Иконки в формате изображений
В Интернете огромное количество ресурсов, предлагающих картинки для бесплатного скачивания. Мы не будем их пречислять и вводить вас в заблуждение, а ознакомим с самым лучшим, на наш взгляд, сервисом по подбору иконок — Iconfinder.
Рассмотрим сервис Iconfinder на примере поиска иконки по запросу Joomla:
В строку поиска вводим запрос Joomla и ищем.
Откроется страница с результатами поиска. Стоимость платных иконок указана в левом нижнем углу иконки. Отфильтровать платные иконки можно с помощью фильтра в левой части страницы.
Для скачивания бесплатной иконки в нужном формате (в формате PNG иконка будет иметь размер 128×128 px) нужно кликнуть по названию формата левом нижнем углу иконки.
Если необходимо скачать в формате PNG с размером 512×512, 256×256 px или с другим размером, в другом формате, то кликните по стрелке в левом нижнем углу иконки и выберите нужный вариант из контекстного меню.
Из этого же контекстного меню можно перейти в онлайн-редактор иконки, нажав Open in Icon Editor: откроется страница редактрования, где можно изменить размер, цвет иконки, добавит текст и много другое. Для скачивания отредактированной иконки нужно нажать Download Icon в правом верхнем углу редактора.