|
|
| Рядок 11: |
Рядок 11: |
| | </ul> | | </ul> |
| | | | |
| − | Візуальні ефекти в програмному продукті повинні обовязково бути присутніми. Але не перенасиченими.
| |
| | | | |
| − | | + | [[category:РІС]] |
| − | == '''Візуальне виділення найбільш важливих елементів''' ==
| + | |
| − | | + | |
| − | | + | |
| − | Реалізація принципу привертання уваги користувача до найбільш важливих елементів має два аспекти: по-перше, вибір на кожному кроці роботи деякої основної ідеї, найбільш важливої для виконання цього кроку; по-друге, відповідне представлення і розміщення тих, що реалізовують цю ідею елементів.
| + | |
| − | | + | |
| − | Через вказані вище психофізіологічні особливості люди обертають погляд в першу чергу на верхній лівий кут області, що проглядається, або на ту її частина, яка візуально відрізняється від інших. Виходячи з цього, має сенс розміщувати найбільш важливу інформацію (або вузловий елемент) або у верхньому лівому кутку екрану, або у вікні, забезпеченому спеціальними атрибутами.
| + | |
| − | | + | |
| − | | + | |
| − | == '''Інтеграція''' ==
| + | |
| − | | + | |
| − | | + | |
| − | Якщо інтерфейс застосування візуально узгоджується з інтерфейсом системи і інтерфейсом інших застосувань, значно легше забезпечити користувачеві послідовне і передбачене робоче середовище. Для того, щоб здійснити цей принцип, необхідно відповісти на наступні питання:
| + | |
| − | | + | |
| − | Наскільки виявляється узгодженим екранне представлення різних компонентів застосування в процесі роботи користувача?
| + | |
| − | | + | |
| − | Як співвідносяться візуальні параметри застосування з системним інтерфейсом і інтерфейсом інших застосувань?
| + | |
| − | | + | |
| − | Раціональне розміщення даних на екрані є найбільш важливим, але не єдиним методом забезпечення зручності і природності призначеного для користувача інтерфейсу. Сучасні монітори надають в розпорядження розробника різні методи виділення інформації, що виводиться, на екрані.
| + | |
| − | | + | |
| − | '''''Виділення інформації''''' - це використання таких атрибутів, які дозволяють привернути увагу користувача до деякої області екрану. Як подібні атрибути можуть виступати: колір символів, колір фону, рівень яскравості, мерехтіння і застосування різних шрифтів для символів, що виводяться. Часто для виділення інформації використовують підкреслення, висновок в інверсному вигляді, різні рамки і тіні. Ефект застосування цих атрибутів різний, а їх поєднань - часто непередбачуваний і залежить від індивідуальних особливостей користувачів. У літературі із цього приводу приведено значне число рекомендацій, основний сенс яких зводиться до наступного положення: слід прагнути використовувати мінімальне необхідне число атрибутів (щоб привернути увагу людини, зовсім не обов'язково хапати його за рукав, достатньо лише легенький торкнутися).
| + | |
| − | | + | |
| − | Нижче розглядаються тільки найбільш загальні засоби виділення інформації - колір і просторове групування елементів, що відображаються. Докладніші рекомендації по використанню візуальних атрибутів при створенні елементів Web-сторінок будуть дани в наступному уроці.
| + | |
| − | | + | |
| − | | + | |
| − | == '''Колір''' ==
| + | |
| − | | + | |
| − | | + | |
| − | Колір є одним з найважливіших візуальних атрибутів інтерфейсу. Оскільки колір має здатність привертати погляд, використовуйте його для ідентифікації тих елементів інтерфейсу, на які ви хочете звернути увагу користувача (наприклад, для виділення поточного вибору). Колір також має асоціативний аспект; у багатьох випадках об'єкти одного кольору сприймаються людьми як взаємозв'язані. Колірна гамма може також надавати певну емоційну або психологічну дію; не дарма, наприклад, розділяють кольори на холодні і теплі.
| + | |
| − | | + | |
| − | У роботах, присвячених дослідженню психологічної дії різних кольорів, наводяться такі дані:
| + | |
| − | <ul>
| + | |
| − | <li>блакитною - заспокоює;</li>
| + | |
| − | <li>червоний - хвилює і стомлює;</li>
| + | |
| − | <li>зелений - настроює на добродушний і безініціативний лад;</li>
| + | |
| − | <li>жовтий - веселий, оптимістичний, викликає легковажний настрій;</li>
| + | |
| − | <li>оранжевий - розкріпачує фантазію;</li>
| + | |
| − | <li>фіолетовий - колір заздрості, тривоги, незадоволеності;</li>
| + | |
| − | <li>коричневий - пригноблює розумову активність;</li>
| + | |
| − | <li>чорний - похмурий, але сприяє концентрації уваги.</li>
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | Таким чином, непродумане використання кольору може викликати у користувача негативний емоційний стан або навіть відволікати його від роботи, заважаючи зосередитися на виконуваному завданні.
| + | |
| − | | + | |
| − | Крім того, при виборі колірної палітри слід враховувати цілий ряд додаткових чинників:
| + | |
| − | Хоча ви можете використовувати колір, щоб відобразити зв'язок між тими або іншими об'єктами, асоціація між вибраним вами кольором і конкретним значенням не завжди буде очевидна або легко впізнана для користувача.
| + | |
| − | Колір є дуже суб'єктивною характеристикою (пам'ятаєте народну мудрість: «На смак і на колір товаришів немає»?); тому те, що подобається вам, зовсім не обов'язково буде приємне користувачам.
| + | |
| − | Деякі користувачі можуть мати проблеми з кольоросприйманням (близько 9 відсотків дорослого чоловічого населення мають те або інше відхилення в сприйнятті кольору).
| + | |
| − | | + | |
| − | Через приведені вище обставини колір повинен використовуватися тільки як додаткова форма передачі інформації.
| + | |
| − | Ще один висновок полягає в тому, що доцільне в рамках одного застосування використовувати обмежений набір кольорiв, причому перевагу слід віддавати притемненим тонам.
| + | |
| − | | + | |
| − | Оскільки колір є суб'єктивним чинником, краще всього дозволити користувачеві самому настроювати колірну гамму, де це можливо. Для стандартних елементів інтерфейсу система забезпечує стандартні колірні схеми. Якщо при створенні застосування вони використовуватимуться як основа, то це дозволить уникнути включення в інтерфейс додаткових елементів управління; крім того, вказаний підхід гарантує, що ваші власні візуальні елементи не випадатимуть із загального ряду при зміні користувачем системних кольорів.
| + | |
| − | | + | |
| − | | + | |
| − | == '''Просторове розміщення візуальних елементів''' ==
| + | |
| − | | + | |
| − | | + | |
| − | Розмір і взаємне розташування візуальних елементів дуже важливі для створення візуально послідовного і передбаченого середовища. Просторова компоновка важлива також з погляду передачі призначення елементів, відображених у вікні. У загальному випадку при виборі варіанту розміщення елементів слід дотримуватися тих же правил, які використовуються при компоновці друкарської сторінки.
| + | |
| − | | + | |
| − | Основну роль при компоновці візуальних елементів грають два прийоми:
| + | |
| − | <ul>
| + | |
| − | <li>групування </li>
| + | |
| − | <li>вирівнювання.</li>
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | '''''Групування''''' припускає компактне розміщення взаємозв'язаних елементів. Для реалізації групування може використовуватися або спеціальний елемент - групуючий блок, або просто розміщення елементів на відповідній відстані один від одного.
| + | |
| − | | + | |
| − | З метою забезпечення єдиного підходу до просторового розміщення графічних елементів введена спеціальна одиниця вимірювання - dialog base unit (одиниця площі діалогової панелі), яку ми надалі скорочено називатимемо «дискретою вікна».
| + | |
| − | | + | |
| − | '''''Дискрета вікна''''' - це апаратно-незалежна величина; у горизонтальному напрямі вона рівна одній чверті середньої ширини символів поточного системного шрифту; по вертикалі - однієї восьмої середньої висоти символів поточного системного шрифту.
| + | |
| − | Рекомендується залишати між елементами в групі проміжок, рівний принаймні чотирьом дискретам, а відстань до краю вікна і між групами повинно бути не менше семи дискрет (мал. 2.1). Хоча ви можете використовувати колір, щоб візуально згрупувати об'єкти, такий підхід не можна визнати вдалим, оскільки він може привести до небажаних ефектів, коли користувач змінить колірну схему.
| + | |
| − | | + | |
| − | '''''Вирівнювання''''' є ще одним, додатковий, спосіб візуального відображення взаємозв'язаної інформації (або елементів управління).
| + | |
| − | Як правило, розрізняють три способи вирівнювання інформації:
| + | |
| − | <ul>
| + | |
| − | <li>вертикальне (по лівому або правому краю елементів, що вирівнюються)</li>
| + | |
| − | <li>горизонтальне (по верхньому рядку або по верхньому краю елементу)</li>
| + | |
| − | <li>суміжне вирівнювання (коли елементи стуляються краями).</li>
| + | |
| − | </ul>
| + | |
| − | Оскільки приведені вище рекомендації носять достатньо загальний характер, цілком правомірне питання: чи існують об'єктивні критерії оцінки щільності заповнення екрану, збалансованості даних і інших візуальних атрибутів? Проблема полягає в тому, що на будь-яку людину, яка дивиться на екран, робить вплив зміст інформації, утрудняючи таку оцінку. Один з можливих підходів до вирішення цієї проблеми - відокремити зміст від форми. Для цього застосовуються два методи: прямокутників і виділених крапок.
| + | |
| − | | + | |
| − | При використанні '''''методу прямокутників''''' після розбиття екрану на поля кожне з них заповнюється довільним текстом і відділяється від інших по всьому периметру, принаймні одним пропуском. Через центр екрану в думках проводяться осі, що дозволяють оцінити збалансованість розміщення полий.
| + | |
| − | | + | |
| − | '''''Метод виділених крапок''''' дозволяє визначити число і розміщення областей екрану, до яких буде привернуто увагу користувача (із-за підвищеної яскравості, кольору або мерехтіння символів). Для цього кожна крапка, що вимагає підвищеної уваги, моделюється групою символів, відмінних від пропуску.
| + | |
| − | | + | |
| − | Розглянуті методи дозволяють усунути грубі помилки у форматуванні екрану, проте кращий спосіб оцінити його якість - дати можливість потенційному користувачеві попрацювати з системою.
| + | |
При редагуванні, створенні візуальних атрибутів інформації, що відображується потрібно враховувати психофізіологічні характеристики користувачів.
Це такі як:
