Forwarded from UX Notes (Антон Григорьев)
Виталий Фридман написал, как сделать области нажатия в мобильных интерфейсах удобнее.
— Их рекомендуют делать минимум 44×44 px. Поэтому на нижней панели меню поместится не более 5 пунктов;
— На разных экранах пиксели разные, поэтому следует говорить о DIPs (dp), device independent pixel;
— Таблица для перевода pt в px и em, в SP или DP для Android, в pt для iOS и в DIP или px для Windows;
— Минимальная область нажатия может быть разной: 11 мм (31 pt / 42 px) в верхней части экрана, 12 мм (34 pt / 46 px) в нижней, 7 мм (20 pt / 27 px) в центре;
— Согласно требованиям WCAG 2.1 уровня ААА, если область нажатия находится в предложении или текстовом блоке, она может быть 27 px;
— Предлагайте отдельные контролы для точных манипуляций. Можно поворачивать изображения жестом, но удобнее может быть специальный слайдер или кнопка;
— Иногда несколько касаний лучше одного. Можно выбирать цвет товара нажатием на маленькие кружочки, а можно при нажатии на блок с кружочками отобразить специальную панель выбора цвета с удобными большими контролами;
— Максимизируйте кликабельные области. Например, чтобы нажать можно было на всю карточку, а не только заголовок, или на весь прямоугольник аккордеона.
In English. #mobile
— Их рекомендуют делать минимум 44×44 px. Поэтому на нижней панели меню поместится не более 5 пунктов;
— На разных экранах пиксели разные, поэтому следует говорить о DIPs (dp), device independent pixel;
— Таблица для перевода pt в px и em, в SP или DP для Android, в pt для iOS и в DIP или px для Windows;
— Минимальная область нажатия может быть разной: 11 мм (31 pt / 42 px) в верхней части экрана, 12 мм (34 pt / 46 px) в нижней, 7 мм (20 pt / 27 px) в центре;
— Согласно требованиям WCAG 2.1 уровня ААА, если область нажатия находится в предложении или текстовом блоке, она может быть 27 px;
— Предлагайте отдельные контролы для точных манипуляций. Можно поворачивать изображения жестом, но удобнее может быть специальный слайдер или кнопка;
— Иногда несколько касаний лучше одного. Можно выбирать цвет товара нажатием на маленькие кружочки, а можно при нажатии на блок с кружочками отобразить специальную панель выбора цвета с удобными большими контролами;
— Максимизируйте кликабельные области. Например, чтобы нажать можно было на всю карточку, а не только заголовок, или на весь прямоугольник аккордеона.
In English. #mobile
Forwarded from Дизайн-снайпер
This media is not supported in your browser
VIEW IN TELEGRAM
Ночной пост:
Парень доволен дизайном штанов, которые купил на распродаже, он их называет «пенисштаны» и есть за что.
Парень доволен дизайном штанов, которые купил на распродаже, он их называет «пенисштаны» и есть за что.
Forwarded from Дизайн-снайпер
This media is not supported in your browser
VIEW IN TELEGRAM
Доброе утро!
Дизайн кольца и его «поведение» на пальце
Дизайн кольца и его «поведение» на пальце
Forwarded from Дизайн-снайпер
This media is not supported in your browser
VIEW IN TELEGRAM
Небольшой обзор взаимодействия с клавиатурой и визуальной обратной связи в visionOS от дизайнера Atilla Taşkıran.
1. Посмотрите, как подсвечиваются клавиши при наведении на них пальцев.
2. Нажатие на клавишу толкает ее вниз по оси Z.
3. Кроме того, маленький круговой импульс расширяется наружу для визуального подтверждения действия.
Просто смотреть на это очень приятно, но набор текста в Vision Pro — это, должно быть, другой уровень удовлетворения.
1. Посмотрите, как подсвечиваются клавиши при наведении на них пальцев.
2. Нажатие на клавишу толкает ее вниз по оси Z.
3. Кроме того, маленький круговой импульс расширяется наружу для визуального подтверждения действия.
Просто смотреть на это очень приятно, но набор текста в Vision Pro — это, должно быть, другой уровень удовлетворения.
Forwarded from Оди
Иллюстрации Даниила Илиминского из Воткинска
Больше картинок: awdee.ru/iliminskiy-illustrations
dprofile.ru/iliminskiy
#awd_illustration #awd_art
Больше картинок: awdee.ru/iliminskiy-illustrations
dprofile.ru/iliminskiy
#awd_illustration #awd_art