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

Создаем быстрый прототип мобильного приложения

На хабре уже присутствует некоторое количество статей, посвященных процессу прототипирования в разработке программного обеспечения. Есть достаточно фундаментальные статьи с обзорами стандартов и расчетами, есть статьи про прототипирование устройств, есть цикл из двух статей про процесс выбора инструмента для прототипирования. К сожалению, процесс создания прототипов мобильных приложений освещен очень скудно – в виде единственной статьи в 2010 году, и пара слов в статье Разработка мобильных приложений: с чего начать.

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

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

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

В ритме сегодняшней жизни при достаточно высокой цене человеко-часов, очень важно работать быстро и, желательно, без потери качества. Для этого было введено понятие “быстрое прототипирование”. Что поможет нам перейти от простого прототипа к быстрому? Это развивающиеся технологии, наличие огромного количества сервисов и, конечно, собственные мозги.

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

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

Как ускорить и упростить «бумажное» прототипирование

Скетчпад (SketchPad, Скетчбук, sketchbook)

это блокнот разлинованый макетами телефонов разных платформ. Имеет точечную сетку на «экране».
Вы можете распечатать аналог скетчпада самостоятельно по шаблонам: habrahabr.ru/post/152075

UI – блокнот

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

Лекала.

Штампы

В российских магазинах тоже отсутствуют, но можно заказать у компании по изготовлению печатей, или сделать самому из куска резины, если руки достаточно прямые. К сожалению, чернила – вещь довольно маркая, поэтому лучше все-таки не пытаться экономить и купить или распечатать скетчпад.
www.cultofmac.com/224355/iphone-stamp-for-ui-sketching

На этом с обзором «бумажных» инструментов закончим, и перейдем к самому интересному:

Программные решения для создания быстрых прототипов

Keynotopia
keynotopia.com
Позволяет быстро создавать макеты с помощью базы шаблонов, добавлять ссылки на кнопки, комментировать и делиться с коллегами для тестирования результатов прототипирования. Приложение платное, стоимость зависит от ваших запросов.

POP
popapp.in
Инструмент для любителей рисовать руками. Рисуете, качаете приложение на iPhone, фоткаете, создаете раскадровку, тестируете и делитесь с коллегами. Все очень просто.

RATCHET
maker.github.io/ratchet
habrahabr.ru/post/157819
Создается прототип, максимально приближенный к реальному приложению. Может загружаться на компьютер или телефон, но без навыков HTML, CSS и JS не обойтись.

Proto.io
proto.io
SaaS решение для прототипирования. Сервис нам очень понравился, но в бесплатный пакет входит очень скудный набор функций, поэтому он фактически бесполезен. За действительно рабочий инструмент придется заплатить не менее 24$.

Codiqa
codiqa.com
Еще одно облачное решение. Та же модель монетизации, как и в proto.io. Кому-то этот сервис может показаться удобнее.

Mockingbird
gomockingbird.com
Ситуация противоположна Invision: имеется конструктор, но демонстрировать не очень удобно. Да и под мобильную разработку подходит плохо.

Lumzy
www.lumzy.com
Прошлый век. Под смартфоны тоже не удастся ничего создать.

iPhone Mockup Web App
iphonemockup.lkmc.ch
Отличительной особенностью является имитация рисунка приложения и самого телефона от руки, но это не оправдывает отсутствия возможности создавать связи между макетами.

Axure RP
www.axure.com
habrahabr.ru/post/101938
Программа достаточно функциональная, считается одним из лидеров на рынке. Подходит для прототипирования сайтов и приложений под iPhone и iPad.

AppGyver
www.appgyver.com
На выбор даются шаблоны Android, iPhone и iPad. Протестировать здесь вы сможете только логику приложения без дизайна, поскольку работа ведется с уже готовыми набросками приложений. В бесплатном статусе вы сможете протестировать сервис с 3 скриншотами. На мобильное устройство можно будет установить приложение, с помощью которого возможно оценить результат работы.

