план построения ис мобильного приложения

Основные этапы разработки мобильных приложений

план построения ис мобильного приложения. b 53f74142b4713. план построения ис мобильного приложения фото. план построения ис мобильного приложения-b 53f74142b4713. картинка план построения ис мобильного приложения. картинка b 53f74142b4713.
Перед вами — набор типичных этапов в создании мобильного приложения с нуля, которые студия Componentix практикует к своей деятельности.

Бизнес-анализ целевого рынка

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

Перед началом разработки необходимо получить от заказчика техническое задание (ТЗ) или предоставить ему бриф для заполнения и дальнейшей работы по этому документу.

После получения заполненного брифа и / или ТЗ можно приступать к прототипированию и составлению пользовательских профилей для оценки возможностей итогового продукта.

На основе видения дизайнера, бизнес-оценки и согласования подробностей ТЗ можно запускать процесс разработки.

Прототипирование

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

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

Написание кода и внедрение технологий

С готовым дизайном приложение переходит к разработчикам: им предстоит на основе языков программирования, фреймворков и различных технологий создать мобильное приложение в соответствии с ТЗ, брифом и утвержденным прототипом.

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

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

Создание предрелизной версии

В результате серии тестов и доработок приложения должна быть получена рабочая версия приложения. Именно эту версию и предстоит добавить в магазин приложений: Apple App Store, Google Play, магазин приложений Windows Phone (в зависимости от того, для какой платформы ведется разработка) или любой аналогичный сервис для дистрибуции приложений.

Добавление приложения в магазин

Финальный этап работы студии — добавление приложения на ревью в один из указанных выше магазинов приложений (в случае Componentix речь идет об App Store или о Google Play).

Необязательный этап: дальнейшая техническая поддержка и маркетинговое продвижение приложения

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

Поскольку эти услуги предоставляются отдельно от основного пакета услуг, то и оплачиваются отдельно. Помимо маркетинга и техподдержки возможно также размещение приложения в App Store или Google Play от имени заказчика (услуга White Label), обеспечение серверной поддержки для приложения.

Источник

Разработка мобильных приложений: с чего начать

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

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

Тенденции

Чем пользуются владельцы мобильных телефонов?

Статистика

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

За 2012 год в РФ продано порядка 12,6 миллионов смартфонов: Россия считается одной из быстроразвивающихся в этом плане стран.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Если взглянуть на такой же график по всему миру, то увидим, что и тут Android в авангарде с ¾ рынка.

За второй квартал 2012 года по всему миру было продано 104 миллиона телефонов Android — как население довольно крупной страны. Но нас как мобильных разработчиков интересует не только наличие смартфона, но и то, как с ним работают. Существенная доля обладателей устройств на Android пользуется ими как обычными телефонами: SMS, звонки — и все. Они не активируют устройство в Google Play, не скачивают приложения.

Не все люди обзавелись телефонами в 2012 году, поэтому реальное распределение сил среди мобильных операционных систем демонстрирует наша внутренняя статистика. В эту статистику входят Россия и страны СНГ: Украина, Белоруссия, Казахстан, Узбекистан.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Установка приложений

При выборе платформы, под которую будет разрабатываться приложение, важно знать статистику по уже существующим приложениям. Графики исследовательской компании App Annie от сентября 2012 года показывают, как растут два конкурирующих магазина Apple и Google.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.
план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

По количеству скачиваний на первом месте Google Play: больше устройств, больше скачиваний, больше трафика и рост при этом +66% по сравнению с январем 2012 года. Рост iOS оказался в два раза меньше, порядка 30%. Но главный график – какую выручку приносят пользователи. И здесь ситуация в корне иная. Проще зарабатывать на iOS, но деньги есть и в Google Play, если уметь их забирать.

Типы мобильных приложений

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

Мобильные сайты, веб-приложения

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Это самый распространенный тип приложений для мобильных устройств. Современные смартфоны в состоянии отобразить обычный сайт. Им доступно все то, что мы привыкли видеть в десктопных приложениях — поддержка HTML5 делает свое дело. Помните, что веб-приложения отлично подходят для стартапа: именно они позволяют получить большой результат за маленькие деньги и за небольшой срок. Еще один плюс мобильного сайта по сравнению с другими мобильными приложениями – это кроссплатформенность. Однако есть и минус, притом весомый: с ними достаточно сложно заработать.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

