Три обязательных типа экранов для создания отличного мобильного UX

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

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

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

Экран списка

Кто-нибудь хочет угадать, из чего состоит экран списка? Если вы сказали: «из списка», правильно! 🛎️ Как следует из названия, экран списка состоит из списка… всего, что важно для вашего приложения.

Давайте посмотрим на некоторые популярные приложения на моем телефоне и проверим некоторые списки, которые используют эти компании:

Twitter

Когда вы входите в приложение Twitter, вы сразу замечаете, что ваша лента твитов — это просто экран списка.

AirBnB

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

Starbucks

Starbucks демонстрирует свои вкусные напитки и угощения в виде списка, из которого вы можете заказать!

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

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

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

Ada, конструктор искусственного интеллекта Adalo, позволяет вам описать то, что вы хотите, и генерирует ваше приложение. Magic Start создает полные основы приложения из описания, а Magic Add добавляет функции на естественном языке.

Adalo — это конструктор приложений без кода для приложений на базе баз данных и нативных приложений iOS и Android — одна версия для всех трех платформ, опубликованная в Apple App Store и Google Play. С функцией Magic Start от Adalo вы можете описать концепцию вашего приложения — «приложение для фитнеса со списками тренировок» — и оно автоматически генерирует структуру базы данных и экраны списков. То, что раньше занимало часы планирования, теперь происходит за минуты, давая вам основу для настройки и улучшения.

Экран подробной информации

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

• Помните приложение ресторана? Экран подробной информации мог бы включать описание выбранного блюда, способ заказать это блюдо и аппетитную фотографию. Вкусно!
• Для приложения салона: описание массажа и того, что входит в любимый спа-пакет всех.
• Приложение для фитнеса — разбивка упражнений с указанием количества повторений и подходов была бы идеальна для этого экрана подробной информации.

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

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

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

Экран создания/редактирования

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

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

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

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

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

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

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

1. Что может создавать или редактировать пользователь?
2. Что пользователь не может создавать или редактировать?
3. Имеют ли разные типы пользователей разные разрешения на создание и редактирование?
4. Информация, которая отображается, создана владельцем приложения или пользователем приложения? Например, в приложении социальной сети пользователь создает информацию, что обычно означает, что он должен иметь контроль над ее редактированием. В то время как в приложении салона пользователь не создает услуги — поэтому только владелец приложения будет иметь разрешение изменять эту информацию.

С помощью функции Magic Add от Adalo вы можете описать необходимую функцию создания/редактирования простым языком. Скажите ему «добавьте экран, где пользователи могут настроить свой заказ со специальными инструкциями» — и оно автоматически генерирует поля формы, подключения к базам данных и действия сохранения.

Другие типы экранов для рассмотрения

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

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

Экран панели управления

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

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

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

Экран успеха

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

Пользователь завершил свой заказ? Экран успеха.

Пользователь поделился своим постом? Экран успеха.

Пользователь зарегистрировал действие? Экран успеха.

Информация, которую они ввели, была сохранена? Экран успеха.

Когда пользователь завершает действие, он ищет подтверждение того, что все идет по плану и что ожидаемое поведение действия прошло без сучка и задоринки! Именно для этого предназначены экраны успеха. Без этих типов экранов вы можете ожидать письма от пользователя с вопросом, действительно ли он разместил свой заказ… и у никого нет на это времени.

Экраны успеха особенно важны, когда ваше приложение обрабатывает операции с большим объемом данных. Инфраструктура Adalo — теперь в 3–4 раза быстрее после переделки 2026 года— гарантирует, что когда пользователи видят экран успеха, базовые операции базы данных фактически были завершены надежно.

Экран подтверждения

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

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

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

Экран навигации

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

Вы можете подумать — ну, они просто отображаются как список… значит, это не экран списка, как упоминалось выше? Причина, по которой мы считаем это другим экраном, в том, что навигация объединяет различные действия, которые вы можете выполнять в приложении. При нажатии на элемент списка вас перенесет на экран сведений об этом элементе списка. Навигация отличается. Для каждого элемента, на который вы нажимаете в меню, вы можете быть перенесены в разные части приложения, которые имеют совершенно разные цели.

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

Экран адаптации

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

Экраны адаптации устанавливают тон для всего пользовательского опыта. Это ваше первое впечатление, и они должны загружаться быстро и выглядеть отполированными. Здесь значение имеет собственная компиляция приложения Adalo — в отличие от веб-оболочек, которые могут добавить 2–3 секунды времени загрузки, собственные приложения обеспечивают быстродействие, которое ожидают пользователи при первом нажатии.

Масштабирование типов экранов для роста

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

Модульная инфраструктура Adalo масштабируется для обслуживания приложений с 1 млн+ ежемесячных активных пользователей, без верхнего предела. Платформа обрабатывает более 20 миллионов запросов данных в день с доступностью 99%+. Ваши экраны списков, экраны сведений и экраны создания/редактирования сохраняют свою производительность, независимо от того, есть ли у вас 50 пользователей или 50 000.

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

