UIDesign Group. Описание пользовательского интерфейса приложения КАЛЕНДАРЬ
Подождите немного. Документ загружается.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
21
Имеется главное окно, содержащее в себе закладки:
• «Таймер»
• Информация о текущей дате и времени
• Элемент управления таймером
• Терминальные кнопки
• «Календарь»
o Информация о текущей дате и времени
o Модель календаря
o Информация по выбранным датам
o Терминальные кнопки
• «Время и профили»
o Информация о текущей дате и времени
o Список временных профилей
o Терминальные кнопки
• «Синхронизация»
o Информация о текущей дате и времени
o Настройки синхронизации
o Терминальные кнопки
Из закладки «Время и профили» возможен вызов модального окна
«Создание нового профиля», Также возможен вызов модального диалога
«Удаление профиля».
При открытии окна приложения текущей всегда должна оказываться
закладка, на которой пользователь находился перед предыдущим
закрытием окна.
Ключевая
идея
Распределение основных сценариев работы с приложением по
разным экранным формам (закладкам) позволяет пользователю
концентрироваться на требуемой задаче, имея перед собой только
нужную информацию, не отвлекаясь на излишнюю
функциональность, и не рискуя случайно что-либо изменить
(испортить).
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
22
10. Детальное описание ПИ приложения
10.1. Информация о текущей дате и времени
Находится в верхней части основного окна, содержит краткую информацию
о текущей дате и времени.
Данный блок решает следующие задачи пользователей:
Антон, Аня • Быстро и наглядно получать информацию о
текущем числе, времени, дне недели.
Информация о текущей дате и времени располагается в верхней области
основного окна приложения.
Рисунок 3. Информация о текущей дате и времени
Данный структурный блок содержит следующие элементы:
1. Название текущего профиля
2. Дата, время, день недели
3. Аналоговый циферблат часов точного времени. Вид циферблата
меняется в зависимости от состояния таймера (когда таймер активен,
циферблат снабжается красной обводкой, когда не активен--серой)
4. Временная зона текущего профиля
5. Графическое изображение дней недели, с указанием будних и
праздничных дней
Ключевая
идея
Расположение на каждой закладке приложения информации о
текущей дате, времени, дне недели и текущем профиле позволяет
получить эту информацию без задержек и переключений режимов. В
связи с тем, что данная информация востребована чаще всего, такое
расположение является наиболее предпочтительным.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
23
10.2. Терминальные кнопки приложения
Рисунок 4. Терминальные кнопки приложения
Кнопки, расположенные в данном структурном блоке, позволяют, в
зависимости от контекста, подтвердить, отменить внесенные
пользователем изменения, либо закрыть основное окно приложения.
При открытии основного окна приложения фокус ввода находится на
кнопке сохранения изменений.
Если кнопка находится в отключенном состоянии, то она не участвует в
переборе элементов клавишей TAB клавиатуры.
Общий принцип действия терминальных кнопок выглядит следующим
образом:
Действие
пользователя
Кнопка сохранения
изменений
Кнопка закрытия
основного окна
Пользователь
изменил данные,
предоставленные
приложением для
изменения
Кнопка активна. При
нажатии происходит
сохранение измененных
пользователем данных.
После нажатия кнопка
становится отключенной
Кнопка активна. При
нажатии происходит
закрытие основного
окна приложения без
сохранения внесенных
пользователем
изменений
Пользователь не внес
изменения в данные,
предоставленные
приложением для
изменения
Кнопка находится в
отключенном состоянии
Кнопка активна. При
нажатии происходит
закрытие основного
окна приложения
10.3. Закладка «Таймер»
Файл с изображением экранной формы: 01_timer.png.
Содержит изображение часов с текущим временем, а также возможность
создания напоминаний по истечении заданного промежутка времени.
Приложением допускается создание только одного напоминания. Это
связано с тем, что возможность создания нескольких напоминаний сильно
усложнит взаимодействие персонажей с программой. В данном случае,
напротив, преследуется цель максимального упрощения взаимодействия,
даже ценой лишения программы некоторой функциональности.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
24
Данный блок решает следующие задачи пользователей:
Антон, Аня
• Быстро создать напоминание и забыть о нем до
указанного момента времени.
10.3.1 Описание элементов
Закладка «Таймер» состоит из следующих областей (см. рисунок). Зеленые
сноски обозначают индекс табуляции элементов.
23 января 2004 года, пятница
23 января 2004 года, пятница ?
ЗакрытьПрименить
Время и профили
Включить напоминание
КалендарьТаймер
23 января 2004, пятница, 10:07Каменск-Уральск
(+ 4.00)
вНапомнить через
Синхронизация
10 минут
15:20
Позвонить Люсе
Текст напоминания
15:20
1
2 3
4
5
15:20
завтра
1
3
2
4
5
6 7
Рисунок 5. Общий вид закладки «Таймер»
1. Поле ввода «Текст напоминания». Содержит текст, вводимый
пользователем, который будет напоминать о запланированном
событии;
2. Поле выбора времени напоминания (в промежутках времени).
Содержит список наиболее часто используемых промежутков
времени;
3. Поле ввода времени напоминания (в абсолютных величинах).
Позволяет задать время напоминания с точностью до минуты;
4. Таймерный индикатор. Позволяет визуально «отмерять»
необходимый промежуток времени перед напоминанием, путем
перетаскивания указателя по часовому циферблату. Во время
оперирования индикатором при помощи мыши, возникает
всплывающая подсказка, в которой отображается время, на которое
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
25
был установлен таймер. Кроме того, в подсказке сообщается, в какой
день таймер сработает. Если время установлено ранее 00 часов 00
минут, то такая ситуация отмечается ключевым словом «сегодня» во
всплывающей подсказке. Если время позднее 00 часов 00 минут, то
такая ситуация отмечается ключевым словом «завтра» во
всплывающей подсказке;
5. Чекбокс «Включить напоминание». При включении чекбокса таймер
активируется. Чекбокс также включается, если произошло изменение
времени напоминания.
Более подробно остановимся на взаимодействии элементов 2, 3 и 4. При
изменении любого из них, соответствующая информация меняется и в
остальных. Например, если в поле 3 было введено определенное время, то
соответствующим образом меняется содержание поля 2 (высчитывается
разница межу введенным временем и текущим) и элемента управления 4.
Активация таймера производится включением чекбокса «Включить
напоминание». При этом индикатор таймера фиксируется в текущей
позиции, а циферблат изменяет цвет.
Таймер может находиться в двух состояниях: «активен» и «не активен».
Таймер не активен
Таймер активен
Рисунок 6. Вид закладки в зависимости от состояния таймера
Взаимодействие данного элемента управления с устройствами ввода
осуществляется следующим образом:
Циферблат с таймерным индикатором окружены зоной активности. При
клике мышью в данной области таймерный индикатор перемещается в
ближайшее к данному месту клика положение. При «перетаскивании»
индикатора по окружности циферблата значение промежутка времени
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
26
меняется с интервалом в 30 минут. Поворот колеса мыши изменяет время
активации с пятиминутным интервалом.
Вручную манипулируя индикатором, таймер можно установить на любое
время, начиная с 00:00, и заканчивая 23:55. При этом, для прохождения
полного суточного интервала понадобится сделать 2 полных оборота
индикатора.
Двойной щелчок мыши в области циферблата переводит таймер из
состояния «активен» в состояние «не активен» и наоборот.
Ключевая
идея
Элемент управления таймером позволяет устанавливать
напоминания буквально «одной рукой», используя мышь. При этом
благодаря визуальному отображению установленных сроков,
сохраняется наглядность представления для пользователя.
10.3.2 Терминальные кнопки приложения.
Кнопка «Применить». Сохраняет изменения, сделанные в установках
таймера. Кнопка неактивна, если не произошло изменения установок. Если
кнопка активна, то по умолчанию фокус ввода находится на ней. Нажатие
кнопки дублируется клавишей ENTER клавиатуры.
Кнопка «Закрыть». Закрывает окно приложения. При этом изменение
установок таймера не сохраняется. Если кнопка «Применить» неактивна,
то фокус ввода находится на кнопке «Закрыть». Нажатие кнопки
дублируется клавишей ESC клавиатуры.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
27
10.4. Закладка «Календарь»
Файл с изображением экранной формы: 02_calendar.png.
Представляет собой компьютерную модель бумажного календаря.
Данный блок решает следующие задачи пользователей:
Антон, Аня • Узнать о текущем месяце, числе и дне недели;
• Узнать о близлежащих праздниках и выходных.
10.4.1 Описание элементов
Зеленые сноски обозначают индекс табуляции элементов.
23 января 2004 года, пятница
23 января 2004 года, пятница ?
ЗакрытьПрименить
Время и профилиТаймер
23 января 2004, пятница, 10:07Каменск-Уральск
(+ 4.00)
Сегодня 23 января 2004 года
СинхронизацияКалендарь
Март
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
16 17 18 19 20 21 22
ЯнварьФевраль
В С Ч С ВП
2004
20052003
П
Выбрано 30 января 2004 года
Дней до выбранной даты
(включительно): 8 (6/2)
Дней месяца в выбранной
неделе: 6 (5/1)
Дней в выбранном
месяце: 31 (20/11)
1 2
1
2
3
4
5 6
Рисунок 7. Закладка «Календарь»
1. Компьютерная модель настенного календаря;
2. Информация по выбранным датам.
Остановимся подробнее на каждом из этих пунктов.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
28
10.4.2 Календарь
Календарь представляет собой вертикальную ленту длиной в 12 месяцев.
Лента начинается с января текущего года и заканчивается декабрем.
Видимая часть ленты должна вмещать минимум 2 месяца.
2004
20052003
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
16 17 18 19 20 21 22
В С Ч С
В
П П
2
1
4
3
5
6
7
Рисунок 8. Области календаря.
Рассмотрим подробнее элементы, помеченные на изображении кружками
красного цвета.
1. Блок выбора текущего года. Содержит в себе поле ввода для прямого
перехода к нужному году;
2. Блок (кнопка) выбора предыдущего года. Текущий год
переключается на предыдущий при нажатии мышью на данную
закладку;
3. Блок (кнопка) выбора следующего года. Текущий год переключается
на следующий при нажатии мышью на данную закладку;
4. Кнопка сдвига ленты на месяц в соответствующем направлении.
Аналогичная кнопка отображается при просмотре последнего месяца
ленты;
5. Текущий месяц;
6. Текущий день;
7. Выбранный день.
Взаимодействие с календарем допускается как при помощи клавиатуры,
так и при помощи мыши.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
29
Прямой выбор дня календаря осуществляется одинарным нажатием мыши
на соответствующий день.
Двойной щелчок мыши на дне календаря делает данный день текущим.
Если фокус находится на каком-либо дне календаря, то при помощи
клавиш-стрелок клавиатуры осуществляется перенос фокуса на соседние
дни календаря.
При перемещении вправо/влево выбирается следующий/предыдущий день
календаря, при перемещении вверх-вниз выбирается дата, ±1 неделя от
выбранной в данный момент.
В ситуации, когда выбранная дата находится на краю ленты (сверху или
снизу), при использовании стрелок, направленных за край ленты,
происходит ее сдвиг на одну неделю в соответствующую сторону.
Ключевая
идея
Представление месяцев в виде непрерывной полосы является более
наглядным для пользователя, позволяет ему быстро перемещаться
по календарю, и реализовывать базовые сценарии работы без
дополнительных взаимодействий и переключений.
10.4.3 Информация по выбранным датам
Содержит информацию, касающуюся выбранных пользователем дат:
временной промежуток между ними, количество выходных и будних дней и
т.п.
Данный блок решает следующие задачи пользователей:
Антон, Аня • Узнать количество дней между текущим и
выбранным днями;
• Узнать количество выходных и рабочих дней в
выбранном периоде.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
30
Рисунок 9. Информация по выбранным датам
1. Информация о текущей дате. Является ссылкой, «перематывающей»
календарь на текущую дату.
2. Информация о выбранной дате
3. Размер отрезка между текущей и выбранной датой (в днях), с
указанием количества будних и выходных дней.
4. Количество дней выбранного месяца в неделе, содержащей
выбранный день, с указанием количества будних и выходных дней.
5. Количество дней в выбранном месяце, с указанием количества
будних и выходных дней
Ключевая
идея
Отображение различной «готовой» информации по выбранным
датам облегчает работу пользователя и позволяет решать свои
задачи при минимуме усилий: отсутствует необходимость вести
подсчеты самостоятельно.