Material Design на русском. Часть 23 — Системные Иконки

Published in

Дизайн-кабак

8 min readFeb 22, 2021

--

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Дизайн принципы

Контекст

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

Формы иконок насыщенные и геометрические. Они симметричны, консистенты, читабельны и четкие даже при маленьких размерах.

**Неправильно**: не используй декоративные элементы для украшательства и тонкие обводки

**Правильно**: простая геометрия и консистентная форма

Сетка и ключевые контуры форм

Шаблон

Шаблон для Adobe Illustrator, который поможет спроектировать системные иконки по 24dp сетке.

Размер иконок

Системные иконки имеют размер 24 x 24 dp. Проектируй иконки в 100% масштабе, то есть 1:1, чтобы всё было пиксель-пёрфект.

Плотность макета

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

Макет

Содержимое иконок должно оставаться внутри рабочей области.

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

**Рабочая область**, в которой надо нарисовать иконку ограничена размером 20x20dp внутри контейнера 24x24dp

**Внутренний отступ (padding)** — от границ контейнера отступи 2dp

**Компактная рабочая область** может быть меньше. Например, если иконка 20x20dp, то рабочая область будет 16x16dp с внутренним отступом 2dp

**Внутренний отступ** для компактного вида = 2dp

Контуры

Сетка иконки и контуры

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

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

Базовые формы

Контуры превращаются в стандартные формы: круг, квадрат, прямоугольник, перпендикуляры и диагонали. Эти формы нужны для унификации иконок в системе Google и для поддержания согласованности в сетке.

Квадрат размером 18x18dp по высоте и ширине

Круг размером 20x20dp по высоте и ширине

Вертикальный прямоугольник размером 16dp по ширине и высоте 20dp

Горизонтальный прямоугольник 20dp на ширине и 16dp на высоте

Геометрия

Ниже примеры того, как ключевые контуры и формы превращаются в универсальные, простые и консистентные системные иконки Google.

Чёткость и пиксель-пёрфект

Чтобы избежать искажения иконки, расположи элементы “пиксель в пиксель”, указав координаты X и Y с помощью целых чисел, без десятичных знаков.

**Правильно**: позиционирование по сетке «пиксель в пиксель»

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

Адаптация под другие платформы

**Android**. Кнопка назад имеет тонкую по обводке стрелку.

**iOS**. На iOS стрелка толще и не имеет окончания.

**iOS**. В iOS стрелка назад также может содержать надпись, которая соответствует пункту назначения.

**Android**. Иконка, которая показывает меню с дополнительными пунктами меню (обозначенный иконкой «Еще…») содержит три **вертикальные** точки.

**iOS**. Иконка, которая показывает меню с дополнительными пунктами меню (обозначенный иконкой «Еще…») содержит три **горизонтальные** точки.

Параметры иконок

Анатомия

1 — Штрих. 2 — Угол. 3 — Контрформа (внутреннее пространство). 4 — Обводка. 5 — Внутренний угол. 6 — Контейнер иконки

Углы

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

Обводка

Системные иконки имеют обводку размером 2dp, везде.

**Правильно**: используй одинаковые размеры в обводках и прочих элементах иконок

**Неправильно**: использовать разные формы и толщины у элементов.

Сложные по форме иконки

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

**Сложные формы**. У иконки «скрепка» исползуется 1.5dp ширина обводки, чтобы кривые формы читались лучше.

**Малый масштаб**. Иконка выше также использует обводку размером 1.5dp для отображения дыма у сигареты.

**Неправильно**: не поворачивай, не наклоняй и не изменяй форму объектов

**Правильно**: упрощай иконки для лучшей ясности и читабельности.

**Неправильно**: не перегружай иконку. Избегай сложных форм.

Пространство

Размер кликабельной области равен 48dp. В эту кликабельную зону ты помещаешь иконку 24dp. Это нужно, чтобы дать достаточное пространство, чтобы поддержать читабельность и чтобы было удобно нажимать на иконку.

Плотность (на Desktop)

Когда мышь и клавиатура являются основными методами ввода, размер контейнера иконки можно поджать. Иконки 20dp можно уместить в кликабельную зону размером 40dp.

Цвет

Иконки на светлом фоне

Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 87% (#000000). Прозрачность иконки вне фокуса равна 54%.

Неактивное состояние иконки
Неактивная иконка, которая ниже предыдущих по визуальной иерархии, должна иметь прозрачность равную 38% (#000000).

Иконки на тёмном фоне

Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 100% (#FFFFFF). Прозрачность иконки вне фокуса равна 70%.

Неактивное состояние иконки
Неактивная иконка, которая ниже предыдущих по визуальной иерархии, должна иметь прозрачность равную 58% (#FFFFFF).

Темизация иконок

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

Следующие 4 примера иконок получились путем работы с этими атрибутами.

Линейные иконки

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

Обводка или заливка

Если ты не заливаешь иконки цветом, то используетеся обводка. Регулируй толщину обводки, чтобы передать какой-то стиль или ощущение. Иконки же с заливкой кажутся визуально тяжелее.

Чтобы иконка была читаемой, рекомендуемая толщина обводки 2dp

2dp обводка это стандарт также и для линейных иконок во всех приложениях и размерах.

Про выравнивание обводки

Положение обводки влияет на внешний вид иконки. Чаще всего иконки рисуются с обводкой внутрь.

1 — Material иконка по умолчанию. 2 — Обводка внутрь. 3 — Обводкапо центру. 4 — Обводка наружу.

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

Для читаемости и распознаваемости в некоторых случаях стоит придерживаться стиля иконок Material по умолчанию

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

**Правильно**: если тебе кажется, что иконку стоит скорректировать, то сделай это используя настройки обводки

Тонкая обводка у иконок подчёркивают бренд

1 — Логотип. 2 — Линейные иконки в приложении. 3 — Сет иконок.

Острые или заострённые углы

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

Скруглённые углы
Скругленные иконки хорошо сочетаются с продуктами, в которых используется насыщенная типографика, изогнутые логотипы или округлые элементы.

Радиус скругления
Радиус угла у иконки может быть больше или меньше — все зависит от тебя.

Рекомендуемое значение скругления от 0 до 4dp.

Если обводка равна 2dp или меньше, то радиус угла должен быть равен 1dp

Меняй внутренние углы и размер в соответствии с радиусом угла

**Правильно**: меняй радиус, чтобы иконка оставалась разборчивой и передавала стиль бренда

**Осторожно**: не скгруляй внутренние углы если это понижает читаемость иконки

Значение 0dp у иконок для скругления поддерживается прямоугольными элементами дизайна этого приложения

1 — Логотип. 2 — Иконки острые. 3 — Сет иконок.

у этого приложения закругленные кнопки и линейный иконка-логотип.

1 — Логотип. 2 — Сет скругленных иконок. 3 — Использование сета иконок в приложении.

Двухцветные иконки

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

1 — Обводка (рекомендация по размеру: 2dp). 2 — Заливка с прозрачностью

Прозрачность применяется только к какой-то области заливки.

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

Обводка иконок должна быть со значением прозрачности равной 87% на светлом фоне и 100% на темном. Цвет заливки может варьироваться в зависимости от тона фона.