опыт Райффайзенбанка — Дизайн на vc.ru

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

9092
просмотров

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

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

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

Подготовка

Один из важнейших этапов проекта по переработке иконок – подготовительная работа, и если провести ее правильно, дальше все пойдёт гладко.

Первая встреча с рабочей группой

Рабочая группа

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

Сбор и описание метафор

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

Рабочий файл

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

• Категория – позволяет отфильтровать и посмотреть иконки только в заданной категории, а также дает понимание агентству, в какую категорию складывать иконки в Figma.
• Описание – поясняет дизайнерам из агентства, в каком контексте используется иконка.
• Имя файла – желательно, чтобы у всех иконок наименование было в едином формате. Мы выбрали простой стиль написания kebab-case: слова пишутся строчными буквами, а для разделения используется дефис. Имя файла в рабочем документе должно совпадать с именем файла в Figma. Дополнительно можно следовать строгим правилам наименования, например, исходить только из контекста использования иконки или только из значения метафоры. У нас получился симбиоз двух этих подходов.
• Наименования команд (Raiffeisen-Online (RO), Web-site…) – в этот раздел мы складывали иконки из разных команд для сравнения. Колонка Current Pack – для существующего набора. Метафора согласована, не согласована – отображает для агентства финальную метафору. Важно, что определяется только метафора, а не способ отрисовки.
• 16×16 / 24×24 – показывает нужные нам размеры иконок. Здесь же цветом отмечали готовность иконки со стороны агентства и проставляли дату выполнения.

Tips&Trics: Рабочий документ на подготовительном этапе можно собирать где удобно: в Google Docs, в iCloud. Главное, чтобы все могли туда добавлять иконки из своих проектов.

Бриф для агентства

Чем больше информации в брифе, тем лучше. Поделюсь примером структуры нашего.

Количество иконок

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

Принципы построения

Принципы

В нашем случае они максимально простые: все квадраты, прямоугольники и круги рисуются по заданной сетке; толщина линий равна 2 px; углы скругляются, но окончания остаются острыми – мягкие и острые формы рифмуются с логотипом.

Tips&Trics: Иконки должны быть максимально простыми, хорошо считываться, желательно, чтобы они не были сложносоставными, содержали не более двух объектов внутри и не несли двойного смысла. Не стоит пытаться вложить в иконку все содержание и смысл метафоры, иначе будет каша, и никто не сможет уловить смысл.

Сетка

При построении иконок используется сетка и определяются основные размеры, допустимые к использованию. Мы используем два размера, основной – 24х24, дополнительный – 16х16. В размере 16х16 всего несколько иконок, в основном это стрелки, галочки и другие простые формы из категорий Actions и Navigation.

Основные размеры

Tips&Trics: Не нужно абсолютно все пытаться впихнуть в сетку, иначе в определенных группах у разных иконок будет неправильная развесовка, когда одна иконка кажется меньше или, наоборот, больше другой. У нас были исключения, но они составляли всего 10-15 % проекта.

Технические требования (чек-лист)

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

Категоризация

Чтобы на выходе мы получили набор иконок, с которым будет быстро и удобно работать дизайнерам и разработчикам, необходимо заранее распределить все элементы по категориям. Если использовать поиск Figma, это значительно облегчит навигацию по объемному проекту и ускорит работу. В нашем случае это была хорошая возможность актуализировать наш список категорий. Так, появилась категория Actions, основная для иконок, которые чаще всего используются в интерфейсах; а стаканчик кофе, наконец, переместился из категории Sport в категорию Food and Restaurants.

Описание процесса

Лучше с самого начала определить удобный процесс работы с агентством. Мы двигались итерациями по 20-30 иконок. Для ускорения работы мы сделали под иконки отдельный файл в Figma, куда дали доступ дизайнерам из агентства. Каждый фрейм – отдельная категория. Под иконками проставили теги, чтобы было понятно, что это за иконка и в каком контексте она может использоваться.

Файл с иконками в Фигма

