7 принципов дизайна иконок. На что нужно обращать внимание при создании иконок

Понятность, удобочитаемость, выравнивание, краткость, последовательность, индивидуальность, простота использования

Создание высококачественного семейства иконок требует вдумчивого подхода, тренированного взгляда, небольшой итерации и много практики. Ниже я проиллюстрирую признаки качества иконок с помощью 7 принципов и множества реальных примеров. Цель состоит в том, чтобы показать вам ключевые атрибуты отличного дизайна иконок.

Понятность

Основная цель иконки – быстро донести до пользователя идею.

Иконки на приборной панели Toyota Prius Prime (Источник: 2020 Manual)

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

Примерно так они выстраиваются для меня по уровню понятности:

Когда иконка использует незнакомую метафору, ее трудно понять. «Сигнал напоминания о ремне безопасности» (3-й слева) довольно буквальный, и мы можем его быстро понять. «Сигнал электроусилителя рулевого управления» (крайняя справа) намного сложнее.

Часто непонятная иконка просто раздражает. В случае вождения транспортных средств неправильное понимание предупреждающих индикаторов может быть опасным.

Вот несколько значков, которые кажутся наиболее знакомыми – символы любви, предупреждения, музыки и направления вверх / вперед:

Знакомые метафоры из семейства иконок Phosphor Carbon

Стрелка является мощным символом, используемым для навигации:

Знаки Нью-Йоркского метрополитена (Источник: Capture of an original copy of NYC Transit Authority Graphic Standards Manual)

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

Помните, что отдельная иконка может быть не самым понятным решением, если представляемая идея слишком абстрактна. В этом случае добавьте к иконке текстовую метку или найдите альтернативу.

Читабельность

Если у вас есть понятный символ, убедитесь, что он читабелен.

Иконки в мобильном приложении Amtrak

Сложно разглядеть иконку Station в приложении Amtrak (первая строка), потому что ее детали слишком мелкие.

Приложение Transit имеет похожую проблему. Их значок папки с зажимом для бумаг похож на пятно, потому что пространство между папкой и зажимом слишком мало:

Иконки в мобильном приложении Transit

Небольшая корректировка значительно улучшит иконки:

Улучшенная иконка

При работе с несколькими фигурами оставляйте достаточно места между ними. Обилие тонких штрихов делает иконку перегруженной и трудной для чтения.

Google Maps отлично справился с задачей – иконки удобочитаемы при очень маленьком размере:

Иконки Google Map

Выравнивание

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

Хотя в этой иконке “Play”, треугольник расположен в центре круга, нашим глазам он кажется смещенным. Широкая часть треугольника кажется «тяжелее», чем точка, и смещенной влево.

Точно так же, как художники-шрифтовики точно настраивают шрифты для создания оптической иллюзии баланса (обратите внимание на смещенные точки на «i» и «j» и на выступ буквы «O»)

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

Так лучше.

Вывод: не доверяйте цифрам, используйте глаза, чтобы проверить свою работу.

Краткость

Идея, выраженная в нескольких словах, кажется эффективной и элегантной.

Обучение других тому, что вы знаете, укрепляет ваше собственное понимание предмета.

Как сказал Роберт Хайнлайн:

Когда один преподаёт, двое учатся.

Прекрасно.

Material Design довольно хорошо иллюстрирует краткость в своем системном руководстве по иконкам. Вместо того чтобы говорить:

Чрезмерно сложная иконка корабля (Источник: Material)

Скажите проще:

Лаконичная иконка корабля (Источник: Material)

Краткость подходит для дизайна иконок, так как зачастую мы работаем с небольшими холстами. Не используйте в иконках больше деталей, чем нужно.

Стремление к уменьшению и упрощению в интерфейсах подчеркивает смысл и освобождает место для контента. Иконки Telegram лаконичные и приятные:

Иконки Telegram

Иногда иконки интерфейса приобретают более иллюстративный стиль. Иконки Yelp – это восхитительные изображения популярных продуктов питания. Креветка в иконке тайской кухни изысканна:

Иконки Yelp от Scott Tusk

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

Иконки приложений Apple

Последовательность

Чтобы достичь гармонии в семействе иконок, соблюдайте одни и те же стилистические правила.

