Material Design на русском. Часть 12 — Навигационные переходы

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

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

О переходах

Навигация и анимация

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

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

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

Иерархия

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

Переходы связанные с иерархией

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

Переход от родительского экрана к дочернему

Когда пользователь нажимает на дочерний элемент, то дочерний элемент приподнимается с родительского и расширяется, заполняя экран. В этот момент анимация даёт понимание пользователю то, как относится дочерний элемент к родительскому, а также привлекает внимание, что и является целью взаимодействия.

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

Переходы между экранами, которые находятся на одном уровне

Переходы на одном уровне происходят тогда, когда экраны находятся на одном уровне иерархии.

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

Переходы между соседними элементами

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

Вкладки указывают на то, что они связаны, а еще они расположены на одной высоте и двигаются вместе.
Это приложение использует вкладки, позволяющие переключаться между тремя различными типами поездок (одна и та же цель — поездка, но разный набор контента).

Верхнеуровневые переходы

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

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

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

--

--

--

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

Aleksandra Walczak: Developing Multidisciplinary Designer & UX Specialist

Squarespace Dark Mode – Ultimate guide [2022]

Darth Vader you to add dark mode for Squarespace

Usability Hub & remote testing

Reflection point: Usability, Accessibility, and Ethics