The latest articles on UXPUB 🇺🇦 Дизайн-спільнота by Alexeygordeev (@alexeygordeev). https://ux.pub/alexeygordeev https://ux.pub/images/SqqTnclugbD8w8T0GuG3g3S2xi674GiwbyMVGjU0NQw/rs:fill:90:90/mb:500000/ar:1/aHR0cHM6Ly91eC5w/dWIvdXBsb2Fkcy91/c2VyL3Byb2ZpbGVf/aW1hZ2UvMTg2OC83/NmIwOTg2OS1hN2Fj/LTQ5YzAtOWUyOC1h/ODdhZDM5NDExZDcu/cG5n https://ux.pub/alexeygordeev en Alexeygordeev Mon, 18 Apr 2022 09:45:40 +0000 https://ux.pub/alexeygordeev/kak-prostranstviennaia-loghika-mozhiet-sdielat-dizain-vashiegho-produkta-bolieie-intuitivnym-i-profiessionalnym-2g8g https://ux.pub/alexeygordeev/kak-prostranstviennaia-loghika-mozhiet-sdielat-dizain-vashiegho-produkta-bolieie-intuitivnym-i-profiessionalnym-2g8g <p>Навигация в цифровом мире влияет на дизайн. Ниже представлено 4 причины почему между компонентами дизайна необходима четкая пространственная логика.</p> <p>Как и в реальном мире, при навигации по цифровым продуктам людям необходимо знать, где они находятся, как они туда попали и как оттуда выбраться. Вот почему между компонентами интерфейса должна быть четкая пространственная логика.</p> <h2> 1. Хорошая пространственная логика часто соответствует метафорам физического мира </h2> <p>Открытие папки на iOS похоже на открытие папки или коробки в реальной жизни. Расширяющаяся анимация сохраняет непрерывность «папки» — как будто мы приблизили физическую папку к нашим глазам, чтобы посмотреть, что внутри.</p> <p>Открытие приложения в iOS</p> <h2> 2. Люди привыкли к цифровым паттернам, которых нет в физическом мире </h2> <p>Например, пользователи iOS привыкли открывать ячейку списка, которая выдвигает следующий экран, или нажимать вкладки на нижней панели, чтобы увидеть другие экраны. Такие паттерны не напоминают нам о каких-либо взаимодействиях в физическом мире, но люди привыкают к ним после тысяч повторений. Дизайнеры должны максимально использовать эти знакомые паттерны.</p> <p>Открытие ячейки списка</p> <p>Нажатие на вкладку нижней панели</p> <h2> 3. Приведите в порядок пространственную логику, чтобы ваш дизайн стал более интуитивно понятным </h2> <p>Сравните свайп вниз для доступа к центру уведомлений на iOS и к центру управления на Android. В iOS пространственные отношения между экраном уведомлений (экран A) и домашним экраном (экран B) просты. A находится поверх B — свайп от края сворачивает его, жест и движение экрана синхронизируются. Это просто, потому что мы можем легко заметить метафору физического мира.</p> <p>Проведите пальцем вниз для открытия экрана уведомлений в iOS</p> <p>Для сравнения, пространственная логика того же взаимодействия на Android менее понятна. Если потянуть вниз в любом месте экрана, домашний экран превращается в белый слой — здесь нет метафоры отображения физического мира.</p> <p>Также трудно визуально определить пространственную логику между контрольным слоем с черным фоном и белым слоем. Они на одном уровне или черный слой на один уровень ниже? В то время как на экране уведомлений iOS эффект размытия дает четкую подсказку.<br> Разумеется, пользователи могут привыкнуть к такому взаимодействию с помощью повторений, но отсутствие пространственной логики всегда будет вызывать когнитивный диссонанс. Подобные тонкости делают продукт менее плавным и, следовательно, менее качественным.</p> <p>Свайп вниз для открытия центра управления в Android</p> <h2> 4.Бесшовная анимация также играет огромную роль в установлении пространственной логики и повышении качества продукта </h2> <p>Давайте посмотрим на открытие и закрытие приложения в iOS. При открытии иконка приложения расширяется и исчезает, а экран приложения увеличивается в размерах вместе с исчезающей иконкой. Анимация устанавливает пространственную логику и сообщает пользователю, где находится приложение в этом цифровом пространстве — оно встроено в его иконку. Анимация закрытия приложения отражает ожидаемое поведение, поскольку приложение буквально возвращается туда, откуда пришло.</p> <p>Открытие и закрытие приложения в iOS</p> <p>Открытие и закрытие iOS-приложения в замедлении.</p> <p>Для сравнения, взаимодействие открытия и закрытия Android-приложения несколько фрагментировано.</p> <p>Открытие и закрытие Android-приложения </p> <p>Подводя итог можно сказать, что, когда вы думаете о повышении интуитивности и профессиональности своего продукта, обратите внимание на пространственную логику, подразумеваемую дизайном.</p> <ol> <li>Соответствует ли дизайн метафорам реального мира?</li> <li>Соответствует ли он паттерну взаимодействия, с которым знакомо большинство людей?</li> <li>Имеет ли смысл пространственная логика?</li> <li>Используете ли вы анимацию для демонстрации пространственной логики?</li> </ol> <p>Подобные детали дизайна всегда имеют значение.</p> <p>Перевод статьи <a href="https://uxmag.com/articles/how-spatial-logic-can-make-your-product-design-more-intuitive-and-high-craft">uxmag.com</a></p> ux lifehacks