При таком подходе вы получаете доступ ко всем плюсам API операционной системы: приложение обрастает push-уведомлениями и другими приятными плюшками, кроме того, теперь ваш продукт можно размещать в сторах. При этом основной контент все еще представляет собой платформонезависимую страничку с версткой, размещенную на сервере. Это позволяет вносить косметические изменения в продукт без выпуска новой версии: достаточно залить изменения на сервер. Гибридные приложения – отличное решение для тех, кто начинает бизнес или хочет проверить свою идею, показать ее инвестору, друзьям.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Этот вид приложений самый ресурсоемкий, но вместе с этим он позволяет по максимуму использовать возможности, предлагаемые каждой конкретной операционной системой. Как следствие, нативные приложения выигрывают как по функционалу, так и по скорости работы у других типов мобильных приложений. Именно к такому подходу сейчас приходят те компании, которые делали комбинированные приложения. Например, Facebook начинала с комбинированного приложения: нативные контролы (переключатели, вкладки и так далее) и веб-страница в качестве контента. Несмотря на то, что это неплохое решение, проблемы с производительностью приводят к тому, что разработчики отходят от комбинации с вебом.

Статистика

Приведу статистику скачиваний на примере наших мессенджеров.

Во-первых, у нас есть приложение ICQ, которое постоянно развивается: среди последних изменений стоит отметить аудиозвонки. Второй мессенджер Mail.Ru Group – Агент. В Агенте реализован примерно тот же функционал, и, хотя у него была немного другая история развития, мы выпускаем версии практически под все платформы и его можно найти в любом сторе.

Основная разница между двумя этими приложениями – это их аудитория. ICQ – это международный продукт. Программа скачивается не только в России, им активно пользуются жители Европы, Латинской Америки. Агент же изначально делался в России и для русскоязычных пользователей.

Тем интереснее сравнить статистику скачиваний из магазинов.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.
план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Большая часть 62% иностранной аудитории идет в Google Play. Примерно 1/5 идет в AppStore, 14% — в Ovi Store. И уже оставшиеся 5% делят магазины для платформ Windows Phone (4%) и Samsung Bada (1%). С Агентом ситуация в корне другая: доли Google Play и Ovi примерно одинаковые. Ну а 10% AppStore наглядно демонстрируют любовь к «яблочной» продукции в нашей стране.

Процесс создания мобильного приложения

Итак, перейдем к самому вкусному: процессу разработки мобильного приложения.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

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

Важно понимать, что за каждым пунктом в вашем to-do листе скрывается огромный айсберг функционала. Старайтесь фрагментировать и конкретизировать задачи. Крупные хотелки лучше всего разделить на несколько этапов (релизов в стор). Однако это тема отдельной дискусии, вернемся к этапам создания приложения.

Проектирование и дизайн

После составления User Story начинается проектирование и разработка дизайна.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.
план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

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

При разработке дизайна обязательно используются гайдлайны.

Гайдлайн в общем понимании – это документ, который выпускает компания, и по которому дизайнеры и разработчики понимают принцип построения взаимодействия приложения с пользователем. Условно говоря, для iOS кнопки надо делать круглыми, а для Windows Phone – квадратными. Однако мы используем и внутренние гайдлайны для разработчиков. Таким образом результат работы дизайнера чаще всего состоит из макетов, гайдлайнов и нарезки графики.

Макеты лучше всего подавать «перелинкованными», например с помощью ProtoTypr, чтобы была понятна логика переходов. Гайдлайны содержат в себе информацию об отступах, размерах, визуальных эффектах, механике анимации и пр. Этот этап можно пропустить, если в вашем проекте один дизайнер и один разработчик, сидящие рядом друг с другом. Третья часть результата — нарезка графики — должна содержать минимум необходимых графических ресурсов (заботимся о весе приложения), иметь версии для разных разрешений экранов. Чаще всего мы рисуем для ретины и xhdpi-экранов. Далее идет подготовка для неретины и mdpi автоматизированными средствами (если допустимо их использование). Чаще всего руками приходится готовить hdpi-ресурсы.

Передача в разработку. Обсуждение и необходимые правки описания

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

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

