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

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

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

Контекст

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

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

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

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

Шаблон

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

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

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

100% масштаб 1:1
1000% масштаб 1000:1

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

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

100% масштаб 1:1
1000% масштаб 1000:1

Макет

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

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

Рабочая область, в которой надо нарисовать иконку ограничена размером 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
Внутренние углы без скругления

Обводка

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

2dp
Консистентность везде
Конечные штрихи
Внутреннее пространство
Правильно: используй одинаковые размеры в обводках и прочих элементах иконок
Неправильно: использовать разные формы и толщины у элементов.

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

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

Сложные формы. У иконки «скрепка» исползуется 1.5dp ширина обводки, чтобы кривые формы читались лучше.
Малый масштаб. Иконка выше также использует обводку размером 1.5dp для отображения дыма у сигареты.
Правильно: рисуй иконки фронтально
Неправильно: не поворачивай, не наклоняй и не изменяй форму объектов
Правильно: упрощай иконки для лучшей ясности и читабельности.
Неправильно: не перегружай иконку. Избегай сложных форм.

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

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

1 — Кликабельная зона. 2 — Размещение.

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

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

1 — Кликабельная зона. 2 — Размещение

Цвет

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

Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 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% на темном. Цвет заливки может варьироваться в зависимости от тона фона.

В этом интерфейсе используется двухцветные иконки. В данном примере это лого.
1 — Лого. 2 — Сет иконок. 3 — Использование иконок в приложении.

Как следить за обновлениями гайдлайна и переводом?

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ruslan Sharipov

Ruslan Sharipov

UX/UI дизайнер в Siemens

More from Medium

Reflection on household icons

Design Sprint

New Subway Map for Yerevan, Armenia

Axure RP 9 or 10 adds a prototype icon on the phone’s home screen