До iOS 13 иконки Apple имели всевозможные штрихи, заливки и размеры:

Иконки Apple в меню быстрых действий до iOS 13

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

Apple недавно выпустила введение в SF Symbols, впечатляющее дополнение к шрифту San Francisco. SF Symbols охватывает графический стиль иконок в 9 весах и 3 масштабах (возможно, немного сложное, но дотошное руководство). Из-за этого иконки кажутся более гармоничными.

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

Набор иконок Phosphor, проектированный автором этой статьи и созданный ее супругом, содержит более 700 последовательных иконок. Хотя каждая из них имеет различную форму, они имеют одинаковый вес и хорошо смотрятся вместе:

Подмножество семейства иконок Phosphor Carbon

Индивидуальность

Каждый набор иконок имеет вкус. Что делает его уникальным? Что он говорит о бренде? Какое настроение он создает?

Иконки Waze

Интерфейс Waze во многом зависит от иконок. Эти красочные, лаконичные иконки говорят: «Мы причудливы!»

Иконки Twitter легкие и четкие:

Иконки Twitter

Иконки Sketch утонченные и воздушные:

Иконки Sketch от Janik Baumgartner

Freemojis очень милые:

Freemojis от Streamline

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

Сверху вниз, слева направо: iJUK, PixBit, Crayon, Linebit

Простота использования

Создание набора иконок не заканчивается, когда вы нарисуете иконки. Требуется их дальнейшее тестирование. Нужно, чтобы было легко создавать новые иконки, чтобы дизайнеры могли использовать их в своих проектах (для экрана, печати и т. д.), а разработчики – кодить их.

Качественный набор иконок организован, хорошо задокументирован и проверен в контексте. Хорошо, если он поддерживается специальными инструментами, такими как менеджер иконок.

Организованный

Содержите главный файл в чистоте, правильно называйте свои активы и размещайте их так, чтобы их было легко найти. Рассмотрим лучший способ категоризации. В алфавитном порядке? По размеру? По типу?

Sketch-файл Nucleo, упорядоченный по типу

Хорошо задокументированный

Сформулируйте основные принципы семейства иконок:

Примеры принципов семейства иконок Phosphor:

• Понятность. В первую очередь ясно выражайте идеи. Сделайте иконку узнаваемой и читабельной. Никогда не жертвуйте ясностью значения иконки.
• Краткость. Используйте как можно меньше деталей. Стиль Phosphor направлен на упрощение. Будьте краткими и учитывайте каждый штрих, чтобы передать суть того, что представлено.
• Характер. Будьте причудливым. Экономно добавляйте уникальные детали, чтобы оживить иконки и не быть слишком строгим.

Перечислите технические правила:

Примеры технических правил семейства иконок Phosphor:

• Используйте холст 48x48px
• Используйте centered stroke 1.5px
• Используйте закругленные концы
• Используйте сплошные линии, за исключением случаев, когда ломаные сегменты полезны для понимания
• Используйте прямые сегменты, идеальные изгибы и приращение угла 15° там, где это возможно
• При необходимости отрегулируйте кривые, чтобы следовать принципам дизайна
• Используйте, по возможности, приращения целых, четных чисел; уменьшите до 1px и 0. 5px при необходимости
• Используйте следующие контуры фигур: 28x28px круг, 25x25px квадрат, 28x22px ландшафтная ориентация, 22x28px портретная ориентация
• Keep a 6px thick trim area

Проведите их итерацию и сделайте документацию общедоступной, если хотите:

• Иконки Material System
• Иконки интерфейса,иконки приложений и руководство по иконкам от IBM
• Иконки Shopify Polaris
• Иконография Atlassian

Проверенный

Проверьте последовательность. Убедитесь, что иконки работают в контексте, в соответствующих размерах. Убедитесь, что они гармонично сочетаются с визуальной системой.

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

Тестовые листы, используемые в Phosphor

Специальные инструменты

Наконец, если у вас есть ресурсы, создайте инструменты, облегчающие использование иконок.

Material делает иконки легко доступными с помощью собственной библиотеки иконок. Найдите нужную иконку и загрузите разные стили («темы»), цвета и размеры в выбранном вами формате файла:

Простая в использовании библиотека иконок Material

