Лабораторна робота № 5 На тему: «Проектування та розроблення графічного користувацького інтерфейсу для програмного продукту»

Мета роботи. Вивчити основні принципи побудови графічного користувацького інтерфейсу для програмного продукту:

1. для програмного продукту типу Desktop;

2. для web-орієнтованого програмного продукту.

Короткі теоретичні відомості Основні поняття графічного інтерфейсу кристувача (gui)

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

Призначення інтерфейсу користувача ‑ це засіб для спілкування між людиною і комп'ютером. На практичному рівні, інтерфейс це набір стандартних прийомів взаємодії з технікою. На теоретичному рівні інтерфейс має три основних компоненти:

• Спосіб спілкування машини з людиною-оператором.

• Спосіб спілкування людини-оператора з машиною.

• Спосіб призначеного для користувача представлення інтерфейсу.

В основному користувач генерує повідомлення наступних типів:

• запит інформації

• запит допомоги

• запит операції або функції

• введення або зміна інформації

У відповідь користувач отримує підказки або довідки; інформаційні повідомлення, що вимагають відповіді; накази, що вимагають дії; повідомлення про помилки і іншу інформацію.

Інтерфейс користувача програмного забезпечення включає:

• засоби відображення інформації;

• командні режими, мова "користувач - інтерфейс";

• пристрої і технології введення даних;

• діалоги, взаємодія і транзакції між користувачем і комп'ютером, зворотний зв'язок з користувачем;

• підтримку ухвалення рішень в конкретній предметній області;

• порядок використання програми і документацію на неї.

Інтерфейс Користувача (ІК) часто розуміють тільки як зовнішній вигляд програми. Проте, користувач сприймає через нього всю програму в цілому, а значить, таке розуміння є дуже вузьким. Насправді ІК об'єднує в собі всі елементи і компоненти програми, які здатні робити вплив на взаємодію користувача з програмним забезпеченням (ПЗ).

Це не тільки екран, який бачить користувач. До цих елементів відносяться:

• набір завдань користувача, які він вирішує за допомогою системи;

• використовувана системою метафора (напр., робочий стіл в MS Windows);

• елементи управління системою;

• навігація між блоками системи;

• візуальний (і не тільки) дизайн екранів програми;

• засоби відображення інформації, інформація, що відображається, і формати;

• пристрої і технології введення даних;

• діалоги, взаємодія і транзакції між користувачем і комп'ютером;

• зворотний зв'язок з користувачем;

• підтримка ухвалення рішень в конкретній наочній області;

• порядок використання програми і документація на неї.

По аналогії з процедурним і об'єктним підходом до програмування розрізняють процедурно-орієнтований і об'єктно-орієнтований підходи до розробки інтерфейсів (див. рис. 1).

Рис.1. Типи призначених для користувача інтерфейсів

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

Об'єктно-орієнтовані інтерфейси використовують декілька іншу модель взаємодії з користувачем, орієнтовану на маніпулювання об'єктами наочної області. Ми детально не зупинятимемося на об'єктно-орієнтованих призначених для користувача інтерфейсах, оскільки для вирішення учбових завдань достатньо процедурного підходу, значно простішого в реалізації. Як приклад об'єктно-орієнтованого інтерфейсу можна привести програму «Провідник» ОС Windows. Об'єктами наочної області в цьому випадку є файли і теки. Виконання операції може виглядати так: користувач «берет» файл (точніше, об'єкт інтерфейсу, відповідний файлу) і «перетаскивает» його в іншу теку, ініціюючи таким чином переміщення «фізичного» файлу на диску.

Процедурно-орієнтовані інтерфейси, у свою чергу, можна розділити на декілька підтипів: консольні, меню і з вільною навігацією.

Консольним називають інтерфейс, який організовує взаємодію з користувачем на основі послідовного введення і виведення інформації в текстовому режимі за принципом «вопрос-ответ». Зазвичай такий інтерфейс реалізує конкретний сценарій роботи, наприклад: введення даних – рішення задачі – виведення результату. Єдине відхилення від послідовного процесу, яке забезпечується даним інтерфейсом, полягає в організації циклу для обробки декількох наборів даних. Подібні інтерфейси в даний час використовують тільки в процесі навчання програмуванню або в тих випадках, коли вся програма реализує одну функцію, напр., в деяких системних утилітах.

Зовнішній вигляд деяких поширених інтерфейсних елементів в системі ОС Windows приведений на рис. 2. Перерахуємо ці компоненти (у дужках дані сталі англійські назви):

• опція, прапорець (checkbox), рис. Error: Reference source not found,  а;

• поле введення (edit box), рис. Error: Reference source not found,  би;

• набірний лічильник (spin control, up/down control), рис. Error: Reference source not found,  в;

• кнопка (button), рис. Error: Reference source not found,  г;

• індикатор ходу виконання завдання (progress bar), рис. Error: Reference source not found,  д;

• повзунок (slider), рис. Error: Reference source not found,  е;

• списки: лінійний (list box, рис. Error: Reference source not found,  же), випадний (combo box, рис. Error: Reference source not found,  з), деревовидний (tree control, рис. Error: Reference source not found,  і);

• перемикач (radio button), рис. Error: Reference source not found,  до;

• меню (menu), рис. Error: Reference source not found,  л;

• панель інструментів (toolbar), рис. Error: Reference source not found,  м.

Істотною особливістю інтерфейсів з вільною навігацією є здатність змінюватися в процесі взаємодії з користувачем, пропонуючи вибір тільки тих операцій, які мають сенс в конкретній ситуації (наприклад, блокуючи введення в ті або інші поля).

Як правило, інтерфейси цього типу реалізують, використовуючи подієве програмування і об'єктно-орієнтовані бібліотеки, що припускає застосування візуальних середовищ розробки програмного забезпечення.

а)	б)	в)
г)	д)	е)
ж)	з)	и)
к)	л)	м)

Рис. 2. Компоненти інтерфейсу з вільною навігацією