Tips&Trics: Теги или описание метафоры под каждой иконкой в Figma лучше проставлять сразу, в процессе. Я этого не сделал, и потом мне пришлось потратить досадно много времени на тегирование 570 элементов.

Процесс создания

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

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

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

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

Дмитрий,

продюсер проекта, креативное агентство «Вьюга»

Tips&Trics: В самом начале проекта нужно набраться терпения, так как дизайнерам-отрисовщикам из агентства нужно время, чтобы прочувствовать правила и принципы, описанные в гайдах. Будьте готовы к ошибкам: у нас в начале их было около 50% в каждой итерации, а затем количество несоответствий сократилось до 20-10%.

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

Переписка в рабочем чате с дизайнерами

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

Ольга Струзберг, старший UX-дизайнер, Райффайзенбанк

Все комментарии по каждой иконке я собирал в Notion – очень удобном сервисе для такого рода заметок. А чтобы ребятам из агентства было проще ориентироваться, в названии файла проставлял дату, а иконки распределял по категориям.

Файл с обратной связью для каждой итерации в Notion

Tips&Trics: Коммуникаций в процессе не должно быть слишком много. После отрисовки всех иконок я решил еще раз критически посмотреть на них с дизайнерами банка, и сделал созвоны раз в неделю. Каждую из 500 (!) иконок мы могли обсуждать минут 20, и очень скоро я осознал, что если мы будем продолжать в том же духе, проект затянется на несколько месяцев. Чтобы сэкономить время, я решил сам экспертно оценить результат, а локальные проблемы с каждой иконкой решать отдельно уже после релиза.

Внедрение

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

Конечно, самый главный вопрос – это процесс обновления. Есть два варианта: разом обновить текущий набор или дать новому и старому набору какое-то время «пожить» вместе, пока все не перейдут на новый. В первом случае все иконки в проектах заменятся автоматически после коммита, при этом есть риск, что в процессе слетят, например, цвета, а на нас сваливается дополнительная работа – нужно вручную заменить более 500 текущих иконок на новые. Во втором случае можно отделаться малой кровью – каждый дизайнер у себя в проекте подключает новый файл и заменяет иконки новыми версиями, так же вручную, но только свою часть и постепенно.

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

Описание процесса создания и изменения иконки

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

Сводный файл для разработчиков

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

Сводная таблица в Фигма

Tips&Trics: Для быстрого поиска иконки на портале дизайн-системы в сводной таблице необходимо указать теги.

Не все прошло гладко с передачей иконок в разработку. Оказалось, что можно было значительно упростить работу как минимум разработчикам. Мне понравилась идея, которую предложила фронтенд-разработчик команды дизайн-системы: мы не собираем таблицу соответствия, а создаем папку, где будет лежать новая и старая иконка, таким образом, чтобы у старой или новой иконки был специфический префикс, например, «new». В ту же папку кладем конфиг, в котором описываем текущее название и категорию иконки, новое название и категорию, а также теги, которые будут помогать с поиском иконки на сайте дизайн-системы.

Файловая структура вместо таблицы

Потом это все прогоняется скриптом, который на выходе отдает так называемый «план миграции», то есть сопоставляет новую и старую иконку и заодно строит файл сопоставления иконки и тегов. Далее запускается Codemode, который опираясь на этот план миграции правит код, где используются иконки.

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

«Чтобы иконки корректно заехали в нашу библиотеку на фронте, мы начали составлять таблицу соответствия в Figma. Когда значительная часть работы уже была проделана, встретились с фронтенд-разработчиками по конкретной реализации, и оказалось, что табличка в Figma не очень подходит для выгрузки в код. Для корректного обновления ребята предложили написать скрипт, который мог бы помочь свести иконки и их названия, но так как мы уже потратили несколько недель на сборку сводных таблиц по каждой категории, решили выгрузить их в текстовом виде в отдельный файл, а в следующий раз попробовать скрипт. 😅 Мы сделали выводы и в очередной раз отметили необходимость синхронизации на каждом из этапов»

Виктория Дубровская,

руководитель направления по развитию платформ разработки Core Foundation Mobile and Frontend

