Material Design на русском. Часть 22 — Иконка приложения

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

Иконка приложения— это визуальное отражение продукта, услуги и инструментов бренда.

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

Отражение бренда

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

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

Подход к проектированию

Тактильное и физическое свойство материала отражается в дизайне иконок Material. Каждая иконка будто вырезана, сложена и подсвечена, как бумага, но в то же самое время представлена в виде простых графических элементов. Складки и сгибы должны быть ровными, а края и грани четкими. Поверхность взаимодействуя со светом, отражает блики и отбрасывает тени.

Физическое исполнение

Понимание света

Итоговый материал

Иконка после добавления цвета

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

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

На мобилках иконка приложения имеет размер 48 на 48 dp (это масштаб 1:1) и толщину контура 1dp. При создании иконки следует смотреть на нее и проектировать в масштабе 400% (192 x 192 dp), так как при таком масштабировании визуально видно скругления и толщину краёв в 4dp у элементов. При масштабировании обратно до мобилок, любые изменения будут пропорционально масштабироваться вниз или даже вверх, что сохранит четкие края и правильное выравнивание даже в масштабе 1:1, то есть в 48dp.

Размер иконки 48х48, масштаб 1:1.

Увеличение на 400% = 4:1

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

Сетка

Контуры для построения

Контуры

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

Квадрат. 152 на 152 dp по высоте и ширине

Круг размером 176dp

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

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

Геометрия

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

Квадрат

Круг

Вертикальный прямоугольник

Горизонтальный прямоугольник

Спецификации

Анатомия

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

Базовая структура иконки строится по принципу наслоения, то есть каждый элемент позиционируется перед предыдущим и получается так, что всё проектируется снизу вверх.

1 — Внешний слой (для света). 2 — Фоновый материал (задний план). 3 — Материал переднего плана. 4 — Цвет. 5 — Тень.

Фоновый материал (основание). Самый дальний задний слой

Материал переднего плана. Слой отбрасывает тень на задний план

Цвет — применяется к небольшой части элемента

Заполнение — это цвет, который применяется ко всему элементу, от края до края

Светлые грани — это верхние грани элементов, которые окрашены в более светлый вариант исходного цвета. Если быть точным, то это смесь белого света + цвет поверхности.

Затененные грани — это нижние грани элементов, которые окрашены в более темный вариант исходного цвета.

Мягкая тень по краям переднего плана

Внешний слой — это мягкий оттенок над всеми элементами иконки, чтобы создать освещение поверхности.

Освещение

В Material Design, как и в реальном мире объекты отбрасывают тень, поэтому следует помнить об освещении. Свет отбрасываемый сверху даёт тень, которая подчеркивает верхние и нижние грани иконки. Свет же напрпавленный под углом усиливает ощущение величины между элементами.

Свет сверху

Под углом 45 градусов

Тени

Тени — это результат освещения элементов.

Режим: Нормальный
Непрозрачность: 20%
Смещение по оси X: 4dp
Смещение по оси Y: 4dp
Размытие: 4dp
Цвет: См. значения светлого, темного оттенков и тени

Пример тени

Светлые грани и затененные грани

Верхняя и нижняя грани элементов передают ощущение глубины:

Светлый оттенок подсвечивает верхние грани элементов (этот оттенок не используется на левой, правой и нижней гранях)
Темный оттенок затемняет нижние грани элементов (этот оттенок не используется на левой, правой и верхней гранях)

Светлые грани: высота — 1dp, непрозрачность — 20%, цвет — белый.

Затемненные грани: высота — 1dp, непрозрачность — 20%, цвет — см. значения светлого, темного оттенков и тени.

Внешний слой для освещения

В Material Design этот слой используется, чтобы передать эффект искусственного источника света под углом 45-градусов. Заливка в виде градиента начинается от левого верхнего угла до правой грани иконки.

Параметры градиенты: тип градиента — радиальный. Угол 45 градусов. Белый цвет. Расположение средней точки 33%. Первый ползунок — 10% по прозрачности и 0% по позиции. Второй ползунок — 100% по позиции и 0% по прозрачности.

От переводчика: Не знаю почему, но обратите внимание, что значения, описанные в этой статье, взяты из Adobe Illustrator. Я не знаю почему авторы Material Design это подмечают.

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

Цвет

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

Правильно: цвет лежит на одном уровне с поверхностью

Неправильно: не используй тени

Слои

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

Правильно

Неправильно: не перебарщивай со слоями

Сгиб

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

Правильно

Неправильно: Не используйте несколько сгибов одновременно и не располагайте сгибы вне центра фигуры.

Складывание

При складывании под разными углами элементы имеют больший размер и искаженные размеры.

Правильно

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

Наложение или перекрытие

Когда элементы перекрывают друг на друга, тогда могут получиться уникальные силуэты. Все элементы, грани и тени ограничены внутренним пространством силуэта.

Правильно