Занятие № 2. Экраны мобильного приложения. Проектирование интерфейса пользователя

Задачи

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

Введение

Основные принципы дизайна

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

Приближенность и выравнивание¹

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

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

Повторение и контраст

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

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

Цветовое оформление приложения

Настройка цвета в AppInventor

Разработчик может выбрать для элементов набор стандартных цветов или назначить собственный.

viewof R = Inputs.range([0, 255], {label: "Красный", step: 1, value: 0})
viewof G = Inputs.range([0, 255], {label: "Зелёный", step: 1, value: 0})
viewof B = Inputs.range([0, 255], {label: "Синий", step: 1, value: 0})

R = 0

G = 0

B = 0

svg`<svg width=100% height="100" viewBox="0 0 200 100">
  <rect width="100%" height="100%" fill="rgb(${R} ${G} ${B})" />
</svg>`

md`Цвет в hex-формате: <code>**#<span style="color: red">${R.toString(16).padStart(2, "0")}</span><span style="color: green">${G.toString(16).padStart(2, "0")}</span><span style="color: blue">${B.toString(16).padStart(2, "0")}</span>**</code>`

Цвет в hex-формате: #000000

color.adobe.com - подбор комплиментарных цветов
colorhunt.co - готовые палитры цветов
coolors.co - генератор случайной палитры

Переход между экранами

Крупные приложения состоят из набора экранов, между которыми переключается пользователь. Предусмотрена возможность передавать информацию от одного экрана другому. К примеру, нажатие по новости в списке постов, перебрасывает пользователя на другой экран. Что бы на новом экране открылась подробная информация о посте, Экран 1 передаёт Экрану 2 некий идентификатор. Зная этот id Экран 2 загружает пост и комментарии к нему.

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

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

Задание № 1. Кубик

Создадим приложение для моделирования броска шестигранного кубика.

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

Запустите браузер и нажмите комбинацию клавиш ⌃Ctrl + ⇧Shift + N , чтобы открыть приватное окно. Это необходимо для того, чтобы не сохранять ваш Google-аккаунт в браузере.

Перейдите на сайт App Inventor. Нажмите кнопку . Войдите в ваш Google-аккаунт.

Видео-инструкция

Откройте среду разработки App Inventor. Нажмите кнопку New project, чтобы создать новый проект. В появившемся окне задайте название проекта - Cubic, затем нажмите кнопку Ok:

Откроется окно для редактирования интерфейса первого экрана приложения Screen1.

Интерфейс приложения

Заранее загрузим необходимые медиа-файлы. Нажмите кнопку Загрузить файл в разделе Медиа. В появившемся окне нажмите по элементу Выберите файл и укажите изображение 1.png, затем нажмите кнопку Ok:

В списке Медиа должен появится загруженный вами файл:

Удаление медиа-файла

Если необходимо удалить файл из раздела Медиа, кликните по нему и выберите вариант Удалить:

Повторите процедуру загрузки и для остальных файлов с изображениями граней кубика (2.png - 6.png). Также загрузите файл dice_roll.ogg со звуком броска кубика.

Раздел Медиа должен выглядеть следующим образом:

Настроим параметры экрана. В списке компонентов выберите Screen1 и настройте его свойства следующим образом:

Свойство	Значение
ВыровнятьПоВертикали	центр
ВыровнятьПоГоризонтали	центр
Заголовок	Кубик

Разместим на экране необходимые видимые компоненты - Изображение и Кнопка. Перетащите их на экран:

Выберите компонент с именем Кнопка1 и переименуйте его, нажав кнопку Переименовать. Задайте новое имя - КнопкаБросок:

Подходящие имена

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

Выберите компонент с именем Изображение1 и дайте ему имя ИзображениеСторона. В свойстве Изображение выберите файл 1.png и нажмите Ok:

В свойствах компонента КнопкаБросок поменяйте Текст на Бросить кубик. Теперь интерфейс приложения выглядит так:

Добавим компонент Звук для воспроизведения звука броска. В Палитре компонентов откройте категорию Медиа и перетащите в окно приложения компонент Звук. Это невидимый компонент, который не отображается на экране приложения и выполняет команды в фоне:

Переименуйте компонент в ЗвукБроска.

Список компонентов будет выглядеть следующим образом:

Настройте компонент ЗвукБроска следующим образом:

Свойство	Значение
МинимальныйИнтервал	1000
Источник	dice_roll.ogg

После того, как интерфейс приложения готов, можно переходить к программированию поведения компонентов.

Программирование компонентов

Из режима Дизайнер перейдите к режиму Блоки:

В панели категорий блоков щелкните по компоненту КнопкаБросок и перетащите в рабочую область блок когда КнопкаБросок Щелчок.

Добавьте к скрипту следующие блоки:

Скрипт генерирует случайное число от 1 до 6. Затем число соединяется со строкой “.png”, образуя имена файлов с изображением грани (1.png, 2.png …).

Время тестирования!

Протестируйте работу приложения. Запустите на своём телефоне приложение MIT AI2 Companion. В среде разработки App Inventor выберите пункт меню Подключиться - Помощник AI. Отсканируйте QR-код с помощью приложения AI2Companion. Через некоторое время вы увидите на экране своего мобильного телефона готовое приложение.

Нажмите несколько раз на кнопку Бросить кубик. Меняются ли изображения на экране? Сообщает ли приложение об ошибках?

Модифицируйте последний скрипт следующим образом:

Каждое нажатие на кнопку будет поворачивать картинку на случайны угол между 0 и 45. Это поможет отличать ситуации, когда подряд выпадает одно и то же число.
Блок проиграть воспроизведёт звук броска кубика.

Время тестирования!

Если приложение-компаньон ещё не закрыто, то попробуйте нажать на кнопку Бросить кубик ещё несколько раз. Пока приложение запущено и связь не потеряна, все изменения в проекте показываются на устройстве в реальном времени

Проект готов.

Задание № 2. Геометрический калькулятор

Создадим приложение, с помощью которого можно рассчитать объём цилиндра по радиусу основания и высоте.

Приложение будет состоять из двух экранов - приветствия и экрана для выполнения расчётов.

Видео-инструкция

Откройте среду разработки App Inventor. Нажмите кнопку New project, чтобы создать новый проект. В появившемся окне задайте название проекта - GeoCalc, затем нажмите кнопку Ok:

Откроется окно для редактирования интерфейса первого экрана приложения Screen1.

Интерфейс экрана Screen1

В списке Медиа должен появится загруженный вами файл:

В списке компонентов выберите Screen1 и настройте его свойства следующим образом:

Свойство	Значение
ВыровнятьПоГоризонтали	Центр
ВыровнятьПоВертикали	Центр
Заголовок	GeoCalc

В разделе Интерфейс пользователя палитры компонентов найдите компонент Надпись и перетащите его на экран. Настройте свойства компонента под именем Надпись1 следующим образом:

Свойство	Значение
ЖирныйШрифт	+
РазмерШрифта	18
Ширина	Наполнить родительский
Текст	Расчёт объема

Перетащите на экран компонент Кнопка и расположите его после надписи. Клик по кнопке будет переводить пользователя на второй экран с формой для расчётов.

В списке компонентов выберите кнопку, нажмите кнопку Переименовать, укажите для компонента имя КнопкаЦилиндр и нажмите Ok.

Настройте свойства компонента под именем КнопкаЦилиндр следующим образом:

Свойство	Значение
Изображение	cylinder.png
Текст	Пустая строка

Первый экран приложения должен выглядеть следующим образом:

Интерфейс экрана ScreenCylinder

Создадим второй экран приложения. Нажмите кнопку Добавить экран:

Введите название ScreenCylinder. Нажмите Ok для создания нового экрана. Сразу после этого откроется окно редактирования интерфейса вновь созданного экрана.

Настройте свойства экрана ScreenCylinder следующим образом:

Свойство	Значение
ОриентацияЭкрана	Альбомный режим
Заголовок	Цилиндр

Расположим необходимые компоненты интерфейса.

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

В палитре компонентов перейдите в раздел Расположение и перетащите на экран компонент ТабличноеРасположение. Настройте компонент следующим образом:

Свойство	Значение
Стобцы	2
Ширина	Наполнить родительский
Строки	2

Для ввода числовых значений воспользуемся компонентом Текст. Перетащите два таких компонента на экран таким образом, чтобы поместить их в следующих ячейках компонента ТабличноеРасположение:

В первом столбце каждой строки расположите компоненты Надпись. Экран приложения должен выглядеть следующим образом:

Выберите компонент с именем Надпись1 и задайте свойству Текст значение Радиус. Выберите компонент с именем Надпись1 и задайте свойству Текст значение Высота.

Переименуйте компонент Текст1 в ТекстРадиус, а компонент Текст2 в ТекстВысота. Теперь список компонентов должен выглядеть следующим образом:

Выберите компонент с именем ТекстРадиус и настройте его свойства:

Свойство	Значение
Ширина	100 percent
Подсказка	Введите радиус
ТолькоЦифры	+

Выберите компонент с именем ТекстВысота и настройте его свойства:

Свойство	Значение
Подсказка	Введите высоту
ТолькоЦифры	+

Для вывода ответа используем компонент Надпись. Разместите компонент под таблицей и переименуйте его в НадписьОбъем.

Настройте свойства компонента НадписьОбъем:

Свойство	Значение
Ширина	Наполнить родительский
Текст	Объем
ВыравниваниеТекста	центр

Добавим на экран две кнопки - для выполнения расчётов и возврата на главный экран приложения Screen1. Кнопки разместим горизонтально. Для этого поместите под компонентом НадписьОбъем компонент ГоризонтальноеРасположение. Поменяйте свойство Ширина на значение Наполнить родительский.

Перетащите два компонента Кнопка таким образом, чтобы они разместились внутри компонента ГоризонтальноеРасположение:

Переименуйте Кнопка1 в КнопкаРассчет, а Кнопка2 - в КнопкаНазад. Для обоих кнопок установите значение свойства Ширина равным Наполнить родительский. Измените значение свойства Текст для кнопок согласно их назначению.

Интерфейс экрана ScreenCylinder должен выглядеть так:

Программирование компонентов

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

Перейдите в раздел Блоки.

В списке блоков выберите компонент КнопкаНазад и перетащите в рабочую область блок когда КнопкаНазад.Щелчок. Действия внутри этого блока выполняться, когда пользователь нажмёт кнопку.

В разделе Управление найдите блок открыть другой экран и поместите его в блок обработчик события. Готовый скрипт выглядит следующим образом:

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

Перейдите к редактированию экрана Screen1. Для этого выберите его в выпадающем списке:

Составьте скрипт, который по нажатию кнопки КнопкаЦилиндр, откроет экран ScreenCylinder:

Время тестирования!

Протестируйте работу приложения. Проверьте, работает ли переход между экранами. Продолжайте работу только после того, как убедитесь в работе скриптов.

Добавим скрипты для расчета объема. Значения радиуса и высоты будем хранить в двух глобальных переменных с соответствующими именами.

Вернитесь к экрану ScreenCylinder. Разместите блок инициализировать глобальную из раздела Переменные. Зададим начальное значение переменной равное нулю. Из раздела Математика возьмите блок с нулём и соедините с блоком создания переменной. Задайте имя переменной:

Аналогично добавьте глобальную переменную высота:

Копирование блоков

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

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

Составьте следующий скрипт для выполнения расчётов:

Получаем числа из текстовых полей ввода и сохраняем в переменных.
Результат будем выводить в надписи. Для этого меняем свойство Текст этого компонента.
Выражение составляем из блоков раздела Математика.

Чтобы увеличить количество множителей в блоке умножения, нужно нажать на шестерёнку и добавить блоки:

Чтобы быстро получить блоки для работы с нужной переменной, подведите курсор к её имени в блоке инициализировать глобальную:

Время тестирования!

Запустите приложение и проверьте правильность вычислений. Что произойдёт, если оставить текстовые поля для ввода пустыми?

Проект готов.

Задание № 3. Калькулятор мелочи

Разработаем приложение, которое поможет найти сумму номиналов монет. Интерфейс приложения содержит изображения монет четырёх номиналов: 5, 10, 20 и 50 копеек. Нажатие на картинку добавит к общей сумме номинал монеты.

Создайте новый проект под именем monetki.

Загрузка медиа-ресурсов

Загрузите в проект изображения монеток²:

Проектирование интерфейса

