Проектирование пользовательского интерфейса. Тема 02

1. Тема 2. Проектирование пользовательского интерфейса

Программирование и основы алгоритмизации
Тема 2. Проектирование
пользовательского интерфейса
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
1

2. Роль пользовательского интерфейса

Программирование и основы алгоритмизации
Роль пользовательского интерфейса
Пользователи
Алгоритмы
Данные
Данные
Интерфейс
пользователя
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
2

3. Эволюция пользовательских интерфейсов

Программирование и основы алгоритмизации
Эволюция пользовательских интерфейсов
Сейчас...
20 лет назад...
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
3

4. Способы организации человеко-машинного диалога

Программирование и основы алгоритмизации
Способы организации человеко-машинного диалога
Факторы, определяющие тип диалога:
- инициатор;
- возможность выбора;
- однозначность интерпретации
Вопрос - ответ
Вопросы да/нет
Шевченко А. В.
Квазиестественный
язык
Меню
Команды
Тема 2. Проектирование пользовательского интерфейса
4

5. Способы организации человеко-машинного диалога

Программирование и основы алгоритмизации
Способы организации человеко-машинного диалога
Вопрос - ответ
* Расчет объема помещения *
Длина: 10
Ширина: 6
Высота: 2.5
Объем = 150 куб. м
Меню
* Выбор функции *
1 - Создать заказ
2 - Редактировать заказ
3 - Удалить заказ
Ваш выбор:
Вопросы да/нет
Печатать документ (Y/N): Y
Принтер по умолчанию (Y/N): N
Локальный принтер (Y/N): Y
Команды
Server/root> cd /
Server/root> pwd
/
Server/root>
Квазиестественный язык
* печатать отчет "новые заказы"
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
5

6. Современные пользовательские интерфейсы

Программирование и основы алгоритмизации
Современные пользовательские интерфейсы
Принцип непосредственного манипулирования
WYSIWYG
WIMP-интерфейс
(What You See Is What You Get)
(Windows, Icons, Menus, Pointers)
Событийный принцип диалога
(Event-driven dialog)
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
6

7. Уровни пользовательского интерфейса

Программирование и основы алгоритмизации
Уровни пользовательского интерфейса
Метафора и стиль интерфейса
Внешний
Элементы и структуры интерфейса
Концептуальный
Библиотека классов (VCL)
Логический
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
TEdit
TEdit
TTabSheet
TPanel
TPaintBox
TButtonBox
TEdit
TEdit
TPopupMenu
*pro_skey_fl;
*pro_id_fl;
*diag_zn;
*pro_fm;
*pro_dr;
*pro_bb;
*dir_code_fl;
*dir_name_fl;
*navig_pm;
7

8. Внешний уровень интерфейса - метафора

Программирование и основы алгоритмизации
Внешний уровень интерфейса - метафора
Понятие метафоры
Ассоциация, позволяющая
пользователю эффективно
интерпретировать данные,
представленные в интерфейсе
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
8

9. Внешний уровень интерфейса - стиль

Программирование и основы алгоритмизации
Внешний уровень интерфейса - стиль
Текстура, линии
Тени
Шрифты, цвета
Иконы
Aa
Stop immediately the machine!
Aa
Stop immediately the machine!
Aa Aa
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
9

10. Концептуальный уровень пользовательского интерфейса

Программирование и основы алгоритмизации
Концептуальный уровень пользовательского интерфейса
Элементы интерфейса
Простые
Декоративные
Композиционные
Управляющие
Представление
данных
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
10

11. Элементы для представления данных

Программирование и основы алгоритмизации
Элементы для представления данных
Шевченко А. В.
Поле
Переключатель
Список
Выпадающий список
Тема 2. Проектирование пользовательского интерфейса
11

12. Элементы для представления данных (продолжение)

Программирование и основы алгоритмизации
Элементы для представления данных (продолжение)
Шевченко А. В.
Радио
Движок
Таблица
Дерево
Тема 2. Проектирование пользовательского интерфейса
12

13. Декоративные элементы

Программирование и основы алгоритмизации
Декоративные элементы
Шевченко А. В.
Метка
Разделитель
Рамка
Картинка
Тема 2. Проектирование пользовательского интерфейса
13

14. Управляющие элементы

Программирование и основы алгоритмизации
Управляющие элементы
Кнопка
Полоса прокрутки
Разделитель
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
14

15. Композиционные элементы

Программирование и основы алгоритмизации
Композиционные элементы
Шевченко А. В.
Панель
Закладки
Область прокрутки
Окно
Тема 2. Проектирование пользовательского интерфейса
15

16. Геометрия элементов пользовательского интерфейса

Программирование и основы алгоритмизации
Геометрия элементов пользовательского интерфейса
Родитель
Смещение сверху (Top)
Смещение
слева (Left)
Элемент
Высота (Height)
Ширина (Width)
Свойства
Width, Height, Left, Top
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
16

17. Реакция элементов интерфейса на изменение размера

Программирование и основы алгоритмизации
Реакция элементов интерфейса на изменение размера
Родитель
Верхний якорь
Левый
якорь
Элемент
Правый
якорь
Нижний якорь
Шевченко А. В.
Свойство
AutoSize
Тема 2. Проектирование пользовательского интерфейса
Свойства
Anchors
17

18. Пример изменения размеров элементов

Программирование и основы алгоритмизации
Пример изменения размеров элементов
Родитель
Anchors
Элемент
true
false
true
false
Родитель
Родитель
Элемент
Left
Right
Top
Bottom
Anchors
Left
Right
Top
Bottom
Элемент
false
false
false
false
Родитель
Anchors
Элемент
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
Left
Right
Top
Bottom
true
true
true
true
18

19. Выравнивание элементов

Программирование и основы алгоритмизации
Выравнивание элементов
None
Right
Left
Bottom
Свойство
Align
Top
Client
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
19

20. Использование выравнивания при компоновке экранов

Программирование и основы алгоритмизации
Использование выравнивания при компоновке экранов
Top
Top
Client
Client
Bottom
Client
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
Right
20

21. Видимость элементов

Программирование и основы алгоритмизации
Видимость элементов
Свойство
Visible
order_info->Visible = true;
...
order_info->Visible = false;
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
21

22. Чувствительность элементов

Программирование и основы алгоритмизации
Чувствительность элементов
Свойство
Enabled
create_button->Enabled = false;
open_button->Enabled
= false;
list_button->Enabled
= false;
...
create_button->Enabled = true;
open_button->Enabled
= true;
list_button->Enabled
= true;
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
22

23. Реализация событийного принципа. Сценарии

Программирование и основы алгоритмизации
Реализация событийного принципа. Сценарии
Шевченко А. В.
Тема 2. Проектирование пользовательского интерфейса
23