Сегодня я на примерах расскажу, какой должна быть хорошая иконка. Мы рассмотрим частный случай иконки мобильного приложения, но все описанные качества распространяются и на другие типы иконок.
До того как увлечься ui-дизайном, я долгое время занимался айдентикой, придумывал и рисовал логотипы.
Поэтому, когда «Яндекс-драйв» запустили свой сервис, а с ним и приложение, я сильно негодовал по поводу иконки этого приложения. И очень надеялся, что в ближайших релизах исправят это недоразумение. Но прошел год, а воз и ныне там. А т.к. я пару раз встречал от коллег мнение, что такая иконка на самом деле норм, что главное «выделиться» и вообще это «вызов формализму», я понял, что стоит написать краткую статью и поделиться некоторым опытом, который я приобрел в айдентике и который часто помогает мне в ui-дизайне.
Сравним «Яндекс-драйв» с их конкурентом — «BelkaCar»
Оформление «Белки» сделано грамотно, пользователь видит логотип на иконке, а потом его же на борту тачки, всё в одном темно-синем цвете.
Пользователь «Яндекса» видит кляксу на иконке, а на тачке текстовый логотип и геометрический рисунок, но всё это хотя бы в одних цветах:
Я выделю основные критерии качества иконки:
• Метафора
• Форма
• Цвет
Они очень похожи на основы изобразительно искусства — объем, цвет, и композиция, что неудивительно: из-за условий использования и назначения иконок, композиция трансформировалась в метафору, а объём в форму.
Метафора служит для идентификации иконки, это смысл, который обязательно должен быть понятным тому, для кого предназначается иконка, т.е. пользователю. Иконка тележки в интернет-магазине понятна и европейцу и американцу. А вот для жителя сельских районов Индии тележка вообще невиданное и непонятное существо, им авоська ближе, которую ещё бы подписать на хинди. Чем понятнее метафора, тем безболезненнее будет использование иконки без пояснительного текста.
Форма в нашем случае уже ограничена платформой, в iOS это всегда скруглённый прямоугольник. Поэтому важна форма, которая находится внутри. Тяготеет она к квадрату, или кругу, или выходит за границы прямоугольника и обрезается им. Какая пластика, толщина линий, их графическое исполнение, всё вместе определяет форму.
Цвет важен как для визуального единения бизнеса, так и для психологического восприятия пользователя. Он помогает иконке выделиться среди других, яркий и особенный цвет легче запомнить.
Метафора, форма и цвет работают вместе, и если что-то одно убрать, иконка станет хуже выполнять свои функции, будет теряться, не запоминаться:
У «Белки» работают и метафора и форма и цвет. Метафора — это буква «B» с крылышком-ветром от движения, абсолютно понятно для пользователей. Форма тоже проста, только логотип на фоне. Цвет синий фирменный.
У «Яндекса» же из набора «метафора + форма + цвет» работает только цвет. Метафоры или нет, или она непонятна для пользователя, это и не капот, и не колесо, и не дорога. Форма тоже не работает, потому что это не часть геометрического узора, который «Яндекс» клеит на бортах машин. Форма совершенно непонятна. Линии ломкие, друг с другом не могут гармонию найти.
Если что-то одно изменить в наборе «метафора + форма + цвет», иконка поменяется, но узнаваемость и её функции не пострадают.
На этом строится современный ребрендинг, малыми шагами, меняется что-то одно, шрифт, цвета, логотип и т.д. Так появляется возможность делать изменения незаметно для юзера и паттернов взаимодействия с продуктом.
Попробуем поочерёдно изменить что-то в наших героях, меняем форму и цвет:
Если поменять форму у «Белки», это останется всё та же узнаваемая «Белка», просто немного другая. Как и замена цвета, стало по-другому, но ничего не сломалось. «BelkaCar» могут спокойно развивать и менять свою айдентику, катастрофы не случится.
У «Яндекса» же форма не работала, и её изменение ни на что не влияет, ни хуже, ни лучше, это все та же бесформенная амёба.
А вот замена цвета полностью меняет иконку и уничтожает узнаваемость, иконка сразу перестает работать. Катастрофа!
Возжелай «Яндекс» обновить айдентику, неизбежно до неузнаваемости изменится и иконка, а соответственно и паттерны использования приложения. Камень в ботинке менеджеров «Яндекса».
Мораль: придерживайтесь правила «метафора + форма + цвет» и будет хорошо.
Ставьте лайк и заходите на мой канал про интерфейсы https://t.me/uifail