Используем правильные обозначения
Иконки, которые регулярно встречаются в различных приложениях и на веб-сайтах, легче интерпретировать. Они более узнаваемы. Чем чаще пользователи видят их и взаимодействуют с ними, тем проще присвоить этим символам то или иное значение.
Существует 16 универсальных иконок, с которыми пользователи сталкиваются наиболее часто. Они представляют собой аффордансы (термин из книги Дона Нормана “Дизайн привычных вещей”), то есть обозначают действия, которые можно выполнять с помощью конкретного компонента.
Используйте их при проектировании, чтобы люди могли правильно интерпретировать возможности, которые перед ними открываются. В этом случае интерфейс будет вести себя так, как они ожидают.
Следует последовательно и единообразно применять рассмотренные в статье универсальные иконки. Это позволит повысить их узнаваемость, чтобы пользователям было проще взаимодействовать с интерфейсом.
1. X
Значение: Закрыть
Применение: Используйте эту иконку, чтобы пользователь мог закрыть элемент, когда он больше не представляет для него интереса.
2. Стрелка (шеврон)
Значение: Раскрыть
Применение: Используйте стрелку (шеврон) для раскрытия элементов и информации пространственно или в рамках навигации.
3. Плюс
Значение: Создать элемент
Применение: Используйте плюс для добавления или создания элементов.
4. Минус
Значение: Удалить элемент
Применение: Используйте минус для удаления элементов.
5. Увеличительное стекло
Значение: Поиск
Применение: Используйте лупу для поиска информации в базе данных.
6. Карандаш
Значение: Редактировать
Применение: Используйте карандаш для редактирования данных.
7. Закладка
Значение: Сохранить
Применение: Используйте закладку для сохранения данных.
8. Корзина
Значение: Удалить
Применение: Используйте корзину для окончательного удаления сведений из базы данных.
9. Сердце
Значение: Избранное
Применение: Используйте сердце, чтобы добавить контент в избранное.
10. Шестеренка
Значение: Настройки
Применение: Используйте шестеренку, чтобы открыть экран настроек.
11. Гамбургер (три горизонтальные полоски)
Значение: Главное меню
Применение: Используйте гамбургер для открытия главного меню.
12. Три точки
Значение: Дополнительное меню
Применение: Используйте три точки, чтобы сэкономить место и скрывать/открывать дополнительные пункты меню.
13. i
Значение: Дополнительная информация
Применение: Используйте иконку "i" для отображения на экране фрагментов контекстной информации.
14. Вопросительный знак
Значение: Помощь
Применение: Используйте вопросительный знак, чтобы открыть страницу со справочной документацией.
15. Восклицательный знак
Значение: Ошибка
Применение: Используйте восклицательный знак для отображения ошибок и предупреждения деструктивных действий.
16. Галочка
Значение: Завершение
Применение: Используйте галочку для отображения успешного выполнения и завершения процесса или задачи.
Скачать набор иконок
Скачайте 16 универсальных иконок в формате SVG и начните использовать их в своих проектах уже сейчас.
.webp)
.svg)
