Материальный дизайн — Иконки
Перевод раздела Icons официальной документации Google: http://www.google.com/design/spec/material-design/.
Иконки приложений
Иконки приложений являются средством визуального выражения приложений, сервисов и инструментальных средств бренда. Простые, выразительные и удобные, они сообщают основную идею и цель приложения. Несмотря на то, что иконка каждого приложения визуально уникальна, все иконки определенного бренда должны быть едины в своей концепции и в исполнении.
Иконки приложений являются основным средством для создания связи с вашим брендом. Используя данное руководство в качестве отправной точки, не забудьте удостовериться, что цвета и прочие ключевые элементы иконки вашего приложения отражают индивидуальность вашего бренда.

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

Физический прототип

Изучение света

Материальный прототип

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

Сетка

Контуры
Формы контуров
Формы контуров лежат в основе сетки. Руководствуясь этими базовыми формами, вы можете сохранять единые визуальные пропорции во всех иконках взаимосвязанных приложений.

Высота: 152dp
Ширина: 152dp

Диаметр: 176dp

Высота: 176dp
Ширина: 128dp

Высота:128dp
Ширина:176dp
Сетка с единицей измерения DP
На мобильных устройствах иконки запуска приложений имеют размер 48 dp, с толщиной боковой грани 1 dp. При создании иконки используйте систему координат со стороной 48 единиц, но масштабируйте ее до 400%, до размера 192 х 192 dp (толщина грани становится равна 4 dp).
Любое масштабирование оригинального размера будет пропорционально увеличивать или уменьшать изображение. Сохраняя соотношение единиц измерения, вы сможете сохранить резкость граней и правильность линий при уменьшении масштаба.

Сетка 1:1 ед..

Сетка 4:1 ед.
Геометрия
Для некоторых контуров стандарты были определены заранее: круг, квадрат, прямоугольник, перпендикуляры и диагонали. Эта скромная палитра универсальных и простых элементов была разработана с целью унифицирования иконок приложений и систематизации их размещения на сетке.




Анатомия иконки приложения
Анатомия иконки приложения предоставляет описание графических элементов, из которых состоит иконка приложения. Согласованность этих элементов во всех иконках определенного бренда является критическим аспектом создания общего языка визуального общения. Знание этих элементов упростит толкование характеристик каждого логотипа и понимание едва заметных различий между ними. Кроме того, это поможет вам научиться зрительно распознавать внутреннюю структуру логотипов.
- Внешний слой
- Задний план материала
- Передний план материала
- Цвет
- Тень

Каждый компонент располагается над предыдущим, точка обзора располагается прямо над иконкой

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

Самый глубоко расположенный элемент материала.

Элемент материала, приподнятый над задним планом, и отбрасывающий на него тень.

Цвет, использованный на небольшом участке элемента.

Цвет, использованный на всём элементе, от края до края.

Верхняя грань элемента материала. Светлый оттенок – это смесь цвета с белым светом, который осветляет оригинальный цвет.

Нижняя грань элемента материала. Темный оттенок – это смесь цвета с более темным тоном, который затемняет оригинальный цвет.

Мягкая тень вокруг всех граней приподнятого элемента материала.

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

Верхний

Угол 45º
Тени
В иконке приложения верхний свет создает мягкую тень, которая едва отбрасывается верхней и левой гранями элемента. В нижней и правой части тень немного насыщеннее. Данная тень всегда содержится внутри силуэта иконки.

Режим: Обычный (Normal)
Непрозрачность: 20%
Отступ по оси X: 0px
Отступ по оси Y: 6px
Размытие: 6px
Цвет: См. значения светлого, темного оттенков и тени
Светлая и затемненная грани
Верхняя и нижняя грани элементов материала создают ощущение глубины и нахождения на поверхности. Элементы материала имеют стандартную толщину 1 dp. Все расстояния до края рассчитываются от внутренней грани элемента.
Светлый оттенок подсвечивает верхнюю грань всех элементов. Он не используется на левой, правой и нижней гранях.
Темный оттенок оттеняет нижнюю грань всех элементов. Он не используется на левой, правой и верхней гранях.