Fluid Ui
www.fluidui.com
Удивительно, но этот сервис обладает всеми необходимыми функциями. Может быть, он не так изящен, как другие, зато позволяет и самостоятельно собрать прототип в конструкторе, и залить уже готовые макеты, проставить связи между страницами приложения, отправить получившийся макет для просмотра друзьям и коллегам и протестировать его на телефоне. Сервис также поддерживает Windows Phone!

MockFlow
www.mockflow.com
Имеет десктопное приложение и онлайн сервис, что, несомненно, является преимуществом, но простой настолько, что даже скучно.

Mockingbot
www.mockingbot.com
Еще один очень неплохой инструмент, содержащий все необходимые функции, но, к сожалению, поддерживает только iPhone.

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

Balsamiq Mockups for Desktop
www.balsamiq.com
Можно создать как простой схематичный прототип, так и очень детальный с точностью до пикселя. Рисованая стилистика делает серьезный инструмент веселой игрушкой.

iMockups for iPad
www.endloop.ca/imockups
Рисовать прототипы прямо на iPad? Легко! Для него самого и iPhone, конечно. Качаем приложение и получаем удовольствие от простоты и неплохого результата.

Interface 2
interface2.lesscode.co.nz
Создание динамических прототипов для iPhone и iPad непосредственно на самих устройствах всего за 10 долларов каждое.
Демонстрация дизайна на устройстве без программирования

Justinmind Prototyper
www.justinmind.com
Инструмент, позволяющий создавать интерактивные прототипы сайтов и приложений для iPhone, Android и iPad. Поддерживает множество возможностей, включая работу с жестами ( в прототипах можно реализовать Drag&Drop и т.д.). К сожалению, бесплатная версия ограничена только перелинковкой между шаблонами и 10 МБ места в облаке. Но есть триал на 30 дней

За подсказку спасибо Glebcha

Mockko
www.mockko.com
Бесплатный on-line инструмент для создания прототипов. Поддерживается перелинковка между экранами, просмотр прототипов на iPhone. Собственно, создавать прототипы можно только для iPhone, сайт работает только в Chrome или Safari. Обещают в будущем поддержку также iPad.

За подсказку спасибо n0_quarter

За подсказку спасибо Ivnika

App Cooker
www.appcooker.com
Предлагает создать иконку, простенький прототип приложения и, как киллер-фича, предлагается встроенный инструмент помощи при ценообразовании.

За подсказку спасибо Glebcha

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

Mockabilly
www.mockabilly.com
Уже готовые макеты заливаете на iPhone (поддерживается только эта платформа) и тестируете непосредственно на самом устройстве.

Invision
www.invisionapp.com
Бесплатно доступен только один проект, но если нет необходимости одновременно демонстрировать более одного проекта, то он должен вам понравится, поскольку никаких других ограничений нет. Плата взимается только за увеличение количества проектов.

LiveView
zambetti.com/projects/liveview
Приложение для удаленного просмотра на экране iPhone и iPad прототипа, разработанного и запущенного на Mac.

Вывод

Инструментов для создания прототипирования огромное количество, здесь описаны лишь некоторые из них. Для себя мы остановились на следующем наборе: скетчпад для первоначального прототипирования, и Proto.IO/Fluid UI для создания интерактивных прототипов.

А чем пользуетесь вы?

Большую часть статьи написал мой коллега Александр Кочеванов (aimh), за что ему огромное спасибо

Источник

Прототип мобильного приложения в Adobe XD за два часа

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

Первые варфреймы, схемы переходов, для мобильного приложения из 64 экранов заняли 16 часов моей жизни, 6 подходов по 2–3 часа. Раза три хотелось бросить уже это всё. Проработка интерфейса — занятие сколь интересное, столь и утомительное.

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

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

Стадия 0. Черновик

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

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

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

Черновик. Боковое меню заменила нижняя навигация.

Стадия 1. Начинаем рисовать

