Material Design на русском. Часть 37 — Взаимодействие: Состояния | by Ruslan Sharipov | Mar, 2021

Статьи по дизайну

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

Material Design на русском. Часть 35 — Взаимодействие: Жесты | by Ruslan Sharipov | Mar, 2021

Статьи по дизайну

Жесты помогают пользователю перемещаться между экранами, выполнять целевые действия и управлять контентом. Типы жестов: Жесты для навигации Жесты для действий Жесты для транформации Жесты для навигации Навигационные жесты помогают пользователям легко перемещаться по продукту. Типы навигационных жестов: Тап (или нажатие) Скрол (или прокручивание) и панорамирование Перетаскивание Свайп (или смахивание) Сжатие и растягивание (или пинч) Нажатие…

Material Design на русском. Часть 32 — Скорость | by Ruslan Sharipov | Mar, 2021

Статьи по дизайну

Переходы, которые есть у маленьких компонентов имеют меньшую область и длительность анимации, чем переходы у больших компонентов. Маленькая область Маленькие элементы с небольшой областью перехода, такие как иконки и элементы по типу свитчера, чекбокса или радио-кнопки, имеют маленькую длительность перехода. У свитчера длительность анимации равна 100мс Средняя область Элементы с большей областью, такие как нижние…

Material Design на русском. Часть 31 — Как устроена система анимации | by Ruslan Sharipov | Mar, 2021

Статьи по дизайну

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

Material Design на русском. Часть 30 — Об анимации | by Ruslan Sharipov | Feb, 2021

Статьи по дизайну

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

Material Design на русском. Часть 29 — Применение формы в UI | by Ruslan Sharipov | Feb, 2021

Статьи по дизайну

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

Material Design на русском. Часть 28 — Форма и анимация | by Ruslan Sharipov | Feb, 2021

Статьи по дизайну

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

Material Design на русском. Часть 27 — Форма как инструмент выразительности | by Ruslan Sharipov | Feb, 2021

Статьи по дизайну

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

Material Design на русском. Часть 26 — Форма и иерархия | by Ruslan Sharipov | Feb, 2021

Статьи по дизайну

Взаимосвязь элементов и формы Форма может помочь пользователям понять то, как элементы Material связаны друг с другом. Формы могут указывать на то, что элементы равнозначны по высоте относительно друг друга. Похожие элементыЭто те формы, которые равнозначны по какому-либо атрибуту. Например, карточки в списке, которые схожи по размеру и, например, скруглению. Связанные элементыФорма одного элемента может…

Material Design на русском. Часть 25 — О форме | by Ruslan Sharipov | Feb, 2021

Статьи по дизайну

Акцент Уникальные формы выделяются, поэтому они направляют внимание пользователя на различные части экрана. Круглая плавающая кнопка действия и изогнутая форма с вырезом у нижней панели приложения выделяется на фоне прямоугольных форм в других местах. Идентификация Форма позволяет пользователям распознавать какие-то компоненты и различать material элементы лучше. Эти чипсы можно отличить по форме. Состояние Можно отобразить…