Занятие № 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})

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>`

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

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

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

Переход

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

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

Сноски

1. Coffee Shop Ordering App UX/UI Case Study