Практична РОБОТА № 2
Створення прототипу програмного продукту з віконним інтерфейсом. Web- інтерфейс
Мета: Ознайомитись з поняттями прототипування ПЗ. Розробити прототип програмного додатку для віконного інтерфейсу.
Завдання:
Створити прототип програми з віконним чи web-інтерфейсом згідно визначеної предметної області (лабораторна № 1).
Прототип виконати з допомогою програмних додатків Mockplus, Moqups, Marvel App, Axure чи інших відповідних програм (за узгодженням з викладачем)
Теоретичні відомості
Mockup або mock-up (макет) – непрацююча модель, виконана в натуральну величину і виглядає так, як буде виглядати працюючий екземпляр. Тобто, зроблена в певній програмі веб-сторінка чи віконне представлення, віддана на верстку – це мокап. А дизайном вона стане, коли з’явиться інтерактивність. Мокап може бути відносно динамічними і інтерактивними.
Веб-каркас (мокап) - це, по суті, схематичний план веб-сторінки для UI / UX дизайнера. Основу можна намалювати навіть від руки на аркуші паперу, але значно ефективніше використовувати інструменти для створення каркасів, оскільки вони дозволять вам застосувати Drag and Drop інструменти, співпрацювати з іншими дизайнерами і показати клієнтам свої ідеї, перш ніж почати їх втілювати. Дизайнер створює каркас в чорно-білому кольорі, щоб намітити розташування основних елементів таких як логотип, меню навігації, контент і багато іншого.
Розробка прототипу – це наступний крок після створення каркаса. На цьому етапі дизайнер вибирає кольори і стилі для сайту. Він заглиблюється в UI дизайн і закінчує планування сайту або програми, не забуваючи про потреби і побажання користувачів.
Трактування вимог технічного завдання не завжди буває однозначним. Прототип показує одну з версій втілення ідеї замовника, передану через параграф ТЗ. Коли програміст бачить кінцевий варіант, то прагне відповідати йому і чітко визначає цілі і їх межі. Маючи прототип, ймовірність отримати бажаний результат значно зростає. Невідповідність робочого додатку і прототипу може стати аргументованою позицією замовника і підставою для внесення доробок в додаток. Не варто опускати ті випадки, коли досягнення відповідності додатку до прототипу є технічно-неможливим (або програмно не оптимальним), дані моменти повинні бути узгоджені з виконавцем індивідуально.
Порядок виконання та результати роботи
Зразок!!!!! – робити за темою свого сайту. Для створення проєкту використати будь-яку систему для прототипування макетів.
Створення віконного макету в Moqups (На основі роботи відділу постачання хлібозаводу)
Переходимо на головний сайт Moqups: https://moqups.com/. Обираємо Free Trial версію (рис.12.1.1.).
Рис.12.1.1. Створення проекту
Після реєстрації перед нами з’являється робоча область, з якою ми будемо працювати (рис. 12.1.2.).
Рис.12.1.2. Робоча область проекту
Зліва під Main Menu розміщена панель інструментів за допомогою якої ми будемо створювати наш макет. При створенні нового проекту у нас відразу з’являється 3 сторінки (Page), але при необхідності ми можемо їх додати натиснувши на New Page.
Вставляємо шаблон Робочого Столу Windows (доступний для завантаження в інтернеті).
Рис. 12.1.3 Використання шаблону
У вкладці Icons обираємо іконку, яка буде виконувати роль *.exe файлу. Іконку також можна завантажити на свій вибір з інтернету.
У вкладці Interections вибираємо такі параметри: On > Double-Click, Do > Go to Specific Page, Target > (Вказуємо сторінку, яка буде Головною після відкриття, у нашому випадку це Головна).
Рис. 12.1.4 Параметри переходу
Запустивши в режимі Preview перевіряємо чи виконується наша подія.
На сторінці, що відкрилась, створюємо вікно, яке буде головною сторінкою нашого макету.
Рис.12.1.5 Головна сторінка макету
За допомогою елемента Rectangle створюємо нашу робочу область. Справа можна обрати колір заливки прямокутника, а також колір лінії границі якщо необхідно.
Рис.12.1.6 Рисунок підбору поєднання кольорів.
На верхню панель додаємо Link Bar та підписуємо наші вкладки. Зауваження: *ставимо перед тією назвою з якою ми працюємо, у нашому випадку це *Головна.
Рис. 12.1.7 Використання Link Bar
Запрограмуємо переходи по сторінкам на нашому Link Bar. Для цього виконаємо такі операції: Interactions > Hotspots > Create Hotspot або за допомогою комбінації клавіш Ctrl+K.
Рис. 12.1.8 Встановлення переходів в Link Bar
Після виконання таких дій у нас з’явиться зелений прямокутник, який ми наводимо на область, по якій будемо переходити. У нашому випадку це Головна, Про компанію, Контактна інформація. Далі виконуємо такі операції: On>Click or Tap, Do > Go to Specific Page, Target>Головна.
Таку операцію повторяємо для вкладок Про компанію та Контактна інформація. У режимі Preview перевіряємо наші кнопки.
У панель Images завантажуємо необхідні нам елементи, з якими будемо працювати.
Рис. 12.1.9 Завантаження елементів
Оформлюємо нашу головну сторінку. Для цього використаємо такі елементи (рис. 12.1.10)
Рис. 12.1.10 Елементи заповнення сторінок
Рис. 12.1.11 Заповнена головна сторінка
За допомогою елементів, вказаних вище, було створено макет головної сторінки.
P.S. Для іконок Instagram та Facebook створюємо Hotspots як у пункті 7, змінивши один параметр: Do > Go To URL, URL > Вказуємо посилання на соц. Мережі.
Копіюємо усі елементи з Головної сторінки та вставляємо у сторінку Про компанію. Усі зайві елементи видаляємо.
Рис.12.1.12 Сторінка «Про компанію»
У Link Bar ставимо * перед Про компанію.
Рис.12.1.13 Link Bar на сторінці «Про компанію»
У зв’язку з тим, що ми копіювали елементи з головної сторінки, усі Hotspots зберіглися, тому їх не потрібно присвоювати знову.
Повторюємо дії, що створюють елементи на віконній формі. Оформлюємо вкладку Про компанію за допомогою елементів на рис.12.1.10:
Рис. 12.1.14 Заповнена сторінка «Про компанію»
Переходимо до вкладки Контактна інформація. Повторюємо ту саму процедуру як і з вкладкою Про компанію. Особливістю вкладки Контактна інформація є те, що ми додаємо файл(у нашому випадку анкета постачальника), який завчасно був завантажений на Хмарне сховище і через Link вказуємо шлях на нього. Також з’являється такий елемент як Map.
Рис. 12.1.15 Сторінка «Контактна інформація»
Зв’язуємо посилання з елементом Link. Двічі клацнувши ЛКМ по елементу у нас з’явиться меню, що виринає. Там обираємо елемент Гіперпосилання та вказуємо шлях до документу, якщо це потрібно.
Рис. 12.1.16 Зв’язування посилань на сторінці «Контактна інформація»
Запускаємо проект у режимі Preview. Перевіряємо готову програму.
Рис. 12.1.17 Попередній перегляд створеного макету
Інструкція створення макету віконного додатку в програмі Mockplus
Для початку роботи запустіть файл «UIA.mp» через Mockplus. Далі натисніть кнопку «Preview» задля відкриття макету у робочому режимі.
Шапка сторінки
На кожній сторінці додатку є шапка жовтого кольору, яка на кожній сторінці має практично ідентичний вигляд. У ній міститься назва сторінки, на якій перебуває користувач у даний момент часу. З правої сторони видніється логотип авіакомпанії «МАУ». З лівої сторони можна побачити значок меню (Рис.12.2.1).
Рис.12.2.1. Значок меню
Після його натискання з’явиться список з головними сторінками додатку (Рис.12.2.2). Внизу списку містяться іконки з популярних соціальних мереж, при натисканні яких можна перейти на офіціальні сторінки компаній відповідно.
Рис.12.2.2. Список сторінок головного меню
Сторінка «Головна сторінка»
Після запуску відкриється головна сторінка макету віконного додатку (Рис. 12.2.3).
Рис.12.2.3. Головна сторінка
На даній сторінці міститься інформація про авіакомпанію «МАУ»: її історія (заснування, існування та плани на майбутнє) та основні партнери. У правому нижньому куті присутня карта місцезнаходження головного офісу компанії. У правому нижньому куті є кнопка з переходом на сторінку «Мій кабінет».
Сторінка «Мій кабінет»
До даної сторінки можна перейти кількома способами:
- головне меню додатку;
- через спеціальну кнопку на «Головній сторінці», про яку зазначалося вище.
У «Кабінеті» (Рис. 12.2.4) міститься уся необхідна інформація про користувача даним додатком: фотографія клієнта, справжнє Ім’я, відправлені заявки на переліт. Зверніть увагу на ідентифікаційний номер під фотокарткою: він спеціально створюється для кожного користувача і не може повторюватися з іншими.
При бажанні змінити певну інформацію можна натиснути кнопку «Редагувати». Задля виходу з кабінету є кнопка «Вихід». Після її натискання користувача переносить на «Головну сторінку» додатку.
Відправлені користувачем заявки виводяться у таблиці знизу сторінки. Якщо заявку переглянуто, то на останньому стовпці напроти необхідної заявки, буде відображена галочка.
Рис.12.2.4. Сторінка «Мій кабінет»
Сторінка «Розклад рейсів»
Через головне меню можна перейти до «Розкладу рейсів» (Рис. 12.2.5). На цій сторінці міститься текст із зауваженнями щодо рейсів.
Рис.12.2.5. Сторінка «Розклад рейсів»
У нижній частині додатку міститься таблиця із розкладом рейсів. У ній міститься така інформація: маршрут, рейс, день вильоту, період та час вильоту. Біля заголовку стовпця можна побачити іконку знаку питання (Рис.12.2.6). При натисканні іконки з’являться значення чисел у даному стовпці (Рис.12.2.7).
Рис.12.2.6. Іконка знаку питання
Рис. 12.2.7. Інформація для користувача
Для сортування інформації у таблиці є можливість скористатися даними панелями (Країна та Дата), у яких слід вибрати потрібні для користувача параметри сортування (Рис. 12.2.8). Після натискання кнопки «Знайти» у таблиці виведуться рейси з заданими параметрами.
Рис. 12.2.8. Панель для задання параметрів сортування
Сторінка «Форма заяви»
Через головне меню можна перейти до сторінки «Форма заяви» (Рис. 12.2.9). Тут користувач має можливість створити заяву для перельоту і відправити її до компанії для подальшого розглядання.
Рис. 12.2.9. Сторінка «Форма заяви»
Для створення заяви була встановлена можливість написання користувачем даних для себе за допомогою клавіатури. Справа міститься замітка для користувача з важливою інформацією. Також присутня можливість вибору міста вильоту з списку, що випадає, та даних про прибуття (країна, місто) (Рис. 12.2.10).
Рис. 12.2.10. Випадаючі списки на сторінці «Форма заяви»
Після заповнення інформації необхідно натиснути кнопку «Відправити». Після її натискання користувачу виведеться інформація у вигляді тексту «Заявку подано» та QR-код заяви (Рис. 12.2.11).
Рис. 12.2.11. Приклад роботи кнопки «Відправити»
Висновок: За допомогою макету віконного додатку ми маємо можливість побачити майбутній дизайн, сторінки та функції авіакомпанії «МАУ». Також є можливість випробувати додаток на простоту у використанні новому клієнту.
Контрольні питання
Опишіть порядок процесу проектування.
Що таке рівні проектування?
Які вертикальні рівні можна виділити при проектуванні комп’ютерних систем?
З яких рівнів складається функціональне проектування?
З яких рівнів складається алгоритмічне проектування?
Що включає конструкторське проектування?
Що включає технологічне проектування?
У чому полягають процедури аналізу і синтезу?
Опишіть порядок процесу проектування.
Що таке рівні проектування?
З яких рівнів складається функціональне проектування?
З яких рівнів складається алгоритмічне проектування?
Що включає конструкторське проектування?
Що включає технологічне проектування??