зачем и как правильно их использовать в интерфейсе
- UI/UX
- 2 мин на чтение
- 4214
Иконки нужны для ускорения восприятия информации. Давайте сразу посмотрим на примере.
Это сайт программы для организации закладок. На экране показан функционал программы.
Дизайнер использовал иконки с привычными образами. Лупа — поиск. Земной шар — мультиязычность. Звёздочка — избранное. Все иконки на этом примере помогают легко считывать информацию.
Что будет, если их убрать? Отметьте, как изменилась скорость восприятия.
На первом примере достаточно окинуть взглядом страницу, чтобы понять функции продукта. Мы убрали иконки и теперь в каждое слово нужно вчитываться, чтобы что-то понять.
Так происходит потому, что у людей образное мышление. Если мы видим образ, нам проще понимать суть.
А вот так не надо
Но образы должны быть явные и привычные. Иначе ничего не выйдет. Смотрите пример.
Иконка с бирками — непонятно, как она относится к фиксированной цене. Иконка с копилкой никак не намекает на отсутствие скрытых комиссий. Деньги в руке еще и агрессивны. Так и говорят «Shut up and take my money».
В этом блоке иконки использованы ради иконок. Они не доносят суть. Потому что преимущества очень расплывчатые и непонятные. Это скорее принципы работы. В таком случае лучше просто написать понятный текст из 3 предложений, чем использовать неуместные иконки.
«Как мы работаем» — в этом блоке описывается процесс работы. Иконки непонятны. И не нужны. Порядок лучше иллюстрировать числами и направлением (стрелочки, линии).
Еще один пример. Здесь всё еще хуже.
Здесь иконки ничего не передают. Абсолютно не помогают понимать суть.
Но в этом случае, даже текст не доносит смысла. Он непонятен. Из-за этого не получилось подобрать иконки и влепили то, что было.
Запомните
1. Иконки должны помогать восприятию.
2. Они должны передавать чёткие образы.
3. Используйте иконки там, где это уместно. Не лепите иконки ради иконок.
4. Если образ чёткий, а иконка не подходит, возможно текст сформулирован недостаточно точно.
Где брать иконки?
Бесплатно:
1. Более 1 000 000 иконок от дизайнеров со всего мира — https://thenounproject.com/
2. Еще почти 2 000 000 иконок — https://www.iconfinder.com/
3. 57 000 плоских иконок. Можно выбирать стилистику и менять цвета — https://icons8.com/
4. 540 000 иконок — https://www.flaticon.com/
Эти 4 сервиса могут полностью закрыть потребность в иконках.
Платно:
А если хочется чего-то особенного, то посмотрите на платные иконки. Сайты, где за небольшие деньги можно купить хорошие иконки.
1.
2. Creativemarket — https://creativemarket.com/graphics/icons
А еще можно рисовать иконки самим. Алгоритм рисования иконок — в скором выпуске!
Источник: WDI Design School
- #ui
- #ux
- #дизайн
- #иконки
- #интерфейс
- 0
Статьи по теме
Иконки — Документация docs.
cs-cart.ru 4.14.xПредыдущая статья Следующая статья
В этом разделе можно задать настройки для автоматически генерируемых иконок. Подробнее о том, как работают эти настройки, читайте в статье об изменении размера изображений.
Цвет фона иконок — шестнадцатеричный HTML-код фонового цвета иконок.
Формат иконки — формат генерируемых иконок. Можно оставлять оригинальный формат или конвертировать его в GIF, JPEG или PNG.
Качество формата JPEG (0—100) — качество иконок в формате JPEG.
Например, 100% сложно отличить от несжатого оригинального изображения, но тогда изображения занимают больше места; 10% очень сильно снижает качество. Рекомендуем использовать значения не меньше 60%
. В большинстве случаев оптимальным значением будет 80%.Ширина иконки в списке товаров (страницы категории, поиска и т.
д.) — ширина иконки товара на странице списка товаров.Высота иконки в списке товаров (страницы категории, поиска и т.д.) — высота иконки товара на странице списке товаров.
Ширина иконки на детальной странице товара — ширина иконки товара в карточке товара.
Высота иконки на детальной странице товара — высота иконки товара в карточке товара.
Ширина иконки товара в быстром просмотре
Высота иконки товара в быстром просмотре — высота иконки товара на странице быстрого просмотра.
Ширина иконки на странице корзины — ширина иконки товара на странице с содержимым корзины.
Высота иконки на странице корзины — высота иконки товара на странице с содержимым корзины.
Ширина иконки в списке категорий — ширина иконки категории в списке категорий.
Высота иконки в списке категорий
— высота иконки категории в списке категорий.Ширина иконки в списке товаров в панели администратора — ширина иконок товара в панели администратора, а также в документах и email-уведомлениях.
Высота иконки в списке товаров в панели администратора — высота иконок товара в панели администратора, а также в документах и email-уведомлениях.
Примечание
Настройки, перечисленные ниже, больше не используются в ядре CS-Cart.
- Ширина иконки на детальной странице категории
- Высота иконки на детальной странице категории
- Ширина детального изображения категории
- Высота детального изображения категории
12 279 значков статей — бесплатно в SVG, PNG, ICO
Получите неограниченный доступ к более чем 5,7 миллионам активов
Получите неограниченное количество загрузокСтатья Значок
Статья Значок
Статьи Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья
Значок
Написание статьи Значок
Статья Значок
Написание статьи Значок
Статья Значок
Статья Значок
Написание статьи Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Управление статьями Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Icon
News Article Icon — иллюстрации и векторные изображения
Графики
- Фотографии
- Фотографии
- Grafiken
- Vektoren
- Videos
Durchstöbern Sie 9.
636 значок новостной статьи lizenzfreie Stock- und Vektorgrafiken. Oder starten Sie eine neuesuche, um noch mehr faszinierende Stock-Bilder und Vektorarbeiten zu entdecken.Sortieren nach:
Am beliebtesten
nachrichten-symbole festgelegt. — значок новостной статьи — графика, -клипарт, -мультфильмы и -символNachrichten-Symbole festgelegt.
Новости-Вектор-Символ gesetzt. Иллюстрация Schwarze создана для графики и веб-дизайна.
flache schwarze zeitung vektor-symbol — значок новостной статьи stock-grafiken, -clipart, -cartoons und -symbole und -symboleNews Icons — Classic Line Serie
zeitungssymbole gesetzt — значок новостной статьи stock-grafiken, -clipart, -cartoons und -symboleZeitungssymbole gesetzt
medien- und kommunikationswissenschaften linie symbole. editierbare schlaganfall. пиксель идеальный. — значок новостной статьи графика, -клипарт, -мультфильмы и -символ Medien- und Kommunikationswissenschaften Line Symbole.
…
Einfache Vektorliniensymbole. Беарбайтбарер Стрих. Идеальный пиксель.
einfachen satz von texten im zusammenhang mit vektor-linie-icons — значок новостной статьи сток-графика, -клипарт, -мультфильмы и -symboleEinfachen Satz von Texten im Zusammenhang mit Vektor-Line-Icons
Набор векторных иллюстраций для ведения блогов и копирайтинга
Набор символов для копирования. Идеальное разрешение 48×48 пикселей. Bearbeitbare schlaganfälle — значок новостной статьи графика, -клипарт, -мультфильмы и -символSammlung von kopierbaren Zeilensymbolen. 48×48 Pixel Perfect….
иконок для копирайтинга — иконки новостных статей стоковые графики, -клипарты, -мультфильмы и -символыИконки для копирайтинга
маркетинговые символы. editierbare schlaganfall. пиксель идеальный. — значок новостной статьи — графика, -клипарт, -мультфильмы и -символ Marketing-Line Symbole. Editierbare Schlaganfall.
Идеальный пиксель.
Artikel-Linearsymbol
nachrichtenzeilensymbole. векторные иллюстрации вызывают восхищение иконы, такие как Zeitung, MassenMedien, журналист, подделка, телевизионная трансляция-umriss-пиктограмма для онлайн-прессы. 64 x 64 пикселя идеальный центр редактирования — значок новостной статьи фондовая графика, -клипарт, -мультфильмы и -символNachrichtenzeilensymbole. Векторные иллюстрации восхищают Ikone…
zeitungsseite mit einem buchzeilensymbol. drücken sie die vektorillustration isoliert auf weiß. магазин умрисс стильдизайн, entworfen для веб-сайтов и приложений. eps 10. — значок новостной статьи — графика, -клипарт, -мультфильмы и -символZeitungsseite mit einem Buchzeilensymbol. Drücken Sie die…
векторных символов повествования. медвежий барер строгий. Стратегия контент-маркетинга, kampagne werbung market, социальные сети. diskussionsförderung artikel вдохновение, копирайтинг, призыв к действию, влиятельный человек — значок новостной статьи сток-график, -клипарт, -мультфильмы и -символ Вектор-Рассказ-Символ.
Беарбайтбарер Стрих. История Содержание…
Вектор-Рассказ-Символ. Беарбайтбарер Стрих. Стратегия контент-маркетинга, Kampagnenwerbung Marke Social Media. Konversationsförderung Artikel Вдохновение Копирайтинг Призыв к действию Influencer.
микро-лидеров мнений и блог-символов. enthaltene symbole wie bewertungen, социальные сети, werbung, рейтинг просмотров, лайки, видеоблог и многое другое. — значок новостной статьи — графика, -клипарт, -мультфильмы и -символMicro Influencer und Blog-Liniensymbolgesetzt. Enthaltene…
zeitungsikonen — мультисерия — иконка новостной статьи фондовая графика, клипарт, -мультфильмы и символыZeitungsikonen — мультисерия
Газетные иконки Мультисерия Векторные EPS-даты.
Zeitungsvektor-zeile Web-Newsletter или News-App-symbol — значок новостной статьи stock-grafiken, -clipart, -cartoons und -symbole vertragsbedingungen, dokumentpapier, aufgabenkonzept.
3d-векторная иллюстрация. — значок новостной статьи — графика, -клипарт, -мультфильмы и -символKreatives Schreiben und Geschichtenerzählen, Kurz,…
zeitungs-icon-konzept vektorillustration. — значок новостной статьи — графика, -клипарт, -мультфильмы и -символZeitungs-Icon-Konzept Vektorillustration.
zeitung-icons — мультисерия — иконка новостной статьи фондовая графика, клипарт, мультфильмы и символыZeitung-иконки — мультисерия
Газетные иконки мультисерия Vector EPS-Datei.
геометрический баннер. Мегафон мит neuesten nachrichten sprechblase. лаутпрехер. современный стиль, векторная иллюстрация — значок новостной статьи, графика, клипарт, мультфильмы и символГеометрическое знамя. Megaphon mit neuesten Nachrichten…
medien und kommunikation-symbole — значок новостной статьи фондовая графика, -клипарт, -мультфильмы и -symboleмедиа и коммуникационная символика
geschäft, kommunikation, internet-blogging-post.
flash дизайн-вектор-иллюстрация. — иконка новостной статьи — графика, -клипарт, -мультфильмы и -символGeschäft, Communikation, Internet-Blogging-Post. Копия Flache Design-Vek
от Zeilensymbolen. медвежий барер строгий. пиксель идеальный. для мобильных устройств и Интернета. enthält symbole wie bleistift, zeitung, magazin, stift, schreiben, lesen, brainstorming, kreativität, schreibmaschine, marketing, buch, notizbuch, zitat, tastatur, ide — значок новостной статьи сток-график, -клипарт, -мультфильмы и -символКопия фон Zeilensymbolen. Беарбайтбарер Стрих. Идеальный пиксель.
16 Копирайтинг-Gliederungssymbole.
nachrichtenzeilensymbole. векторные иллюстрации вызывают восхищение иконы, такие как Zeitung, MassenMedien, журналист, подделка, телевизионная трансляция-umriss-пиктограмма для онлайн-прессы. Bearbeitbarer strich, grüne farbe — значок новостной статьи фондовая графика, -клипарт, -мультфильмы и -символ Nachrichtenzeilensymbole.
Векторные иллюстрации воодушевляют Ikone…
Лента новостей-символ. Vectorillustration enthielt Symbol wie Zeitung, Massenmedien, Journalist, Fake, Fernsehübertragung Gliederung Piktogramm for Online-Presse. Bearbeitbarer Strich, grüne Farbe.
zeitung-symbol im flachen stil — значок новостной статьи stock-grafiken, -clipart, -cartoons und -symboleZeitung-Symbol im flachen Stil
набор иконок новостей — серия classic line — значок новостной статьи stock-grafiken, -clipart, — Cartoons und -symboleNews Icons Set — Classic Line Series
beitbares online-dokumentenkonzept. konzept der digitalen signatur. креативность, рассказывание историй, копирайтинг, онлайн-билдунг — значок новостной статьи сток-график, -клипарт, -мультфильмы и -символBearbeitbares Online-Documentenkonzept. Konzept der digitalen…
Editierbares Online-Documentenkonzept. Digitales Signaturkonzept. Kreatives Schreiben, Geschichtenerzählen, Texten, Online-Bildung.
Vereinbarung или Vertrag Online-Symbol. Moderne Bearbeitung flacher Vektorillustration
Satz von Fake News bezogenen Liniensymbolen
Satz von Fake News-bezogenen Liniensymbolen. Falsche Informationen in Zeitungen, Propaganda in sozialen Medien und Desinformation im Internet oder im Internet. Мультяшный флаг Vektorsammlung isoliert auf weißem Hintergrund
setzen sie liniensymbole des journalismus — значок новостной статьи сток-графика, -клипарт, -мультфильмы и -symboleSetzen Sie Liniensymbole des Journalismus
Setzen Sie Liniensymbole des Journalismus isoliert auf Weiß. Nachrichten, Mikrofon, Megaphon, Konferenz, Interview, Gerücht, Recherche, Satellitenschüssel, Fernsehen, Journalist. Набор векторных иллюстраций
для копирайтинга — серия классических линий — значок новостной статьи stock-grafiken, -clipart, -cartoons und -symboleНабор иконок для копирайтинга — серия Classic Line
Копирайтинг
zeitung dünne linie linie vektor icon.
— значок новостной статьи сток-графика, -клипарт, -мультфильмы и -символZeitung dünne Linie Vector Icon.
Zeitungs-Тонкая-Линия-Вектор-Символ. Flaches Symbol isoliert auf dem weißen Hintergrund. Bearbeitbare EPS-Datei. Векториллюстрация.
zeile copyrighting icons — значок новостной статьи stock-grafiken, -clipart, -cartoons und -symboleZeile Copyrighting Icons
digitales medienkonzept — значок новостной статьи stock-grafiken, -clipart, -cartoons und -symboleDigitales Medienkonzept
großes set der neuesten nachrichten этикетка Megaphon. вектор-иллюстрация. isoliert auf weißem Hintergrund. — значок новостной статьи сток-графика, -клипарт, -мультфильмы и -символБольшой набор новых Nachrichten Megaphon Label. Вектор-иллюстрация
копий zeilensymbolen. медвежий барер строгий. пиксель идеальный. для мобильных устройств и Интернета. enthält symbole wie bleistift, zeitung, magazin, stift, schreiben, lesen, brainstorming, kreativität, schreibmaschine, marketing, buch, notizbuch, zitat, tastatur, ide — значок новостной статьи сток-график, -клипарт, -мультфильмы и -символ Копия фон Zeilensymbolen.
Беарбайтбарер Стрих. Идеальный пиксель.
Мегафон с новым текстом Sprache Blase Banner….
Мегафон с баннером нового текста. Лаутспрехер. Этикетка для бизнеса, маркетинга и работы. Вектор на изолирующем Хинтергрунде. EPS 10
контент-стратегия маркетинг-вектор-иллюстрация. социальные сети-werbekonzept. kleine leute arbeiten декоративная технология ноутбука. Мультяшный дизайн для мобильных баннеров и веб-сайтов — значок новостной статьи. Social-Media-WerbКонтент-Стратегия-Маркетинг-Вектор-Иллюстрация. Социальные сети Werbekonzept. Kleine Leute, декоративная технология для ноутбуков. flaches Cartoon-Design for Banner Mobile und Web
нахрихтен. значок вектора вспышки, символ.
— значок новостной статьи — графика, -клипарт, -мультфильмы и -символNachrichten. Векторная икона Flache, символ.
Eilmeldungen, flaches Vektor-Tageszeitungssymbol isoliert auf gelbem Hintergrund, Vektor-Web-Illustrations-Artobjekt mit roter Überschrift. Публикация, Интервью, Репортаж, Артикельсимвол.
копий zeilensymbolen. медвежий барер строгий. пиксель идеальный. для мобильных устройств и Интернета. enthält symbole wie bleistift, zeitung, magazin, stift, schreiben, lesen, brainstorming, kreativität, schreibmaschine, marketing, buch, notizbuch, zitat, tastatur, ide — значок новостной статьи сток-график, -клипарт, -мультфильмы и -символКопия фон Zeilensymbolen. Беарбайтбарер Стрих. Идеальный пиксель.
bw-symbol — zeitung — значок новостной статьи фондовая графика, -клипарт, -мультфильмы и -symboleBW-Symbol — Zeitung
веб-сайт для новостей на ноутбуке-билдширм. онлайн-новости. современный дизайн-вектор-иллюстрация — значок новостной статьи фондовая графика, -клипарт, -мультфильмы и -символ Веб-сайт для новостей на ноутбуке-Bildschirm.
Online-Новости. Модерн…
Zeitungssymbol. Zeitungsliniensymbol, Umrissvektorzeichen….
Zeitungssymbol. Zeitungsliniensymbol, Umrissvektorzeichen. Вектордарстелунг. Folge 10.
zeitung-symbol Silhouette — иконка новостной статьи stock-grafiken, -clipart, -cartoons und -symbole -clipart, -cartoons und -symboleEinfachen Satz von Texten im Zusammenhang mit Vektor-Linee-Icons
онлайн-новости, пост в блоге или zeitung auf nachrichten веб-сайт flashe vektor-illustrationen. обновление новостей в цифровом формате, ведение блога и видеоблог — значок новостной статьи фондовая графика, -клипарт, -мультфильмы и -символИнтернет-новости, блог-пост или Zeitung auf Nachrichten Веб-сайт… значок статьи stock-grafiken, -clipart, -cartoons und -symbole
Copywriting Icons — Linienserie — Bearbeitbarer Strich
schreiben, festlegen bloggen, beste verkäufer buch, storytelling und mehr, flash symbole — значок новостной статьи stock-grafiken, -clipart, — мультфильмы и символ Schreiben, festlegen Bloggen, best Verkäufer Buch, Storytelling.
..
Schreiben, Bloggen, Bestsellerbuch, Storytelling und Mehr, flaches Icons-Set, Vektorillustration
vektordarlustration-symbol mit dem konzept der online-artikel — значок статьи новостей stock-grafiken , -clipart, -cartoons und -symboleВекторная иллюстрация-Symbol mit dem Konzept der Online-Artikel
news-vektor-liniensymbol — значок новостной статьи stock-grafiken, -clipart, -cartoons und -symboleNews-Vektor-Liniensymbol
Значок векторной линии новостей Folge 10
Набор иконок для блога — значок новостной статьи, графика, -клипарт, -мультфильмы и -символНабор иконок для блога
Набор символов для блога. Vector Thin Gliederung Social Media Symbole.
flyer-icon-set — значок новостной статьи графика, -клипарт, -мультфильмы и -symboleFlyer-Icon-set
nachrichten. современный стильный дизайн с графическим стилем.
dünne linie symbole festlegen und flachen symbole für drucksachen, infografiken, веб-сайты, веб-баннеры gesetzt. премиум-качество. вектор-иллюстрация — значок новостной статьи сток-график, -клипарт, -мультфильмы и -символНахрихтен. Графический стиль Moderne Wohnung Design. Dünne
linie-web-content-icons — значок новостной статьи фондовая графика, клипарт, мультфильмы и символыLine-Web-Content-Icons
Einfacher Satz von webinhaltsbezogenen Vektorliniensymbolen. Enthält Symbole wie Zielseite, Bild- und Videogalerie, Seitenkocomponenten und Mehr. Беарбайтбарер Стрих. 48×48 пикселей идеально.
weiblichen internet-nutzer eine webseite zu besuchen. образ жизни-средний. сайт-макет. вдыхать. технология. векторные иллюстрации, клипарт — иконка новостной статьи, графика, клипарт, мультфильмы и символыWeiblichen Internet-Nutzer eine Webseite zu besuchen. Lifestyle-Me
flyer-icon-set — новостная статья icon stock-grafiken, -clipart, -cartoons und -symboleFlyer-Icon-set
Flyer-Icon-Set , Vektor-Illustration
zeitung dünne linie symbol.
