Знакомства «Мамба» на Windows Phone

в 5:26, , рубрики: mamba, Marketplace, windows phone, windows phone 7, WP7, Блог компании Мамба, приложение, метки: , , , , ,

Знакомства «Мамба» на Windows Phone

Совсем недавно мы выпустили приложение для платформы Windows Phone. Мы прошли интересный путь от проектирования до публикации приложения. Сегодня мы хотели бы рассказать вам об этом. Какие подводные камни мы встретили и советы всем кто только начинает разрабатывать под эту платформу.

У нас уже есть клиенты под платформы ссылки: iOS, Android, Bada. Теперь настала очередь и для Windows Phone. Такой порядок получился отчасти исторически, но и статистика рынка вынуждает нас удовлетворять его потребности. Согласно прогнозам нескольких агентств в 2015 году платформа Windows Phone будет занимать около 16% рынка. К тому же появятся платежные методы в 8-й версии ОС, поэтому стоит начать её изучение уже сейчас.

Концепция

Вариантов было не много, т.к. постановка задачи простая — необходимо было реализовать текущий функционал, адаптировать его под платформу, и немного поэкспериментировать).

После изучения guidelines мы поняли, что дизайн может получится слишком скучным. Поэтому мы намеренно нарушили много правил (правила, которые не стоит нарушать ниже), но сделали, как нам, кажется, более живое и красивое приложение. Например, мы использовали pivot с фоном, списки в панорамах и т.д.

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

А если своими словами то panorama предназначена для красивого приглашения аля витрина, а pivot — это элемент для размещения большого контента (например подгружаемых списков), разделенный по вкладкам (pivot item).

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

Для создания скет-макетов мы использовали balsamiq mockups, свою задачу это программа решает хорошо. Чтобы вы представляли объем работ, то окончательная схема скетч-макетов выглядела вот так:

Знакомства «Мамба» на Windows Phone

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

Знакомства «Мамба» на Windows Phone

Дизайн

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

Знакомства «Мамба» на Windows Phone

Так же обратите внимание на всякие мелочи, которые описаны много где, например, здесь.

Вот рекомендации по часто распространенным ошибкам:

  • выравнивание по левому краю
  • отступы слева и справа по 24px
  • кнопки использовать с выравниванием по всей ширине экрана
  • в AppBar использовать только иконки (не использовать прямоугольные кнопки или поля ввода)
  • в AppBar использовать стандартные иконки
  • в AppBar не более 4 иконок и только главные функции, побочные необходимо переместить ниже в виде пунктов меню
  • в списках и кнопках-иконках использовать анимацию качения (tilt effect)
  • стоит реализовать Fast App Switching
  • не стоит имитировать в дизайне главную страницу (рабочий стол) в экранах приложения (аля dashboard или главный экран, для этого существует panorama)
  • избегать зацикливание в переходах между экранами
  • глубина переходов должна быть не более 5 уровней

Так же есть множество не стыковок и отхождения от правил в стандартных и предустановленных приложениях, поэтому сильно не стоит на них описаться как на эталонный пример.

Готовый результат:
Знакомства «Мамба» на Windows Phone

Реализация и технологии

Клиент нам делали хорошие ребята из EastBanc. Отдельная благодарность тим-лиду Чеснокову Вадиму за дельные советы и огромное терпение.

Для push уведомлений мы использовали пакет для Zend Framework от Mike Willbanks, он доступен на github.com. Очень простой в реализации и использовании, решает задачи по уведомлениям под 3 платформы сразу. К слову, реализация push-уведомлений под Windows Phone 7 оказалась самой простой. Для это достаточно запустить прилагающийся пример из Zend пакета и пример для клиента отсюда.

Если вы хотите сообщить пользователю о каком-то событии, то мы посылаете Toast-уведомление, но если он его не увидел, то необходимо задействовать LiveTile, чтобы при возвращении в телефон пользователь увидел изменения.

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

Тестирование

Для тестов на устройстве был выбран недорогой телефон Nokia Lumia 710. При тестировании на устройстве приложение ведет себя более плавно и быстрее. Поэтому при разработке, если вы задумываетесь о покупке устройства для тестирования вашего простого приложения, то уверяем вас эмулятора будет достаточно. Исключения составляют тесты производительности, работа с gps, датчиками и т.д.

Обязательно, хотя бы один раз, прогоните приложение по тесту производительности Windows Phone Performance Analysis, это очень просто и не займет много времени.

Регистрация в MarketPlace

Почти исчерпывающее описание есть здесь. Но добавим несколько слов от себя. Если вы регистрируетесь как индивидуальный разработчик, то никаких сложностей не будет. А если вам необходим корпоративный аккаунт (Company), то есть несколько нюансов:

  • Publisher Name указывайте на английском языке
  • основной Email address должен отличаться от Approver email address
  • Approver email address должен быть в домене вашей фирмы (понадобиться для GeoTrust) на адрес Approver email придут инструкции по Identity Verification для этого достаточно:
    • отсканировать свидетельство о регистрации фирмы
    • перевести свидетельство на английский (pdf)
    • распечатать и заполнить форму Identity Verification Form
    • отсканировать Identity Verification Form приложив по центру документ удостоверяющий личность (на англ.), например водительские права

Чтобы загрузить приложение в Windows Market Place вам потребуется Silverlight (к слову завести правильно под Ubuntu Monolight не получилось).

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

Итог

Разработка под эту платформу оказалась очень приятной и довольно гладкой.

В качестве аналитики мы использовали localytics, так сложилось исторически, хотя есть альтернативы (flurry, google analytics, etc).

Топ 3 по устройствам практически вровень примерно по 20% составили Nokia Lumia 800, HTC 7 Mozart, Nokia Lumia 710.

P.S. У вас есть вопросы, предложения или замечены ошибки, пожалуйста, присылайте на wp@mamba.ru. А если вам понравилось то, чем мы занимаемся, то приглашаем к нам в команду.

Ссылка на приложение в Windows Market Place.

Автор: broderix

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js