Материальный дизайн — освещение и тени • Roman Volgasov

Материальный дизайн — освещение и тени

Освещение и тень

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

Тень от направленного источника света.

Тень от окружающего источника света.

Комбинированные источника света.

Элементы отбрасывают тени на тёмных поверхностях.

Источники света

Тень отбрасывается только направленным светом.

Тень отбрасывается только окружающим светом.

Комбинированная тень от направленного и окружающего света.

Применение теней

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

Тень отображает высоту объекта

Если ваш дизайн не использует тени, передайте иерархию другими способами, например, с помощью параллакса.

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

Тени и движение

Тени визуально направляют движение поверхности.

Когда поверхность меняет форму или масштаб, но её высота остается неизменной, её тень не должна меняться.

Когда поверхность меняет свою высоту, её тень должна меняться.