Внедрение через дизайн-систему

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

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

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

Сетки, принципы и правила создания интерфейсных иконок, iOS и Android

Если вы цифровой дизайнер, то уже наверняка сталкивались с сеткой иконок. Возможно, вам поручали создать иконку приложения для iOS или Android, или вы участвовали в работе над набором иконок интерфейса. Вероятно, вы, как и я, не знали, как ее использовать.

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

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

Обзор

Сетки иконок закладывают визуально основу для рисования. Они очерчивают размеры иконки, пиксельную сетку, лежащую в ее основе, и дополнительные ключевые линии, которым нужно следовать.

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

Анатомия

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

Сетка иконки Material Play Store

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

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

Пиксельная сетка

Пиксельная сетка помогает рисовать с определенным шагом. Приращение в 1px долгое время считалось стандартом для цифровых технологий, а шаг в 0.5px пикселя стал применяться совсем недавно.

Иконка увеличения громкости из руководства Material плотно прилегает к сетке 24 x 24px с использованием штриха в 2px:

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

Ключевые фигуры (Keyshapes)

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

IBM использует эти 4 ключевые фигуры для создания иконок воспроизведения, сохранения, удаления и HD:

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

Ортогонали

Ортогонали – заимствованы из перспективы рисунка – относятся к ключевым линиям, которые пересекают центральную точку иконки и создают дополнительные вершины для использования. Эти линии обычно разрезают холст под углом 90 ° и 45 °. Когда требуются дополнительные углы, следующим шагом будет увеличение 15 ° и 5 °.

Иконка выключения звука из руководства Material выравнивает косую черту под углом 45 °:

Маска

Маска кастомизирует контейнер иконки из квадратного холста, используемого по умолчанию. Маски могут быть встроены в сам актив или применены к нему впоследствии. Play Store применяет ко всем иконкам маску прямоугольника с закругленными углами:

Для иконок лаунчера (которые находятся на главном экране и в панели приложений) разные OEM-производители Android девайсов применяют различные маски к своим иконкам.

Безопасная область и область обрезки

Безопасная область (safe area) или активная область (live area) показывает, где должно располагаться важное содержимое значка, а область обрезки (trim area) – показывает область, которую следует избегать.

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

Иконка Google Apps Device Policy соответствует области обрезки:

Примеры

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

Сетка иконок iOS-приложений

Сетка иконок приложений Apple помогает создавать значки приложений, отображаемые в App Store и системе iOS. Она основана на пропорциях золотого сечения и вписанных фигурах, взяв за отправную точку длину одной стороны. Ее маска представляет собой адаптацию расчета суперэллипса или кривой Ламе.

Строение сетки иконок iOS-приложений

Круглые иконки приложений Apple, такие как Safari, Часы, Компас и Настройки, непосредственно следуют круговыми ключевыми линиями.

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

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

Сетки иконок Material Design

Основное различие между сетками iOS и Material – это добавление ключевых фигур в руководство Material. В шаблоне используются четыре основные фигуры – круг, квадрат, портретный и ландшафтный прямоугольник:

Ключевые фигуры Play Store

Gmail использует прямоугольник в ландшафтной ориентации:

В Google Apps Device Policy используется круг:

Google рекомендует несколько вариантов этой сетки, адаптированных к различным контекстам. Например, сетка иконок лаунчера имеет обширную область обрезки, позволяющую различным OEM-производителям Android девайсов применять свою собственную маску. Хотя пропорции меняются, эти сетки духовно одинаковы:

Вот структура системной сетки, используемой для создания иконок интерфейсов продукта:

Структура системной иконки Material

Примечание об основных параметрах

Обратите внимание, что основной размер холста для этой сетки иконок составляет 24 x 24px. Это означает, что иконки создаются с этим размером. Однако при использовании системных иконок Material их можно масштабировать до различных размеров:

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

Разный уровень детализации иконки компаса Nucleo при размере от 64px до 16px

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

Сетка иконок IBM

Сетка иконок IBM очень близка к Material, предлагая аналогичный набор ключевых фигур:

