16 универсальных иконок, которые подойдут для любого интерфейса

Аудио перевод статьи
0:00
0:00
·

Используем правильные обозначения

Иконки, которые регулярно встречаются в различных приложениях и на веб-сайтах, легче интерпретировать. Они более узнаваемы. Чем чаще пользователи видят их и взаимодействуют с ними, тем проще присвоить этим символам то или иное значение.

Существует 16 универсальных иконок, с которыми пользователи сталкиваются наиболее часто. Они представляют собой аффордансы (термин из книги Дона Нормана “Дизайн привычных вещей”), то есть обозначают действия, которые можно выполнять с помощью конкретного компонента.

Используйте их при проектировании, чтобы люди могли правильно интерпретировать возможности, которые перед ними открываются. В этом случае интерфейс будет вести себя так, как они ожидают.

Следует последовательно и единообразно применять рассмотренные в статье универсальные иконки. Это позволит повысить их узнаваемость, чтобы пользователям было проще взаимодействовать с интерфейсом.

1. X

Значение: Закрыть

Применение: Используйте эту иконку, чтобы пользователь мог закрыть элемент, когда он больше не представляет для него интереса.

2. Стрелка (шеврон)

Значение: Раскрыть

Применение: Используйте стрелку (шеврон) для раскрытия элементов и информации пространственно или в рамках навигации.

3. Плюс

Значение: Создать элемент

Применение: Используйте плюс для добавления или создания элементов.

4. Минус

Значение: Удалить элемент

Применение: Используйте минус для удаления элементов.

5. Увеличительное стекло

Значение: Поиск

Применение: Используйте лупу для поиска информации в базе данных.

6. Карандаш

Значение: Редактировать

Применение: Используйте карандаш для редактирования данных.

7. Закладка

Значение: Сохранить

Применение: Используйте закладку для сохранения данных.

8. Корзина

Значение: Удалить

Применение: Используйте корзину для окончательного удаления сведений из базы данных.

9. Сердце

Значение: Избранное

Применение: Используйте сердце, чтобы добавить контент в избранное.

10. Шестеренка

Значение: Настройки

Применение: Используйте шестеренку, чтобы открыть экран настроек.

11. Гамбургер (три горизонтальные полоски)

Значение: Главное меню

Применение: Используйте гамбургер для открытия главного меню.

12. Три точки

Значение: Дополнительное меню

Применение: Используйте три точки, чтобы сэкономить место и скрывать/открывать дополнительные пункты меню.

13. i

Значение: Дополнительная информация

Применение: Используйте иконку "i" для отображения на экране фрагментов контекстной информации.

14. Вопросительный знак

Значение: Помощь

Применение: Используйте вопросительный знак, чтобы открыть страницу со справочной документацией.

15. Восклицательный знак

Значение: Ошибка

Применение: Используйте восклицательный знак для отображения ошибок и предупреждения деструктивных действий.

16. Галочка

Значение: Завершение

Применение: Используйте галочку для отображения успешного выполнения и завершения процесса или задачи.

Скачать набор иконок

Скачайте 16 универсальных иконок в формате SVG и начните использовать их в своих проектах уже сейчас.

Источник:
uxmovement.substack.com
·
comments powered by HyperComments