Гайдлайн по iOS на русском. Часть 11 — Взаимодействие: Apple Pencil

Ruslan Sharipov
7 min readDec 19, 2021

--

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.

Apple Pencil — это универсальный, интуитивно понятный инструмент, который обеспечивает высокую точность при создании заметок, создании эскизов, рисовании, разметке документов и много чего другого в приложениях для iPad. В iPadOS 14 и более поздних версий можно использовать Apple pencil для заполнения различных полей, что дает юзерам быструю и конфеденциальную функцию распознавания письма. Пройдемся по ряду рекомендаций.

Поддержка ожидаемого поведения. Apple Pencil предназначен для создания заметок — он не предназначен в качестве указателя или инструмента выбора. Учитывай этот инструмент при проектировании, т.к. это может породить интересные и неожиданные идеи для взаимодействий. Например, твое приложение может принимать рукописный ввод в местах, которые обычно требуют ввода с клавиатуры, или позволить людям делать заметки на полях документа.

Обеспечь консистентный опыт для стилуса и пальцев. Людям не нужно переключаться с Apple Pencil на свои пальцы, чтобы взаимодействовать с интерфейсом. Если твое приложение поддерживает Apple Pencil для создания заметок, то и элементы интерфейса приложения также должны реагировать на Apple Pencil. Элементы управления, которые не реагируют на стилус вызывают путаницу и это может создать впечатление неисправности или низкого заряда батареи у стилуса. Кроме того, рисование и рукописный ввод также должны работать и с пальцем.

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

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

Слева — наклон. По центру — давление, справа — направление

Используй визуальную обратную связь, чтобы показать прямую связь с контентом. Apple Pencil должен сразу же взаимодействовать с контентом, которого он касается на экране. Он не должен при касании в одном месте, влиять на содержимое в других частях экрана, а также не должен при взаимодействии влиять на несвязанные друг с другом действия.

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

По возможности сохраняй настройки пользователя для двойного касания. Apple Pencil реагирует на жест двойного касания, изменяя способ рисования, либо напрямую (изменяя инструмент), либо косвенно (показывая выбор цвета). Хотя двойное нажатие по умолчанию переключает между текущим инструментом и ластиком, пользователи могут перейти в “Настройки” и сами указать, что двойное нажатие должно переключаться например между текущим и предыдущим инструментом, показывать и скрывать палитру цветов или вообще ничего не делать. Если ваше приложение поддерживает эти модели поведения, обеспечьте консистентный опыт, соблюдая общесистемные настройки пользователя для двойного касания, и не ожидайте, что они будут изучать новые жесты для того же самого поведения. Если общесистемные настройки двойного касания не имеют смысла в вашем приложении, вы все равно можете использовать этот жест для изменения какого-либо режима Apple Pencil.

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

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

Поддержка рукописного ввода (Scribble — Каракули)

С помощью Scribble и Apple Pencil люди могут просто писать везде, где это возможно в вашем приложении, — им не нужно сначала нажимать или переключать режимы. Поскольку Scribble полностью интегрирован в iPadOS 14 и более поздних версий, он доступен для всех приложений по умолчанию, как и клавиатура. Следующие рекомендации помогут вам улучшить поддержку Scribble по умолчанию и обеспечить отличный опыт рукописного ввода в вашем приложении.

Всегда делайте ввод текста плавным и легким. По умолчанию Scribble работает во всех стандартных текстовых элементах управления, таких как текстовые поля, текстовые вьюшки, поля поиска и редактируемые поля в веб — контенте, за исключением полей для ввода пароля. Если вы используете кастомное текстовое поле в своем приложении, не заставляйте людей нажимать или выбирать его, прежде чем они смогут начать писать.

Сделайте рукописный ввод доступным везде, где люди могут захотеть ввести текст. В отличие от использования клавиатуры, использование Apple Pencil побуждает людей относиться к экрану так же, как они относятся к листу бумаги. Помогите усилить это восприятие в вашем приложении, сделав Scribble постоянно доступным в местах, где ввод текста кажется естественным. Например, в приложении “Напоминания” для людей естественно создавать новое напоминание, записывая его в пустое пространство под последним элементом, даже если область не содержит текстового поля.

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

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

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

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

Предоставление кастомного опыта рисования

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

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

Убедитесь, что панель инструментов не скрывает контент при запуске приложения в компактном виде (на мобилках). В обычном виде (это про iPad) панель инструментов “парит” над содержимым, поэтому люди могут переместить его в сторону, но в компактной среде панель инструментов остается прикрепленным к нижнему краю экрана. Чтобы избежать перекрытия контента, можно настроить размер вью контента или добавления прокрутки с учетом высоты панели инструментов.

Слева (правильно) фотография помещается целиком, а справа (неправильно) панель инструментов перекрывает контент.

Рассмотрите возможность предоставления кастомных кнопок отмены и повтора для отображения, когда ваше приложение работает в компактной среде (на мобилках). В обычном виде (на iPad) панель инструмент имеет кнопки отмены и повтора, но в компактном это не так. В компактном виде (на мобилках) можно отобразить кастомные кнопки на панели. Вы также можете рассмотреть возможность поддержки стандартного 3-пальцевого жеста отмены/повтора, чтобы люди могли использовать его в любом виде.

Стандартное размещение (iPad)
Компактное размещение на мобилках

--

--