Выделение на мобильных устройствах На сенсорных устройствах выбери элемент, тапнув и удерживая палец на нем. Переход к режиму выбора Чтобы выбрать элемент и войти в этот режим, долго зажми на элементе пальцем или используй необходимую кнопку, например нажми на аватарку. Чтобы выбрать больше элементов, продолжай тапать на следующие элементы. Выход из режима выбора Чтобы выйти…
Уведомлпения могут быть отображены разными компонентами. Критерии выбора правильного компонента: Уровень важности или срочности Наличие какого-нибудь действия (кнопки и т.д.) по исправлению проблемы Длительность нахождения на экране (временная, отклоняемая или и то, и другое) Уведомления, которые должны быть временными, означают то, что компонент уйдет с экрана сам по себе в течение нескольких секунд после появления.…
Сокращение данных нужно, чтобы замаскировать конфиденциальные данные или сократить длинные формулировки. Сокращение чисел Уже всем знакомые эллипсы [• • •] — это символы, которые частично скрывают конфиденциальные данные. Используются когда номер, например кредитной карты или номер соц. страхования, не полностью должен быть виден. Когда использовать троеточие [• • •] Для большинства номеров, которые относятся к…
Использование Нажатое состояние отзначает что пользователь тапнул, кликнул мышкой, сделал ввод с клавиатуры или использовал голосовой ввод. Это состояние есть у всех интерактивных компонентов. Нажатые состояния вызывают изменения и должны быть с большим акцентом. Наложение поверх компонентов и элементов рипл-анимации (ripple animation) означает нажатое состояние. Применимо для всего компонента или элемента, их части или в…
Жесты помогают пользователю перемещаться между экранами, выполнять целевые действия и управлять контентом. Типы жестов: Жесты для навигации Жесты для действий Жесты для транформации Жесты для навигации Навигационные жесты помогают пользователям легко перемещаться по продукту. Типы навигационных жестов: Тап (или нажатие) Скрол (или прокручивание) и панорамирование Перетаскивание Свайп (или смахивание) Сжатие и растягивание (или пинч) Нажатие…
Переходы, которые есть у маленьких компонентов имеют меньшую область и длительность анимации, чем переходы у больших компонентов. Маленькая область Маленькие элементы с небольшой областью перехода, такие как иконки и элементы по типу свитчера, чекбокса или радио-кнопки, имеют маленькую длительность перехода. У свитчера длительность анимации равна 100мс Средняя область Элементы с большей областью, такие как нижние…
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь. В Material есть набор конкретных паттернов для переходов, которые могут помочь пользователям хорошо ориентироваться в…
Швейцарский дизайнер Сара Харбарт увидела потенциал в одном из самых популярных фруктов в мире – банане, превратив банановую кожуру в новый устойчивый материал Kuori. Харбарт смогла создать четыре различных продукта, которые сделаны из банановой кожуры и полностью компостируются: пара очков, в которых оправа заменена на Kuori. Затем, объединив переработанный полилактид с банановой кожурой, дизайнер создала нить для 3D-печати. Третий…
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь. Анимация помогает UI казаться выразительным и простым в использовании. Информативность Анимация информирует пользователей, подчеркивая связи…
Бренд и иерархия Изменение формы у компонентов может отражать бренд и иерархию в интерфейсе. БрендИспользуя форму в интерфейсе, можно отразить бренд. Например, можно использовать органическую или геометрическую форму, которая отражает какую-то идею бренда. Основываясь на конкретной форме, ты можешь проработать целый набор схожих форм для использования в продукте, помогая унифицировать бренда во всем. Правильно: На…
