Иконки
Их простые формы и узнаваемые метафоры снижают когнитивную нагрузку и помогают быстрее воспринимать информацию, визуально разделять компоненты и акцентировать внимание.
В дизайн-системе приложений и веба используется один набор иконок в нескольких размерах и стилях. Из следующих разделов вы узнаете, где и как использовать каждый из них.
Разнообразие иконок дизайн-системы
Системные
Строятся на основе 24 px сетки. Бо́льшая часть отрисована в виде залитых фигур, но некоторые имеют аналог в линейной стилистике. Используйте линейные версии, когда соседняя иконка проигрывает по массе, например в случае колокольчика уведомлений рядом со стрелкой «назад» в App Bar и Navigation Bar. Основная область применения — системные панели:
- Navigation Bar / App Bar;
- Tab Bar / Bottom Navigation Bar.
К системным иконкам относится ещё и группа исключений, которая строится по 16 px сетке:
- иконки бонусов и статусов в истории операций;
- пины на карте.
Иконки статусов в истории операций
Линейные 36px
Такие иконки используются в большинстве сервисных кнопок и ячеек. Отрисованы в линейной стилистике. Толщина штриха равна 2 px в масштабе x1. Некоторые акцентные элементы допускается делать толщиной в 1 px, если в 2 px выглядит сильно жирно или небрежно. Для разных ячеек иконки отличаются по цвету:
- Кликабельные иконки по умолчанию окрашиваются токеном iconBrand (цвет Green 5 в обеих темах) в приложениях.
- В простых не нажимаемых ячейках приложений для иконок используется токен iconPrimary (цвет Black в светлой теме и White в тёмной).
Залитые в круге 36px
Используются рядом с логотипами поставщиков, чтобы визуально компенсировать массу, например, в истории операций или для дополнительного акцента в каталоге. Отрисованы залитыми фигурами и монохромными. Для этой категории иконок характерен прием с бликом или тенью.
Примеры использования залитых в круге иконок
Залитые 36px
Используются на главном экране приложений и в продуктовом меню веба. Отрисованы залитыми фигурами. Иконки карт наследуют упрощенную графику пластиковой карты, остальные продукты отрисовываются одноцветными фигурами и используют адаптивную палитру.
Пример использования залитых иконок
Как рисовать новые иконки
Мы сформулировали две категории правил, которые помогут вам нарисовать новые иконки самостоятельно. Визуальные правила помогают сохранить характер и эстетику, а технические упрощают хранение, передачу в разработку и использование иконок на разных платформах.
Визуальные правила
- Основная форма должна быть максимально простой и геометричной, а метафора — считываться без затруднений. Избегайте «заплывших» очертаний и избыточной детализации.
- Скругляйте острые углы, кроме тех случаев, где мы рисуем «текстовые блоки» в иконке.
- Используйте углы в 30°, 45° или 90° для диагональных штрихов.
- Иконка должна находиться в оптическом центре своего холста. У некоторых иконок расстояния штрихов до края холста может быть разным. Убедитесь, что иконки соблюдают вертикальный и горизонтальный ритм.
- Поместите новую иконку рядом с некоторым количеством уже имеющихся иконок той же категории, проверьте, как новая вписывается по стилю и массе по сравнению с остальными.
- Иногда можно пренебречь этими правилами в угоду графике или оптической компенсации.
Технические правила
- Все фигуры и обводки переведены в outline.
- В монохромной иконке все элементы сливайте в одну фигуру с названием shape. Это нужно для того, чтобы цвет иконки в компоненте выставлялся правильно при смене состояния компонента.
- Не используйте маски или дополнительные группы, так как это делает иконку тяжелее и при импорте в svg могут возникнуть проблемы.
- Цвет проставляйте стилем Black из SBOL Styles.
- На iOS иконки экспортируйте в формате pdf, на Android и веб в формате svg. В исключительных случаях можно использовать растр, но это всегда надо обсуждать отдельно вместе с платформой и командой дизайн-системы.
Слои иконки по техническим правилам
Названия иконок
Они максимально универсальны. В названии пишется именно что изображено, без привязки к функциональности. Такой подход позволяет использовать иконки в разных сценариях и быстро находить нужные в поиске. Все иконки в дизайн-системе используют следующую систему нейминга — ds_ic/mc_36_metaphor_name, где:
- ds — префикс принадлежности к дизайн-системе;
- ic — префикс для всех монохромных иконок, все иконки этого типа красятся с помощью токенов; mc (multicolor) — он используется для иконок, которые не перекрашиваются при смене темы приложения;
- 36 — размер холста иконки;
- metaphor_name — название самого предмета на иконке. Если в названии используются несколько слов, то они пишутся через нижнее подчеркивание. Когда добавляем альтернативную версию уже существующей иконки, мы используем суфикс _alt и добавляем к нему номер версии. Например: ds_ic_36_arrow_right_alt1, ds_ic_36_arrow_right_alt2, и т.д.
Как добавить новые иконки
Отрисуйте недостающие иконки, соблюдая правила выше, и заполните в таблице «Статус новых иконок» первые 2 колонки. Новые строки добавляйте вверху. Обязательно присылайте файл fig с иконкой и макетом, в котором она используется.