4.2.7.7 Повторювані візуальні мотиви

Хороший дизайн відрізняється цілісністю: він сприймається як єдина сутність, де кожен елемент підтримує інші структурно і інтуітівно. Можно використовувати діагональні лінії, що проходять під одним кутом, або ж лінії з однаковим ступенем кривизни.

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

4.2.7.8 Настільні додатки

У додатках на базі Java доступні кілька варіантів зовнішнього вигляду елементів управління, більшість з яких виглядають стандартно. Створюючи програми для Linux, можна вибрати з декількох варіантів, таких як теми програм GNOME. Однак власні програми Windows або Mac зазвичай будуються на базі стандартних візуальних елементів для цих платформ.

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

4.2.8 Застосування шаблонів для компонування сторінок

Перша група шаблонів придатна для будь-якої інтерактивної графіки, незалежно від базової структури даних:

• Overview Plus Detail (Огляд і деталі)

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

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

Рекомендації. На екрані завжди повинно знаходитися загальне зображення набору даних. Позначте область перегляду на зображенні. Вибирайте кольори, що контрастують з основними на панелі огляду. Якщо графіка темних тонів, робіть світлу рамку; якщо, навпаки – створіть рамку темного кольору. Область перегляду повинна перетягатись покажчиком миші, для довільного переміщення її по загальному зображенню.

• Datatips (Спливаючі дані) [1, с.248].

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

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

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

• Dynamic Queries (Динамічні запити) (рис.4.4).

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

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

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

• Data Brushing (Фарбування даних) (рис.4.5).

Дозволяє користувачеві вибирати елементи даних в одному поданні; одночасно показуючи ті ж вибрані дані в іншому поданні.

Даний шаблон використовується, коли на екрані знаходяться два або кілька зображень.

Рекомендації. Для вибору або фарбування даних використовуйте: малювання рамки навколо точок даних; виділення по

Рисунок 4.4 – Приклад шаблону dinamic quaries (Динамічні запити)

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

Рисунок 4.5 – Приклад шаблону data brushing (фарбування даних)

• Local Zoomling (Локальне масштабування) [1, с.260].

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

Даний шаблон використовується при відображенні великого набору даних у будь-якій формі – графіки, карти, сітки і навіть таблиці - на великому або маленькому екрані.

Рекомендації. Заповніть весь доступний простір наявними даними. Використовуйте дрібний шрифт і малюнки. Розтягуйте вміст, щоб повністю динамічно «заливати» вікно. Якщо текст є важливим структурним елементом, але не поміщається, використовуйте абстрактне візуальне уявлення, наприклад кольорові прямокутники або лінії, що імітують текст.

• Row Striping (Чергування рядків) [1, с.264].

Для фарбування фонового кольору рядків таблиці чергуються два схожих відтінка.

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

Рекомендації. Виберіть пару спокійних ненасичених кольорів, значення яких близькі, але не ідентичні. Чергуйте колір в рядках таблиці. Цей шаблон практично виключає необхідність в горизонтальних лініях між рядками.

• Sortable Table (Сортована таблиця) (рис.4.6).

Показує дані в таблиці і дозволяє сортувати рядки в залежності від значень у стовпцях.

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

Рекомендації. Необхідно продумати: набір стовпців; атрибути, за якими будуть сортуватися дані; дані, що відображаються в таблиці. Заголовки стовпців таблиці повинні бути візуально виділені. Можна додати стрілки вгору і вниз, що показують порядок сортування: за зростанням і за спаданням. Розгляньте можливість візуального реагування на наведення покажчика миші.

Рисунок 4.6 – Приклад шаблону Sortable Table (Сортируєма таблиця)

• Jump to Item (Перехід до елемента) [1, с.269].

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

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

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

