Дизайн ИнтерфейсовМобильные ПриложенияAndroidОбразованиеMaterial Design

Material Design на русском. Часть 4 — Свет и тень

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

Основной смысл: все элементы отбрасывают тени, когда на них падает свет. Всего источников 2: основной и общий свет. По этой причине у элементов 2 тени: основная и общая тень.

Свет

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

Тень от основного источника света

Тень от общего источника света

Комбинированная тень от основного и общего источника света

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

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

Тени в Material Design отбрасываются основным светом и общим светом. В разработке Android и iOS тени возникают, когда свет падает на элементы, которые расположены на разных уровнях вдоль оси Z (вспоминай высоту). На веб-сайтах же тени изображаются только путем манипулирования осью Y. В следующем примере показана карта с высотой 6dp.

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

Неправильно: Тень от общего источника света

Правильно: Комбинируй тень от основного и общего источника света

Тени

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

Как применять

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

Последовательная шкала из значений для теней.

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

Осторожно: Если в приложении не используешь тени, то попробуй передать высоту посредством других приёмов. Например с помощью анимаций и параллакса.

Правильно: Появление тени указывает на то, что элемент списка взаимодействует с пользователем. То есть пользователь может перемещать элемент над остальными элементами во время этого взаимодействия.

Тени и анимация

Тени дают полезные подсказки о направлении движения элемента и о том, увеличивается или уменьшается расстояние по высоте между элементами.

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

Когда элемент меняет высоту, тень должна измениться в след за высотой элемента.

Исследование

Проведено 36 интервью с пятнадцатью участниками с низким зрением, чтобы лучше понять, как тени влияют на способность человека идентифицировать компонент и взаимодействовать с ним.

Результаты исследований:

  • Тени и обводка— это лишь один из многих атрибутов у элемента, влияющих на способность пользователя идентифицировать его.
  • Другие атрибуты, которые влияют на способность идентифицировать элемент: типографика, высота, цвет, расположение среди окружающих элементов и контекст использования.
  • Использование теней и обводок повышает скорость при которой легко распознать компонент при сканировании страниц.
  • Использование тени или обводки вокруг компонента улучшает способность определить, можно ли с ним взаимодействовать.

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

RRuslan Sharipov