Вы находитесь на странице: 1из 26

Разработка

мобильных приложений
дополненной реальности
Урок № 2
Дизайн мобильных
приложений.
Использование
алгоритмов

Содержание
Дизайн мобильных приложений........................................ 3
Тренды дизайна мобильных приложений........................ 7
Использование алгоритмов................................................ 15
Практика................................................................................. 18

2
Дизайн мобильных приложений

Дизайн
мобильных приложений
Дизайн — это то, каким видит ваше приложение
пользователь. Он включает в себя визуальное оформле-
ние и расположение кнопок, ползунков, полей для ввода,
информации и т.д.
Все эти элементы составляют пользовательский ин-
терфейс (UI). Мобильный UI — это сенсорный дисплей
мобильного устройства, смартфона или планшета, который
позволяет пользователю взаимодействовать с приложе-
ниями, различными функциями и содержимым гаджета.
Маленький экран мобильного устройства обязывает
разработчиков обеспечивать удобство использования
приложения. Это значит, что на небольшом простран-
стве нужно правильно распределить все самые важные
элементы.
Есть несколько способов сделать это. Один из них —
использовать иконки для кнопок вместо надписей. Также
можно автоматически скрывать элементы управления до
тех пор, пока они не будут нужны пользователю (выпа-
дающее или гамбургер-меню).
Чтобы понять, какой дизайн использовать, представьте
себе ситуации, в которых люди будут использовать ваше
приложение.
Такие ситуации называются контекстом. Всего выде-
ляет три основных контекста:
1. Скучно — многие люди пользуются мобильными
устройствами в спокойной обстановке, когда им скучно

3
Урок № 2

(например, дома на диване). В этом случае сеанс ис-


пользования приложения будет длительным (рис. 1).

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

Рисунок 2

4
Дизайн мобильных приложений

3. Потерялся — этот сценарий предполагает, что поль-


зователь находится в пути или в незнакомой обста-
новке. Ему нужно максимально быстро найти дорогу,
просмотреть маршруты и т.д. (рис. 3).

Рисунок 3
Рекомендации касательно общей стилистики интер-
фейсов:
■■ На любое действие пользователя должна быть види-
мая реакция приложения.
■■ Дизайн должен быть удобным для взаимодействия
с  помощью большого пальца. Взаимодействуя со
смартфонами, люди чаще всего используют большой
палец. Именно поэтому стоит размещать элементы на
странице таким образом, чтобы пользователю было
удобно работать с девайсом.
■■ Удобное управление элементами. Например, основную
информацию стоит подавать в средней части экрана,
важные элементы интерфейса — сверху, а навигацию
стоит скрыть и показывать только при нажатии соот-
ветствующей иконки. Элементы управления следует
помещать в нижней части экрана (как и в интерфей-

5
Урок № 2

сах для ПК), чтобы пользователь понимал, что будет


происходить дальше (рис. 4).

Рисунок 4

6
Тренды дизайна мобильных приложений

Тренды дизайна
мобильных приложений
Тенденции UI-дизайна мобильных устройств и при-
ложений постоянно меняются. Это зависит от потреб-
ностей пользователей и развития технологий. Но можно
выделить несколько актуальных современных трендов.
1. VR/AR (виртуальная реальность/расширенная реаль-
ность).
VR и AR сейчас очень популярны. По прогнозам
количество таких приложений вырастет, а также будут
активно развиваться сайты с AR. Эти моменты повлияют
и на интерфейсы. Они подарят множество новых воз-
можностей дизайнерам, которые хотят обновить текущие
и будущие проекты (рис. 5).

Рисунок 5

7
Урок № 2

2. Реализация UX через интерфейс.


В последнее время пользовательский интерфейс отхо-
дит на второй план и уступает место UX. Нормой станут
шаблоны, в результате UX станет более практичным,
удобным и последовательным (рис. 6).

Рисунок 6
3. Многослойность и эффект перекрытия.
Наложение шрифтов, графики и цветов делает UI-
дизайн более привлекательным, своеобразным, и расши-
ряет пространство. Именно поэтому в последнее время
перекрытие часто используется дизайнерами.
Если сложить вместе тени, цвета и отдельные элемен-
ты, UI будет более интересным и привлечет внимание
пользователя (рис. 7).
4. Градиент.
Последние несколько лет в проектах всё чаще ис-
пользуют градиенты, с помощью них можно создать
интересный эффект.

8
Тренды дизайна мобильных приложений

