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

Много ли тут иконок, значения которых вам понятны? Некоторые, впрочем, ничего — вот так я расположила бы их на условной шкале ясности:

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

Одни из самых непонятных значков, которые я видела — в интерфейсе приложения для обработки фото VSCO.

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

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

При создании иконки подумайте, можно ли подобрать к ней очевидную метафору — например, такую, как шестеренка для панели «Настройки». Если нет, то придется что-то изобретать, и в этом нет ничего страшного — символ любви, знак «осторожно!», условное изображение музыки и действия «Вверх» в файловых системах тоже не сразу стали общепринятыми и такими очевидными.

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

Значок станции (вверху) трудно читается — он слишком маленький и в нем много деталей.

Та же проблема в приложении Transit, в котором иконка буфера обмена похожа на каплю — все из-за малого пространства между дощечкой и зажимом.

Маленькая правка — и все становится гораздо лучше.

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

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

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

Нарисуйте вот это:

Мы должны создавать лаконичный дизайн, потому что иконки часто изображаются в небольшом масштабе. Главное в пользовательских интерфейсах — это содержание. Это отлично понимают в Telegram:

Иногда иконки более наглядны — например, как изображения еды в приложении Yelp. Вы только посмотрите на эти креветки!

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

Прищурьтесь. Не кажется ли вам, что одни иконки тяжелее других?

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

Позже Apple представила библиотеку SF Symbols для своих сервисов и приложений сторонних разработчиков. У каждой иконки появилось девять вариаций визуального веса и три размера.

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

Иконки в приложении-навигаторе Waze кричат нам о своей необычности, в то время как значки в Twitter преисполнены легкости и четкости:

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

Библиотека эмодзи Freemojis мила и дружелюбна:

А наборы значков для Android могут быть самыми разнообразными: