Разработка пользовательского интерфейса 2.1. Разработка эффективных форм
Лабораторная работа № 2
Разработка элементов интерфейса приложений
Цель работы:проектирование пользовательского интерфейса.
При разработке интерфейса приложения следует руководствоваться эвристическими правилами проектирования Якоба Нильсена (Jacob Nielsen):
1. Видимость состояния системы (правило обратной связи) Компьютерная программа всегда должна информировать пользователя о состоянии своей работы с помощью соответствующих средств. Пользователь обязательно должен видеть, к чему привело любое его действие: ввод данных, нажатие кнопки и т. п.
2. Время оповещения
Промежуток времени, в течение которого пользователь получает информацию о реакции на его действие или о событии, должен быть минимальным.
3. Равенство между системой и реальным миром Компьютерная программа должна использовать понятия, которые уже знакомы пользователю по реальному миру, к которым он привык.
4. Свобода действий пользователя Пользователь должен иметь контроль над программой и возможность изменить текущее состояние программы. Очень часто пользователь дает различные команды по ошибке и у него должен быть «аварийный выход» из этой ситуации, четко обозначенный в программе. Чаще всего такой «выход» реализуется в виде кнопки Cancel (Отмена). 5. Последовательность и стандарты Принцип последовательности означает использование одних и тех же средств для выражения схожих образов и выполнения действий, имеющих одинаковую природу.
6. Предупреждение ошибок
Применительно к теме проектирования интерфейсов компьютерных программ принцип предупреждения ошибок означает следующее: «Дизайн, который предупреждает возникновение проблем, лучше, чем самое хорошее сообщение об ошибке».
7. Понимание лучше, чем запоминание
При разработке интерфейса рекомендуется делать все объекты, функции, действия видимыми и легко доступными пользователю. В хорошем интерфейсе инструкции по использованию системы всегда видимы или легко доступны для вызова в любое время, когда это требуется. Это может быть реализовано как в виде продуманной организации элементов интерфейса, так и непосредственно в виде подсказок пользователю. Хороший и очень известный пример — анимированная надпись, которая появляется на панели задач Windows при попадании курсора на кнопку Пуск: «Начните работу с нажатия этой кнопки».
8. Гибкость и эффективность использования
При проектировании интерфейса требуется, чтобы интерфейс был одинаково удобен и для новичков, и для опытных пользователей. Для решения этой проблемы прибегают к простому приему: функции, которые ускоряют работу, оформлены так, что они не видны начинающим, но легко доступны продвинутым пользователям.
9. Отсутствие малополезных элементов программ
Не нужно загромождать интерфейс программы элементами, которые в данном случае являются неуместными и малополезными. Дело в том, что каждый элемент, будь то кнопка или текстовая подпись, обязательно отвлекает часть внимания пользователя
10. Распознавание и исправление ошибок Хорошие сообщения об ошибках — это сообщения, которые объясняют, в чем состоит проблема и, самое главное, как ее исправить.
Разработка пользовательского интерфейса 2.1. Разработка эффективных форм
Формы – это строительные блоки интерфейса пользователя. Заголовок формы традиционно используется для вывода информации о двух вещах: названии программы и названии документа, с которым в данный момент работает пользователь. Более удобным является порядок расположения информации в заголовке окна, когда первым идет название открытого документа, а после него — название программы.
Для максимального ускорения процесса ввода данных рекомендуется: 1)назначать клавиатурные эквиваленты команд;
2)располагать элементы формы согласовано с задачами пользователя; 3) выполнять добавление и редактирование записей в одной и той же форме. Еще одна важная часть разработки форм – создание содержательных и эффективных меню.
Не рекомендуется использовать в своей программе нестандартные элементы интерфейса. Элементы управления на форме приложения располагаются на равном расстоянии между ними.
Tab Order – это порядок, в котором экранный курсор перемещается по элементам управления в форме при нажатии клавиши <Таb> на клавиатуре компьютера. По окончании проектирования формы рекомендуется проверять TabOrder и, при необходимости, корректировать его.
При разработке приложения рекомендуется применять шрифты такими, какими они определены по умолчанию. Что касается начертания шрифтов, то принято использовать всего два начертания: нормальное и полужирное (последнее – для выделения важной информации, заголовков и т. п.).
Элемент управления Список (ListBox) один из самых популярных во всей палитре компонентов для создания интерфейса (рисунок 40). Он позволяет легко просматривать большие объемы информации и осуществлять выделение нужных строк. Однако у него есть недостаток: отсутствие горизонтальной линейки прокрутки. Из-за этого слишком длинные строки обрезаются на границе элемента, что особенно неприятно, если таким образом становится недоступной какая-либо важная информация.
Рисунок 1 - Элемент управления Список
ComboBoxпрактически не отличаетсяотListBox, за исключением дополнительной функции – он позволяет вводить информацию в маленьком поле ввода сверху. Есть несколько типов ComboBox, но наиболее популярен спадающий вниз (drop-down combobox), который можно видеть внизу окна диалога выбора файла. Элементы списка задаются в Редакторе строк (рисунок 2).
Рисунок 2 - Задание элементов списка ComboBox
Вводимый текст может приравниваться к верхнему регистру, если в свойстве CharCase выбрать ecUpperCase, к нижнему – если выбрать ecLowerCase (рисунок 3).
Рисунок 3 - Варианты ComboBox с различными регистрами
Компонент может работать в трех режимах, определяемых значением свойства Style:
| Значение | Механизм работы списка |
| csDropDown | В присоединенном поле можно указывать значения, отсутствующие в списке. Текст, введенный пользователем, доступен через свойство Текст. Список раскрывающийся |
| csDropDownList | Допустим только выбор значений, имеющихся в списке. Список раскрывающийся |
| CsSimple | Отличается от стиля csDropDown только тем, что список не является раскрывающимся |
q Максимальное число элементов, одновременно отображаемых в видимой части списка, задается в свойстве DropDownCount. Чтобы раскрыть список из программы, свойству DroppenDown (Раскрыт) нужно присвоить значение True.
q Единственный метод, связанный с выделением данных, это процедура Select All, которая выделяет весь текст, введенный пользователем.
q Основные события для поля со списком:
| Название | Условия генерации |
| OnCange | Пользователь изменил текст в присоединенном поле |
| OnDropDown | Список раскрывается. Это событие нужно обрабатывать, если содержимое списка может меняться во время работы программы |
Флажкии переключатели используются только для выбора из группы предложенных вариантов. Разница состоит в том, что флажки используются для выбора одновременно нескольких вариантов из группы, а переключатели позволяют сделать выбор в пользу только одного варианта.
Рисунок 4 - Компонент PageControl
Вкладки широко используются при проектировании интерфейсов современных программ. Этот элемент интерфейса очень эффективен, т.к. позволяет логически группировать большое количество информации, но количество вкладок не должно быть большим. В Delphi для создания вкладок используется компонент PageControl (рисунок 4).
Создание новой страницы TabSheet производится нажатием правой кнопки мыши на PageControl1, а затем вводом названия каждой закладки в поле Caption (рисунок 5).
Рисунок 5 - Таблица строк
КомпонентТаблица строк (StringGrid)служит для представления текстовых данных в виде таблицы. Доступ к каждому элементу таблицы происходит через свойство Cells.
Для размещения компонента на форме нужно щелкнуть на пиктограмме 
панели Additional (Дополнительно) и затем щелчком поместить на форме.
Основное свойство таблицы строк – это двумерный масссив Cells, позволяющий обращаться к содержимому ячеек и изменять их содержимое. Первое измерение – номер строки, второе – номер столбца. Нумерация строк и столбцов осуществляется с нуля.
Число строк задается в свойстве ColCount, число столбцов – в свойстве RowCount. Нумерация строк и столбцов осуществляется с нуля.
Таблица 3 - Свойства, предназначенные для оформления таблицы строк