Набор иконок – это живое существо. Дайте ему любовь и инструменты, необходимые для успеха и роста.

Ресурсы

Библиотеки иконок

• Feather – великолепный набор из более 200 контурных иконок, которые хорошо масштабируются
• Material system icons – свыше тысячи утилитарных иконок для интерфейса в 5 стилях
• Nucleo – набор из примерно 30 тысяч иконок в 3 стилях: контурный, плоский / цветной и глиф
• Streamline – набор более 30 тысяч красиво нарисованных иконок в 3 весах

Агрегаторы иконок

• Noun Project – отличный способ поиска вдохновения в стилях и метафорах

Менеджеры иконок

• С помощью приложения Nucleo, вы можете импортировать наборы иконок, просматривать, экспортировать и перетаскивать их в нужные инструменты дизайна.

Перевод статьи medium.com

семь принципов удачного дизайна иконок — Дизайн на vc.ru

Перевод материала дизайнера Хелены Джан.

11 431
просмотров

Создание семейства иконок высокого качества требует вдумчивого подхода, «насмотренности», немного повторения и многочасовой практики. В материале — семь принципов для создания высококачественных иконок и много примеров.

Ясность

Основная задача иконки — быстро донести идею.

Иконки на приборной панели Toyota Prius Prime Toyota

Какие из этой группы символов вам понятны? Со временем водители смогут выучить их, но некоторые из этих иконок интуитивно не ясны, к ним понадобится инструкция.

Расставим их по уровню ясности:

Когда в иконке использована незнакомая метафора, её сложно понять. Символ с напоминанием о ремне безопасности (третий слева) буквально отображает действие, пользователь может быстро считать её. «Сигнал системы электроусилителя руля» (крайний справа) намного неопределённей.

Часто непонятная иконка просто разочаровывает. Неверная трактовка предупреждающих символов может быть опасна для вождения.

Вот несколько значков, которые кажутся наиболее знакомыми — иконки «Любовь», «Предупреждение», «Музыка» и «Вверх/вперёд»:

Семейство иконок Phosphor Carbon.

Стрелка — сильный символ, который используется, чтобы показать направление:

Знак из метро Нью-Йорка

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

Помните, что сама по себе иконка может быть не самым понятным решением, если представляемая идея слишком абстракта. В этом случае можно добавить текстовую метку или найти альтернативу.

Удобочитаемость

Когда есть понятный символ, необходимо убедиться, что он удобочитаемый:

Иконки в мобильном приложении Amtrak

Иконку Station в приложении Amtrak (первая строчка) сложно рассмотреть, потому что у неё много мелких деталей.

В приложении Transit есть похожая проблема. Значок клипборда читается как пятно, потому что пространство между планшетом и зажимом слишком мало:

Иконки в мобильном приложении Transit

Небольшая корректировка значительно улучшит иконку:

Скорректированная иконка клипборда

При работе с несколькими фигурами оставляйте достаточно места между ними. Большое количество тонких линий делает иконку перегруженной и трудной для чтения.

Google Maps прекрасно справился с задачей — иконки для обозначения времени в пути хорошо читаются при маленьком размере:

Иконки Google Maps

Выравнивание

Чтобы убедиться, что каждая иконка выглядит сбалансированной, сделайте оптическое выравнивание её элементов:

В этой иконке Play треугольник находится в центре круга, но пользователю кажется, что он смещён. Левая часть треугольника кажется «тяжелее» и смещается влево.

Точно так же дизайнеры шрифтов точно настраивают оптический баланс в гарнитуре (обратите внимание на смещённые от центра точки над буквами «i» и «j» и выступы у буквы «о»):

Дизайнеры иконок делают аналогичные корректировки, чтобы сбалансировать значок. Чтобы исправить приведённый выше пример, немного сдвинем элементы:

Урок: не слепо доверяйте цифрам, а проверяйте свою работу «на глаз».

Краткость

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

Можно более кратко выразить эту мысль, как это сделал писатель Роберт Хайнлайн: «Когда один учит, два учатся». Прекрасно.

Material Design хорошо показывает принцип краткости в своём руководстве по иконкам. Вместо того, чтобы говорить:

Слишком сложный значок корабля Material