Это имеет значение, потому что производительность экрана напрямую влияет на удержание пользователей. Экран списка, который загружается 3 секунды, теряет пользователей. Экран сведений, который заикается при отображении изображений, вызывает разочарование у клиентов. Благодаря специально разработанной архитектуре Adalo ваши тщательно спроектированные типы экранов работают в соответствии с назначением в масштабе.

Что это значит для вас и вашего приложения?

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

С появлением построителей приложений на основе искусственного интеллекта для создания мобильных приложений появляется много новых создателей, которые не имеют опыта в создании пользовательского опыта мобильного приложения. В крупных организациях может быть много сотрудников, ответственных за правильность пользовательского опыта (UX), но для тех из нас, кто является индивидуальным предпринимателем или работает в гораздо меньшей команде — создание хорошего UX зависит от нас.

Использование конструктора приложений на базе искусственного интеллекта, такого как Adalo означает, что теперь вы разработчик, дизайнер пользовательского интерфейса и менеджер продукта. Adalo создает собственные приложения iOS и Android из одной базы кода, публикуя их непосредственно в Apple App Store и Google Play Store. Изучение и итерация типов экранов, упомянутых выше, быстро упростят работу, которую вам необходимо сделать, чтобы приблизить ваше приложение на один шаг ближе к запуску.

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

Более 3 миллионов приложений были созданы на Adalo, с визуальным построителем, описываемым как «легкий, как PowerPoint». Независимо от того, создаете ли вы свое первое приложение или десятое, эти три типа экранов — список, сведения и создание/редактирование — остаются основой отличного мобильного UX. Освойте их, и вы освоили основной паттерн, который питает почти каждое успешное приложение.

Часто задаваемые вопросы

Почему выбрать Adalo вместо других решений для создания приложений?

Adalo — это конструктор приложений на основе искусственного интеллекта, который создает истинные нативные приложения iOS и Android из единой кодовой базы. В отличие от веб-обертки, он компилируется в нативный код и публикует непосредственно в Apple App Store и Google Play Store — самая сложная часть запуска приложения автоматизирована. Платные планы включают неограниченные записи базы данных без платежей на основе использования, поэтому вы можете масштабироваться без шокирующих счетов.

Какой самый быстрый способ создать и опубликовать приложение в App Store?

Интерфейс перетаскивания Adalo в сочетании с функциями, поддерживаемыми ИИ, такими как Magic Start и Magic Add, позволяет вам перейти от идеи к опубликованному приложению в течение дней, а не месяцев. Опишите концепцию вашего приложения, и Magic Start автоматически сгенерирует структуру базы данных, экраны и пользовательские потоки. Adalo справляется со сложным процессом отправки в App Store, чтобы вы могли сосредоточиться на функциях и пользовательском опыте вашего приложения.

Могу ли я легко создавать экраны списков, экраны сведений и экраны редактирования для моего мобильного приложения?

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

Какие три основных типа экранов нужны каждому мобильному приложению?

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

Нужно ли создавать отдельный экран сведений для каждого элемента в списке моего приложения?

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

Какие дополнительные типы экранов следует рассмотреть для добавления в мое приложение?

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

Как мне определить, какие разрешения на создание и редактирование должны быть у разных пользователей в моем приложении?

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

Сколько стоит создать мобильное приложение с помощью Adalo?

Веб-конструктор Adalo и конструктор нативных мобильных приложений начинается с $36 в месяц с неограниченным использованием и публикацией в магазин приложений с неограниченными обновлениями опубликованных приложений. В отличие от конкурентов, которые взимают плату в зависимости от записей в базе данных или использования, платные планы Adalo не имеют ограничений на количество записей и не взимают плату за использование, что делает расходы предсказуемыми по мере масштабирования вашего приложения.

Может ли мое приложение справиться с ростом до тысяч или миллионов пользователей?

Да. Модульная инфраструктура Adalo масштабируется для обслуживания приложений с 1 млн+ ежемесячно активных пользователей без верхнего предела. Платформа обрабатывает более 20 миллионов запросов данных в день с 99% и выше временем доступности. Функция X-Ray выявляет проблемы производительности до того, как они повлияют на пользователей, помогая вам оптимизировать проактивно.

Нужен ли мне опыт кодирования для создания этих типов экранов?

Опыт кодирования не требуется. Визуальный конструктор Adalo описывается как «легкий, как PowerPoint». Вы можете перетаскивать компоненты для создания экранов списка, экранов деталей и экранов создания/редактирования. Функции искусственного интеллекта, такие как Magic Start и Magic Add, позволяют описать то, что вы хотите, на простом языке, и платформа автоматически генерирует экраны и подключения к базе данных.