Когда мы смотрим на iOS и Android, очевидно, что Apple уделяла плавности и юзабилити больше внимания, чем Android. Чтобы добиться желаемого Apple всегда использует только один способ – естественность. iPhone был вдохновлен природой, как и многие другие продукты Apple.
Интерфейс iOS14
Давайте взглянем на биографию Стива Джобса. Он считал, что Apple должна создавать продукты, которыми может пользоваться каждый; даже без руководства пользователя.
Например, домашний экран iPhone можно сравнить со страницей книги. Если вы посмотрите на анимации iOS, вы поймете, о чем я говорю.
Мы не можем перевернуть страницу книги вверх или вниз, поэтому мы не можем сделать это и с iPhone. Если вы возразите, что такое нельзя сделать ни с одним смартфоном, значит, вы не видели старые Android-смартфоны.
Пример перехода страницы в iOS14
Посмотрим на страницы книги
Другой пример – курсор. Жесты на экране iPhone разработаны в соответствии с нашими привычками использования курсора. Мы двигаем пальцем по экрану подобно курсору. Так же, как мы использовали курсор на компьютере.
Дальше поговорим о плавности экрана.
Задержка и ответ
Если после прикосновения к экрану реакция отобразиться с задержкой, то нам покажется, что телефон не ответил на наше действие. Поэтому быстрый отклик кажется более плавным.
WWDC 2018
Apple не просто сосредоточилась на реакции iPhone. Пользователь также может замешкаться с жестом. Apple хотела предотвратить это, но как? Конечно же, с помощью дизайна жестов…
С удалением физической кнопки «Домой» в iPhone X, жесты стали играть очень важную роль. Это был практически основной момент обновленной линейки iPhone. Потому что теперь все операции с цифровой кнопкой «Домой» выполняются с помощью жестов, появившихся с релизом iPhone X. Как дизайн жестов может ускорить вас? Вы работаете намного быстрее, если применяете жесты не задумываясь. Поэтому, когда вы взаимодействуете с экраном и решаете, что делать дальше, вы действуете быстро. Непонятно объясняю? Нам помогут гифки ;)
Вы открыли приложение, но поняли, что открыли не то приложение. Благодаря жестам, вы можете быстро вернуться к правильному приложению
Допустим, вам нужно срочно отправить фотографии. Вы можете сделать это с помощью этого жеста
Вам может показаться, что это мелкие и ненужные детали. Но вы передумаете примерно через 2 секунды после того, как откроете неправильное приложение.
Когда вы открываете неправильное приложение на iPhone с помощью кнопки «Домой», вам обязательно нужно переместить палец на кнопку «Домой». (Вы перемещаете палец к кнопке «Домой», пока приложение не откроется, и тратить время на это почти не нужно) Но на iPhone без кнопки «Домой» ваш палец уже находится на экране. Если бы такого жеста не было, пришлось бы сначала подождать, пока откроется приложение. Затем вам нужно было бы подвести палец к полоске внизу экрана и закрыть приложение.
Вы собирались открыть Twitter, но подумали, что стоит проверить почту. Тогда этот жест для вас
Ответ интерфейса
Теперь мы полностью соприкасаемся с экраном. Когда мы нажимаем на приложение, открываем центр уведомлений и т. д., мы хотим видеть, что на экране что-то происходит. Поскольку экран обеспечивает обратную связь, такую как вибрация, изменение цвета иконки, мы понимаем, что экран отреагировал на наше действие.
Помимо этого, как видно на gif-файлах выше, приложение запускается с небольшого размера и быстро покрывает весь экран.
Возможно и обратное
Когда вы нажимаете, они увеличиваются и движутся на встречу к вашему пальцу
Rubber Banding (резиновая лента)
Когда мы читаем статью на веб-сайте, мы прокручиваем страницу несколько раз, чтобы увидеть, закончилась ли статья. То же самое происходит, когда мы используем приложения. Например, в заметках или фотографиях. Когда вы тянете экран вверх или вниз, этот жест дает вам понять, что «больше ничего нет». Это называется «резиновая лента» (rubber banding).
Rubber banding
Чан Карунамуни (ведущий на гифках выше) говорит, что, если бы не было такого фидбека, вы бы по сути не знали завис ваш телефон или вы достигли края экрана.
Анимации
Какой должна быть анимация, приятная для глаз и смягчающая переход? Apple показывает, что для этого важно не только количество кадров, отображаемых в секунду, но и другие критерии, показанные на gif -файле ниже.
Обе анимации 30 кадров в секунду
При этом важна скорость анимации и внешний вид каждого кадра. Для этого используются эффекты motion blur (размытие в движении) и motion stretch (растяжение в движении).
Например, когда мы щелкаем по иконке приложения, она увеличивается и растягивается на весь экран. Плавный переход обеспечивается эффектом motion stretch.
В результате Apple раскрыла наши потребности, о которых мы даже не догадывались. Несомненно, документация останется самым важным ресурсом при проектировании приложений. Но детали, представленные в подобных презентациях, могут стать хорошими советами по проектированию пользовательских интерфейсов.
Перевод статьи uxplanet.org
Топ коментарі (0)