Эволюция графического интерфейса

Благодаря исследованиям, проведённым в 1960-е годыДагомЭнгельбартом в научно исследовательском институте Стэнфорда был изобретён графический интерфейс пользователя.

Первый GUI был разработан в XeroxPaloAltoResearchCenter (PARC) в далеких 70-х годах. Эта разработка дала старт новой эре инноваций в компьютерной графике.
Первый персональный компьютер который использовал новый графический интерфейс был XeroxAlto, созданный в 1973 году. Коммерческое воплощение концепция GUI получила в 1984 году в продуктах корпорации AppleComputer.

Позднее GUI стала стандартной составляющей большинства доступных на рынке операционных систем и приложений. Примеры систем, использующих GUI: MacOS, GEM, AtariTOS, MicrosoftWindows, Solaris, GNU/Linux, NeXTSTEP, OS/2, BeOS, Android, iOS, Bada, MeeGo.

 

Проектирование оконных форм: компоненты ввода и отображения текстовой информации, управляющие элементы, панели и компоненты внешнего оформления.

Выделяют группы компонентов оконных форм:

I.  Компоненты ввода и отображения текстовой информации:

•   Статический текст – отображение текста, неизменяемого пользователем; 

•   поле редактирования и поле ввода – позволяет отображать вв/ред информацию (однострочные, многострочные);

•   поле списка – ввод путем выбора из предложенных элементов.

II. Элементы управления:

•   Командная кнопка позволяет пользователю задавать команды. 

•   Радиокнопка – позволяет пользователю выбрать одну из набора альтернатив; 

•   Индикаторы – позволяют назначать и отменять опции приложения;

•   Ползунки и полосы прокрутки (вертикальные и горизонтальные).

•   Существуют также невизуальные компоненты, н-р, таймер.

III. Панели и компоненты внешнего оформления.

•   Панели – являются контейнерами для объединения других компонентов. Поэтому панель может выполнять и декоративные функции (зрительно объединяет компоненты, которые связаны друг с другом по назначению), так и функции управления, организуя работу своих дочерних компонентов.

•   Разделитель панели;

•   Полосы прокрутки

•   Вкладки 

•   Индикаторы степени выполнения процесса

•   Пиктограммы

•   Строка состояния

•   Панели инструментов

 

Рекомендации по использованию командных кнопок, радиокнопок и чекбоксов. Элементы прямого и отложенного действия.

Командная кнопка - элемент прямого действия. Кнопка должна показывать пользователю свое возможное и текущее состояние. Н-р, в Microsoft 5 состояний: нейтральная, нажатая, нейтральная с установленным фокусом ввода, состояние по умолчанию и заблокированная.

Для повышения распознаваемости кнопок из снабжают текстом и пиктограммами. Текст – инфинитив глагола, соответствующего команде. Пиктограммы должны являться подходящей метафорой выполняемого действия.

 

Радиокнопки и checkbox (флажок) – элементы отложенного действия. Главное различие между ними в том, что checkbox позволяет выбирать любую комбинацию, а радиокнопка – только одну альтернативу.

Эти элементы рекомендуют располагать в группе вертикально, подписи не должны содержать отрицания, должны быть позитивные. Обычно подписи формулируются в форме существительных, т.к. это элементы отложенного действия. При блокировке элемента визуально ослабляют не только элемент, но и его подпись.

 

Рекомендации по использованию компонентов ввода информации: списков, полей ввода, ползунков.

Списки. Функционально, списки являются разновидностямичекбоксов и радиокнопок, но их «+» в экономии экранного пространства и в простоте расширяемости.

Рекомендации:

        ширина списка должна позволять различать его элементы;

        не рекомендуется использовать горизонтальные полосы прокрутки;

        в тексте выделяются наиболее важные элементы, остальные заменяются многоточием;

        для списков с большим количеством разнотипных элементов допускается использование дополнительных элементов управления, позволяющих сортировать их и фильтровать;

        в списках можно использовать пиктрограммы.

Разновидности:

o        Раскрывающиеся. Часто возникает необходимость кроме собственно элементов списка включать дополнительные элементы, включающие или исключающие все.

o        Пролистываемые. Список не должен содержать пустые строки. Список должен содержать минимум 4 строки.

o        Редактируемые списки: раскрывающиеся и расширенные (комбинация поля ввода и списка).

Бывают списки единственного и множественного выбора.

Поле ввода. Бывают однострочные и многострочные. Ширина поля больше максимальной длины строки. Рекомендуется подпись к полю располагать сверху или слева. Сверху – для часто используемых форм, слева – для редко используемых или для неопытных пользователей.

Разновидность: Спинер. «+» в том, что можно ввести количественные данные не перенося руку на клавиатуру; возможно введение только корректных данных в правильном формате.