5 вещей о проектировании для Apple Watch, которые нужно знать

0

Приложение Soundwave music discovery работает на iOS и Android в течение почти 2 лет. Недавно у меня была возможность поработать над UI и проектированием взаимодействия для приложения Soundwave Watch Apple. После релиза  Watch 24 апреля, Soundwave будет одним из первых приложений, доступных на этой платформе. Также, будучи одним из первых приложений, доступных на носителях Android, здорово, что, наконец, приложение Apple Watch разрабатывается!

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

1. Изучите принципы

Руководящие принципы по созданию интерфейсов для Apple Watch довольно строгие. То же самое можно сказать и о руководящих принципах iOS, но благодаря его завершенности, у дизайнеров были годы, чтобы изучить эти принципы и создать что-то уникальное с их приложением и брендом. Вы сэкономите много времени, ознакомившись с руководящими принципами Apple для Watch, или позже вы предпримете небольшие и отнимающие много времени изменения в элементах пользовательского интерфейса. Хорошей новостью является то, что Apple выпустили полный набор PSD, соответствующих их руководящим принципам, которые помогут в процессе проектирования, доступные в ресурсах разработчиков. Они невероятно передают подробную информацию о кнопке и размеров шрифта, интервал таблиц и иерархии, и их стоит тщательно изучить.

2. Упростите взаимодействие

В 2013/14, визуальный дизайн существенно изменился. Слишком skeuomorphic вид приложений iOS был заменен чистым, гладким стилем с использованием цвета, типографикой и местом для общения и руководства опытом. Это было незадолго до того, как дизайнеры начали использовать пользовательские переходы и анимации, чтобы улучшить качество и использовать навигацию посредством приложений. Apple Watch предпринимает этот шаг для простоты на новом уровне, сосредоточившись в основном на высоком уровне, микро взаимодействия для завершения простых задач, которые займут не более чем несколько секунд. Ограничения Watch означают, что нет большой возможности экспериментировать с пользовательскими переходами между экранами и состояниями. Это, скорее всего, изменится, так как платформа развивается, но сейчас можно этим насладиться! Это заставляет дизайнеров  сосредоточиться на UX. При проектировании взаимодействия для нашего приложения, мы убедились, что любая задача может быть завершена не более чем в два нажатия.

3. Используйте анимации эффективно

Часто сопровождаемые взаимодействия элементами пользовательского интерфейса – анимации. Используемые разумно, они могут улучшить понимание того или иного действия, помочь пользователю завершить задачу, а иногда и просто создать более уникальный и привлекательный опыт. Недавно я понял, что нажимаю кнопку “favourite” на Twitter все чаще. Я убежден, что это результат  обновления дизайна анимации. Вместо простого изменения состояния, немного анимированная звезда сейчас взрывается на экране. Подобные анимации не увеличивают ценность действия, но они усиливают свое значение и на каком-то уровне, вызывают эмоциональный отклик так же, как лопание пузырчатой пленки. Если она будет у вас под рукой, вы определенно начнете лопать пузырьки!

Пока в Apple Watch есть анимации, дизайнеры должны создавать их. До тех пор, пока Apple не выпустит CoreAnimation для часов, разработчики могут работать только с активами, предоставляемыми им для осуществления анимации. В моем случае, я разработал анимацию, используя стандарт, Adobe After Effects для создания последовательности PNG, 30 кадров в секунду, которые запускаются при нажатии кнопки.

Вот превью того, как я экспортирую активы.

1-jLT4926_zx0qXNMWwc73hg

Начните с выбора Composition > Add to Render Queue

1-PAZcBjVPpH-vrziAR7hO2A

В “Output Module Settings” выберите “Lossless”

1-zjlHx1TE1gUl2y6Qr1d3Uw

Измените формат от “Quicktime” до “PNG Sequence”

1-cDfVvw-0uP1eg8hXB8UEEA

Измените канал от “RGB” до “RGB + Alpha”

1-tO1yAWQ5vuY5sMXksglS0g

Наконец, убедитесь, что вы отмените “Use Comp Frame Number” так что ваши файлы PNG будут названы в числовом порядке, начиная с 0, а не тем, где они появляются на временной шкале. Ваши файлы должны быть названы как (filename_0, filename_1, filename_2) и так далее.

4. Содержимое – это ключ

Эту фразу часто игнорируют в дизайне, но когда дело доходит до проектирования для Apple Watch, это очень важно! Глядя на любое приложение для Watch, вы заметите, как отображена важная информация и доступна с одного взгляда. Даже приложения, такие как Instagram и Twitter, которые показывают много контента и CTA на iPhone были лишены базовых изображений и текста, фокусируя внимание больше на функции, чем форме. Мы использовали подобный подход с нашим приложением, отображая обложку альбома, имя исполнителя и названия песен только на временной шкале приложения. Основной CTA – выберите песню, которую вы хотите просмотреть, где она воспроизводится с опциями или лайкните песню. Все просто – пару нажатий!

5. Создайте удобство для работы

Мы знаем, приложения Watch не являются самодостаточными приложениями. Watchkit является продолжением iOS, а приложение Watch должно быть расширением приложения iOS. Основные задачи должны быть завершаемыми Watch, более сложные задачи, требующие большего внимания – задача iPhone. Было важно, чтобы наше приложение придерживалось этих принципов, расширяя наше приложение iOS, не пытаясь заменить любую заданную функцию.

1-cg9Maf_wWuRu1Vp_Q3hJHA

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

Проведение вверх по иконке Handoff на экране блокировки телефона приведет прямо в последнее принятое сообщение, обеспечивая удобство работы.

Вывод

В целом, проектирование для Watch – интересный опыт. Как только приложением начнут пользоваться, мы, безусловно, узнаем больше о том, что работает и не работает. Это приведет к большим итерациям, тестированию и снова к итерациям, которые мы с нетерпением ждем, как компания, проектирующая для этой платформы.

P.S. В процессе я наткнулся на эти полезные ресурсы, которые мне помогли:

Поделиться: