Иконки в деталях: как превратить их в мощный инструмент
Если вы думали, что иконки — незначительные элементы в углу приложения, то гоните эти мысли прочь. Ведь выбор их стиля способен полностью изменить восприятие вашего интерфейса.
В Пижамной Академии мы не раз говорили и будем говорить, что: «Каждая деталь имеет значение. Каждый пиксель и элемент должен быть обдуман!» Если вы думаете, что на иконках можно сачковать, то нет друзья. Иконки — это не просто какое то украшение, а мощный инструмент, который может направлять пользователя, облегчать навигацию и даже вызывать определенные эмоции.
Вспомните иконки в Instagram. Например, иконка сердечка очевидно ассоциируется с «лайком», говоря: «Да этот пост мне нравится». То есть это видео или пост вызвали у нас симпатию. А иконка домика внизу экрана интуитивно говорит: «вернуться домой», то есть на главную страницу. И мы без лишних слов понимаем, что будет при нажатии. Ведь если иконки подобраны верно, они как атомы в Atomic Design помогают создать интуитивно понятный для всех интерфейс.
Обращали внимание, что иконки в Instagram очень простые и понятные?
Бывало, я боялась на что то нажать в интерфейсе, в котором были ужасно старые и нелогичные иконки. Вспоминая старый дизайн сайта своего университета, там трудно было не потеряться: разные по стилям и размерам иконки, плохая контрастность элементов, неудобная навигация и не только. Хоть на сайте и использовался шрифт Helvetica, но тексты были плохо структурированы и очень маленького размера.
И это ещё стоит вспомнить, что иконка «Редактировать» почему то была трехмерной, а иконка «Добавить» контурной двухцветной. Что ж давайте разберемся какие популярные стили существуют, чтобы не допускать таких миксов в своих проектах.
Контурные иконки
Контурные иконки — это минимализм во всей его красе. Они отлично подходят для тех случаев, когда интерфейс требует лёгкости и воздушности.
Контурные цельные
Этот стиль иконок основан на использовании непрерывных линий, которые четко очерчивают форму объекта. Они не имеют лишних деталей и передают информацию очень быстро. Встретить их можно, например, в интерфейсе Google Drive для отображения папок, файлов и инструментов. Это помогает создать чистый и упорядоченный вид.
Контурные иконки встречаются на каждом шагу в Google Drive
Контурные иконки хорошо работают в приложениях с нейтральными цветами и не перегружают экран. Но будьте осторожны с их использованием в темной теме или на цветных фонах, ведь они могут просто потеряться.
Контурные с разрывами в линиях
Этот стиль придает самой иконке больше уникальности. Вместо традиционных сплошных линий, они имеют небольшие разрывы, что создает ощущение движения. Можно подумать, да что тут такого? Но часто именно такие интересные детали и запоминают пользователи. Например, в приложении Trello можно встретить контурные иконки с разрывами, которые придают большей креативности.
Контурные иконки с разрывами можно встретить в приложении Trello
Такие иконки, благодаря прерывистым линиям, часто воспринимаются легче, чем сплошные контуры. Это может уменьшить визуальную «нагрузку» на пользователя, особенно в сложных интерфейсах с большим количеством элементов.
Контурные двухцветные
Контурные двухцветные иконки — как тетрадь с яркими закладками, легко найти нужную страницу. Использовали такие? Так вот, эти иконки выделяются за счёт использования двух контрастных цветов.
Контурные двухцветные иконки выделяются среди других элементов. Источник — Figma Community, Augusto Carrilho
Но не переусердствуйте с цветами! Важно, чтобы они не перекрывали смысл самой иконки и, конечно были контрастными. Уследить за контрастностью просто — пользоваться нашим пижамным сервисом для проверки контрастности цветов.
Иконки с заливкой
Контурные иконки — это хорошо и эстетично, но они не единственные герои наших интерфейсов. Очень часто мы встречаем иконки с заливкой. Что это за стиль?
Классические с заливкой
Классические иконки с заливкой имеют свои корни в ранних интерфейсах 1980-х и 1990-х годов. Их основной миссией было — облегчить восприятие информации, заменяя текстовые обозначения. Ну согласитесь гораздо проще и лаконичнее поставить иконку «Пользователя», чем писать: ваш личный профиль, где вы сможете посмотреть всю информацию о собе, редактировать её или использовать специальные функции.
Эти иконки заполняют всё пространство цветом и часто кажутся более «тяжёлыми». Но они больше привлекают внимание и могут использоваться для обозначения важных действий, вроде кнопки «Отправить» или «Зарегистрироваться». Например, Apple Music активно использует залитые иконки для навигации и не только.
Залитые иконки в Apple Music привлекают к себе внимание
Двухцветные иконки с заливкой
Всё просто. Они также имеют сплошную заливку, но выглядят более акцентно за счет двух цветов. Обычно один цвет — это база, а другой привлекает внимание к деталям. Кстати такие иконки, вы могли видеть в приложении Airbnb. Они не только помогают быстрее ориентироваться, но и делают интерфейс более живым.
Airbnb использует двухцветные иконки с заливкой для дополнительных акцентов
Для чего их использовать? Чаще, чтобы выделить важные функции и действия в интерфейсе. Но помните, главное не красивая картинка, а удобство и функциональность. Следите, чтобы цвета иконок гармонично сочетались с остальной цветовой палитрой интерфейса, чтобы не перегружать ваших пользователей.
Иллюстрированные иконки
Первые иконки, которые можно считать прообразом современных иллюстрированных, начали появляться в 1970-х годах. Однако настоящий бум иконок случился с появлением графических пользовательских интерфейсов (GUI) в 1980-х годах, особенно с выходом Macintosh от Apple в 1984 году.
С эффектом стекла
Эффект стекла был впервые замечен в интерфейсах Apple, особенно с выходом iOS 7 в 2013 году. Дизайнеры начали активно использовать полупрозрачные фоны и размытие, чтобы создать ощущение глубины и многослойности. Но особую популярность глассморфизм — эффект стекла в элементах дизайна, набрал в 2021 году.
Эффект стекла добавляет иконкам футуристичности. Источник — Figma Community, Aqsath Faza
Иконки с эффектом стекла создают ощущение трёхмерности и прозрачности, но при этом выглядят очень футуристично. Но есть и другая сторона медали: не переборщите с эффектами, чтобы не отвлекать от основного контента ваших пользователей.
Трехмерные иконки
Трехмерные иконки отлично подходят для игрового интерфейса или приложений. Когда то они были визитной карточкой iOS 6, что привело к их широкому распространению. Но с выходом iOS 7 трендом стал flat-дизайн.
Трехмерные иконки были популярны до выхода iOS 6. Источник — Free3dicon
3D-иконки особенно популярны в приложениях дополненной и виртуальной реальности. Они помогают создать более реалистичный и погружающий опыт для пользователей. Но не ограничиваются этим списком, поэтому используйте их максимально осторожно, чтобы не перегружать дизайн и не создавать интерфейсный хлам, как говорит восьмая эвристика.
Иллюстративные
Эти иконки отличаются от традиционных простых тем, что они могут включать текстуры, сложные формы и даже небольшие сцены. Их применяют в играх, в образовательных приложениях и на платформах для креативных людей.
Иллюстративные иконки включают текстуры и разные эффекты. Источник — SadaX Design Agency
Такие иконки добавляют в интерфейс немного визуального разнообразия и требуют аккуратности их использования. Убедитесь, что они хорошо отображаются на разных устройствах и не усложняют восприятие.
Реалистичные
Честно, мне не особо нравится этот стиль иконок, но из песни слов не выкинешь. Поэтому раз они существуют — я должна вам о них рассказать. Реалистичные иконки берут свое начало в эпоху скевоморфизма — когда цифровые объекты максимально напоминают свои реальные аналоги. Все стремились сделать цифровой мир более понятным и доступным, копируя визуальные черты физических объектов — папок, корзин для мусора, луп и т.д.
Airbnb использует реалистичные иконки на сайте
Реалистичные иконки отличаются высокой степенью детализации: они воспроизводят текстуры, тени и отражения, создавая эффект трёхмерности. Но поскольку сейчас мы стремимся к лаконичности и минимализму, этот стиль используют всё реже.
А к чему стремишься ты? Если ты читаешь эту статью, то ты точно закопался в вопрос достаточно глубоко. И мы понимаем твое стремление стать действительно опытным специалистом в сфере UI/UX, и чтобы тебе не пришлось блуждать среди статей, мы поможем тебе ворваться в сообщество дизайнеров, получить сертификат международного образца и детально проработать портфолио.
Ведь наши менторы обеспечивают лучшую обратную связь и помогут разобрать каждый макет на атомы, чтобы создать реально проработанные проекты, которые дадут тебе билет в Профессию UI/UX дизайнер. После обучения, наши студенты имеют буквально всё, чтобы начать работать в IT.
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