Существует немалое количество способов протестировать приложение.
В мобильной разработке тестировщик – это человек, вокруг которого одни телефоны. У нас есть огромный шкаф, в котором лежат как старые телефоны, так и самые свежие новинки. Внутри мы стараемся тестировать по тест-кейсам. Если внедряется новая фича, по ее описанию составляется тест-план.
Существуют сервисы, помогающие в тестировании. Мы используем HockeyApp – приложение, позволяющее раздавать наш продукт бета-тестерам. Мы пишем в социальных сетях: «Ребята, у нас новое крутое приложение. Кто хочет попробовать?» Желающие получают билд, пользуются приложением, а сервис собирает статистику, составляет креш-репорт и отправляет все это нам.
Также есть сервисы, позволяющие протестировать приложение на разных операционных системах — например, все Android-прошивки версии 2.1 или 2.3. Вы отдаете приложение, сервис скриншотит весь путь, который вы задали, присылает картинки вам на почту, и вы проверяете, все ли в порядке.

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

Важно понимать, что люди более склонны оставлять негативные комментарии. Если у человека все хорошо, он чаще всего просто пользуется приложением, не комментируя. При стабильной работе наших приложений мы получаем 40-50 комментариев ежедневно. В день ошибки количество записей может доходить до 400 на одной платформе. Поэтому имейте в виду, что комментарии – это не полная оценка вашей работы, скорее еще один баг-трекер.

Изменить ситуацию может довольно распространенных «хак» — окно Rate Us. С предложением оставить положительный комментарий в сторе, а в случае проблем написать разработчику. Эффект достаточно сильный, главное — правильно продумать алгоритм показывания диалога юзеру.

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

Еще один интересный мониторинговый сервис – Flurry. Он помогает собирать клиентскую статистику. Flurry предоставляет отчет о том, что делает пользователь в вашем приложении: сколько раз он нажал на кнопку, сколько раз возвращался в приложение и более общие параметры — аудитория, география, пол, возраст и пр.

В некоторых мобильных продуктах мы также используем подсчет клиентской статистики с помощью Google Analytics. Разницы при сравнении с Flurry нет практически никакой. Минусы в скорости работы и обработки логов есть в обоих случаях, однако, если вы привыкли работать с гугловским интерфейсом, можете использовать этот инструмент.

Несмотря на большое количество сторонних сервисов, у нас есть собственная статистика. Какими бы хорошими не были внешние источники, их нужно проверять. Мы способны сами оценивать статистику, но для этого необходимо строить инфраструктуру для генерации отчетов, еженедельной отправки отчетов по email и других вещей, упрощающих жизнь. Поэтому нам проще использовать такие сервисы, как Flurry и Distimo, а к внутренним логам обращаться при возникновении вопросов. Наша практика показывает, что такой подход оправдан: периодически наши данные и данные сервисов несколько разнятся. Если вы склонны проверять статистику, используйте разные источники.

Специфика
Заключение

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

Источник

Построение Android приложений шаг за шагом, часть первая

план построения ис мобильного приложения. b3e38d99e09442b3b755aaf894d39daf. план построения ис мобильного приложения фото. план построения ис мобильного приложения-b3e38d99e09442b3b755aaf894d39daf. картинка план построения ис мобильного приложения. картинка b3e38d99e09442b3b755aaf894d39daf.

Введение

Для лучшего понимания и последовательного усложнения кода, разделим проектирование на два этапа: примитивная (минимально жизнеспособная) и обычная архитектура. В примитивной обойдемся минимальным количество кода и файлов, потом улучшим этот код.
Все исходники вы можете найти на github. Бранчи в репозитории соответствуют шагам в статье: Step 1 Simple architecture — первый шаг, Step 2 Complex architecture — второй шаг.
Для примера попробуем получить список репозиториев для конкретного пользователя с помощью Github API.

В нашем приложении мы будем использовать Rx, поэтому для понимания статьи необходимо иметь общее представление об этой технологии.Рекомендуем почитать серию публикаций Грокаем RxJava, эти материалы дадут хорошее представление о реактивном программировании.

Шаг 1. Простая архитектура

Разделение по слоям, MVP
При проектировании архитектуры будем придерживаться паттерна MVP. Более подробно можно почитать тут:
https://ru.wikipedia.org/wiki/Model-View-Presenter
http://habrahabr.ru/post/131446/

Разделим всю нашу программу на 3 основных слоя:
Model — тут получаем и храним данные. На выходе получаем Observable.
Presenter — в данном слое хранится вся логика приложения. Получаем Observable, подписываемся на него и передаем результат во view.
View — слой отображения, содержит все view элементы, активити, фрагменты и прочее.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Model

Retrofit

Для упрощения работы с сетью используем Retrofit. Retrofit – библиотека для работы с REST API, она возьмет на себя всю работу с сетью, нам остается только описать запросы с помощью интерфейса и аннотаций.

Интерфейс для получения данных о репозиториях:

