
- •1 Побудова та програмна реалізація моделей, що використовуються під час розробки інтерфейсів
- •1.1 Мета роботи
- •1.2 Методичні вказівки з організації самостійної роботи студентів
- •1.3 Порядок виконання лабораторної роботи
- •1.5 Контрольні запитання та завдання
- •2 Квантифікація інтерфейсів. Модель goms. Закони хіка і фітса
- •2.1 Мета роботи
- •2.2 Методичні вказівки з організації самостійної роботи студентів
- •2.3 Порядок виконання лабораторної роботи
- •2.4 Контрольні запитання та завдання
- •3 Використання засобів візуалізації, елементів електронної підтримки та основних принципів юзабіліті проектування інтерфейсу користувача
- •3.1 Мета роботи
- •3.2 Методичні вказівки з організації самостійної роботи студентів
- •3.2.1 Засоби, що використовуються для спрощення процесу навчання користувачів пп
- •Метафора
- •Афорданс
- •Піктограми
- •Правило «золотого перерізу»
- •3.2.2 Десять основних принципів (евристик) створення інтерфейсу
- •3.2.3 Довідкова система
- •3.3 Порядок виконання лабораторної роботи
- •3.5 Контрольні запитання та завдання
- •4.2.2 Перелік основних методів, що використовуються при тестуванні інтерфейсу без участі користувача
- •4.3 Порядок виконання лабораторної роботи
- •4.5 Контрольні запитання та завдання
Піктограми
Піктограми – це знайомі всім маленькі картинки, які слугують для позначення кнопок та інших об’єктів, що є необхідною ознакою сучасних інтерфейсів. Піктограми можуть значно вплинути на ясність та посилити привабливість додатка. Крім цього, використання піктограм дозволяє набагато спростити процес інтернаціоналізації ПП. Також піктограми дуже доречні при нестачі площі, де можна виводити інформацію (пояснюючі слова замість них займають багато місця) або коли треба скрити якусь інформацію. Але треба пам’ятати, що вони мають також і недоліки: їх треба створювати та тестувати з урахуванням фокусної групи з цільової аудиторії користувачів (різні культури, звичаї та особливості сприйняття). Піктограми мають добре відображати відповідне поняття, при можливості мають дублюватися віконцем, що випливає, з підказкою (hint).
Правило «золотого перерізу»
Важливо проектувати інтерфейс максимально насиченими візуальними закономірностями. Універсальне правило – чим більше закономірностей, тим більше гармонії. Одне з основних правил – правило «золотого перерізу».
«Золотий переріз» – це такий пропорційний розподіл відрізка на нерівні частини, при якому весь відрізок так відноситься до більшої частини, як сама більша частина до меншої. Або, інакше кажучи, менша відноситься до більшої так, як більша до всього відрізку.
Рисунок 3.2 – Розподіл відрізка за правилом золотого перерізу
А=0,382 см В=0,618 см
С = А + В = 1 см
А / B = B / C або С / B = B / A
A / B = 0,618
Відрізки золотої пропорції виражаються нескінченним ірраціональним дробом 0,618…
Намагайтеся прив'язувати всі розміри та координати (як мінімум пропорції діалогових вікон) до золотого перерізу.
Колір
Під час людино-машинної взаємодії 90 % інформації передається візуально, через дисплей, і сприймається людиною очима. Оскільки колір є сильним засобом привернення уваги, то під час проектування ПІ необхідно правильно використовувати основи теорії кольору.
Кожний колір визначається трьома складовими: колір (hue), яскравість (brightness), насиченість (saturation). У комп’ютерних системах на ці складові вплив здійснюється змінами характеристик RGB.
У Додатку Д на рис. Д.1 наведено тривимірне зображення всіх можливих кольорів, на рис. Д.2 – формулу для визначення яскравості, на рис. Д.3 – шкалу яскравості.
Теорія кольору – це набір принципів, що використовуються для створення гармонійних сполучень кольорів. Колірні співвідношення можуть бути візуально представлені спектральним колом – замкнутим колірним спектром.
Рисунок 3.3 – Спектральне коло (Колірне колесо, Color Wheel) RGB
Спектральне коло є візуальним поданням колірної теорії.
У сприйнятті кольору було виділено такі феномени:
– зв'язок кольору зі сприйняттям смаку, тактильними відчуттями, простору й руху;
– індукція кольором характерного психічного стану;
– можливість використання кольорів як засобів вираження відношень;
– вплив кольору на підсвідомість людини. Загальновідомо, що синій дає почуття прохолоди, а жовтий – зігріває. Існує поділ кольорів на дві групи – «плюс» (від червоного, жовтогарячого до жовтого) і «мінус» (від зеленого, фіолетового до синього). Кольори «+ сторони» підвищують емоційне схвилювання й життєрадісність. Кольори «– сторони» асоціюються зі слабкістю й поганим настроєм.
Відповідно до колірної теорії гармонійні колірні комбінації створюють:
– будь-які два кольори розташовані один навпроти одного на спектральному колі;
– будь-які три кольори, що формують рівносторонній трикутник;
– будь-які чотири кольори, що формують прямокутник (дві пари кольорів один навпроти одного).
Класичні колірні схеми мають такі назви:
– монохроматична;
– суміжна;
– комплементарна;
– суміжно-комплементарна;
– тріадна;
– тетріадна (двокомплементарна).
Рисунок 3.4 – Принципи побудови гармонійних колірних схем
У Додатку Д на рис. Д.4 наведено приклади таких схем.
За допомогою додатка MS Paіnt можна підбирати значення кольорів колірної схеми Вашого додатка. На рисунку Д. 5 наведено віконце «Изменение палитры» програми, що дозволяє визначати основні характеристики обраного кольору.
Підбирання комплементарного кольору або кольорів, що складають інші гармонійні поєднання (тріадних, тетріадних) можливе за формулами. На рис. 3.5 зроблено розрахунок кольору комплементарного до жовтого.
Рисунок 3.5 – Підбирання комплементарної пари кольорів