Иконки

Провести доработки из раздела “Материалы”
Скрин полного списка иконок

Иконки доступны в трёх видах/состояниях:

  1. Исходные, редактируемые изображения в формате Adobe Illustrator.
  2. Готовые для ипользования, в библиотеке IconJar.
  3. Готовые для веб- приложений (.svg) в открытом репозитории и в составе компонент для ReactJS.

Скрины библиотеки

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

Именование

Для всех платформ используем одинаковую систему имен.

icon_type_name__size__color

   
icon идентификатор ассета. Для иллюстраций, например, используем art
_type группа иконок. Например: «tool», «pfm», «social» и тд
_name название иконки.
__size размер через переменную.
__color по-умолчанию, для темных ассетов, цвет можно не указывать

Например:

icon_action_close__m.svg — черная иконка «Закрыть».
icon_tool_contactless\__m\__white.svg — белая иконка «Бесконтактная оплата».
art_tool_card_to_card\__xs\__white.svg — иллюстрация «С карты на карту».

Размеры

Icons Size

Иконки (icon)

   
s 18px
m 24px
l 30px
xl 36px
xxl 48px

Миниатюры (art_)

   
xs 64px
s 80px
m 96px

Что делать, если нужной иконки нет

  1. Сделать самостоятельно, следуя правилам и требованиям подготовки иконок. Использовать иконки, не удовлетворяющие правилам и требованиям в макетах — запрещено (см. далее).
  2. Обратиться к дизайнерам Альфа-Лаборатории.

Что необходимо учитывать при создании иконок:

  1. Иконки создаются под все необходимые размеры.
  2. Все исходные материалы создаются в Adobe Illustrator.
  3. Линии должны быть выполнены в виде сегментов, чтобы можно было управлять толщиной обводки в будущем.
  4. Должна сохраняться стилистика иконок (сегменты для линий/обводок, полупрозрачные заливки плоскостей)
  5. Все объекты должны быть выровнены по пиксельной сетке, чтобы избегать антиалиасинга в тех местах, где его быть точно не должно.
  6. Наименование иконок, описание, теги для быстрого поиска.
  7. Пп. 2-6 применяются для всех размеров, перечисленных в п. 1.
  8. Результирующие иконки в двух цветах (черном и белом) предоставляются в виде svg- и pdf-файлов вместе с таблицей описания/тегов и исходными файлами в .ai.

Принципы создания иконок

Построение

Иконка состоит из двух частей:

  1. Основа. Это максимально упрощенная форма объекта. Выполняется 1px строуком. Она не обязана передавать смысл объекта. Для этого используются второстепенные детали.

Пример иконки карты без деталей

  1. Второстепенные детали. Используются для дополнения или уточнения основной формы. Помогают завершить метафору или просто улучшить чтение иконки. Создаются с помощью форм с прозрачностью 30-40%. По-возможности, их толщина не должна быть меньше 2px.

Пример карты и CVС с деталями

Оптическая компенсация

Описать принципы оптической компенсации, а лучше сослаться на описание процесса у гугла.

Исходные файлы

Экспорт