зачем и как правильно их использовать в интерфейсе
- UI/UX
- 2 мин на чтение
- 5981
Иконки нужны для ускорения восприятия информации. Давайте сразу посмотрим на примере.
Это сайт программы для организации закладок. На экране показан функционал программы.
Дизайнер использовал иконки с привычными образами. Лупа — поиск. Земной шар — мультиязычность. Звёздочка — избранное. Все иконки на этом примере помогают легко считывать информацию.
Что будет, если их убрать? Отметьте, как изменилась скорость восприятия.
На первом примере достаточно окинуть взглядом страницу, чтобы понять функции продукта. Мы убрали иконки и теперь в каждое слово нужно вчитываться, чтобы что-то понять.
Так происходит потому, что у людей образное мышление. Если мы видим образ, нам проще понимать суть.
А вот так не надо
Но образы должны быть явные и привычные. Иначе ничего не выйдет. Смотрите пример.
Иконка с бирками — непонятно, как она относится к фиксированной цене. Иконка с копилкой никак не намекает на отсутствие скрытых комиссий. Деньги в руке еще и агрессивны. Так и говорят «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.16.xПредыдущая статья Следующая статья
В этом разделе можно задать настройки для автоматически генерируемых иконок. Подробнее о том, как работают эти настройки, читайте в статье об изменении размера изображений.
Цвет фона иконок — шестнадцатеричный HTML-код фонового цвета иконок.
Формат иконки — формат генерируемых иконок. Можно оставлять оригинальный формат или конвертировать его в GIF, JPEG или PNG.
Качество формата JPEG (0—100) — качество иконок в формате JPEG.
Например, 100% сложно отличить от несжатого оригинального изображения, но тогда изображения занимают больше места; 10% очень сильно снижает качество. Рекомендуем использовать значения не меньше
60%. В большинстве случаев оптимальным значением будет 80%.Ширина иконки в списке товаров (страницы категории, поиска и т.
д.) — ширина иконки товара на странице списка товаров.Высота иконки в списке товаров (страницы категории, поиска и т.д.) — высота иконки товара на странице списке товаров.
Ширина иконки на детальной странице товара — ширина иконки товара в карточке товара.
Высота иконки на детальной странице товара — высота иконки товара в карточке товара.
Ширина иконки товара в быстром просмотре — ширина иконки товара на странице быстрого просмотра.
Высота иконки товара в быстром просмотре — высота иконки товара на странице быстрого просмотра.
Ширина иконки на странице корзины — ширина иконки товара на странице с содержимым корзины.
Высота иконки на странице корзины — высота иконки товара на странице с содержимым корзины.
Ширина иконки в списке категорий — ширина иконки категории в списке категорий.
Высота иконки в списке категорий — высота иконки категории в списке категорий.
Ширина иконки в списке товаров в панели администратора — ширина иконок товара в панели администратора, а также в документах и email-уведомлениях.
Высота иконки в списке товаров в панели администратора — высота иконок товара в панели администратора, а также в документах и email-уведомлениях.
Примечание
Настройки, перечисленные ниже, больше не используются в ядре CS-Cart.
- Ширина иконки на детальной странице категории
- Высота иконки на детальной странице категории
- Ширина детального изображения категории
- Высота детального изображения категории
12 481 Иконки статей — бесплатно в SVG, PNG, ICO
Получите неограниченный доступ к более чем 6,3 миллионам активов
Получите неограниченное количество загрузокСтатья Значок
Статья Значок
Статьи Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья
Значок
Статья Значок
Статья Значок
Написание статьи Значок
Статья Значок
Написание статьи Значок
Статья Значок
Статья Значок
Написание статьи Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Управление статьями Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья Значок
Статья значок
значок статьи PNG и SVG вектор скачать бесплатно
значок статьи PNG и вектор SVG скачать бесплатно Мы создаем новые иконки каждый день.