К этой фазе мы подходим с общим знанием о вложенности функций и примерным представлением о переходах между экранами. Можно собирать прототип.

Далее опишу скорее не строгую последовательность действий, а дам список советов, к которым пришел пока работал над проектами.

От lo-fi к hi-fi. Речь о степени детализации и стилизации экранов прототипа. В самом начале проработки, как бы вам ни хотелось, постарайтесь не застревать на одном экране, доводя его до «идеала».

Я застревал, поэтому делал прототип столько, сколько получилось. А клиент, на согласованиях уровня идей (прототип именно их и отражает), не вдается в детали, ему важно увидеть что вы уловили смысл (проверено на нескольких заказчиках).

В режиме низкой детализации проще сосредоточиться на структуре приложения и том, как пользователи должны взаимодействовать с ним. Это важный шаг разработки, который заставляет тебя как проектировщика работать с определенным набором проблем, прежде чем вникать в вопросы цвета, стиля, вместо того, чтобы решать, была ли кнопка на правильном расстоянии от текста над ней (это ведь очень важно! Некрасиво же будет).

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

Наборы пользовательских интерфейсов. Чтобы клиент узнал в прототипе знакомые детали, берем на вооружение наборы элементов, с любовью сделанные несколькими дизайн-командами. Внутри Adobe XD есть ссылки на стандартные наборы, но им не хватает примеров использования элементов по стайлгайдам. Поэтому познакомлю с другими ресурсами, на которых остановился сам после отсмотра десятка пакетов:

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

На практике, после проработки 8-9 экранов эти фреймворки дадут о себе знать, потребуют повторного использования. Придерживайте эти болванки рядом с основной рабочей областью и вставляйте как каркас очередного экрана.

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

Тексты Lorem ipsum не создают проблем, хоть и кажутся дурацкими, в условиях ограниченного времени подходят для наших задач. Конечно, «боевые» тексты проекта лучше, но оставьте их на этап тюнинга. Чтобы рыба текста была интереснее, идите к Джулсу из Криминального чтива.

Включаем Prototype. Одноименный режим Adobe XD. В нем мы присваиваем элементам экраны действия, которые мы от них хотим получить. Стрелка «назад» возвращает на предыдущий экран, кнопка «сохранить» сворачивает клавиатуру и отправляет данные на сервер. Взаимодействия в XD тестируются окном предварительного просмотра (Cmd-Enter), которое дает достаточную обратную связь, чтобы убедиться, что приложение работает так, как мы того хотим.

Стадия 2. Спускаемся в детали

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

На этом этапе можно сделать:

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

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

6 главных фишек Xd

Микродействия, открытию которых в процессе работы я был особенно рад.

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

Применение цвета. На языке фотошопа — пипетка. Появляется в правом боковом меню после выбора элемента. Нужно в основном для сливания выбранного элемента с фоном экрана.

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

Блокировка слоя. Когда нужно было выделить, например, нижнее навигационное меню, и немного опустить его вниз, а вместе с ним неизбежно выделяется и фон. Решение — нажать на фон, выбрав его, и Cmd-L. Будет теперь стоять на месте. Блокировать можно несколько элементов одновременно.

Кнопки центрирования. Ставят элемент ровно посередине ширины или высоты одним нажатием на иконку. Находятся в правом верхнем углу.

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Источник

Как сделать прототип приложения без программирования: обзор no-code ресурсов

Вы придумали мобильное приложение, которое определяет по фото, будет ли вкусной картошка фри, или выдает классный ответ на неприятную фразу незнакомца. Что дальше? Сделать простое приложение стоит от 3 тысяч долларов. Прежде чем искать деньги, попробуйте сделать прототип вашей идеи. Так можно проверить, нужен ли ваш продукт аудитории. Даже если вы не умеете программировать, можно использовать сервисы для сборки прототипа приложений.

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

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

Как создают прототип:

Показывают то, что получилось, заказчику и конечным пользователям.

Обрабатывают комментарии, и улучшают прототип.

Этапы показа пользователям и улучшения часто повторяются.

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

Какие еще плюсы прототипа?

Есть классный пример того, как прототип помогает при создании продукта. В фильме The Founder Рэй Крок переосмысливает, как выглядит кухня фаст-фуда. Прежде чем делать Макдональдс каким мы его знаем и любим, владельцы чертят на теннисной площадке кухню и тестируют. Сначала получается так себе, но с третьей итерации они находят идеальное расположение зон на кухне. Если бы они сначала построили ресторан и вложили сотни тысяч в оборудование и проведение коммуникаций, это привело бы к большим убыткам.

После сборки в сервисе получается приложение разных степеней прожарки:

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

Базовый же прототип или приложение можно сделать, опираясь на шаблоны. Например, журналист Арина Тарасова поделилась, как в команде проекта получилось сделать функциональное приложение для Зимнего Суриковского фестиваля искусств в Красноярске, используя сервис Glide:

«Задача была рассказать о фестивале и сделать проект максимально удобным. Мы отказались от идеи представлять проекты на конструкторах вроде Wix, Readymag, Tilda и прочих, потому что они открываются в браузере, что не всегда удобно. Еще QR-коды и аудио с Soundcloud выглядят не очень привлекательно, а мы создали много мультимедийных форматов для проекта.

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

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

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

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

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

Платформа для создания прототипов и прогрессивных web-приложений из Google Таблиц в качестве баз данных для приложений. В 2021 году Glide выпускают новую версию, где таблицы можно будет создавать и редактировать внутри их веб-версии.

Чтобы получилось приложение, структурируйте информацию в таблице, после чего Glide собирает новое приложение. Есть комьюнити, чтобы пообщаться, спросить совета или показать свое приложение.

Продвинутый drag-and-drop конструктор прототипов. Все делается в браузере и есть приложения, чтобы показать прототип пользователям.

Свой прототип можно показать людям на Proto.io Spaces.

Сколько стоит: 15 дней пробный доступ ко всем функциям без привязки карты. От 24 долларов в месяц — можно одновременно делать 5 проектов. Есть скидки для студентов и общественных организаций.

Бесплатное десктопное приложение, делает полностью интерактивные прототипы для любой платформы. Результат можно увидеть на Android, iOS и в браузере.

Сколько стоит: есть пробный период 15 дней со всеми функциями. Но бесплатно можно пользоваться инструментом для создания wireframe.от 19$ в месяц с неограниченным количеством прототипов.

Объединяет неограниченное количество пользователей для планирования, дизайна приложения и создания прототипа.

Превратит дизайн на Фигме в интерактивный прототип и даже нативное приложение без программирования. Есть приложение для тестирования.

Сколько: бесплатно неограниченное количество проектов, но можно поделиться проектом не более трех раз, на проекте будет лого ресурса. Платные подписки от €19 в месяц. Они позволяют делиться проектом без ограничений и включают техническую поддержку через электронную почту. В тарифе от €49 в месяц вы добавляете свой брендинг и получаете техподдержку вплоть до публикации приложения.

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

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

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

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

При помощи своего отдельного продукта может превратить ваш прототип на бумаге в интерактивный прототип. Сфотографируйте свои наброски, свяжите объекты, которые должны быть интерактивными с другими объектами и экранами

В этом конструкторе больше всего функций для командной работы с дизайнером. У Invision есть плагин Craft, который превратит дизайн-макет в прототип прямо в Sketch. Показать прототип пользователю можно через приложение. Если возникли сложности, можно задать вопрос официальному аккаунту техподдержки в Twitter.

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

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

Еще есть вариант зарегистрироваться на обучающих сайтах. Например, No Code в платной подписке предлагают личные консультации и групповые сессии по созданию приложения. На Makerpad можно спросить на форуме и посмотреть дополнительные туториалы, а в платной подписке получать индивидуальную поддержку.

Источник