Почему я говорю именно об иконах? Иконки похожи на микрокосм продукта или бренда. Благодаря тому, что они изображают и как они это изображают, вы можете многое узнать о продукте, о том, как он работает, и о том, какие чувства вы испытываете при взаимодействии с ним.
Итак, что такое икона? И каковы основы значков?
В мире дизайна существует множество интерпретаций слова «значок», но наиболее полезным для наших целей является высказывание экстраординарного иллюстратора Мэг Робишо:
«Иконка — это символ… представляющий большую идею. Это одна из тех вещей, которые вы не должны замечать, когда они сделаны очень хорошо, но всегда замечаете, когда они сделаны плохо (а это бывает в большинстве случаев). Прежде всего, значок должен быть чем-то, с чем можно легко взаимодействовать. Он должен быть интуитивно понятным. Он должен кратко отражать идею, которую он представляет».
Конечно, это может охватывать много вопросов, поэтому в интересах времени (и наших значительных рабочих нагрузок) мы просто сосредоточимся на значках пользовательского интерфейса в мобильном продукте. Но именно здесь вы действительно можете проявить индивидуальность приложения!
Основы
Почему иконки важны
Так почему же иконам не уделяется больше внимания? Многие продукты относятся к ним как к второстепенным, теперь не каждый проект требует работы с пользовательскими значками. Но полагаться на стандартную библиотеку иконок — это то же самое, что полагаться на стоковую фотографию; Функционально он может выполнять свою работу, но он общий, непривлекательный и не говорит об особых сильных сторонах и особенностях бренда / продукта.
Если вы пытаетесь продать идею пользовательской иконографии заинтересованным сторонам, вот еще несколько конкретных обоснований, которые вы можете предоставить:
- Набор, который у вас есть, недостаточно обширен или расширяем (например, отсутствующие или противоречивые правила).
- Продукт использует необычные или новые визуальные метафоры. Может быть, это тяжелый рабочий процесс и некоторые функции инструментов, которые раньше не были представлены.
- Есть несколько причудливых вариантов пользовательского интерфейса или типографики, которые следует сочетать и отражать в иконографии.
Стратегия и тон Indigo провел аудит среднего размера, набрав около 60 уникальных глифов.
Рассмотрим процесс на основе нашей работы над мобильным приложением для сельского хозяйства Indigo. Базовая стратегия с Indigo и нашей внутренней проектной командой была жизненно важна для того, чтобы сразу же взяться за дело. Чем раньше вы выработаете общий язык того, что вы пытаетесь сказать и как это сказать, тем с меньшими разочарованиями вы столкнетесь позже.
Большая часть нашего плана, когда мы начинаем работу над новой иконкой, — это комплексный аудит. Аудит — это процесс просмотра продукта, чтобы выяснить, что ему нужно, и определить потенциальные области, в которых значок продукта или иллюстрация могут улучшить впечатление.
Через пару дней мы составили подробный список каждой возможности значка/иллюстрации. Каждая запись включала существующее местоположение значка, функцию в пользовательском интерфейсе, примечания к метафоре/стилю, целевое разрешение(я), приоритет и другие соображения (например, активные состояния).
Визуальные метафоры
Как только мы поняли, с чем имеем дело, мы поставили перед собой задачу выяснить, как сделать этот продукт выдающимся — как мы можем разработать иконографию, которая не только выделяет Indigo, но и поддерживает ее пользователей?
Для вдохновения давайте посмотрим на пару хороших примеров продуманных и конкретных подходов в соответствующих областях: Twitter (хотя Twitterrific справился с этим лучше) и Spotify
Для Indigo на первый план, естественно, вышли различные сельскохозяйственные образы, но мы ограничили их некоторыми важными областями, такими как панели вкладок и онбординг. Пользователи знают, что они делают — им не нужны тюки сена и ирригационное оборудование, которое суют им в лицо со всех сторон.
Выяснение метафор может быть непрерывным процессом и обычно согласуется (если не полностью совпадает) с идеями. У каждого есть свой способ справиться с этим; когда я начинаю набор с нуля, я стараюсь рисовать как можно больше на бумаге, чтобы выразить свои мысли.
Стиль
«Начало любого дизайнерского проекта является ошеломляющим, и поиск ограничений, которые можно наложить на себя, может сосредоточить ваше внимание и привести к более творческим решениям. Принимая во внимание контекст значка, вы сразу же можете отметить ряд решений и соответствующим образом направить свое внимание».
Дизайнер Алекс Гриндлинг прав. Одна из вещей, которые я чаще всего слышу о дизайне иконок: «Звучит жалко. Так мало места!» И хотя вторая половина этого мнения верна, принятие внутренних ограничений может одновременно сделать для вас много работы и освободить ваш разум для новых идей.
Наложение ограничений на себя — одна из самых ценных вещей, которые вы можете сделать в дизайне иконок (или вообще в дизайне, если уж на то пошло). Это не только убережет вас от многих головных болей в будущем, если вы поймете и спланируете их, но и позволит творчеству расцвести после того, как вы сузите свои возможности.
Начать с набора эстетических правил — отличное начало — так мы поступили на Indigo.
Сетка
Скелетом каждого набора иконок является его базовая система сетки. Вы, наверное, знаете о Google Material Icons , которые построены на сетке 24x24 пикселей. Но другие числа, кратные 8, довольно распространены, от 8x8 до 64x64 или более (хотя это часто нарушает территорию точечной иллюстрации).
Для Indigo мы фактически использовали четыре разных сетки:
- 48px для спотов
- 32px для таб бара
- 24px для более простых служебных значков
- 16px для маленьких индикаторов.
Визуальный баланс
Обсуждение иконок было бы неполным без упоминания ключевых линий. Ключевые линии — это направляющие, которые помогают поддерживать визуальную сбалансированность наборов значков независимо от ориентации их составных частей.
Большинство иконок основаны на нескольких основных силуэтах: квадраты, круги, вертикальные прямоугольники и горизонтальные прямоугольники. Конечно, есть варианты всего этого; но ключевые линии помогают сохранить баланс ваших значков, когда их видят и используют вместе.
Для быстрого примера давайте посмотрим на круг и квадрат. Ваш первый порыв может заключаться в том, чтобы сделать их размеры одинаковыми.
Но здесь мы имеем дело больше с визуальной областью , чем с точными внешними размерами — в этом смысле иконография очень похожа на расстояние между буквами в типографике. Как будут складываться эти две геометрические фигуры при их целевом размере и расположении? Квадрат всегда будет казаться тяжелее, потому что его геометрическая площадь больше. Быстрый способ проверить это — добавить размытие к вашим значкам или расфокусировать глаза.
Поэтому мы использовали ключевые линии, чтобы найти что-то более сбалансированное:
При работе с различными формами в таком маленьком масштабе удаление пары пикселей может иметь большое значение! Конечно, это всего лишь основные рекомендации по форме, но они могут послужить хорошей основой для единообразия значков.
Теперь давайте посмотрим, как эти формы переводятся в некоторые глифы для Indigo:
Важно помнить об этих базовых формах, поскольку их хорошее сочетание (особенно в постоянных элементах, таких как панели вкладок) помогает пользователям сократить когнитивную нагрузку и быстрее понять их.
Уровень детализации
Прежде чем мы перейдем к деталям, уровень детализации — это одна из областей, где многие дизайнеры иконок спотыкаются (включая меня). Очень заманчиво втиснуть как можно больше контента в пространство, особенно если вы работаете с увеличенным размером значка и без контекста окружающего экрана. Добавлять элементы всегда проще, чем удалять их, поэтому делайте ошибку в сторону простоты и постоянно проверяйте значки на соответствие их предполагаемому контексту.
Например, этот значок выглядит довольно хорошо, если вы работаете с увеличенным размером, как это делают многие люди. Но когда вы перепроверите его в предполагаемом целевом контексте (в данном случае 12 пикселей), все может стать довольно грязным и неразборчивым быстро при настройке на разные размеры.
Однако проектирование для наименьшего размера и масштабирование открывает широкий спектр возможностей. По мере увеличения размера увеличивается и возможность добавления деталей и стилей. Это не только способ придать больше индивидуальности бренду, но также может выполнять двойную функцию как в виде иконок, так и в виде точечных иллюстраций.
Поскольку Indigo — это продукт, который многие люди будут использовать на открытом воздухе при ярком солнечном свете, мы решили обрезать и сделать наши значки максимально четкими и открытыми.
Правила и последовательность
Есть несколько важных вещей, которые следует учитывать при создании набора или проверке на несоответствия:
Может быть полезно начать с самого маленького элемента в вашей иконке, и добавлять детали оттуда. Втиснуть больше элементов всегда заманчиво, но редко окупается. Например, я знаю, что мне нужен знак доллара на этом ценнике, поэтому я начинаю с этого, получаю вершины обводки там, где я хочу, чтобы они были на сетке для удобочитаемости, а затем строю метку вокруг нее.
Размер и перспектива
Должны ли ваши значки иметь размеры или перспективу? Это то, что определенно может выделить их, но убедитесь, что лечение распространяется последовательно. Если вы делаете принудительную перспективу сбоку, чтобы показать открытую папку с файлами, подумайте о том, как это повлияет на весь набор. Опять же, мы склонялись к плоским значкам для удобочитаемости и расширяемости.
Перекрывается
Говоря о глубине, вы не всегда можете передать сложные понятия с помощью отдельных элементов или объектов. Многие значки основаны на сопоставлении двух или более элементов вместе, иногда даже друг над другом. Плотно ли прилегают элементы друг к другу? Может быть, элементы дальше назад имеют другой цвет или заливку? Задайте себе эти вопросы, прежде чем считать икону готовой.
Штрихи, углы и клеммы
Ничто так не выделяет иконку, чем несоответствие обработки углов и толщины штриха. Они светят как маяк за версту и говорят: «Нам здесь не место!» Очень маленькие изменения могут иметь большое значение и могут сильно повлиять на характер и сплоченность набора иконок.
Вы, наверное, уже заметили, что мы использовали обводку шириной 1,5 пикселя для Indigo. Это должно было усилить ощущение легкости в очень насыщенном информацией интерфейсе и отразить некоторые варианты типографики. Если вы уверены, что контекст ваших значков не будет включать в себя дисплеи с низкой плотностью (например, в настольной сети, где у некоторых людей старые мониторы), то у вас больше возможностей для маневра, когда дело доходит до веса штрихов. Но поскольку мы знали, что они будут использоваться исключительно на мобильных устройствах, точное выравнивание по сетке не было необходимым для удобочитаемости.
Возможно, именно там мы и приземлились, но прежде чем прибыть туда, мы провели некоторые исследования и испытания. Посмотрите, как некоторые незначительные отличия могут изменить атмосферу всего набора:
Цвет и состояния
Это важно не только с точки зрения доступности или активности/неактивности, но и как способ сделать ваши иконки отличными от других, заурядных наборов. Один цвет является классическим и простым в реализации, и именно по этому пути мы пошли по значкам на панели вкладок для Indigo. Мы экспериментировали с некоторыми сложными двухцветными обработками, но в конце концов победили простота и разборчивость. Тем не менее , мы использовали заполненные состояния для значков активной панели вкладок, выйдя за рамки простого изменения цвета, чтобы помочь пользователям понять, где именно они находятся в продукте.
Документация
Запись новых правил поможет вам разобраться в своих значках, но они абсолютно необходимы, если вы отправляете набор MVP, который нужно будет расширить позже. Поскольку вы, вероятно, не можете гарантировать, что будете управлять этим кораблем, руководящие принципы имеют решающее значение для настройки клиентов или другой команды на успех.
Для тех из вас, кто хочет углубиться в иконки, вы можете проверить рабочий лист Figma , на котором основана большая часть этого материала.
Оригинал статьи.
Ко мне можно записаться на консультацию или менторство в тг: найдём точки роста и способы выдерживать конкуренцию в современных реалиях — устраиваться на работу, получить заказы, повышать чеки, чувствовать себя увереннее.Ещё можно подписаться на мой канал, чтобы оставаться на связи, не пропускать полезности и участвовать в бесплатных дизайн-ревью.
А здесь, на DSGNERS, можно почитать другие мои статьи и переводы:
Как разроботать CJM (пошаговое руководство)
Ужасный UX: 20 распространенных ошибок в пользовательском опыте
Частые ошибки при вёрстке текста: как исправить
Жизнь (почти) без правок: пошаговый план
Адовые клиенты! — как распознать
Правило банана в UX/UI дизайне
7 психологических приемов UX от настоящих психологов
7 способов улучшить свои навыки дизайнера пользовательских интерфейсов
Всем классных дизайнов! ❤️
