Ім'я файлу: ПРАКТИЧНА РОБОТА № 5.docx
Розширення: docx
Розмір: 54кб.
Дата: 04.06.2021
скачати
Пов'язані файли:
реферат (.docx
vyrobnycha-praktyka.doc
Календарне планування НУШ.docx
Виды сигматизма и методы его исправления.docx
Без имени 1.odt
bestreferat-201443.docx
TК-2 -2021.doc
НГтаКГ_Л1_б.pptx
Інноваційні форми профорієнтаційної роботи.docx
Istorija menedzhmentu KL.pdf
биомед и аутизм.pdf
informatsionnye-potrebnosti-i-informatsionnye-resursy-ukrainskih
Тести біосфера.docx
Специфіка читання епічних творів.docx
ПРИКЛАДИ ЗАДАЧ.docx
Реферат_психоанализ.docx
1324499.doc
практ3.doc
Тема_9.pdf
189860.docx
ЛР6.doc
urrizmir0632.doc

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



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

    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. Компоненти інтерфейсу з вільною навігацією

Елементи Інтерфейсу програмних систем


Традиційно в програмних системах можна виділити два види інтерфейсу:

  • Інтерфейс, що реалізовується за допомогою клієнтської програми;

  • Web – інтерфейс, що реалізований на web-сервері.


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

  • Властивості об'єкту - це його характеристики (висота, ширина і так далі);

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

  • Методи об'єкту - дії, які можна проводити з об'єктом в ході виконання програм.


Всі об'єкти форм діляться на два класи:

  • Об'єкти управління - об'єкти, що здійснюють управління БД (Наприклад: Кнопка або Випадаючий список);

  • Об'єкти для відображення інформації - елементи, що відображають вміст таблиць, запитів або фільтрів, що дозволяють додавати змінювати і видаляти інформацію, і проводити її аналіз.


Всі форми в клієнтському застосуванні діляться на три групи:

  1. Форми для роботи з даними - форми, що містять як об'єкти управління, так і об'єкти проглядання даних. Такі форми призначені для відображення, зміни, видалення і аналізу даних;

  2. Кнопкові форми - форми, об'єкти управління, що призначаються для відкриття всіх інших форм.

  3. Інформаційні і службові форми - форми, елементи управління, що містять призначені для відображення службової інформації (довідки), непов'язаної з таблицями, запитами і фільтрами, або для виконання службових операцій не пов'язаних з даними (Наприклад: форма з калькулятором)


Основою web-интерфейса є сторінки (файл з розширеним htm або html). Робота із сторінками здійснюється за допомогою програми - браузера. Спочатку сторінки знаходяться на сервері, користувач спочатку завантажує їх на свій комп'ютер з сервера, а потім за допомогою сторінок користувач працює з файлом даних.

Порядок створення інтерфейсу користувача


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

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

Принципи створення зручного інтерфейсу відомі. Як найзагальніші принципи при створенні призначених для користувача інтерфейсів можна розглядати три основні положення:

  1. Програма повинна допомагати виконати завдання, а не ставати цим завданням.

  2. При роботі з програмою користувач не повинен відчувати себе дурнем.

  3. Програма повинна працювати так, щоб користувач не вважав комп'ютер дурнем.


Перший принцип — це так звана "прозорість" інтерфейсу. Інтерфейс користувача повинен бути інтуїтивно зрозумілим, простим для освоєння, і не створювати для користувача проблем, які він вимушений буде долати в процесі роботи. Використовуйте стандартні, без зайвого прикрашення компоненти, застосовуйте звичні, використовувані аналогічними програмами прийоми управління, і Ви досягнете критеріїв виконання першого принципу.
Другий принцип полягає в зневазі до “розумових” здібностей користувачів. Відомо, що часто користувачі не тільки не вміють працювати за комп'ютером, але і просто бояться зробити що-небудь самостійно. Тому інтерфейс користувача повинен бути максимально дружнім. Більш того – побоювання користувачів часто оправдані, адже вартість програми, та і самого комп'ютера не йде ні в яке порівняння з вартістю, наприклад, створеної багаторічними зусиллями бази даних. Саме тому програміст при створенні інтерфейсу користувача зобов'язаний завжди вбудовувати в програму "захист від дурня" - від неправильних дій і введення користувачем невірних даних. Однак, деякі програмісти занадто захоплюються таким захистом, роблять його дуже настирливим, і в результаті робота програми нагадує знамените "крок вліво, крок вправо вважається втечею"! І такий “захист” сам починає створювати проблеми користувачеві.

Для дотримання другого принципу не потрібно дозволяти програмі "виправляти" дії користувача і вказувати, як саме діяти, заганяючи його у вузькі рамки. Також не слід надмірно захоплюватися виведенням інформаційних повідомлень-підказок, особливо діалогових, це відволікає користувача від роботи. А найкраще взагалі передбачити можливість відключення підказок.
Третій принцип полягає в тому, щоб створювати програму з максимально можливими "інтелектуальними" здібностями. Не дивлячись на швидкий розвиток комп'ютерної техніки, навіть широко розповсюджені програми лише вельми умовно можна назвати такими, що мають штучний інтелект. Вони заважають роботі користувача, виводячи на екран діалогові вікна з дурними питаннями, що викликають подив навіть в простих ситуаціях. В результаті користувачі в серцях вигукують: "Ну і тупа ж ця машина"!

Особливо викликають роздратування постійні питання практично всіх текстових редакторів про те, чи не зберегти змінений текст, хоча первинний і нинішній текст не відрізняються ні символом. Так, користувач щось набирав, але потім повернув все назад, невже не можна відслідковувати! Доводиться завжди переглядати і перевіряти, чи не зіпсував я все-таки що-небудь...
Намагайтесь дотримуватися наступних правил:


  1. Стандартні елементи інтерфейсу

  2. Невелика палітра інструментів

  3. Однакова відстань між елементами управління

  4. TabOrder - "Правильний" порядок

  5. Вибір шрифтів

  6. Вибір кольорів

  7. Альтернативне управління

  8. Цеглинки інтерфейсу



1. Стандартні елементи інтерфейсу

Використовуйте стандартні для даного елементу інтерфейсу компоненти. Зустрівши Вашу програму, користувач не витрачатиме час на знайомство і навчання, а відразу приступить до роботи - це одна з ознак професійно зробленої програми.
2. Невелика палітра інструментів

Намагайтесь використовувати не дуже велику кількість різноманітних компонентів. І природно, використавши десь в одному місці один стандартний компонент, в аналогічному випадку також застосовуйте саме його.
3. Однакова відстань між елементами управління

Розміщайте елементи інтерфейсу на однаковій відстані між собою. Розкидані абияк компоненти створюють відчуття непрофесійно зробленого продукту. І навпаки, ретельно вивірене розміщення на Формі кнопок, перемикачів, прапорців і інших компонентів, складових інтерфейсу — ознака якісної роботи.
4. TabOrder - "Правильний" порядок

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

Шрифтам просто дайте спокій! Задані за умовчанням шрифти підійдуть для будь-якої системи, на якій може працювати Ваша програма. Напівжирний шрифт використовуйте тільки для виділення важливих елементів. Застосування ж курсиву і особливо разом з підкресленням, яке користувач може прийняти за гіперпосилання - поганий тон.
6. Вибір кольорів

Що стосується кольорів елементів інтерфейсу, то також, як і у випадку з шрифтами, краще залиште їх стандартними, за замовчуванням. Більшість систем програмування використовують системну палітру Windows, і користувач, змінивши її, легко налаштує кольори під себе.
7. Альтернативне управління

Професійно розроблена програма повинна мати можливість управлятися не тільки мишкою, але й з клавіатури. Не повинно бути функцій, доступних виконанню тільки мишею (малювання в графічних редакторах не рахуємо!). Для найбільш використовуваних функцій слід передбачити "гарячі клавіші" для їх швидкого виклику.
8. Цеглинки інтерфейсу

Що стосується конкретних елементів интефейсу користувача, то якість взаємодії користувача з програмою залежить від:


ІНДИВІДУАЛЬНЕ ЗАВДАННЯ



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

Порядок виконання роботи


  1. Ознайомитись з «Вимогами замовника» та «Функціональною специфікацією» на програмний продукт.

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

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

  4. Спроектувати дизайн та реалізувати основну форму програмного продукту (головну сторінку web-сайту);

  5. Спроектувати дизайн та реалізувати головне меню програми (web-сайту);

  6. Спроектувати дизайн та реалізувати діалогові вікна (форми) вводу даних для програмного продукту (web-сайту);

  7. Спроектувати дизайн та реалізувати форми виводу результатів/звітів для програмного продукту (web-сайту).

  8. Розробити та реалізувати сценарій виклику усіх розроблених елементів графічного користувацького інтерфейсу для імітації роботи прототипу програми.

  9. Оформити результати роботи у вигляді звіту по лабораторній роботі.

  10. Захистити лабораторну роботу.



Контрольні питання


  1. Що таке графічний інтерфейс користувача?

  2. Яке основне призначення інтерфейсу користувача?

  3. Які основні засоби складають інтерфейс користувача програмного продукту?

  4. Як класифікуються елементи інтерфейсу програмних систем?

  5. Перерахуйте та поясніть принципи розроблення графічного інтерфейсу користувача.

  6. Назвіть та поясніть правила створення графічного інтерфейсу користувача.

  7. ...



Література


  1. Т.Мандел. Разработка пользовательского интерфейса. Серия «Для программистов». – М.: ДМК пресс, 2001. -416 с.

  2. А.К.Гультяв, В.А.Машин. Проектирование и дизайн пользовательского интерфейса. Учеб. Пособие. – Изд-во: Корона-Принт, 2007. -352 с.

  3. В.В.Головач. Дизайн пользовательского интерфейса2 Искусство мыть слона. – http://uibook2.usethics.ru/uibookII.pdf


скачати

© Усі права захищені
написати до нас