Работа с данными, POJO

Retrofit (и GSON внутри него) работают с POJO (Plain Old Java Object). Это значит, что для получения обьекта из JSON вида:

Нам понадобится класс User, в который GSON запишет значения:

Руками генерировать такие классы естественно не нужно, для этого есть специальные генераторы, например: www.jsonschema2pojo.org.

Скармливаем ему наш JSON, выбираем:

Source type: JSON
Annotation style: Gson
Include getters and setters

и получаем код наших файлов. Можно скачать как zip или jar и положить в наш проект. Для репозитория получилось 3 обьекта: Owner, Permissions, Repo.

Presenter

Презентер знает что загрузить, как показать, что делать в случае ошибки и прочее. Т.е отделяет логику от представления. View в таком случае получается максимально «легкой». Наш презентер должен уметь обрабатывать нажатие кнопки поиска, инициализировать загрузку, отдавать данные и отписываться в случае остановки Activity.

View реализуем как Activity, которое умеет отображать полученные данные, показывать ошибку, уведомлять о пустом списке и выдавать имя пользователя по запросу от презентера. Интерфейс:

В результате у нас получилось простое приложение, которое разделено по слоям.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

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

Часть 2. Усложненная архитектура

Добавим новую функциональность в наше приложение, отображение информации о репозитории. Будем показывать списки branches и contributors, они получаются разными запросами у API.

Retrolambda