• New-Item Row (Рядок для нового елемента[1, с.269].

Використовує останній рядок таблиці для того, щоб на його

місці створювати новий елемент.

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

Рекомендації. Надайте простий і очевидний спосіб створення нового об'єкта в порожньому рядку таблиці. Наприклад, режим редагування може включатися одним клацанням мишею в цьому рядку, рядок може містити кнопку «Новий Елемент». Всі стовпчики таблиці повинні допускати редагування.

• Cascading Lists (Каскадні списки) [1, с.273].

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

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

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

• Tree Table (Деревовидна таблиця) (рис.4.7).

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

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

Рекомендації. Помістіть дерево в перший стовпець, а атрибути елементів - у наступні стовпчики. Рядки допускають виділення. Сортування по стовпцях порушує впорядковане деревовидне уявлення, тому необхідно передбачити додаткову кнопку або інший засіб, що дозволяє відсортувати таблицю відповідно до ієрархічних зв'язків дерева даних.

Рисунок 4.7 – Приклад шаблону Tree Table (Деревоподібна таблиця)

• Multi-Y Graph (Графік з декількома осями Y) (рис.4.8).

Кілька графіків поміщаються один поверх одного на одній і тій же панелі. Вісь X у них повинна бути спільною.

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

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

• Small Multiple (Невеликі зразки) (рис.4.9).

Створює безліч невеликих представлень даних у вигляді двовимірних або тривимірних зображень. На сторінці вони викладаються в одному або двох додаткових вимірах: малюнки повинні утворювати або одновимірну послідовність, або двовимірну матрицю.

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

Рисунок 4.8 – Приклад шаблону Multi-Y Graph (График з декількома осями Y)

великий набір даних, що має більше двох вимірів або незалежних змінних.

Рекомендації. Визначте, скільки додаткових вимірювань необхідно представляти – одне або два. У першому випадку зображення можна виводити вертикально, горизонтально або від рядка. У другому випадку використовуйте двовимірну таблицю або матрицю. Незалежно від кількості вимірювань, позначте зразки зрозумілими заголовками, розташувавши їх по краях зображення. Кожне зображення повинно бути схожим на всі інші.

• Treemap (Деревовидна карта ) (рис.4.10).

Показуйте багатовимірні та ієрархічні дані у вигляді прямокутників різних розмірів. Можна вкладати ці прямокутники один в одного, або позначати їх кольором.

Данний шаблон використовується, у випадку коли дані організовані у вигляді дерева. Вони можуть бути багатовимірними – у кожного елементу декілька атрибутів.

Рекомендації. Визначите, якими візуальними змінними будуть кодуватися атрибути даних: розмір прямокутника; групування та вложення; колір чи позиція.

Рисунок 4.9 – Small Multiple (Невеликі зразки)

Рисунок 4.10 – Приклад шаблону Treemap (Деревоподібна карта )

• Deep Background (Глибокий фон) (рис. 4.11).

Помістіть на фон сторінки зображення або градієнт так, щоб візуально здавалося, ніби елементи на передньому плані знаходяться рівнем вище фону.

Даний шаблон використовується, коли на сторінці знаходяться сильні візуальні елементи, але вони розташовані не дуже щільно.

Рекомендації. Використовуйте фон, що володіє однією з таких характеристик: м'який фокус; колірні градієнти; зображення глибини; відсутність сильних точок фокусування.

Рисунок 4.11 –Робочий стіл Mac OS X (приклад шаблону Глубокий фон)

• Few Hues, Many Values ​​(Менше тонів, більше значень) (рис.4.12).

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

Даний шаблон використовується при виборі колірної схеми для програми або веб-сайту.

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

• Corner Treatments (Оформлення кутів) [1, с.389].

Малюйте в кутах деяких з полів в інтерфейсі косі, криві лінії і вирізані кути. Оформлення кутів має виглядати однаково в усьому інтерфейсі.

Даний шаблон використовується, коли в інтерфейсі присутні прямокутні елементи, такі як поля, кнопки і вкладки.

Рисунок 4.12 – С веб-сайту http://thebanmappingproject.org

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

• Borders that Echo Fonts (Межі, що відображають шрифти) (рис. 4.13).

Малюючи межу та інші лінії, використовуйте ті ж самі

значення кольору, товщини і кривизни, які характеризують основні шрифти в цьому дизайні.

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

Рекомендації. Виберіть один з шрифтів дизайну. Оцініть його зовнішні ознаки: колір, основну товщину лінії, текстуру, радіус заокруглення, кути і відстань між елементами. Колір повинен бути таким же, як колір шрифту. Не робіть межу надто жирною або грубою.

Рисунок 4.13 – Приклад використання шаблону Межі, що відображають шрифти

• Hairlines (Тонкі лінії) [1, с.395].

Використовуйте лінії шириною в один піксель в межах, горизонтальних лінійках і текстурах.

Даний шаблон використовується коли інтерфейс повинен виглядати витончено й вишукано.

Рекомендації. Використовуйте тонкі лінії в дизайні інтерфейсу:

- для розмежування іменованих розділів шляхом підкреслення

заголовків;

- для відділення один від одного різних областей вмісту за допомогою горизонтальних або вертикальних лінійок, або за допомогою замкнутих меж;

- як направляючі, які проводять погляд користувача по композиції;

- між областями з різними фоновими кольорами для більш чіткого позначення меж між ними;

- у структурах, таких як сітка або блок горизонтальних ліній;

- у значках, зображеннях і малюнках;

- в якості меж навколо елементів керування, наприклад кнопок.

• Contrasting Font Weights (Контрастні ваги шрифтів)

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

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

Рекомендації. Деякі пункти для використання жирного тексту:

1. Відділення міток від даних у списках з двома стовпцями;

2. Відділення навігаційних посилань від інформації;

3. Позначення виділених елементів (посилань або елементів списку);

4. Посилення слів у фразі;

5. Відділення одного слова від іншого в логотипі.

• Skins (Оболонки) (рис.4.14).

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

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

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

Рисунок 4.14 – Різні оболонки програвача Winamp