Портирование дизайна с телефона на планшет

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

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

Большая разница

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

Вот существенная разница в устройствах, влияющая на дизайн.

Назначение устройства

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

Параметры экрана

Смартфоны и планшеты очень разнятся параметрами экрана, влияющими на качество отображения графики. Большинство смартфонов имеют диагональ монитора не более 7». Экраны планшетов варьируются в размерах от 7» до 10» и более.

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

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

Ориентация (Orientation)

Здесь всё просто. Ориентация бывает

  • вертикальная (портретная);
  • горизонтальная (ландшафтная).

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

UX-прототипы

Большой размер добавляет свободного пространства, которое необходимо реализовать. Также функциональность смартфонов и планшетов отличается задачами и эргономикой. Смартфон больше предназначен для управления одной рукой, планшет — двумя. Это значит, что шаблоны экранов приложения следует изменить, исходя из особенностей другого устройства. (Пример, картинка)

А что, если не портировать?

Если установить на планшет версию приложения, которая предусмотрена только для смартфона (отсутствует соответствующий графический пакет), то изображение на экране может быть с «сюрпризом» в виде некорректной графики. Также программой станет трудно управлять. У пользователя возникнет диссонанс между новым и привычным опытом использования (UX) и, как следствие, снизится юзабилити приложения.

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

 Чем выгодна адаптация со смартфона на планшет?

Для качественного воспроизведения приложения на любом устройстве следует разработать графический пакет экранов специально для планшетов. Это позволит вашему приложению правильно отображаться на устройствах любого размера. Идеально портированное на планшет приложение визуально практически не отличается от «смартфонного». Его можно смело устанавливать и работать, не меняя своих пользовательских привычек. У вас появляется возможность создавать дополнительный контент для пользователей планшетов и существенно расширить аудиторию потенциальных клиентов.

 

Чем мы вас порадуем?

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

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