Material Design на русском. Часть 23 — Системные Иконки
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.
Дизайн принципы
Контекст
Системные иконки разработаны так, чтобы быть простыми, современными, дружелюбными, а иногда и причудливыми.
Формы иконок насыщенные и геометрические. Они симметричны, консистенты, читабельны и четкие даже при маленьких размерах.
Сетка и ключевые контуры форм
Шаблон
Шаблон для Adobe Illustrator, который поможет спроектировать системные иконки по 24dp сетке.
Размер иконок
Системные иконки имеют размер 24 x 24 dp. Проектируй иконки в 100% масштабе, то есть 1:1, чтобы всё было пиксель-пёрфект.
Плотность макета
На десктопе, когда мышь и клавиатура являются основными методами ввода, размеры иконок могут быть уменьшены до 20dp.
Макет
Содержимое иконок должно оставаться внутри рабочей области.
Если требуется дополнительный визуальный вес, то содержимое можно увеличить и зайти за пределы рабочей области. Ни одна часть иконки не должна выходить за пределы итогового контейнера.
Контуры
Сетка иконки и контуры
Сетка системной иконки имеет четкую и согласованную систему, при которой можно гибкого позиционировать элементы.
Эти контуры основаны на сетке. Используя их в качестве базы, ты можешь поддерживать консистентные пропорции во всех иконках.
Базовые формы
Контуры превращаются в стандартные формы: круг, квадрат, прямоугольник, перпендикуляры и диагонали. Эти формы нужны для унификации иконок в системе Google и для поддержания согласованности в сетке.
Геометрия
Ниже примеры того, как ключевые контуры и формы превращаются в универсальные, простые и консистентные системные иконки Google.
Чёткость и пиксель-пёрфект
Чтобы избежать искажения иконки, расположи элементы “пиксель в пиксель”, указав координаты X и Y с помощью целых чисел, без десятичных знаков.
Адаптация под другие платформы
Параметры иконок
Анатомия
Углы
По умолчанию радиус скругления углов равен 2dp. Внутренние углы должны быть квадратными, а не закругленными. Для форм шириной 2dp или меньше штрих не должен быть закруглен.
Обводка
Системные иконки имеют обводку размером 2dp, везде.
Сложные по форме иконки
Если ты проектируешь системную иконку со сложными деталями, то можно сделать обводку чуть тоньше, чтобы улучшить разборчивость. Такие манипуляции называются оптические правки. Любая такая правка должна все равно использовать геометрические формы, на которых основаны все остальные иконки.
Пространство
Размер кликабельной области равен 48dp. В эту кликабельную зону ты помещаешь иконку 24dp. Это нужно, чтобы дать достаточное пространство, чтобы поддержать читабельность и чтобы было удобно нажимать на иконку.
Плотность (на Desktop)
Когда мышь и клавиатура являются основными методами ввода, размер контейнера иконки можно поджать. Иконки 20dp можно уместить в кликабельную зону размером 40dp.
Цвет
Иконки на светлом фоне
Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 87% (#000000). Прозрачность иконки вне фокуса равна 54%.
Неактивное состояние иконки
Неактивная иконка, которая ниже предыдущих по визуальной иерархии, должна иметь прозрачность равную 38% (#000000).
Иконки на тёмном фоне
Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 100% (#FFFFFF). Прозрачность иконки вне фокуса равна 70%.
Неактивное состояние иконки
Неактивная иконка, которая ниже предыдущих по визуальной иерархии, должна иметь прозрачность равную 58% (#FFFFFF).
Темизация иконок
Для создания уникальных системных иконок можно использовать три атрибута: обводку и заливку, радиус угла и цвет.
Следующие 4 примера иконок получились путем работы с этими атрибутами.
Линейные иконки
Линейные иконки создаются с помощью манипуляций с обводкой и заливкой, чтобы показать чистый и легкий по исполнению стиль, который хорошо работает в интерфейсах, где элементы интерфейса плотно расставлены. Значение обводки можно менять, чтобы увеличить или уменьшить контраст между иконками и типографикой.
Обводка или заливка
Если ты не заливаешь иконки цветом, то используетеся обводка. Регулируй толщину обводки, чтобы передать какой-то стиль или ощущение. Иконки же с заливкой кажутся визуально тяжелее.
Про выравнивание обводки
Положение обводки влияет на внешний вид иконки. Чаще всего иконки рисуются с обводкой внутрь.
Острые или заострённые углы
Острые углы
Острые углы в иконках передают четкий и читаемый стиль, который остаётся разборчивым даже в мелком размере.
Скруглённые углы
Скругленные иконки хорошо сочетаются с продуктами, в которых используется насыщенная типографика, изогнутые логотипы или округлые элементы.
Радиус скругления
Радиус угла у иконки может быть больше или меньше — все зависит от тебя.
Двухцветные иконки
Двухцветные иконки передают глубину, используя как обводку, так и заливку цветом. Цвет обводки и заливки помогает передать всю полноту бренда и использовать несколько фирменных цветов, что также может улучшить читаемость.
Двухцветные иконки дают тебе возможность использовать разные цвета для обводки и заливки иконки. Прозрачность заливки можно регулировать, чтобы улучшить читаемость и привести ее в соответствие с брендом.
Обводка иконок должна быть со значением прозрачности равной 87% на светлом фоне и 100% на темном. Цвет заливки может варьироваться в зависимости от тона фона.
Как следить за обновлениями гайдлайна и переводом?
- Структуированный документ в Notion
- Официальные обновления Google на странице what’s new