Скажите просто:

Лаконичная иконка корабля Material

Краткость нужна в дизайне иконок, поскольку часто дизайнер работает с небольшими пространствами. Правильно используйте детали в значках и не злоупотребляйте ими.

В пользовательских интерфейсах упрощение позволяет разъяснить смысл и освободить место для контента. Иконки Telegram лаконичные и приятные:

Иконки Telegram

Иногда иконки в интерфейсах больше похожи на иллюстрации. Многоцветные иконки Yelp — восхитительные изображения популярных продуктов. Креветка в иконке тайской кухни прелестна:

Иконки Yelp  Скотт Таск

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

Иконки для iOS-приложений

Последовательность

Чтобы достичь гармонии для семейства иконок, соблюдайте одни стилистические правила. Apple использовала для iOS 13 всевозможные штрихи, заливки и размеры:

Иконки Apple для быстрых действий на iOS 13

Посмотрите на этот набор. Некоторые значки кажутся «тяжелее» других? Любая иконка имеет визуальный вес, который определяется такими параметрами, как заливка, толщина обводки, размер и форма. Чтобы добиться последовательности, нужно сохранять эти параметры одинаковыми.

Недавно Apple выпустила введение в SF Symbols, которое включает стиль иконок в девяти весах и трёх масштабах (возможно, немного сложное, но подробное руководство). Иконки выглядят более гармонично.

Иконки SF Symbols

Соблюдение последовательности в большом семействе иконок — непростая задача, особенно, если над ними работают несколько дизайнеров. При такой работе важно иметь чёткие принципы и правила, которым нужно следовать.

Набор иконок Phosphor, созданный автором этого материла и Тобиасом Фридом, включает более 700 значков. Хотя каждый из них имеет разную форму, у иконок одинаковый вес и они хорошо смотрятся вместе:

Подмножество семейства иконок Phosphor Carbon

Индивидуальность

Каждый набор иконок особенный. Что делает его уникальным? Что он может рассказать о бренде? Какое настроение создаёт?

Иконки Waze

Интерфейс Waze во многом опирается на иконки. Эти красочные иконки как будто говорят: «Мы причудливые!».

Иконки Twitter мягкие, лёгкие и чёткие:

Иконки Twitter

Иконки Sketch утончённые и воздушные:

Иконки Sketch Яник Баумгартнер

Иконки Freemojis милые:

Иконки Freemojis Streamline

Наборы иконок для Android предназначены для разных тем домашнего экрана. Ниже представлены иконки в абстрактном, пиксельном, пузырьковом и неоновом стилях:

Сверху вниз и слева направо: iJUK, PixBit, Crayon, Linebit

Простота использования

Процесс создания иконок не заканчивается после того, как они были идеально нарисованы. Необходимы дальнейшие тесты и постработа, чтобы дизайнеры могли легко создавать новые иконки и использовать их в своих проектах, а разработчики — создавать код.

Качественный набор иконок организован, хорошо задокументирован и проверен в контексте. Хорошо, если он поддерживается специальными инструментами, например менеджером иконок.

Организация

Содержите основной файл в «чистоте», правильно называйте активы и размещайте так, чтобы их было легко найти. Рассмотрите лучший способ создания категорий. По алфавиту? По размеру? По типу?

Файл, организованный по типу иконок Nucleo

Создание документов

Сформулируйте основные принципы семейства иконок. Например, принципы иконок Phosphor:

• Понятность. Прежде всего, идея должна быть ясна. Сделайте значки узнаваемыми и читаемыми. Никогда не жертвуйте ясностью при обозначении символа.
• Краткость. Используйте как можно меньше деталей. Стиль Phosphor упрощает. Будьте краткими и учитывайте каждый штрих, чтобы передать суть.
• Образ. Будьте причудливым. Аккуратно добавляйте уникальные детали, чтобы оживить иконки и не быть слишком строгим.

Перечислите технические правила. Например, для Phosphor это:

