Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.
В Material есть набор конкретных паттернов для переходов, которые могут помочь пользователям хорошо ориентироваться в нем.
Документация доступна только для Android и Flutter. Для iOS и Web не планируется.
В Material Design есть 4 паттерна для переходов между компонентами или режимом «на весь экран». Паттерны разработаны, чтобы пользователям было проще ориентироваться и понимать приложение, усиливая при этом связь между элементами интерфейса.
Вот эти паттерны:
- Трансформация контейнера
- Общая ось
- Постепенный переход
- Затухание
При определении того, какой паттерн перехода подходит для твоего юзкейса учитывай следующее:
Содержание статьи
Постоянные контейнеры
Является ли постоянный контейнер частью перехода?
Контейнеры — это формы, используемые для представления замкнутых областей (форм), таких как кнопки, списки, поверхности карточек. Если в переходе есть контейнер, который является постоянным элементом, выбери паттерн трансформации контейнера.
Зависимости
Существует ли пространственная или навигационная связь между элементами интерфейса?
Если элементы в переходе не имеют постоянного контейнера, то можно выделить пространственные отношения, что может отражаться в элементах при вертикальном или горизонтальном макете. Или между элементами может существовать навигационная связь, например перемещение между однородными узлами или между уровнями навигации в приложении. Если между элементами существует пространственная или навигационная связь, выбери шаблон общей оси.
Когда взаимосвязь между элементами незначительна или не существует, лучше подходит шаблон постепенного перехода.
Вход и выход
Появляется ли элемент интерфейса на экране или исчезает с экрана?
Часто элемент пользовательского интерфейса просто должен появиться или как бы «выйти» и исчезнуть с экрана. Для такого «входа» или «выхода» элементов лучше всего подходит шаблон затухания.
Загрузка...
