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

Интерфейс и визуальный прототип

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

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

Компоновка экрана

VerticalArrangement располагает элементы друг под другом. Он подходит для последовательности «заголовок → изображение → описание → кнопки». HorizontalArrangement располагает элементы рядом: например, изображение маршрута слева, описание справа.

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

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

Имена и оформление

Названия типов сохраняйте на английском: Label, Button, Image, TextBox. Собственные имена должны объяснять назначение: LabelTitle, ImageCover, ButtonRoutes, LabelRoute1Name. Пользовательские надписи могут быть русскими.

Имя компонента и свойство Text — разные вещи: ButtonRoutes может показывать надпись «Посмотреть маршруты». Имя помогает найти компонент в дереве Components; надпись помогает пользователю понять действие.

Цвета, размеры и выравнивание задаются по своему варианту. Главный заголовок выделяется; пояснения остаются читаемыми; одинаковые действия оформляются одинаково.

Практическая работа: первый этап

1. Получите номер варианта. Создайте проект VariantNN, где NN — ваш номер варианта.
2. Создайте три экрана с именами из задания. Первый экран сохраняет имя Screen1.
3. Установите цвета фона и основные свойства экранов.
4. Соберите главный экран: заголовок, пояснение, изображение, описание и кнопки разделов.
5. Соберите каталог или информационный экран своего варианта. Сохраните требуемое число позиций и расположение элементов.
6. Дайте компонентам английские имена. Добавьте номер варианта на готовые экраны.
7. Сравните результат с макетами, покажите первый этап преподавателю и сохраните проект.

Для образца варианта 01 «На тропе» используются Screen1, RoutesScreen и BookingScreen. На первой паре собираются главный экран и каталог из трёх маршрутов; форма остаётся для второго этапа. Фон — #F1F8E9, текст — #1B3A24, основные кнопки — #2E7D32 с белым текстом. Проект называется Variant01.

Самопроверка

• Главный экран и каталог относятся к одной тематике и оформлены единообразно.
• Число позиций, тексты и размещение соответствуют своему варианту.
• Изображения не искажены; надписи не обрезаны и не перекрывают другие элементы.
• В Components можно найти каждый элемент по назначению.
• Проект сохранён и содержит третий экран для продолжения.

Продолжение: Реализация навигации и проверка многоэкранного прототипа мобильного приложения.