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

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

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

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

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

Елементи управління на формі називаються об'єктами. Кожен об'єкт володіє своїм набором властивостей, подій і методів.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перший принцип — це так звана "прозорість" інтерфейсу. Інтерфейс користувача повинен бути інтуїтивно зрозумілим, простим для освоєння, і не створювати для користувача проблем, які він вимушений буде долати в процесі роботи. Використовуйте стандартні, без зайвого прикрашення компоненти, застосовуйте звичні, використовувані аналогічними програмами приёмы управління, і Ви досягнете критеріїв виконання першого принципу.

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

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

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

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

Намагайтесь дотримуватися наступних правил:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• правил, по яких функціонує елемент управління.

Інструменти Delphi для управління компонентами на Формі

Для того, щоб розташувати один відносно одного компоненти в правильному порядку, спочатку необхідно їх виділити. Можна просто обвести мишкою область на Формі, в якій містяться вибрані компоненти. Або, утримуючи "Shift", вказати тією ж мишкою що кожен підлягає виділенню компонент. Повторне клацання мишкою по виділеному компоненту (при натиснутому "Shift") знімає з нього виділення.

Виділенними компонентами можна управляти як єдиним цілим - пересувати формою, привласнити значення однаковим властивостям, скопіювати (для установки, наприклад, на іншу Форму), навіть видалити.

Виділення мишкою області з компонентами	Група виділених компонентів

Тепер клацніть правою кнопкою по одному з компонентів, і з "спливаючого" меню выберіть Position -> Align... З'явиться діалогове вікно, що дозволяє налаштувати положення компонентів в групі по горизонталі і вертикалі. Напр., нам потрібно вирівняти наші чотири кнопки по лівому краю і зробити так, щоб між ними була однакова відстань по вертикалі. Для цього виділимо радіокнопки Horizontal: Left sides і Vertikal: Space equally.

Доступ до меню вирівнювання

Діалог вирівнювання компонентів	Результат вирівнювання групи компонентів

Вибираємо пункт Center, ми розташуємо компоненти так, що їх центри розташовуватимуться на одній лінії по горизонталі або вертикалі, а пункт Center in window переміщає компоненти в центр вікна, також по горизонталі або вертикалі.

В цьому ж меню рядок Tab Order... викликає появу діалогового вікна, керівника переміщенням курсора по елементах інтерфейсу при натисненні клавіші Tab. У момент появи Форми на екрані курсор знаходитиметься, природно, на компоненті, розташованому на першій строчці діалогового вікна. І далі переміщатиметься вниз за списком. На діалоговому вікні дві сині стрілки "вгору" і "вниз" управляють положенням виділеного компоненту. Виділяйте потрібний компонент, стрілками переміщайте на потрібну строчку в списку, і так далі.

При виборі пункту меню Control -> з'являється підміню, що складається з двех пунктів:

• Bring to Front

• Send to Back

Ці методи компонування доступні також програмно. Button1.SendToBack переміщає кнопку “на задній план”, а Button1.BringToFront - на "передній план". Тобто, якщо один компонент розташовується над іншим, ці методи міняють їх місцями. Випадки, в яких це може застосовуватися, досить очевидні