Как Apple снова изобрела курсор?

Долгие годы Apple тянули с добавлением поддержки мыши или трекпада в iPad. Казалось бы, в Android это существует чуть ли не с первого дня. Разве сложно просто взять и добавить мышку? Только как бы вам объяснить: классический курсор-стрелочка на iPad вызывает какой-то внутренний дискомфорт. Что-то тут не так. Как будто совместили два несовместимых мира.

А то, как это сделали в Apple — выглядит логично! Но почему так происходит? Сегодня мы поговорим о том, как Apple придумали курсор мыши заново и почему поддержка мыши на iPad — это такое же значимое событие как появление мультитач в первом iPhone.

Концепция уровней точности

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

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

Думаете дело в криворукости? Отчасти да, но не только в ней. Дело в том, что когда мы наводим курсор на объект, происходит взаимодействие двух независимых слоев — с разным уровнем точности. Есть слой с курсором мышки, где точность равна одному пикселю. А есть слой интерфейса с тремя кнопками, где точность определяется размером элемента.

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

Адаптивная точность

В Apple придумали гениальное решение проблемы. Они сделали инструмент ввода с адаптивной точностью! По умолчанию, курсор в iPad выглядит как кружок. По размеру он соответствует площади соприкосновения кончиком пальца.

Тут нет ничего особенного, но магия начинается, когда вы подводите курсор к какой-нибудь кнопке. Он примагничивается к элементу и меняет свою форму по размеру кнопки. Изменение формы указывает нам на уменьшение уровня точности, при этом мы отлично видим с каким именно элементом мы взаимодействуем в текущий момент. Обратите внимание, классические курсоры перекрывают элементы. Новый адаптивный курсор — наоборот, выделяет их.

Круто, да? А теперь смотрите — на самом деле, когда курсор приближается к элементу, он меняет свое положение по оси Z, как бы подныривает под кнопку. Тем самым цвет иконки не затемняется. Я когда узнаю такие штуки, то в лишний раз убеждаюсь как Apple заморачиваются по качеству пользовательского опыта. Но погнали дальше.

Адаптации под уровень точности и примагничивание сильно упрощают взаимодействие с различными элементами. Возьмём к примеру выделение текста. Выделяя классическим курсом довольно просто промахнуться строкой. Так как точность курсора попиксельная, то какую строчку вы выделите может зависеть от перемещения указателя всего лишь на один пиксель вверх или вниз. Но что же произойдёт с адаптивным курсором iPad в этой ситуации?

Указатель поменяет свою форму на вертикальную линию по высоте равную высоте строки. Значит его вертикальная точность увеличилась до 1 пикселя. А при перемещении указателя вверх и вниз он будет прилипать к каждой строке, значит горизонтальная точность наоборот уменьшилась до целой строки.

Самое крутое, что только этими сценариями адаптивная точность не ограничивается. Например, откроем календарь. Вы хотели назначить встречу на 2:30, но обычным курсором это сложно сделать. Курсор с адаптивной точностью сильно упрощает задачу.

Новый курсор ведет себя умнее старых инструментов. Он подстравивается и принимает ту форму и точность, которая оптимальна в данный момент. Как если бы топор в вашей руке мог превращаться в скальпель.

Как это всё работает?

Перемещая указатель по экрану вы на самом деле перемещаете два указателя: тот, что вы видите, и невидимый курсор который трекает реальное положение указателя.

Так вот когда реальный курсор приближается к границе элемента, его видимое альтер-эго перемещается к кнопке и принимает её форму. Это и есть примагничивание.

При этом на реальное положение курсора указывает приятный эффект параллакса. Когда реальный курсор прикасается к границе другой кнопки, его визуальный собрат тоже перепрыгивает на другую кнопку.  А когда вы поднимаете палец, указатель центруется на текущем активном элементе. Это позволяет увереннее делать последующий последующий тап, ну или двойной тап.

Но на этом чудеса с волшебным примагничиванием не заканчиваются. Иногда чтобы “дотянуться” дальнего объекта на экране при помощи тачпада нужно сделать несколько свайпов. Это не удобно. Поэтому Apple добавили инерцию при свайпе. Прям как при прокрутке ленты на iPhone.

Но тут возникает проблема. Иногда курсор может не дотянуться или наоборот проскочить нужный объект. Поэтому в момент когда вы отпускаете палец, курсор заранее просчитывается где он окажется. И если рядом будет интерактивный объект. Он автоматически к нему притянется. В этом случае иконка настроек оказалась самым близким обьектом.

Самое забавное, что когда всем этим пользуешься, вообще не замечаешь, что система оказывается тебе всё время подыгрывает.

Анимация и взаимодействие

Важную роль в работе нового курсора играет то, как он взаимодействует с разными типами объектов. Если это маленькие кнопки с прозрачным фоном, указатель просто выделяет их заполняя собой фон. Также когда указатель выделяет кнопку она немного приподнимается, отбрасывая тень, а реальное положение курсора обозначается не только лёгким параллаксом, но и эффектом свечения. А во время нажатия все слои схлопываются.

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

Поэтому в таких случаях используются более простые анимации, объект может приподняться или просто поменять цвет заливки. Сам курсор, кстати, также динамически меняет свой цвет в зависимости от цвета фона на котором он находится. И всё это работает автоматически на системном уровне!

Кастомизация

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

На практике

У меня пока нет фирменной клавиатуры Apple с трекпадом, но такая есть у Бори, он уже сделал классный обзор.

Для теста я подрубал к iPad Pro беспроводную мышь и трекпад. И могу с уверенностью сказать, что новый курсор затачивали по трекпад. С мышками многое работает на так круто. У курсора пропадает инерция, плохо работает вертикальный скролл, опять же из-за отсутствия инерции. Нет мультитач жестов, без которых на iPad нельзя. А вот с трекпадом совсем другое дело. Действительно Айпад становится настоящим удобным инструментом для работы. Опять же Боря про это отлично рассказал в своём обзоре. Единственная проблема, которая есть сейчас: не все приложения используют преимущества нового способа ввода. Поэтому ждём, когда разработчики адаптируют свои приложения под новый инструментарий и появления новых крутых профессиональных программ под iPad.

Выводы

В итоге Apple, конечно, молодцы. Современный курсор-стрелочка не менял свою форму более тридцати лет, еще со времен XEROX PARC, первого в истории компьютера с графическим пользовательским интерфейсом. Ну и как известно, Apple собственно его и спёрли для первого Mac. Кажется, теперь настал другим компаниям спереть новый курсор у Apple. Всем нам от этого жить станет легче!

Читать целиком

droider.ru - Apple