Портирование дизайна приложения на другую платформу

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

 

Мы занимаемся портированием дизайна для iOS и Android-устройств.

 

Портирование дизайна (ported — перенесённый) необходимо для того, чтобы перенести приложение для работы на другую, не нативную для него, операционную систему. Например, у вас уже есть приложение для iOS, а вы хотите такое же для Android. Вам потребуется помощь специалистов, чтобы портированное приложение сохранило для пользователя привычный интерфейс и набор функций.

 

Казалось бы, проще простого — взять готовое приложение, переписать его под другую ОС и дело в шляпе. Однако это не самый лучший вариант. Визуальные элементы одной ОС будут для другой выглядеть как чужой костюм.

У каждой из них есть стандартный графический набор, от которого нельзя отступать. Можно только посмотреть на developer.android.com в раздел Design и ужаснуться, сколько нужно учесть по дизайну для Android. Эти паттерны полностью описывают структуру мобильного приложения, навигацию, функциональные кнопки и поля, допустимые блоки для страниц, клавиатуры.

 

(Пример паттерна для одного экрана, и этот же паттерн в реальном действии)

 

Как видим, копировать интерфейс, например, с Android на iOS нельзя даже под дулом водяного пистолета. Пользователь привык к определённому типу интерфейса и навигации. Стало быть, будет шокирован, если что не так. Поэтому профи таких казусов никогда не допустят. При портировании дизайна необходимо учесть пользовательский опыт для конкретной ОС. Вот только некоторые параметры, которые могут быть видны невооруженным глазом.

(пример в картинках)

 

Иконки.

У разных ОС могут быть свои иконки для элементов списка. А может не быть вообще. Есть иконки стандартные для отдельно взятой ОС, которые нельзя переносить на другую платформу. Нужно воспользоваться стандартным набором для той ОС, на которую выполняется портирование. Но его недостаточно для уникального приложения. Мы создаём иконки, которые нужны именно вашему приложению и будут смотреться гармонично в рамках другой ОС.

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

Кстати, компании, которые выпускают ОС, имеют патенты на все стандартные изображения (стрелочки и прочие указатели), навигационные движения и методы аутентификации! Вот как все серьёзно.

Одним словом, мы этим живём.

 

Панели вкладок

Они могут находиться в разных позициях экрана устройства. Размещать вкладку туда, где она не предусмотрена данной ОС, бессмысленно. Например, для Android панель вкладки внизу — нестандартное решение. Пользователь этого не поймёт. У него там уже находится панель действий (split action bar). Плюс — будет сложнее программировать. Для iOS все наоборот — вкладка располагается снизу, поэтому нет смысла оставлять ее вверху экрана, если портируем приложение с Android.

Всё должно быть на своем месте.

 

Кнопки.

Могут иметь разные углы, размеры и touch-область. У iOS есть только Home Button. В того же Android функциональных кнопок три и, в зависимости от устройства, могут быть либо физическими, либо на экране. Оставить, например, в Android элементы iOS будет некорректно и непонятно для пользователей. Нужно портировать приложение согласно их ожиданиям.

 

Размеры экрана.

Приложение, которое не поддерживает больший размер экрана, обычно масштабируется, то есть растягивается и «мылится». Изображение в таком случае выглядит не очень приятно. А вам нужно приложение без сюрпризов, верно?

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

Для iOS все намного проще. Устройства, как и саму ОС разрабатывает одна компания Apple. Соответственно, нет такого разнообразия размеров экранов, как в Android, зато есть ясность, как работать.

 Динамические элементы

Для iOS можно предусмотреть выпадающих списки и всплывающие окна. Но это нестандартное, неродное решение для неё. Вся iOS продумана таким образом, чтобы избавиться от дополнительных элементов. Для Android эти элементы стандартные. Кроме того, архитектура страниц в Android позволяет опцию «назад» на сколько угодно шагов. В нативных приложениях для iOS этого нет. Более того, — и не нужно, так разработан UX-дизайн этой системы. Как правило, при разработке приложения можно добавить в нём кнопку «назад», но в ней нет прямой надобности. Больше пользы будет от приложения, портированного по принципу «как родное». Если переносить приложение с  Android на iOS, придётся найти элегантное решение.

 

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

 

Как мы с вами работаем?

  1. Выясняем задачи. На этом этапе говорите нам все свои пожелания и размышления. А мы объясним вам всё, что спросите.
  2.  Составляем план. Пропишем в нём все детали работы и оговорим сроки выполнения.
  3.  UX-дизайн. В зависимости от платформы, на которую выполняется портирование, разрабатываем UX-карту и прототипы экранов приложения.
  4.  UI-дизайн. Выполняем дизайн нескольких самых важных экранов и презентуем вам для утверждения.
  5.  Вы смотрите в своем устройстве, как всё здорово получается, и утверждаете нашу работу.
  6.  Мы завершаем оставшуюся часть работы и передаем вам.
  7.  Вы счастливы — теперь ваше приложение доступно для ещё одной платформы!
 Что вы получаете в итоге?

При стандартном заказе вы получаете пакет документов с таким содержанием:

  • дизайн экранов приложения и его исходные документы (в форматах Psd, Ai, Eps);
  • иконка приложения в нужных размерах;
  • UX-карта экранов;
  • UI-kit приложения;
  • файлы порезки динамических элементов;
  • GUI-документ приложения;
  • набор шрифтов.

Обращайтесь в App2World прямо сейчас.