ДИЗАЙН В СРЕДЕ
дизайн / 1 октября

7 принципов дизайна иконок

Создательница иконпака Phosphor Хелена Жэнг рассказала о семи вещах, которые стоит помнить при разработке иконок: это ясность, читаемость, сбалансированность, лаконичность, последовательность, индивидуальность и простота использования.

Ясность

Главная цель иконки — быстро донести мысль.
Иконки на приборной панели Toyota Prius Prime. Источник: toyota.com
Много ли тут иконок, значения которых вам понятны? Некоторые, впрочем, ничего — вот так я расположила бы их на условной шкале ясности:
Напоминание пристегнуть ремень на третьей иконке изображено буквально, и мы быстро считываем его смысл. А вот о том, что последний индикатор отвечает за электроусиление руля, придется прочитать в инструкции. Когда в иконке используется незнакомый символ, понять, за что она отвечает, может быть почти невозможно.

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

При этом все понимают, что иногда создать интуитивно понятную иконку для сложной функции невозможно — поэтому автомобильные концерны пришли к единым изображениям подобных символов. Спустя время непонятные значки становятся общепринятыми и ясными. Показательный пример — иконка Command на компьютерах Apple, разработанная Сьюзен Кэр в 1984 году (также встречается как индикатор достопримечательностей в странах Северной Европы и известна как геральдический символ «Узел Боуэна»).
При создании иконки подумайте, можно ли подобрать к ней очевидную метафору — например, такую, как шестеренка для панели «Настройки». Если нет, то придется что-то изобретать, и в этом нет ничего страшного — символ любви, знак «осторожно!», условное изображение музыки и действия «Вверх» в файловых системах тоже не сразу стали общепринятыми и такими очевидными.
Изображения из набора Phosphor Carbon
Значение многих иконок легко считывается всеми людьми вне зависимости от культуры, возраста и происхождения. Учитывайте свою аудиторию — могут быть и исключения.

Читаемость

Смысл иконки ясен? Теперь убедитесь, что она читаема.
Иконки в приложении Amtrak
Значок станции (вверху) трудно читается — он слишком маленький и в нем много деталей.

Та же проблема в приложении Transit, в котором иконка буфера обмена похожа на каплю — все из-за малого пространства между дощечкой и зажимом.
Иконки в приложении Transit
Маленькая правка — и все становится гораздо лучше.
Если иконка состоит из разных деталей, оставляйте достаточно пространства между ними. Чем больше в значке штрихов и чем больше он заполнен, тем хуже он читается.

Удачный пример работы с пространством в маленьких иконках можно подсмотреть у Google.
Иконки в Google Maps

Сбалансированность

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

Лаконичность

Идея, высказанная несколькими словами, может быть эффективной и элегантной. Разберем пример:
Обучение кого-то тому, что вы знаете, укрепляет ваше собственное понимание предмета.
Так себе, да? А вот высказывание той же идеи словами писателя-фантаста Роберта Хайнлайна:
Когда один учит, двое учатся.
Стало лучше. С иконками можно работать также. Вместо того, чтобы рисовать вот это:
Источник: material.io
Нарисуйте вот это:
Источник: material.io
Мы должны создавать лаконичный дизайн, потому что иконки часто изображаются в небольшом масштабе. Главное в пользовательских интерфейсах — это содержание. Это отлично понимают в Telegram:
Иногда иконки более наглядны — например, как изображения еды в приложении Yelp. Вы только посмотрите на эти креветки!
Иконки в Yelp. Автор: Скотт Таск (Instagram)
Если речь не о значках внутри интерфейсов, а об иконках приложений, деталей может быть больше — они передают глубину. Все потому, что пользователь смартфона, планшета или компьютера находится в знакомом контексте и видит название программы — ему не надо догадываться о предназначении иконки.
Иконки ProCreate, Firefox и Netflix в iOS

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

Чтобы добиться гармоничности в наборе иконок, оформляйте их в одном стиле.

До выхода iOS 13 иконки Apple имели разные обводки, размеры и заливки:
Прищурьтесь. Не кажется ли вам, что одни иконки тяжелее других?

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

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

У каждого набора иконок есть свой стиль. Что делает его уникальным? Что он сообщает о бренде? Какое настроение создает?
Иконки приложения Waze
Иконки в приложении-навигаторе Waze кричат нам о своей необычности, в то время как значки в Twitter преисполнены легкости и четкости:
Иконки сервиса Twitter
Иконки в Sketch нежны и воздушны:
Иконки программы Sketch
Библиотека эмодзи Freemojis мила и дружелюбна:
А наборы значков для Android могут быть самыми разнообразными:
Сверху вниз, слева направо: iJUK, PixBit, Crayon, Linebit

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

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

Организованность

Ваш мастер-файл должен быть понятен, иконки понятно названы и расположены в удобном порядке — по алфавиту, размеру или типу заливки.
Sketch-файл набора иконок Nucleo

Правильная документация

Начните с ключевых принципов. Вот пример из описания набора Phosphor:

Ясность. Это самое главное. Иконка должна быть узнаваемой и читаемой — не жертвуйте ясностью ради выразительности

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

Характер. Добавляйте уникальные детали, чтобы добавить «теплоты» и не превратить набор в слишком строгий.
Иконки из набора Phosphor Carbon
Далее следует конкретика — технические требования к значкам:

Используйте масштаб 48 × 48 пикселей.
Используйте обводку толщиной 1,5 пикселя.
Делайте формы плавными и закругленными.
Используйте непрерывные линии.
По возможности используйте идеальные дуги и углы 15°.
По возможности используйте четное количество пикселей для начертания фигур.
Используйте ключевые формы: круги диаметром 28 пикселей, квадраты 25 × 25 пикселей, горизонтальные прямоугольники 28 × 22 пикселя и вертикальные размером 22 × 28 пикселей.
Оставьте внешнюю область в 6 пикселей незакрашенной.

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

Проверьте сбалансированность. Убедитесь, что значки вписываются в контекст и имеют подходящий размер и визуальный вес. Подставляйте каждую иконку рядом с другими изображениями в наборе, чтобы выяснить, точно ли все в порядке.
Тестовые листы, использованные в проверке набора Phosphor
Источник: 7 Principles of Icon Design
ПОЛЕЗНЫЕ МАТЕРИАЛЫ