На следующем изображении показан интерфейс приложения с указанием типа и имён компонентов. Разместите компоненты и переименуйте их согласно рисунку.

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
Screen1	ВыровнятьПоГоризонтали=Центр ВыровнятьПоВертикали=Центр Заголовок=Калькулятор мелочи
ТабличноеРасположение	Столбцы=2 Высота=Автоматический Ширина=Автоматический Строки=2
Кнопка5Копеек	Текст=пусто Изображение=m5.gif
Кнопка10Копеек	Текст=пусто Изображение=m10.gif
Кнопка20Копеек	Текст=пусто Изображение=m20.gif
Кнопка50Копеек	Текст=пусто Изображение=m50.gif
ТекстРезультат	Включено=нет галочки ЖирныйШрифт=есть галочка РазмерШрифта=20 Текст=0.0 ВыравниваниеТекста=центр

Программирование компонентов

Перейдите в раздел Блоки.

Добавьте блок для инициализации глобальной переменной сумма. Начальное значение - 0:

Добавьте обработчик нажатия на кнопку Кнопка5Монет:

Каждое нажатие на кнопку добавляет к переменная сумма число 0.05.
Выводим значение переменной сумма в компонент ТекстРезультат. Значение суммы округляем до двух цифр после запятой.

Время тестирования!

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

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

Обработчик для Кнопка10Копеек:

Обработчик для Кнопка20Копеек:

Обработчик для Кнопка50Копеек:

Время тестирования!

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

Дополнительное задание

✍️ Сделайте самостоятельно

Самостоятельно добавьте кнопку КнопкаОчистить после нажатия на которую значение переменной сумма обнулиться и в текстовом поле ТекстРезультат появится значение 0.0.

Задание № 4. ИМТ

Разработаем приложение для расчёта Индекса массы тела. ИМТ – это величина, которая позволяет оценить степень соответствия массы человека и его роста и рассчитывается по формуле $I = \frac{m}{h^{2}}$ где m – масса тела в килограммах, h – рост в метрах. Нормой считается значение индекса в диапазоне от 18 до 25.

Приложение будет состоять из двух экранов:

Экран с формой для ввода данных и расчёта индекса; значение индекса отправляется на второй экран;
Экран для вывода результата вычислений; цвет фона зависит от значения индекса.

Взаимодействие между экранами показано на диаграмме:

Создайте новый проект под названием IMT.

Проектирование интерфейса

Интерфейс экрана Screen1 содержит следующие компоненты:

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
Screen1	ВыравниваниеПоГоризонтали=Центр ВыравниваниеПоВертикали=Центр Заголовок=ИМТ
ТекстРост	Подсказка=Рост (м) ТолькоЦифры=есть галочка
ТекстВес	Подсказка=Вес (кг) ТолькоЦифры=есть галочка
КнопкаСтарт	Текст=Старт

Добавьте в приложение второй экран под названием ScreenResult. Для этого нажмите кнопку .

Добавьте к экрану ScreenResult следующие компоненты и переименуйте их:

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
ScreenResult	ВыравниваниеПоГоризонтали=Центр ВыравниваниеПоВертикали=Центр Заголовок=Результат
НадписьЗначение	РазмерШрифта=20 Текст=0 Выравнивание текста=центр
НадписьРезультат	ЖирныйШрифт=есть галочка РазмерШрифта=32 Текст=Результат ВыравниваниеТекста=центр
КнопкаНазад	Текст=Назад

Вернитесь к первому экрану с помощью выпадающего списка:

Программирование компонентов

Перейдите в раздел Блоки.

Добавим обработку события нажатия кнопки КнопкаСтарт. Внутри обработчика объявим три локальные переменные: рост, вес и имт:

Как добавить больше одной локальной переменной?

Нажмите на изображение шестерёнки и присоедините необходимое количество блоков имя X к уже существующим переменным:

Результат вычислений индекса нужно присвоить переменной имт. Порядок соединения блоков показан на рисунке:

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

Скрипт с вычислениями выглядит так:

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

Переключитесь к программированию компонентов экрана ScreenResult.

В глобальную переменную имт сохраним значение, полученное после открытия экрана:

Составьте скрипты для следующих обработчиков событий:

После инициализации экрана ScreenResult покажем значение полученного индекса.

Время тестирования!

Протестируем приложение. Введите значения для роста и веса и нажмите кнопку Старт. Должен открыться новый экран с вычисленным значением. Например, для роста 1.86 м и веса 100 кг, значение индекса равно 28.9. Нажмите кнопку Назад, чтобы проверить переход к первому экрану приложения.