Ключевые фигуры IBM

В ее основе лежит холст размером 32 x 32px:

Структура сетки IBM

Вы видели это выше:

Иконки IBM icons поверх сетки (слева направо, сверху вниз): Воспроизведение, Сохранить, Удалить, HD, Пчела, Вырезать, Микроскоп и Глаз

Сетка иконок Phosphor

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

Структура сетки Phosphor

Для достижения визуального баланса ключевые фигуры иконки примерно основаны на расчетах ее площади. Мы используем круг, чтобы нарисовать иконки приложений Daylio и New York Times, квадрат для LinkedIn и калькулятора, прямоугольник в портретной ориентации для Google Docs и Microsoft Word, и прямоугольник в ландшафтной ориентации для иконок приложений AliExpress и NBC:

Ключевые фигуры и примеры иконок Phosphor

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

Важно отметить, что мы не сразу сформировали структуру сетки Phosphor. Со временем мы удалили части, которые не были полезными (например, дополнительные ортогонали), мы уточнили и выделили область обрезки, а также изменили ключевые линии по мере того, как правила нашего семейства иконок обретали форму.

Несколько вариантов сетки Phosphor

Сетка – это рекомендация

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

Оптический баланс

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

В контексте символ «G» кажется немного большим. Если немного уменьшить его масштаб, он будет выглядеть более сбалансированным.

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

Чтобы узнать больше об оптических эффектах, прочтите эту прекрасно иллюстрированную статью Славы Шестопалова: «Оптические эффекты в пользовательских интерфейсах: иллюстрированное руководство».

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

Протестируйте свои иконки в контексте, чтобы проверить их согласованность и эффективность. Если вы создаете иконку приложения для iOS, как она будет отображаться вместе с другими иконками на главном экране? Внутри папки, внутри уведомления, в режиме просмотра настроек? В App Store? Для достижения максимальной точности тестируйте в собственном контексте, а не в инструментах проектирования.

Для Phosphor мы разработали строгую процедуру контроля качества, используя «тестовые листы», в которых каждая новая иконка помещается рядом с ее «братьями и сестрами» разных размеров и цветов. Предварительный просмотр выполняется непосредственно на устройствах Android, чтобы убедиться в ясности, удобочитаемости и соответствии стилистике.

Последовательность тестирования иконки Curiosity:

Сетки + Принципы + Правила

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

Лично для меня сетки иконок – скорее вспомогательный элемент, а принципы и правила важнее всего:

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

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

—

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

• Используйте холст 48 x 48px
• Используйте обводку по центру 1.5px
• Используйте закругленные концевые заглавные буквы
• Используйте непрерывные штрихи, если разорванные сегменты не нужны для понимания
• Используйте прямые сегменты, идеальные дуги и угол наклона 15°, где возможно
• Отрегулируйте кривые, когда это необходимо для соблюдения принципов дизайна.
• Используйте целые, четные приращения чисел для измерений, где это возможно; при необходимости округлите до 1px или 0,5px
• Начните со следующих ключевых линий фигуры: круги 28 x 28px, квадраты 25 x 25px, прямоугольники в ландшафтной ориентации 28 x 22px, прямоугольники в портретной ориентации 22 x 28px
• Сохраняйте область обрезки толщиной 6px

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

Вывод

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

Иконки Phosphor сетки иконок Phosphor

Спецификации сетки иконок

Apple

• Apple Design Resources: Официальные шаблоны, которые включают размеры холста для иконок App Store (но, к сожалению, без векторных сеток)

Google

• Material System Icon Keyline Shapes: Сетка для системных иконок, которые используются в интерфейсах продукта.
• Google Play icon design specifications: спецификации и шаблоны для иконок приложений, используемых в Play Store.
• Adaptive icons and Android icons: спецификации иконок приложений, используемых в лаунчере (главный экран, панель приложений).
• Material Product Icon Keyline Shapes: сетка для иконок продуктов, которые сопоставляются с Google Play и адаптивными иконками лаунчера, указанными выше.