Градиент можно использовать для оформления ло-


готипов и кнопок, чтобы выделить сайт среди других
(рис. 8).

Рисунок 7

Рисунок 8

9
Урок № 2

5. Кривые и геометрические фигуры.


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

Рисунок 9
6. Контраст цвета или шрифта для лучшей читаемости.
Сильный контраст также помогает в дизайне. К при-
меру, использование разных кеглей и типов начертания
может обеспечить ощущение иерархии и визуально
увеличить пространство. Аналогичного эффекта можно
добиться с помощью ярких оттенков (рис. 10).
7. Использование иллюстраций.
Изображения дают понять, что представляет собой
сайт или приложение, выделяют основную цветовую схе-
10
Тренды дизайна мобильных приложений

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


самые разные иллюстрации (эскизы, рисунки, простые
фигуры и т.д.). Все они создают особенный опыт поль-
зователя (рис. 11).

Рисунок 10

Рисунок 11

11
Урок № 2

8. Анимация.
Добавление анимации иконок, кнопок, шрифтов или
фотографий хорошо влияет на пользователя, дарит ему
приятные впечатления.
Популярным остается тренд микровзаимодействия,
когда разные детали интерфейса реагируют на действия
пользователя (рис. 12).

Рисунок 12
9. Простота и удобство.
Минимализм всё ещё в моде. Именно простота и удоб-
ство нравится пользователям. Поэтому стоит обратить
внимание на интересные, не перегруженные графикой
сайты, где основную роль играет контент (рис. 13).
10. Смешивание различных трендов в одном дизайне.
Лучшее решение — использовать несколько подходов
сразу. Так можно создать более дружественный интерфейс
(рис. 14).

12
Тренды дизайна мобильных приложений

Стоит помнить, что тренды меняются так же быстро,


как и потребности пользователя. Они связаны с новыми
технологиями и во многом зависят от правильного анализа.

Рисунок 13

Рисунок 14

13
Урок № 2

Большое значение в оформлении мобильных прило-


жений играет система Material Design, которая построена
на 4 принципах (рис. 15):
■■ Тактильные поверхности.
■■ Полиграфический дизайн.
■■ Осмысленная анимация.
■■ Адаптивность.

Рисунок 15
Она довольно проста, отличается яркостью и легко
применима в оформлении приложений для любых плат-
форм (мобильные телефоны, планшеты и т.д.). С прин-
ципами правильного оформления в стиле Material Design
можно познакомиться на официальном сайте.
Если же вам нужно подобрать яркую, гармоничную
палитру для вашего приложения, лучше воспользоваться
подборками с сайта.

14
Использование алгоритмов

Использование алгоритмов
Красивый дизайн — это далеко не все, что нужно для
создания полезного и стабильно работающего приложения.
Его проектирование следует начать с построения алго-
ритма. Давайте вспомним, что же из себя представляет
алгоритм. Это набор инструкций, которые описывают
последовательность действий программы. Подавать та-
кие алгоритмы удобнее всего в виде блок-схем. Приведем
простейший пример такой схемы (рис. 16).

Рисунок 16
Любая программа начинается со специального блока
«Начало», а заканчивается специальным блоком «Конец».
15
Урок № 2

К тому же у программы может быть только один блок


«Начало» и только один блок «Конец» (рис. 17).

Рисунок 17
Приложения всегда работают с входящими данными.
Поэтому в схеме выделяется отдельный блок для обозна-
чения процедуры ввода и вывода данных.
Блоки, обозначающие операции (например, расчеты),
изображены в форме прямоугольника.
Ромбовидный блок в схеме — это блок принятия
решений. На этом этапе программа определяет, соот-
ветствует ли действие заложенному в нее условию. Это
своеобразная развилка. С помощью таких блоков можно
описать программу любого уровня сложности.
Чтобы разобрать пример чуть более сложного алго-
ритма, представим, что у нас есть 3 лотерейных билета,
и мы создаем приложение, которое знает выигрышный

16
Использование алгоритмов

номер. Это приложение должно определить, есть ли среди


наших билетов выигрышный (рис. 18).

Рисунок 18
Первым блоком в нашей схеме станет блок «Начало».
Далее блок данных, в которых указано, какие билеты у нас
есть. В следующем блоке содержится выигрышный номер.
Теперь проверяем первый билет. Ромбовидный блок создает
развилку: если номер билета соответствует выигрышно-
му, то на экран выводится текст «Вы выиграли!», а если
не соответствует, то программа проверяет следующий
билет. После этого программа приходит к блоку «Конец».