• Холст 48×48 px.
• Обводка по центру 1,5 px.
• Закругленные концы.
• Непрерывные линии, кроме случаев, когда ломаные сегменты необходимы для понимания.
• Прямые сегменты, идеальные изгибы и приращение угла 15° там, где это возможно.
• При необходимости отрегулируйте кривые, чтобы следовать принципам дизайна.
• По возможности используйте целые, чётные числа, уменьшите до 1 px и 0,5 px при необходимости.
• Придерживайтесь контурам линий: 28×28 px круг, 25×25 px квадрат, 28×22 px альбомная ориентация, 22x28px портретная ориентация.
• Сохраняйте область обрезки толщиной 6 px.

Можете сделать документацию общедоступной, например:

• Иконки Material System.
• Руководство по иконкам IBM.
• Иконки Shopify Polaris.
• Руководство по иконкам Atlassian.

Тестирование

Проверьте последовательность. Убедитесь, что иконки работают в контексте, они одинакового размера, а также, что они гармонично сочетаются с визуальной системой.

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

Тестовые файлы Phosphor

Специальные инструменты

Наконец, если у вас есть возможность, создайте инструменты, облегчающие использование иконок. Material Design делает иконки легкодоступными с помощью собственной библиотеки. Найдите нужную иконку и загрузите разные стили, цвета и размеры в выбранном формате файла:

Библиотека иконок Material

Набор иконок — живое существо. Подарите ему любовь и инструменты, необходимые для успеха и роста.

Ресурсы

Библиотеки иконок:

• Feather — набор более 200 минималистичных иконок, которые хорошо масштабируются.
• Material system icons — более 1000 утилитарных иконок для интерфейса в пяти стилях.
• Nucleo — набор более 30 тысяч иконок в трёх стилях.
• Streamline — прекрасно нарисованный набор более 30 тысяч иконок в трёх «весах».

Агрегаторы иконок:

• Noun Project — отличный способ найти вдохновение в разных стилях и метафорах.

Менеджеры иконок:

• Nucleo — приложение, с помощью которого пользователь может импортировать, просматривать и выполнять другие действия с наборами иконок.

Все доступные — стиль иконок

Брошь Artisan Cameo 1980-х годов из французского гагата и черепахового стекла

$ 275,00

Филигранное колье 1920-х годов из итальянского серебра Vermeil с бахромой

$ 425,00

Кольцо Navette из 10-каратного золота Ripley-Howland Mfg Co. , около 1890 г., с родолитом, гранатом и бриллиантом огранки «роза»

$ 995,00

Около 1900 г. Поздний викторианский английский 9k Золотое кольцо с пряжкой

$ 950,00

Механическая эмалированная подвеска «Джек-в-коробке» 1940-х годов из 14-каратного золота

$ 425,00

Signed Artisan Brutalist Hand Brooch из бронзы, золота 14 и 18 карат

$ 795,00

Кольцо из эдвардианской филиграни из белого золота 18 карат, около 1910 г., с бриллиантами и изумрудами

$ 1925,00

Редкая манжета в стиле ар-деко Leach & Miller из стерлингового серебра и пасты в виде спиральной змеиной руки

$ 1925,00

Винтажное кольцо Zuni коренных американцев из стерлингового серебра, бирюзы и швабры с подписью Florentine Panteah

$ 295,00

Редкая викторианская траурная мемориальная подвеска 1870 года с фотографиями и листвой

$ 450,00

Браслет-подвеска из стерлингового серебра начала 20-го века с английскими подвесками Fob

$ 625,00

Старинные серьги-скарабеи из египетского фаянса в оправе из 14-каратного золота ручной работы

$ 1550,00

Нарукавник 1930-х годов в стиле ар-деко, французская черепаха, целлулоид и горный хрусталь

$ 495,00

Подарочные сертификаты (различные суммы)

От $ 50. 00

Пряжка для ремня эпохи искусств и ремесел

$ 195,00

Редкий итальянский браслет Pietra Dura из стерлингового серебра с золотым камнем и лазуритом

$ 1650,00

Траурная брошь викторианской эпохи «In Memory Of» с золотым наполнением, эмалью и агатом

$ 550,00

Коктейльное кольцо 1960-х годов Panetta Vermeil «Opal» со стеклом и стразами

$ 275,00

Mary Gage Arts & Crafts Movement Брошь с анютиными глазками из стерлингового серебра

$ 650,00

Брошь-воин из стерлингового серебра Ballesteros Mexico 1950-х годов с аметистом

