Практическая работа №1

Начало работы с Adobe XD

Ход работы
I. Ознакомиться с назначением, особенностями и основными функциями Adobe XD.
II. Создать прототип мобильного приложения по заданному варианту.
1. Создать новый проект
2. Выбрать любое мобильное устройство (например, iPhone 6) и создать первую
монтажную область.
3. Переименовать первую монтажную (или рабочую – в разных версиях, Artboard в
англ.) область в «Home»
4. Изменить фон рабочей области.
5. Создать шапку экрана в виде изображения и текста поверх него. Для шапки
будем использовать изображение и текст. Перейдите по File > Import для
импорта изображения или перетяните его на рабочую область. Далее, мы
используем инструмент “Текст” (горячая клавиша T) и вводим текст. Вы можете
изменять свойства текста (размер шрифта, начертание, кернинг) в свойствах на
панеле справа.
6. Добавление области контента. Добавьте область контента под шапку выбрав
инструмент “прямоугольник” (горячая клавиша R). Задайте размер области
контента не более 1/6 свободной части экрана. Как обычно, вы можете изменять
свойства на панеле справа. Вы можете изменять область контента и вставить
изображение и текст, как показано в предыдущем шаге.
7. Дублирование сетки. Для дублирование области контента, используйте
инструмент Repeat Grid. Выберите необходимые для копирования элементы
зажав Shift. Выберите область контента, изображение и текстовые элементы.
Затем нажмите кнопку Repeat Grid на панеле свойств. Теперь, ваша область
имеет зеленую границу и два маркера, которые вы можете использовать для
дублирование контента по-горизонтали или по-вертикали. Продублируйте
области так, чтоб на экране поместилось 6 шт.
Совет: Вы можете выбрать разные изображения и перетянуть их на
дублированное изображение. Прежнее изображение будет заменено на
выбранное вами. Теперь вы можете изменить текст для каждой области
индивидуально, но при изменении стиля элемента, он будет применен ко всем
остальным областям.
8. После создания дизайна “Home”, нужно добавить 6 рабочих областей в ваш
проект (другие шаги, например). Горячая клавиша “A”, откроет инструмент
Artboard, в котором вы сможете выбрать размер вашей новой области справа в
приложении. Кликните рядом с вашей первой работой и появится новая рабочая
область.
9. Переименуйте каждую из 6 новых рабочих областей в соответствии с их
тематикой.
10. Создание прототипа: Свяжите ссылками ваши рабочие области.
После выбора элемента, который вы хотите связать, вы увидите справа
небольшую синюю стрелку. При клике на нее, вы можете указать страницу
перехода (также, вы можете перетянуть стрелку на желаемую страницу). Затем,
выберите переход, скорость и длительность анимации.
11. Объедините все ваши рабочие области в проекте для создания полностью
рабочего прототипа. Предусмотреть переходы между рабочими областями и
возврат «Домой».
 12. На экране «Home» создать две активные кнопки «О нас» и «Контакты». Создать
2 новые рабочие области и связать с этими кнопками. Предусмотреть возврат
«Домой».
13. Просмотр прототипа компьютере. Вы можете просматривать ваш прототип,
нажав кнопку проигрывания в верхнем правом углу Adobe XD. Появится новое
окно с вашим прототипом. Вы можете записать видео ваших изменений путем
нажатия красной кнопки записи в верхнем правом углу окна просмотра. Также,
вы можете отправить готовый .mov файл, если нужно.
14. Просмотр прототипа на смартфоне. Слева от кнопки проигрывания вы увидите
кнопку смартфона. Если вы присоединили ваше устройство, вы увидите ваш
прототип на нем.

Результат работы: файл с готовым прототипом (или ссылку на него) выслать на

email преподавателю.

*Для Premium-версии Adobe XD: в режиме «публикация», последняя опция в правом

верхнем углу – «поделиться». Здесь вы можете создать новую ссылку или обновить
существующую (если вы уже делились своим прототипом). После этого, вы увидите
короткую ссылку, которую можно передавать.

Варианты для прототипов:

1. Магазин одежды.
2. Автосалон.
3. Магазин бытовой техники.
4. Турфирма.
5. Служба доставки еды.
6. Городская афиша.
7. Ресторан.
8. Университет.
9. Футбольный клуб.
10. Спортшкола.
11. СПА салон.
12. Онлайн аптека.
13. Кинотеатр.
14. Велоклуб.
15. Кофейня.
16. Зоомагазин.
17. Магазин товаров hand made.
18. Гостиница.
19. Книжный магазин.
20. Частная клиника.