Используем вложенные условные операторы. Фрагмент блок-схемы показан на рисунке:

Добавьте в обработчик ScreenResult блок если … то. Если значение индекса будет меньше 18, покажем сообщение Ниже нормы и поменяем цвет фона экрана на оранжевый:

Проверки одного условия недостаточно. Нажмите на шестерёнку в блоке если…то, чтобы добавить блоки иначе если и иначе:

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

Блоки в разделе иначе будут выполняться, если $18 \leq И М Т \leq 25$ .

Выведем сообщение Норма и поменяем цвет фона экрана на зелёный. Итоговый скрипт выглядит следующим образом:

Время тестирования!

Запустите приложение и проверьте появление разных сообщений и смену цвета фона.

Проект готов.

Задание № 5. Банковский вклад

Приложение поможет рассчитать сумму вклада после указанного количества месяцев. Начальная сумма и продолжительность вклада вводится пользователем. Ежемесячно вклад увеличивается на 0.5 %.

Создайте новый проект под именем Balans.

Проектирование интерфейса

Добавьте необходимые компоненты и переименуйте их согласно назначению:

Настройте свойства компонентов согласно следующей таблице:

Компонент	Свойства
Screen1	ВыровнятьПоГоризонтали=Центр ВыровнятьПоВертикали=Центр Заголовок=Баланс
ТекстБаланс	Ширина=80% Подсказка=Начальный баланс ТолькоЦифры=есть галочка
ТекстМесяцы	Ширина=80% Подсказка=Продолжительность ТолькоЦифры=есть галочка
ГоризонтальноеРасположение	Ширина=80%
Надпись1	Текст=Конечный баланс:
ТекстКонечныйБаланс	Ширина=Наполнить родительский Подсказка=Пустая строка Включено=нет галочки
КнопкаРассчитать	Текст=Рассчитать

Программирование компонентов

Перейдите в раздел Блоки.

Добавим обработчик нажатия на кнопку КнопкаРассчитать. Используем внутри обработчика объявление локальных переменных. Первой переменной дайте имя баланс:

Добавим ещё три переменные:

месяцы - продолжительность вклада;
шаг - счётчик месяцев для цикла (0);
процент - под какой процент помещается вклад (0.005).

Чтобы добавить переменные необходимо:

Нажмите на шестерёнку в блоке инициализировать локальную;
Схватите блок имя X
и присоедините его к уже существующему списку переменных.

Скрипт с инициализированными переменными должен выглядеть следующим образом:

Расчёт баланса выполним по следующему алгоритму:

пока шаг < месяцы выполнить
    баланс = баланс + 0.005 * баланс
    шаг = шаг + 1

Из категории Управление возьмите блок пока проверить … выполнить и разместите его внутри объявления локальных переменных. Добавьте условие при выполнении которого будет выполняться тело цикла:

Выражение для расчёта баланса составьте в следующем порядке:

Вычисление баланса и увеличение шага добавьте внутрь цикла:

Значение переменной баланс форматируем до двух знаков после запятой и присваиваем свойству Текст компонента ТекстКонечныйБаланс.

Итоговый скрипт выглядит следующим образом:

Время тестирования!

Протестируйте приложение. Для начального баланса равного 1000 и количества месяцев равного 48, итоговый баланс равен 1270,49.

Проект готов.

Сноски

Coffee Shop Ordering App UX/UI Case Study ↩︎
Источник изображений: http://fingramota.by/ru/guide/money/coins ↩︎

Введение

Основные принципы дизайна

Приближенность и выравнивание1

Повторение и контраст

Цветовое оформление приложения

Настройка цвета в AppInventor

Переход между экранами

Задание № 1. Кубик

Видео-инструкция

Интерфейс приложения

Программирование компонентов

Задание № 2. Геометрический калькулятор

Видео-инструкция

Интерфейс экрана Screen1

Интерфейс экрана ScreenCylinder

Программирование компонентов

Задание № 3. Калькулятор мелочи

Загрузка медиа-ресурсов

Проектирование интерфейса

Программирование компонентов

Дополнительное задание

Задание № 4. ИМТ

Проектирование интерфейса

Программирование компонентов

Задание № 5. Банковский вклад

Проектирование интерфейса

Программирование компонентов

Сноски

Приближенность и выравнивание¹