$ 525,00

Коктейльное кольцо с культивированным жемчугом и сапфиром из 14-каратного золота 1960-х годов

$ 725,00

Ожерелье из целлулоидной корзины с цветами в стиле ар-деко 1920-х годов

$ 250,00

Целлулоидное колье с маргаритками в стиле ар-деко 1930-х годов

$ 425,00

Ожерелье из целлулоида с коралловыми нарциссами 1940-х годов

$ 295,00

Руководство дизайнера по стилям значков

Стили значков составляют большую часть визуального контента — они работают в различных интерфейсах для передачи идей, объектов или действий. Это не только улучшает общий дизайн, но и может дать конечному пользователю лучшую ясность, удобочитаемость и индивидуальность при навигации по веб-сайтам или понимании таких элементов, как вывески.

В конце концов, визуальное общение существует с каменного века, с пещерным искусством.

Теперь иконы мы встречаем ежедневно – на придорожных вывесках и даже вывесках внутри торговых центров. Кроме того, значки отлично подходят для визуального усиления общего обмена сообщениями, чтобы дополнить или усилить контент. Это особенно полезно для объяснения шагов или даже как способ продемонстрировать индивидуальность бренда.

Здесь мы разбираем 12 популярных типов иконок, которые вы можете изучить с помощью дизайна.

1. Линия

Стили значков линий известны как символические глифы с контуром. Общие значки линий упрощены, используют один цвет и не заполняются. Поскольку значки линий представляют собой контуры общих объектов и действий, пользователи могут легко их распознать. Создавать их относительно легко — думайте об этом как о рисовании фигур. Чтобы поднять его на ступеньку выше, вы можете изучить значки размерных линий (также известные как значки изометрических линий) для более интересного или менее формального вида.

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

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

Изучите значки линий

2. Глиф

Вот забавный факт: «глиф» происходит от греческого слова «глюфе», что означает символ. Глифы заполнены монохромными формами, которые выглядят как сплошная форма.

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

Многие глифы легко идентифицировать для конечного пользователя, потому что они понятны, просты и часто используются. Как и линейные значки, их легко распознать, потому что они используются в повседневных вывесках. Глифы хорошо работают, даже когда вы их сжимаете из-за их твердой формы.

Однако глифы могут выглядеть лучше, когда они используются в качестве фавиконов для веб-сайтов. Но из-за своего цельного и одноцветного вида глифы могут казаться скучными и плоскими при использовании в динамических объявлениях.

Исследуйте значки глифов

3. Цветной контур

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

Цветные контуры — отличный способ оживить иконку, особенно логотип бренда.

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

Исследуйте цветные контурные значки

4. Плоские

Плоские значки не имеют глубины, они просто плоские — как следует из названия — и используют двумерные (2D) элементы, которые минималистичны.

Плоские значки хорошо работают в качестве фавиконов (значков, которые появляются на вкладке веб-сайта или в адресной строке) — они просты, легко узнаваемы и минимальны. Обычно они используются для иконок мобильных приложений. Если вы сейчас посмотрите на свой мобильный телефон, большинство значков, вероятно, будут плоскими. Это потому, что они должны соответствовать рекомендациям Android и iOS по формату, стилю и размерам.

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

Плоские значки Explore

5. Градиент

Градиентные значки используют технику смешивания цветов. Цвета имеют тенденцию переходить от светлого к темному или от приглушенных цветов к более ярким — в зависимости от того, какой образ вы хотите создать.

Градиентные значки отлично подходят для использования в качестве логотипов брендов, особенно для мобильных приложений. Популярным примером этого может быть логотип бренда Instagram, в котором используется сочетание цветов, почти имитирующее закат.

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

При использовании градиентов все зависит от сочетания цветов. Если вы соедините два чересчур контрастных оттенка вместе, чтобы сделать градиент без надлежащего смешивания, это может больше походить на блокировку цвета, чем на градиент. Хитрость заключается в том, чтобы знать, какие цветовые комбинации работают, чтобы сделать плавный градиент на вашей иконке.

Изучите градиентные значки

6. Двухцветные

Двухцветные значки используют два цвета в дизайне — он состоит из основного и дополнительного цветов. Вторичный цвет обычно более светлого оттенка.