17
Урок № 2

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

Рисунок 19
Для любого приложение важным является его дизайн.
Для того чтобы создать интересный и удобный дизайн,
следует пользоваться правилами построения интерфей-
сов. Рассмотри первое правило — компоновка объектов.
Если добавить несколько объектов на экран, увидим
следующее (рис. 20):

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

18
Практика

Часто такие элементы нужно выравнивать по центру.


Чтобы изменить выравнивание, нужно зайти в настрой-
ки экрана и выставить свойства Align Horizontal и Align
Vertical в Center (рис. 21).

Рисунок 21
В результате получим следующее (рис. 22):

Рисунок 22
Если изменить эти свойства на другие значения, мож-
но получить другой результат, в зависимости от ваших
предпочтений.
Кроме этого, для компоновки элементов могут исполь-
зоваться специальные компоненты. Layout-компоненты
отвечают за макетирование экрана, позволяют размещать
компоненты интерфейса пользователя горизонтально,
вертикально, или в ячейки таблицы (рис. 23).

19
Урок № 2

Рисунок 23
В среде MIT App Inventor нет форматирования, по-
зволяющего задавать интервалы между определенными
компонентами, поэтому для того, чтобы задать расстояние
и пространство между элементами, используются ком-
поненты с заданными свойствами (высота или ширина).
Для нашего приложения нужно создать следующую
схему пользовательских компонентов (рис. 24):

Рисунок 24

20
Практика

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


с параметрами Width, Height и Font. Также не забывайте
об именовании объектов. Для простой и удобной работы
с приложением, нужно корректно и понятно называть
все объекты.
После создания макета приложения можно перехо-
дить к добавлению логики. Перейдите в режим блоков.
В первую очередь сформируем события, когда наш
экран загружен (рис. 25).

Рисунок 25
Далее нужно обнулить текст ошибки (изначально
мы будем использовать его для вывода текста, а затем —
только если будет ошибка) (рис. 26).

Рисунок 26
Для этого нам понадобятся блок ErrorLabel и Text.
Теперь нужно обработать событие нажатия по кнопке.
События находятся в разделе LoginButton (рис. 27).

21
Урок № 2

Рисунок 27
После обработки всех необходимых событий, нам
нужно создать логику проверки логина и пароля. При-
мерная схема проверки показана на рисунке 28.

Рисунок 28
Проверим логин. Для этого нужно взять блок условия
(рис. 29).

Рисунок 29
Теперь заполним условие, используя разделы Logic,
Text и LoginTextBlock (рис. 30).

22
Практика

Рисунок 30
Если текст не сходится, нужно сообщить об этом
в ошибке (рис. 31).

Рисунок 31
После проверки логина, нужно проверить пароль
(рис. 32).

Рисунок 32

23
Урок № 2

Теперь нужно создать второй экран во вкладке De­


sig­ner (рис. 33).

Рисунок 33
Далее перейдем во вкладку блоки и допишем послед-
нюю недостающую строку (рис. 34).

Рисунок 34
Чтобы усложнить задание, оформим приложение
в стиле Material Design. Для этого в режиме Designer
достаточно задать нужные параметры каждому из эле-
ментов (рис. 35).

24
Практика

Рисунок 35

25
Урок № 2
Дизайн мобильных приложений.
Использование алгоритмов

© Компьютерная Академия «Шаг»


www.itstep.org

Все права на охраняемые авторским правом фото-, аудио- и видеопро-


изведения, фрагменты которых использованы в материале, принадле-
жат их законным владельцам. Фрагменты произведений используются
в иллюстративных целях в объёме, оправданном поставленной задачей,
в рамках учебного процесса и в учебных целях, в соответствии со ст. 1274
ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське право і суміжні
права». Объём и способ цитируемых произведений соответствует
принятым нормам, не наносит ущерба нормальному использованию
объектов авторского права и не ущемляет законные интересы автора
и правообладателей. Цитируемые фрагменты произведений на момент
использования не могут быть заменены альтернативными, не охраня-
емыми авторским правом аналогами, и как таковые соответствуют
критериям добросовестного использования и честного использования.
Все права защищены. Полное или частичное копирование материалов
запрещено. Согласование использования произведений или их фраг-
ментов производится с авторами и правообладателями. Согласованное
использование материалов возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое
использование материалов определяется действующим законодатель-
ством Украины.

Вам также может понравиться