Высота: 1dp
Непрозрачность: 20%
Цвет: Белый (#FFFFFF)

Высота: 1dp
Непрозрачность: 20%
Цвет: См. значения светлого, темного оттенков и тени
Внешний слой
Внешний слой возникает в результате освещения виртуальным источником света, расположенным под углом 45º. Он простирается от левого верхнего угла до внешнего края силуэта иконки. Внешний слой всегда располагается в этих границах.

Тип: Радиальный (Radial)
Угол: 45º
Цвет: Белый (#FFFFFF)
Местоположение средней точки: 33%
Слайдер 1
Непрозрачность: 10%
Местоположение: 0%
Слайдер 2
Непрозрачность: 0%
Местоположение: 100%
Значения светлого, темного оттенков и тени
Каждый цвет реагирует на добавление светлых и темных оттенков по-разному. Для каждой грани цвет светлого, темного оттенков и тени необходимо корректировать относительно цвета, лежащего под ними. Для достижения цветовой гармонии используйте для каждого цвета соответствующее значение.





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


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


Подъем
Подъем главного элемента материала над незатейливым силуэтом заднего плана заставляет сосредоточить внимание на центре.
Не обрезайте приподнятые элементы материала другой формой.


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


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


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


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


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


Иконки с изображениями людей
Представленные ниже рекомендации и примеры демонстрируют передовые методы использования иконок с изображениями людей в вашем UI.
Форма

Построение

Расположение контуров
Формы контуров

Квадрат

Круг

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

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

Бумага

Цвет
Жесты

Построение

Композиция
Правила использования иконок с изображениями людей

Используйте простые формы для силуэтов заднего плана.

Не используйте сложные формы для силуэтов заднего плана.

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

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

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

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

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

Простая.

Понятная

Последовательная

Призывающая к действию
Сетка, пропорции и размер
Сетка с единицей измерения DP
Системные иконки отображаются в размере 24 dp. При создании иконок их разработку следует вести в масштабе 100% для достижения четкости пиксельного изображения, увеличивая масштаб для большей точности.

Масштаб 100%.

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

Сетка

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

Живая зона

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

Квадрат
Высота: 18dp
Ширина: 18dp

Круг
Диаметр: 20dp

Высота: 20dp
Ширина: 16dp

Высота: 16dp
Ширина: 20dp
Геометрия
Для некоторых контуров стандарты были определены заранее: круг, квадрат, прямоугольник, ортогональные и диагональные контуры. Эта скромная палитра универсальных и простых элементов была разработана с целью унифицирования системных иконок и систематизации их размещения на сетке.

Построение

Композиция
Анатомия системной иконки
- Конец штриха
- Угол
- Контр-участок
- Штрих
- Контр-штрих
- Окаймляющий участок

Углы
Единые радиусы закругления углов – это ключ к унификации всего семейства системных иконок. В форме силуэта иконки использован радиус закругления величиной 2dp. Не закругляйте углы штрихов (форм шириной 2dp и менее).
Внутренние углы должны быть прямоугольными. Не закругляйте углы у внутренних форм.

Внешние углы

Внутренние углы
Штрихи
Единый вес штрихов – это ключ к унификации всего семейства системных иконок. Используйте штрихи шириной 2px во всех случаях, включая кривые, углы, а также во внутренних и внешних штрихах.

Единообразие

Кривые и углы

Конец штриха

Контр-штрих
Оптические корректировки
Экстремальные сценарии, требующие едва различимых исправлений, делают иконку более разборчивой. Случаи, в которых неизбежно использование сложной детализации, требуют корректировки метрик.
В случае необходимости внесения оптических корректировок, используйте только те согласованные геометрические формы, на которых основаны все остальные иконки. Не растягивайте и не искажайте формы.

Сложная

Мелкий масштаб
Свободное пространство
Для придания иконки разборчивости и доступности для нажатия вокруг нее следует обеспечить достаточное количество свободного пространства.

Участок свободного пространства

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

Используйте штрихи с одинаковым весом и с прямоугольными концами.

Не используйте штрихи с различным весом или со скругленными концами.

Иконки должны быть направлены прямо и выглядеть надежно.

Не наклоняйте и не вращайте иконки, не заставляйте их выглядеть объемными.

Упрощайте иконки для большей понятности и удобочитаемости.

Не будьте излишне буквальны и избегайте сложных иконок.

Иконки должны быть четкими и выразительными.

Не используйте нежные, тонкие штрихи.

Используйте геометрические и согласованные формы.

Не используйте жестикуляционные или нестрогие органические формы.

Располагайте иконки «на пикселях», то есть, их координаты по осям X и Y должны быть целыми числами, не содержащими дробной части.
Во избежание искажения иконок они должны иметь одинаковую высоту и ширину (например, 24×24).

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


Форма




Тело целиком



Верхняя часть тела



Размещение внутри другой формы


Подробное изображение частей тела


Правила использования иконок с изображениями людей

Для рук и ног используйте штрихи одинаковой толщины с прямоугольными концами.

Не используйте штрихи различной толщины и закругленные концы для рук и ног.

Выравнивайте элементы для упрощения силуэта.

Не обрезайте части рук или ног.

Если элементы расположены внутри другой формы, помещайте их туда полностью.

Не нарушайте границы контейнера элементами.

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

Не добавляйте элементы с изображениями людей, если они усложняют иконку.

Используйте самые простые формы для представления человеческих характеристик.

Не используйте человеческие характеристики в неодушевленных объектах.
Цвет
Стандартная непрозрачность активной иконки на светлом фоне — 54% (#000000). Неактивная иконка, стоящая ниже в визуальной иерархии, должна иметь непрозрачность 26% (#000000).
Стандартная непрозрачность активной иконки на темном фоне — 100% (#FFFFFF). Неактивная иконка, стоящая ниже в визуальной иерархии, должна иметь непрозрачность 30% (#FFFFFF).


P.S. Это тоже может быть интересно:
None Found