Что делает жесты в iOS идеально плавными?

Когда мы смотрим на iOS и Android, очевидно, что Apple уделяла плавности и юзабилити больше внимания, чем Android. Чтобы добиться желаемого Apple всегда использует только один способ – естественность. iPhone был вдохновлен природой, как и многие другие продукты Apple.

Что делает жесты в iOS идеально плавными?
Интерфейс iOS14

Давайте взглянем на биографию Стива Джобса. Он считал, что Apple должна создавать продукты, которыми может пользоваться каждый; даже без руководства пользователя.

Например, домашний экран iPhone можно сравнить со страницей книги. Если вы посмотрите на анимации iOS, вы поймете, о чем я говорю.

Мы не можем перевернуть страницу книги вверх или вниз, поэтому мы не можем сделать это и с iPhone. Если вы возразите, ​​что такое нельзя сделать ни с одним смартфоном, значит, вы не видели старые Android-смартфоны.

Профессия «Дизайнер интерактивных медиа»
Профессия «Дизайнер интерактивных медиа»
Скидка 45% по промокоду UXPUB
Узнать подробнее
Что делает жесты в iOS идеально плавными?
Пример перехода страницы в iOS14
Что делает жесты в iOS идеально плавными?
Посмотрим на страницы книги

Другой пример – курсор. Жесты на экране iPhone разработаны в соответствии с нашими привычками использования курсора. Мы двигаем пальцем по экрану подобно курсору. Так же, как мы использовали курсор на компьютере.

Дальше поговорим о плавности экрана.

Задержка и ответ

Если после прикосновения к экрану реакция отобразиться с задержкой, то нам покажется, что телефон не ответил на наше действие. Поэтому быстрый отклик кажется более плавным.

Что делает жесты в iOS идеально плавными?
WWDC 2018

Apple не просто сосредоточилась на реакции iPhone. Пользователь также может замешкаться с жестом. Apple хотела предотвратить это, но как? Конечно же, с помощью дизайна жестов…

С удалением физической кнопки «Домой» в iPhone X, жесты стали играть очень важную роль. Это был практически основной момент обновленной линейки iPhone. Потому что теперь все операции с цифровой кнопкой «Домой» выполняются с помощью жестов, появившихся с релизом iPhone X. Как дизайн жестов может ускорить вас? Вы работаете намного быстрее, если применяете жесты не задумываясь. Поэтому, когда вы взаимодействуете с экраном и решаете, что делать дальше, вы действуете быстро. Непонятно объясняю? Нам помогут гифки 😉

Что делает жесты в iOS идеально плавными?
Вы открыли приложение, но поняли, что открыли не то приложение. Благодаря жестам, вы можете быстро вернуться к правильному приложению
Что делает жесты в iOS идеально плавными?
Допустим, вам нужно срочно отправить фотографии. Вы можете сделать это с помощью этого жеста

Вам может показаться, что это мелкие и ненужные детали. Но вы передумаете примерно через 2 секунды после того, как откроете неправильное приложение.

Когда вы открываете неправильное приложение на iPhone с помощью кнопки «Домой», вам обязательно нужно переместить палец на кнопку «Домой». (Вы перемещаете палец к кнопке «Домой», пока приложение не откроется, и тратить время на это почти не нужно) Но на iPhone без кнопки «Домой» ваш палец уже находится на экране. Если бы такого жеста не было, пришлось бы сначала подождать, пока откроется приложение. Затем вам нужно было бы подвести палец к полоске внизу экрана и закрыть приложение.

Что делает жесты в iOS идеально плавными?
Вы собирались открыть Twitter, но подумали, что стоит проверить почту. Тогда этот жест для вас

Ответ интерфейса

Теперь мы полностью соприкасаемся с экраном. Когда мы нажимаем на приложение, открываем центр уведомлений и т. д., мы хотим видеть, что на экране что-то происходит. Поскольку экран обеспечивает обратную связь, такую как вибрация, изменение цвета иконки, мы понимаем, что экран отреагировал на наше действие.

Помимо этого, как видно на gif-файлах выше, приложение запускается с небольшого размера и быстро покрывает весь экран.

Что делает жесты в iOS идеально плавными?
Возможно и обратное
Что делает жесты в iOS идеально плавными?
Когда вы нажимаете, они увеличиваются и движутся на встречу к вашему пальцу

Rubber Banding (резиновая лента)

Когда мы читаем статью на веб-сайте, мы прокручиваем страницу несколько раз, чтобы увидеть, закончилась ли статья. То же самое происходит, когда мы используем приложения. Например, в заметках или фотографиях. Когда вы тянете экран вверх или вниз, этот жест дает вам понять, что «больше ничего нет». Это называется «резиновая лента» (rubber banding).

Что делает жесты в iOS идеально плавными?
Rubber banding

Чан Карунамуни (ведущий на гифках выше) говорит, что, если бы не было такого фидбека, вы бы по сути не знали завис ваш телефон или вы достигли края экрана.

Анимации

Какой должна быть анимация, приятная для глаз и смягчающая переход? Apple показывает, что для этого важно не только количество кадров, отображаемых в секунду, но и другие критерии, показанные на gif -файле ниже.

Что делает жесты в iOS идеально плавными?
Обе анимации 30 кадров в секунду

При этом важна скорость анимации и внешний вид каждого кадра. Для этого используются эффекты motion blur (размытие в движении) и motion stretch (растяжение в движении).

Что делает жесты в iOS идеально плавными?

Например, когда мы щелкаем по иконке приложения, она увеличивается и растягивается на весь экран. Плавный переход обеспечивается эффектом motion stretch.

В результате Apple раскрыла наши потребности, о которых мы даже не догадывались. Несомненно, документация останется самым важным ресурсом при проектировании приложений. Но детали, представленные в подобных презентациях, могут стать хорошими советами по проектированию пользовательских интерфейсов.

Total
5
Shares
1 комментарий
  1. Проверил работу приложений из пункта “Задержка и ответ”. К сожалению, как на гифке не работают. Пока приложение не перейдет в состояние полной готовности – с ним нельзя взаимодействовать.
    Конечно, жесты Apple крутые, анимация крутая, но иногда казусы встречаются.

Добавить комментарий

Ваш адрес email не будет опубликован.

Похожие статьи
Ребрендинг цифрового банка Monese: История создания нового вида
Подробнее

Ребрендинг цифрового банка Monese: История создания нового вида

Monese - это банковский сервис, который позволяет открыть локальный банковский счет резидентам Европейской экономической зоны всего лишь за 120 секунд даже, если клиент не может сразу подтвердить свой адрес или имеет плохую кредитную историю.
Мобильный UX-дизайн: нижняя навигация
Подробнее

Мобильный UX-дизайн: нижняя навигация

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

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
5
Share