Работа с Rx без лямбд — это боль, необходимость каждый раз писать анонимные классы быстро утомляет. Android не поддерживает Java 8 и лямбды, но на помощь нам приходит Retrolambda (https://github.com/evant/gradle-retrolambda). Подробнее о лямбда-выражениях: http://habrahabr.ru/post/224593/

Разные модели данных для разных слоев.

Как видно, мы на всех трех слоях работаем с одним и тем же объектом данных Repo. Такой подход хорош для простых приложений, однако в реальной жизни мы всегда можем столкнутся со сменой API, необходимостью изменять объект или чем-то другим. Если над проектом работают несколько человек, то существует риск изменения класса в интересах другого слоя.

Поэтому зачастую применяется подход: один слой = один формат данных. И если изменятся какие-то поля в модели, это никак не повлияет на View слой. Мы можем производить любые изменения в Presenter слое, но во View мы отдаем строго определенный объект (класс). Благодаря этому достигается независимость слоев от моделей данных, у каждого слоя своя модель. При изменении какой либо модели, нам нужно будет переписать маппер и не трогать сам слой. Это похоже на контрактное программирование, когда мы точно знаем какой объект придет в наш слой и какой мы должны отдать дальше, тем самым защищая себя и коллег от непредсказуемых последствий.

В нашем примере нам вполне хватит двух типов данных, DTO — Data Transfer Object (полностью копирует JSON объект) и View Object (адаптированный объект для отображения). Если будет более сложное приложение, возможно понадобятся Business Object (для бизнес процессов) или например Data Base Object (для хранения сложных объектов в базе данных)

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Model

Мы ввели разные модели данных для разных слоев, интерфейс Model теперь отдает DTO объекты, в остальном все также.

Presenter

В Presenter-слое нам необходим общий класс. Презентер может выполнять самые разные функции, это может быть простой презентер «загрузи-покажи», может быть список с необходимостью подгрузки элементов, может быть карта, где мы будем запрашивать объекты на участке, а также множество других сущностей. Но всех их объединяет необходимость отписываться от Observable во избежание утечек памяти. Остальное зависит от типа презентера.

Если мы используем несколько Observable, то нам необходимо отписываться от всех разом в onStop. Для этого возможно использование CompositeSubscription: добавляем туда все наши подписки и отписываемся по команде.

Также добавим в презентеры сохранение состояния. Для этого создаем и реализуем методы onCreate(Bundle savedInstanceState) и onSaveInstanceState(Bundle outState). Для перевода DTO в VO используем мапперы.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Будем использовать активити для управления фрагментами. Для каждой сущности свой фрагмент, который наследуется от базового фрагмента. Базовый фрагмент используя интерфейс базового презентера отписывается в onStop().

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

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Общая схема приложения на втором шаге (кликабельно):
план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Заключение или to be continued…

В результате у нас получилось работающее приложение с соблюдением всех необходимых уровней абстракции и четким разделением ответственности по компонентам (исходники). Такой код проще поддерживать и дополнять, над ним может работать команда разработчиков. Но одним из главных преимуществ является достаточно легкое тестирование. В следующей статье рассмотрим внедрение Dagger 2, покроем тестами существующий код и напишем новую функциональность, следуя принципам TDD.

Источник

8 этапов процесса разработки интерфейса мобильного приложения

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

От переводчика: Роман Гапонов — сооснователь компании Django Stars, которая занимается разработкой веб- и мобильных приложений. Основываясь на личном опыте и опыте своей компании, Роман написал статью о процессе разработки пользовательского интерфейса. Изначально она была размещена на Medium, на английском языке. Перевод этой статьи публикуется нами на Хабре.

Немного приятного: в этой статье (а это уже второй материал о мобильной разработке, первый здесь) есть своеобразная пасхалка, которая позволяет получить скидку на курс Skillbox и агентства Agima по мобильной разработке. Это ребус, который при расшифровке даст слово или название решения из сферы разработки мобильных интерфейсов. Скидка за угаданный ребус — 10%. Ребусы есть и в других наших статьях из этой серии. Скидки суммируются, и если собрать их все, можно получить курс за смешную цену.

Создание концепции

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

На этом этапе могут быть затронуты и такие аспекты, как размеры и расположение кнопок и форм, шрифты и многие другие аспекты структуры интерфейса. Давайте сравним финтех-приложение и сервис такси-компании.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.
Финтех-приложение. Много иконок, они не слишком крупные, но работать с ними удобно. Обилие разнообразных функций

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.
Приложение одного из такси-сервисов. Кнопок не так много, и они большие, чтобы сложно было промахнуться

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

Брейнсторминг и эскизы

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Как только концепция проекта ясна, двигаемся к следующему этапу — брейнстормингу. Он нужен, чтобы превратить идею интерфейса в реальность. Мы в Django Stars берем ручку и лист бумаги — это быстрее, чем использование таких продвинутых инструментов, как Balsamiq Mockups, Sketch, Photoshop и InVision.

Диаграмма переходов

план построения ис мобильного приложения. 54580ce403ffca3fe6ec04be6d6409f2. план построения ис мобильного приложения фото. план построения ис мобильного приложения-54580ce403ffca3fe6ec04be6d6409f2. картинка план построения ис мобильного приложения. картинка 54580ce403ffca3fe6ec04be6d6409f2.

Создание эскиза дает нам структуру интерфейса. Но как пользователь должен взаимодействовать с ним? Здесь поможет User Flow Diagram. Она проиллюстрирует логику продукта, показав всевозможные способы взаимодействия с интерфейсом, дорожную карту этих взаимодействий и состояние интерфейса на каждом этапе.

Утверждение структуры и диаграммы переходов

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

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

Выбор стиля интерфейса

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Когда клиент все утверждает — можно двигаться дальше. Что будем делать? Выберем стиль интерфейса. Есть множество вариантов: от минимализма и Metro до material design и скевоморфизма. На этом этапе мы просим клиентов прислать несколько ссылок на примеры стиля интерфейса, который им нравится, а также спрашиваем об их планах на ближайшее будущее продукта. Мы уделяем внимание текущим трендам, масштабированию интерфейса, определяем время, которое необходимо на разработку и внедрение дизайна.

Подтверждение стиля

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

Курс создан силами Skillbox и Agima. 4-месячная программа обо всех инструментах, без которых невозможна разработка мобильных продуктов.

Прототипирование, дизайн и их демонстрация

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

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

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

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

Макетная демонстрация позволяет продемонстрировать проект дизайна, приближенный к реальности. Здесь все элементы и контент статичны, но воспринимается такая форма нагляднее предыдущей. И создать презентационную модель можно достаточно быстро.

план построения ис мобильного приложения. 476c7aa1ff7ebe56452d1b6de70fddf8. план построения ис мобильного приложения фото. план построения ис мобильного приложения-476c7aa1ff7ebe56452d1b6de70fddf8. картинка план построения ис мобильного приложения. картинка 476c7aa1ff7ebe56452d1b6de70fddf8.

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

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

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

план построения ис мобильного приложения. image loader. план построения ис мобильного приложения фото. план построения ис мобильного приложения-image loader. картинка план построения ис мобильного приложения. картинка image loader.

А это уже видеозапись взаимодействия пользователя с приложением. Создание демонстрационной модели такого типа требует максимального количества времени, ведь необходимо не только сделать прототип, но еще и записать на видео работу с ним. Тем не менее это очень наглядная модель.

Утверждение дизайна

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

В качестве вывода

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *