в каком приложении создается интерактив мобильного приложения
Введение в дизайн мобильных приложений
Хотите создавать цифровые продукты для мобильных устройств? Вот что нужно знать в первую очередь.
Качпер Рудуха
(Kacper Ruducha)
Графический дизайнер из Варшавы. Рисовал с детства, но не понимал, что делать со своими рисунками, — пока не пришёл в графдизайн. Мечтает о своей дизайн-студии. Ведёт блог на Medium.
Перевожу, пишу, редактирую. Люблю живую речь.
Уважаю букву Ё.
Формализм мастдай.
Мобильность победила. Сотовых телефонов в мире намного больше, чем ноутбуков и десктопов, и они создают больше интернет-трафика. Ниже, на сравнительной диаграмме, отчётливо виден переломный момент, когда наступила так называемая эпоха пост-ПК:
На рубеже 2016 и 2017 годов мобильные телефоны вырвались вперёд, и в ближайшее время эта тенденция вряд ли изменится. На графике представлен только интернет-трафик, но есть ещё и нативные приложения. Поэтому можно сказать, что мобильник — король цифрового мира.
Android против iOS
Сегодня у нас дуополия (от латинского «два» и греческого «продаю». Ситуация, при которой есть только два продавца определённого товара, ведущие независимую друг от друга политику. — Ред.). Две главные мобильные операционки — Android от Google и iOS от Apple. По данным StatCounter Global Stats, на март 2019 года их доли на рынке составляют 75,33% и 22,4% соответственно:
Пока две собаки грызутся за кость, третья с ней убегает, не так ли? Не в этом случае. Никогда ещё положение остальных игроков не было столь плачевным. Два процента рынка — вот всё, что им осталось, и заманить к себе разработчиков будет непросто.
О чём нужно помнить дизайнерам мобильных приложений — неважно, работаете вы с Android или же с iOS?
Опирайтесь на соглашения платформы
Работа с приложениями должна быть привычной и интуитивно понятной даже новым пользователям, поэтому Google и Apple призывают разработчиков унифицировать интерфейсы нативных приложений. И дают рекомендации, как это сделать.
Для Android написан Google Material Design, а для iOS — Human Interface Guidelines. Непременно добавьте эти странички в закладки, вы будете часто возвращаться к ним при работе. Проштудируйте их, познакомьтесь с образцами нейминга, дизайна и юзабилити. Не забывайте, что документы эти регулярно обновляются, поэтому пересматривайте их время от времени, чтобы быть в курсе изменений.
Не считайте эти документы чем-то непреложным. Это просто рекомендации, а не строгие инструкции. Они вам в помощь, но не обязательно следовать им всегда и во всём. Можете даже смешивать рекомендации и применять элементы, характерные для одной платформы, на другой.
Если вы хотите разрабатывать для iOS, а раньше пользовались только устройствами на Android, очень вам советую походить с айфоном. Вы переключитесь, познакомитесь с яблочным интерфейсом и лучше поймёте его пользователей.
Проектирование и инструментарий
Создание мобильного приложения мало чем отличается от разработки других цифровых продуктов. Обычно всё происходит так:
Части продукта, выполняющие небольшую конкретную задачу.
Что происходит с инструментами
для UX и UI-дизайна
С тех пор как цифра пришла на смену бумаге, инструменты для UX- и UI-дизайнеров развивались стремительнее всех прочих дизайнерских программ. И я вижу две основные тенденции.
Во-первых, пора монополий прошла: пока ещё легко выбрать предпочтительный инструмент для каждого этапа проектирования, но всё слишком быстро меняется. Например, дизайнеров всё больше привлекают приложения Figma и Adobe XD, бросившие вызов Sketch.
Во-вторых, инструменты становятся самодостаточными, а это значит, что вы можете охватить весь процесс разработки, используя только одно программное решение: просто взгляните на InVision Studio.
Особенности мобильного дизайна: помните об ограничениях.
Где-то я прочёл, что творчества без ограничений не бывает. Проектируя для мобильных телефонов, обратите внимание вот на что:
Меньший размер дисплея
На деле это означает, что на экране помещается меньше элементов. Привычная навигация по сайту тоже отменяется. Нужно иначе отображать содержимое и сократить путь пользователя.
Проектирование для сенсорного экрана
Забудьте про клавиатуру и мышку, теперь приложением управляют касания и жесты. Кликабельные элементы должны быть крупнее, чтобы в них легко было попасть пальцем.
Ограничения трафика и производительности
Остерегайтесь тяжёлых файлов и форматов мультимедиа, для которых нужно загружать много данных из интернета, — это может влететь пользователям в копеечку. Следите, чтобы количество обращений к API, отправляемых вашим приложением, не снижало общую производительность сервера.
…и не забывайте о возможностях
Мобильным приложениям доступно больше возможностей устройства, и они используют их лучше, чем традиционные настольные или веб-приложения. У вас есть прекрасный шанс погрузить пользователей в продукт, представляя программное и аппаратное обеспечение как единое целое.
И ещё один общий совет. Если вы решили, что мобильное приложение станет частью вашей цифровой стратегии, сразу продумайте его роль в ней. От того, будет ли оно основной точкой входа для ваших пользователей или дополнением для другой площадки или сервиса, зависит общее направление проектирования.
Топ-10 инструментов для создания мобильных приложений
Ваш планшет работает на Android, а вам нравится какое-то приложение для iOS? Как быть в такой ситуации? Покупать и носить с собой еще один планшет? Несколько студентов Колумбийского университета нашли более удобное решение. Они разработали технологию Cider, которая позволяет запускать iOS-приложения на смартфонах и планшетах под управлением Android.
Cider не использует виртуальную машину: iOS-приложения запускаются непосредственно на Android-устройстве. Для этого Cider дополняет операционную систему Android полным комплектом библиотек iOS и модифицирует среду выполнения кода таким образом, чтобы «убедить» приложение, что оно работает в среде Apple XNU. Обнаружив точно такой же программный интерфейс взаимодействия с операционной системой, каким обладает iOS, приложение не замечает разницы, запускается и нормально работает.
Самой популярной в мире операционной системой для смартфонов и планшетов в последние годы стал Android. Но многие разработчики приложений все еще предпочитают использовать в качестве стартовой платформы для своих проектов iOS. Дело в том, что владельцы iPhone и iPad привыкли тратить на мобильные приложения намного больше денег, чем владельцы Android-устройств. Поэтому далеко не все разработчики утруждают себя одновременной разработкой версий для Android и iOS, пока нет уверенности, что приложение окажется востребованным.
Как лучше всего создавать собственные приложения для мобильных устройств? Для этой цели существует довольно много разных средств разработки, и все вместе они предоставляют почти полную свободу творчества — как любителям, так и профессионалам. Мы советуем обратить внимание на 10 инструментов, предназначенных для быстрого и удобного программирования. Некоторые из них рассчитаны на неопытных разработчиков: достаточно лишь базовых знаний в области программирования, чтобы создать готовое приложение для Android или iOS — пусть и не слишком сложное. Это необходимо множеству компаний, которые не располагают собственными IT-специалистами высокой квалификации, но стремятся быть «как все» и обеспечить взаимодействие со своими клиентами через их гаджеты.
Appery.io
Разработчик может подключиться к любому API и использовать облачную базу данных, связав ее со своим приложением. База будет храниться в Сети, на серверах Appery.io.
TheAppBuilder
TheAppBuilder предоставляет разработчику несколько ценных возможностей, ориентированных на бизнес. Во-первых, можно защищать общедоступные и приватные приложения паролями. Во-вторых, можно без использования языка программирования создавать условно-бесплатные приложения, подключающие дополнительные функции после оплаты. В-третьих, можно создать виртуальную библиотеку и управлять контентом, распространяемым через приложение. В-четвертых, сервис предлагает дизайнерские инструменты, позволяющие оформить приложение в заданном стиле — например, в узнаваемом стиле бренда, для которого оно создается.
Good Barber
Appy Pie
Самая важная особенность Appy Pie заключается в том, что в итоге получается универсальное приложение на основе HTML5, которое будет работать сразу на всех платформах, о которых говорилось выше. В приложение можно добавить push-уведомления для рассылки пользователям, рекламные модули, новостные ленты, аудио– и видеоматериалы, функции распознавания QR-кодов и отслеживания местоположения пользователя по GPS.
Sencha Touch
Если пользователь не профессиональный программист, то разобраться в этой системе ему будет непросто. Впрочем, он сможет обратиться в службу технической поддержки, и специалисты Sencha Touch помогут в разрешении трудных вопросов.
AppMachine
AppMachine обладает удобной, хорошо продуманной функцией предварительного тестирования приложения в ходе разработки. Частично готовое приложение можно установить на свой смартфон или планшет и проверить в реальной работе. Как только приложение будет полностью готово, его можно опубликовать в Google Play или отправить на согласование модераторам App Store — это делается предельно просто, всего за несколько секунд.
MobileNation
MobileNation особенно полезен тем, кто не собирается зарабатывать на разработке мобильных приложений, а хочет использовать их преимущественно в презентационных целях. Например, ресторан может сделать свое меню с фотографиями — вот и вся интерактивность. Зато разобраться, как это сделать, сможет даже человек, далекий от компьютерной сферы.
Mobile Roadie
В приложение, создаваемое с помощью Mobile Roadie, можно переносить любой контент и любые строки готового кода. Кроме того, API не зависит от языка, так что можно передавать данные в разных форматах, включая XML, JSON, PHP, CSV и HTML. Например, можно взять открытый исходный код какой-либо программы для Linux и сделать его аналог для Android.
GameSalad
Интерфейс GameSalad можно назвать стандартным: разработчик перетаскивает нужные элементы на нужную страницу и таким образом создает дизайн игры. Для этой работы не обязательны знания по части программирования. Есть встроенный редактор карт и персонажей игры. Создать главного героя так же просто, как заполнить регистрационную анкету — достаточно представить себе, каким он должен быть.
BiznessApps
Интерфейс BiznessApps позволяет создавать готовые типовые приложения буквально за несколько минут. Есть удобная функция предпросмотра в режиме реального времени: на одном экране разработчик вносит изменения в функции программы, а в другом — видит плоды своего труда. Чтобы помочь коммерсантам стать еще и программистами, для абонентов сервиса проводятся онлайн-курсы, объясняющие, как создавать красивые и удобные мобильные приложения и какие тренды наиболее важны в сфере мобильных продаж.
26 лучших инструментов для разработки мобильных приложений в 2019 году
Как разработать мобильные приложения?
Существует множество инструментов разработки мобильных приложений для создания нужного вам продукта. Вот список избранных инструментов с ключевыми функциями и ссылками для загрузки. Мы рассмотрели инструменты в следующих категориях.
Мобильные аналитические инструменты
Smartlook — это качественное аналитическое решение для приложений под iOS и Android. Узнайте, как пользователи взаимодействуют с вашим приложением — смотрите записи, отслеживайте события и создавайте воронки конверсий. Прекратите догадки и посмотрите на свои визуализированные данные, собранные в одно место. Это и есть ваше приложение глазами его пользователей.
AppWatch — это облачный продукт для мобильной аналитики и обеспечения безопасности. Он помогает разработчикам защитить свои мобильные приложения от взлома. Он завоевывает доверие пользователей и обеспечивает безопасность приложения.
Кроссплатформенные инструменты разработки приложений
Xamarin является предпочтительным инструментом для разработки мобильных нативных приложений. Он использует уровни бизнес-логики и доступ к данным на разных платформах. Он широко используется для создания приложений под iOS, Windows и Android.
К слову, конструктор мобильных приложений АППРОПИО разработан именно на языке программирования Xamarin. Вы можете узнать более подробно про возможности конструктора перейдя по этой ссылке.
Appcelerator позволяет разработчикам создавать приложения с меньшим числом строк кода. Этот инструмент разработки приложений поддерживает приложения HTML5 для iOS, Android, Windows и браузеров.
PhoneGap — это бесплатная среда разработки мобильных приложений с открытым исходным кодом, попадающая в категорию фреймворков для кроссплатформенной разработки приложений. Его можно использовать для разработки одного приложения, которое работает на всех мобильных устройствах.
Ionic — это среда разработки мобильных приложений на HTML5. Он широко используется для разработки гибридных мобильных приложений. Это полезный инструмент для создания мобильных приложений с использованием веб-технологий, таких как CSS, HTML5 и SASS.
Mobincube — отличный конструктор приложений, позволяющий пользователям разрабатывать любые мобильные приложения. Разработчики могут создавать приложения для бизнеса, образования, развлечений, здравоохранения и многого другого.
LongRange — это инструмент для разработки мобильных приложений. Он состоит из таких компонентов, как навигация, вкладки, представления форм и команды, и требует установки сервиса LongRange.
Qt — кроссплатформенный SDK. Он предлагает экономически эффективные проектирование, разработку и развертывание. Это позволяет разработчикам давать пользователям хорошо работающие приложения для всех устройств.
Alpha Anywhere — это инструмент для быстрой разработки и развертывания мобильных приложений. Он используется для создания кроссплатформенных веб-приложений и мобильных бизнес-приложений.
Sencha Ext JS — это основанная на MVC JavaScript-инфраструктура. Этот инструмент разработки мобильных приложений обеспечивает высокий уровень отклика приложения. Это помогает улучшить удовлетворенность клиентов.
Фреймворки для разработки мобильных приложений:
Kendo UI — это комплексное решение для создания мобильных приложений для современной разработки клиентских решений. Он соответствует современным веб-стандартам, предоставляя решения из большого числа модулей для разработки приложений.
13) Mobile Angular UI
Mobile Angular UI — это среда разработки мобильных приложений. Он использует такие богатые библиотеки, как overthrow.js и fastclick.js для наилучшего качество работы на мобильных.
NativeScript — это фреймворк с открытым исходным кодом для создания по-настоящему нативных мобильных приложений с использованием Angular, TypeScript или JavaScript. Позволяет писать и развертывать нативные мобильные приложения для iOS и Android из единой базы кода.
Onsen UI предлагает пользовательский интерфейс и инструменты для создания гибридных мобильных приложений HTML5 на основе PhoneGap. Это простой в освоении и мощный инструмент для создания мобильных приложений.
Firebase — еще одна платформа для разработки мобильных приложений. Она поддерживает веб-клиенты, платформы iOS, OS X и Android. Она может значительно сократить время разработки и избежать путаницы с серверами и хранилищами данных.
Инструменты для разработки приложений для iPhone:
Swiftic — это конструктор для разработки приложений под iPhone. Он имеет простой в плане навигации интерфейс, который позволяет любому создать приложение. В нем есть много функций, которые сделают приложение привлекательным.
Инструменты AR (дополненной реальности):
Vuforia — это набор для разработки программного обеспечения с дополненной реальностью. Он позволяет создавать приложения на основе AR-технологии, используя технологию компьютерного зрения для распознавания и отслеживания изображений и 3D-объектов.
Easy AR — приложение на основе дополненной реальности для разработчиков мобильных приложений, дающее кроссплатформенную поддержку для разработки приложений.
Инструменты AI (искусственного интеллекта):
TensorFlow был разработан с учетом мобильных и встроенных платформ. Это программное обеспечение с открытым исходным кодом для искусственного интеллекта. Его библиотеки облегчают внедрение специальных функций для искусственного интеллекта.
Watson в облаке IBM позволяет создавать искусственный интеллект для интеграции в самые мощные приложения в мире. Это позволяет безопасно хранить данные в облаке и управлять ими.
Рекламные инструменты для мобильных приложений:
Unity Ads позволяет издателям интегрировать видеообъявления в мобильные игры таким образом, чтобы повысить вовлеченность игроков. Он также предлагает самый высокий средний доход на пользователя (ARPU) из всех глобальных рекламных сетей с просмотров видео за вознаграждение.
Инструменты для осуществления мобильных платежей:
Braintree — платежный шлюз с открытым исходным кодом для мобильных приложений. Поддерживает 23 языка. Приложение помогает компаниям любого размера принимать, обрабатывать и разделять платежи, чтобы максимизировать возможности для бизнеса.
Инструменты отправки push-уведомлений:
Push-уведомления Urban_Airship позволяют разработчикам отправлять пользователям актуальные и персонализированные, мгновенные сообщения. Это полезный инструмент для повышения вовлеченности пользователей.
Pusher — это инструмент push-уведомлений. Он поддерживает большинство популярных языков программирования и фреймворков. Это позволяет клиенту распространять события для всех остальных по тому же каналу, обеспечивая при этом полную безопасность.
Игровые движки
Corona — это кроссплатформенный фреймворк для разработки мобильных приложений. Он используется для создания приложений и игр для мобильных и десктопных устройств. Этот инструмент позволяет опубликовать единый проект для Apple iPhone и iPad.
Как сделать прототип приложения без программирования: обзор 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 можно спросить на форуме и посмотреть дополнительные туториалы, а в платной подписке получать индивидуальную поддержку.