Этот простой и чистый стиль. Двойные тона обычно легко идентифицировать, что делает их отличными для таких элементов, как навигация по веб-сайту. Например, для значка загрузки документа можно использовать два тона со стрелкой загрузки в качестве дополнительного цвета. Это также дает конечному пользователю лучшую узнаваемость с первого взгляда по сравнению с использованием одного цвета.

Изучите двухцветные значки

7. Изометрические

Изометрические значки — это двухмерные изображения, которые кажутся трехмерными.

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

Конечно, игра с изометрическим дизайном связана с углами. Его следует рассматривать с высоты птичьего полета и из-за угла, чтобы создать реалистичный вид с точки зрения пользователя. Большинство изометрических иконок имеют одинаковые горизонтальные линии под углом 30 градусов.

Исследуйте изометрические значки

8. Doodle

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

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

Дудлы будут отлично смотреться на плакатах, особенно в маркетинговых материалах бренда или на целевой странице веб-сайта. Конечно, на создание рисунков уходит больше времени, так как вам нужно разработать лучший способ рисования деталей, чтобы значок было легко идентифицировать.

Исследуйте каракули

9. Закругленные

Закругленные значки — это значки, имеющие круглую форму. Они, как правило, хорошо работают с логотипами или активами, такими как инфографика.

Многие бренды используют круглые логотипы, потому что они хорошо подходят в качестве фавиконов. Если вы сейчас посмотрите на вкладки браузера, скорее всего, большинство значков брендов округлые. Даже Google использует круглые значки, а их домашняя страница также использует круглые значки.

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

Значки со скругленными углами

10. Наклейка

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

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

Кроме того, в последние годы популярным маркетинговым методом стало создание набора наклеек для приложений обмена сообщениями. Некоторые бренды создают собственные пакеты наклеек, которые соответствуют их фирменному цвету и сообщениям. С иконками-наклейками вы также можете использовать типографику для привлечения аудитории.

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

Значки-наклейки «Изучить»

11. 3D

3D-значки противоположны плоским стилям значков — они трехмерные и выделяются. Кажется, что он выталкивается из дизайна, а не сидит на странице.

Они отлично работают на баннерах, плакатах, дизайне социальных сетей и, в основном, на большинстве маркетинговых материалов. Они также будут преуспевать на целевых страницах веб-сайтов, поскольку использование 3D-иконок может привлечь внимание с первого взгляда — если все сделано правильно. Они вызывают интерес и придают вашему дизайну более приятный и дружелюбный вид, особенно при правильном использовании цвета.

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

3D-значки «Изучить»

12. Анимированные

Анимированные значки — это статические значки, которые оживают благодаря добавлению элементов дизайна, заставляющих значок «двигаться».

Поскольку анимация привлекает внимание, она стимулирует взаимодействие и выводит содержимое в интерактивном виде, что отлично подходит для презентаций. Он также часто отображается во время загрузки веб-сайтов или мобильных приложений — подумайте о классических песочных часах, которые наклоняются на 180 градусов.

Кроме того, анимированные значки используются для указания или подсказки пользователю выполнить определенное действие, например, прокрутить страницу вниз.

Анимированные значки приносят много «пиццы» в такие элементы, как презентация, и могут понравиться конечным пользователям, если стратегически используются для веб-сайтов — например, для загрузки страницы или использования анимированного значка, чтобы заставить пользователей прокручивать страницу вниз.

При использовании анимированных значков это может, по иронии судьбы, повлиять на время загрузки страницы, особенно при использовании ее в формате GIF. Но этому можно легко противостоять с помощью правильного формата файла. Например, анимации Lottie легкие — они примерно на 600% меньше, чем GIF, поэтому вы можете использовать их в качестве значков, не беспокоясь о замедлении работы вашего сайта или приложения.

Изучите анимационные значки Lottie

Получите доступ ко всем стилям значков, которые вам нужны

Как и большинство вещей в дизайне, стили значков проходят циклы. Первые значки пиксель-арта появились еще в 1981 году на Xerox Star 8010! В настоящее время у нас есть множество стилей значков с новым программным обеспечением и методами, которые позволили нам перейти от плоских значков к трехмерным версиям.