Рисунок: Мэтт Рей
Если вы приступаете к разработке дизайна мобильного приложения, сначала лучше создать каркасы для интерфейса или его отдельных сегментов и лишь затем составлять детализированные макеты. Каркасы позволяют выявить любые недостатки и спорные моменты в интерфейсе еще до того, как начнется работа над мелкими деталями.
В этом учебном пособии вы узнаете, как создавать каркасы для процесса регистрации в мобильном приложении. Используя базовые фигуры и цветовую палитру с градациями серого, вы создадите процесс из нескольких экранов, который даст возможность проверить и протестировать работу приложения перед добавлением в его интерфейс цвета, графики и типографики.
Создание базовых элементов
Каркас состоит из набора простых элементов, которые обычно выполнены в виде упрощенных фигур, например прямоугольников и эллипсов, серого или тусклых цветов. Поскольку многие из этих объектов используются неоднократно, для них можно создать базовую библиотеку.
Для этого сначала необходимо нарисовать прямоугольник и придать ему нужный стиль, чтобы он выглядел как соответствующий элемент интерфейса, например кнопка. В зависимости от сложности дизайна, иногда полезно добавить на кнопку заполнитель для текста. Поскольку в процессе регистрации кнопки позволяют переходить от этапа к этапу, добавьте текстовое поле в центр кнопки с помощью инструментов выравнивания.
Затем объедините эти элементы в группу и сделайте их компонентом, выбрав соответствующую команду в контекстном меню. После этого элемент можно перетаскивать и использовать повторно. Так вам не придется создавать все элементы заново каждый раз, когда понадобится новая кнопка.
По аналогии создайте другие распространенные элементы, например панели навигации, заполнители для изображений и блочные объекты общего назначения. Уделив немного внимания настройке распространенных элементов, вы сможете сэкономить время на всех этапах процесса. Также при необходимости созданные компоненты можно будет использовать как основу для финальной версии дизайна.
Кроме того, для создания этих элементов можно использовать плагины и наборы элементов интерфейса. Такие плагины, как Quick Mockup, представляют собой набор элементов каркаса, которые можно быстро преобразовать в компоненты или использовать как есть.
Важные шаги в процессе регистрации
Сначала для каждого экрана или этапа нашего процесса регистрации необходимо создать монтажные области. Типичный процесс регистрации состоит из таких экранов (хотя их может быть и больше):
Домашняя страница. На этой странице часто размещают приветственное сообщение или логотип приложения, а также параметры для входа в службу или регистрации в ней.
Страница регистрации. Это может быть одна или ряд страниц, на которых пользователь предоставляет свои сведения, например адрес электронной почты, имя и другую информацию, необходимую для создания учетной записи.
Страницы с сообщением об успешной регистрации или ошибке. Эти страницы крайне важны, поскольку позволяют пользователю узнать, успешно ли создана учетная запись, а также о том, как исправить ошибки, если они возникли.
В этом учебном пособии будет рассмотрен процесс регистрации новой учетной записи. Согласно описанному здесь процессу можно создать дизайн страницы входа для пользователей, у которых уже есть учетные записи. Вместо данных для создания учетной записи им достаточно будет ввести свое имя пользователя и пароль, чтобы войти в систему.
Создание макета домашней страницы
Домашняя страница, или начальный экран, должна содержать несколько ключевых элементов. Помните, что ваш дизайн может отличаться от этого в зависимости от требований и целей вашего интерфейса. Обычно на домашней странице имеется:
• логотип приложения;
• приветственное сообщение;
• параметры регистрации или ссылка на страницу регистрации;
• параметры входа или ссылка на страницу входа.
Как правило, на этой странице акцент делается на параметрах входа или регистрации. Чтобы нагляднее продемонстрировать процесс регистрации новых пользователей, в нашем примере мы сделаем акцент именно на параметрах регистрации. При этом параметры входа будут доступны в нижней части страницы с немного приглушенными цветами.
Сначала перетащите вверх экрана созданный ранее блок общего назначения и растяните его по всей ширине. Он будет заполнителем для часов, значка уровня сигнала и других системных индикаторов. Затем с помощью обычного прямоугольника или заполнителя для изображений обозначьте место для логотипа по центру экрана.
Далее добавьте заполнитель для приветственного сообщения. Текст можно ввести с помощью соответствующего инструмента либо просто обозначить в виде простых прямоугольников со скругленными углами. На ранних этапах разработки гораздо проще использовать прямоугольники, чем беспокоиться о том, что написать.
В нижней части страницы будут отображаться параметры регистрации (создания учетной записи) или входа в систему, если у пользователя уже есть учетная запись. Возможно, в вашем проекте понадобятся дополнительные параметры аутентификации через сторонние службы, например Регистрация с помощью Google или Вход с помощью Facebook. В этом случае ваш дизайн будет включать не одну, а несколько кнопок для регистрации.
В нашем примере будет только одна кнопка Create an Account (Создать учетную запись). Нажимая ее, пользователь будет переходить на следующий экран, где сможет ввести свои данные для создания учетной записи.
Разместите элемент кнопки в нижней трети страницы и выровняйте ее горизонтально по центру под приветственным сообщением. Под кнопкой нарисуйте горизонтальную линию такой же ширины, а затем под линией добавьте еще одну кнопку Log in (Вход). Поскольку эта кнопка будет служить дополнительным параметром, ее стиль можно изменить соответствующим образом.
Создание формы регистрации
Теперь, когда главная страница готова, можно создать следующий экран в нашем процессе. Пользователи будут переходить на эту страницу после нажатия кнопки Create an account (Создать учетную запись) на предыдущем экране. Здесь нужно вводить различные сведения, например адрес электронной почты и пароль для создания учетной записи.
На этом экране мы добавим несколько текстовых элементов, чтобы обозначить будущие поля, так же как мы создавали метки для кнопок на домашней странице. Для заголовка страницы можно добавить новый текст либо просто продублировать текстовый заполнитель и поместить его вверху страницы.
Под заголовком находятся различные элементы формы. Здесь можно использовать базовый блочный элемент, что проще, или создать специальный блок для полей ввода, который включает границу. Поместите один блок по центру страницы, а затем с помощью текстового инструмента добавьте в верхнем левом углу метку Name (Имя). Это и будет меткой для нашего поля ввода. Не делайте текст слишком большим, чтобы он не выглядел как заголовок.
Затем скопируйте и вставьте элементы поля ввода, чтобы создать дополнительные поля для электронной почты, пароля и других данных, которые нужно собрать при регистрации. Сгруппируйте элементы, чтобы упростить процесс. Внизу страницы добавьте элемент кнопки, с помощью которого форму можно будет отправить после заполнения.
Учтите, что длинные формы регистрации с множеством вопросов могут отталкивать пользователей и приводить к снижению уровня конверсии. Поэтому форму нужно делать простой и лаконичной. Как вариант, форму можно разделить на несколько экранов, чтобы пользователи могли сосредоточиться на каждом отдельном блоке информации. В таком случае на экране должно быть одно поле ввода с кнопкой Continue (Продолжить) или Next (Далее). Попробуйте создать процесс в обоих вариантах и посмотрите, какой из них лучше подходит вашей аудитории.
Подключение с помощью ссылок прототипов
Одним из преимуществ работы с каркасами в Adobe XD является то, что для процесса можно создавать прототипы в реальном времени, не экспортируя проект в другое приложение.
Чтобы настроить ссылку прототипа, переключитесь в режим Prototype (Прототип) с помощью вкладок в верхней части экрана. Если в этом режиме нажать на монтажную область или элемент, появится синяя стрелка, которую можно перетащить в нужное место.
Попробуйте сделать это с созданными экранами. Выберите триггер Tap (Нажатие) и поэкспериментируйте с различными действиями. Во время работы с каркасом лучше использовать параметр Dissolve (Растворение) или просто Slide (Сдвиг). Применение более сложных анимаций может отвлекать от того, что вы пытаетесь протестировать на этом этапе разработки.
Завершение процесса
Наш процесс почти завершен — осталось добавить еще один набор экранов, чтобы пользователь мог узнать, успешно ли прошла его регистрация. Чтобы интерфейс был действительно качественным и удобным, очень важно внедрить в него сообщения об успешной регистрации или ошибке. И их не следует пропускать в каркасах.
Сообщение об успешной регистрации размещается на отдельной странице, которая открывается при нажатии кнопки Submit (Отправить). Сначала пользователь видит экран обработки, после чего — само сообщение. Сообщение об ошибке работает аналогично, однако по возможности лучше отображать его в контексте. Например, если проблема возникла с электронной почтой или паролем, нужно выделить поле ввода и добавить короткую инструкцию, как это исправить.
Создание экрана с сообщением об успешной регистрации
Экран успешной регистрации можно создать, скопировав первый экран и удалив кнопку регистрации и горизонтальную линию. Также мы заменим квадратный заполнитель значком галочки. При желании текстовые заполнители также можно заменить реальным сообщением, например Success, registration is complete (Регистрация успешно завершена).
Создание экрана с сообщением об ошибке
Чтобы создать экран с ошибкой, скопируйте страницу формы. Поскольку ошибки нужно отображать в контексте, эту страницу следует немного доработать. В этом примере ошибка будет возникать из-за неправильной электронной почты. Выделите этот блок и добавьте к полю ввода темно-серую границу (в конечном варианте дизайна она, скорее всего, будет красной). С помощью текстового инструмента добавьте под полем ввода текстовое поле Error: invalid email format (Ошибка: недопустимый формат электронной почты) или другое сообщение, указывающее на тестируемую ошибку.
Другие элементы на странице, например кнопку отправки, можно изменить, чтобы сделать акцент на ошибке или предотвратить переход на следующий этап, пока она не будет устранена.
Экраны ошибок или успешной регистрации можно подключать к прототипу по одному либо скопировать другие экраны процесса в два отдельных процесса: первый — для ошибки, второй — для успешной регистрации. Это позволит протестировать оба процесса с пользователями и выполнить итерацию.
Также над кнопкой отправки можно добавить прозрачные прямоугольники, которые будут использоваться в качестве целевых точек и вести на страницу успешной регистрации или ошибки. Это добавит элемент неожиданности во время тестирования.
Это очень простой каркас и его главная задача — помочь понять, как различные экраны сменяют друг друга, когда пользователь регистрирует учетную запись. Для начала сгруппируйте в компоненты те элементы, которые будут многократно использоваться в интерфейсе. Это упростит создание более детализированного дизайна. Стиль компонентов можно изменять на каждом этапе разработки и применять ко всему проекту, что позволяет эффективнее выполнять итерации.
Общий доступ к каркасу и сбор отзывов
Наконец, в Adobe XD с помощью режима Share (Общий доступ) к процессу можно предоставить общий доступ для удаленного тестирования или сбора отзывов. Выбрав процесс, в раскрывающемся списке с типами ссылок нажмите Design Review (Обзор дизайна) или User Testing (Пользовательское тестирование). Затем ссылкой можно поделиться с нужными людьми, а по мере завершения итераций ее легко обновить простым нажатием кнопки.
Поздравляем! Вы завершили каркас для процесса регистрации в Adobe XD. Теперь попробуйте применить полученные знания и создать процесс входа в систему.
