Файл: Варианты построения интерфейса программ: особенности и эволюция (Сущность интерфейса программ).pdf

Графический интерфейс (graphical user interface, GUI) является обязательным компонентом большинства современных программных продуктов, ориентированных на работу конечного пользователя. Основными достоинствами графического интерфейса являются наглядность и интуитивная понятность для пользователя, а также общность интерфейса программ, написанных специально для функционирования в графической среде.

Примером графического интерфейса является оконный WIMP-интерфейс (Windows, Icons, Menus, Point-and-click - окна, пиктограммы, меню, "укажи и щелкни" [7]). Интерфейс WIMP возник тогда, когда пользователями ПК стали люди, не обладавшие навыками алгоритмического мышления. Пример представлен на рисунке 2.

Рисунок 2. Проводник Windows 10

Особенностью графического интерфейса является многооконность.

Эта технология обеспечивает пользователю доступ к большему объему информации, чем при использовании одного экрана. Кроме того, имея через окна доступ к нескольким источникам информации одновременно, пользователь может объединять имеющуюся в них информацию [5]. Например, изображения, полученные с помощью графического редактора, можно включить в текстовый документ.

С помощью нескольких окон пользователь может также одновременно анализировать информацию, представленную на разных уровнях детализации. Наличие на экране нескольких окон или пиктограмм позволяет «расширить» кратковременную память пользователя.

Таким образом, графический интерфейс расширяет пространство обзора и облегчает работу пользователя.

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

Обычно то окно, которое было открыто последним, отображается поверх других окон. Управление несколькими первичными окнами, относящимися к разным приложениям, может выполняться средствами Рабочего стола и Панели задач, обеспечивая тем самым пользователей возможностью для переключения между приложениями. Некоторые типы объектов могут даже не требовать создания собственного первичного окна и использовать только вторичное окно для просмотра и редактирования их свойств.

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

Многодокументный интерфейс (Multi Document Interface - MDI [5]) основывается на использовании одного первичного окна, называемого родительским окном, которое может содержать набор связанных с ним дочерних окон. Каждое дочернее окно — это, по существу, такое же окно, как и первичное, единственным ограничением для которого является то, что оно может появиться только в пределах родительского окна. Родительское окно обеспечивает как визуальное, так и «операционное» пространство для открытых дочерних окон. На дочернее окно обычно распространяется область действия меню родительского окна и, возможно, других элементов его интерфейса.

SILK-интерфейс (Speech, Image, Language, Knowledge - речь, образ, язык, знание [7]) В настоящее время SILK-интерфейс существует лишь как голосовой, если не считать биометрических интерфейсов, применяющихся не для управления компьютером, а лишь для идентификации пользователя.

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

Это очень перспективное направление по той причине, что вводить информацию с голоса - самый быстрый и удобный способ. Но его практические реализации пока не стали доминирующими, т. к. качество распознавания устной речи пока далеко от идеала [6]. Так же SILK-интерфейс наиболее требователен к аппаратным ресурсам компьютера, и поэтому его применяют в основном для военных целей.

Вывод. Принцип работы различных типов пользовательских интерфейсов схож: он представлен многоступенчатым переводом сигнала от элементов интерфейса к физическом электрическим импульсам.

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

В результате проделанной работы были выделены теоретические основы и понятие интерфейса, классификация типов интерфейса их особенности. Была описана эволюция пользовательских интерфейсов.

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

Этапы разработки интерфейса

Под интерфейсом понимается любой экранный информационный или интерактивный интерфейс. Таковыми являются:

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

Полный цикл разработки интерфейса включает следующие этапы [8]:

Исследование
Пользовательские сценарии
Структура интерфейса
Прототипирование интерфейса
Определение стилистики
Дизайн концепция
Оформление всех экранов
Анимация интерфейса
Подготовка материалов для разработчиков
Исследование

На этапе исследования проводится сбор информации о продукте, клиенте, его конкурентах или близких аналогах, сбор статистики использования текущего интерфейса, анализ устройств предполагаемой целевой аудитории [8].

Этот этап помогает понять для кого разрабатывается интерфейс, с какими ограничениями следует его делать (размеры экранов, интерактивность), как не стоит делать.

Пользовательские сценарии

На основе предоставленного описания работы интерфейса создается список задач, которые может выполнять пользователь в рамках интерфейса [8].

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

Структура интерфейса

Полученный список шагов на предыдущем этапе, ложится в основу структуры интерфейса [8]. Становится известно количество экранов, их краткое содержание и положение в общей структуре.

Прототипирование интерфейса

Создается два схематичных прототипа: черновой и финальный. Исключения составляют небольшие интерфейсы: простенькие мобильные приложения или маленькие сайты.

Черновой прототип представляет собой схематичные изображения экранов [8]. При черновом варианте на схемах изображены зоны и описания этих зон без деталей.

Черновой прототип помогает более наглядно понять на сколько объемным будет сайт, как много информации будет на каждом экране, как много нужно кликать, чтобы добраться до нужной страницы.

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

Определение стилистики

После этапа исследования и параллельно с этапами проектирования идет определение будущей стилистики интерфейса.

Для выбора стилистики готовятся несколько наборов изображений. Эти наборы представлены страничками сайтов, иллюстрациями, кнопками, шрифтовыми композициями, связанными между собой стилистически [8].

Дизайн концепция

Дизайн концепция призвана показать оформление сайта и дать понять будущий вид всего сайта [8]. Если предыдущий этап определения стилистики только дал направление, то дизайн концепция призвана скрестить выбранное направление с имеющимся содержанием интерфейса.

Оформление всех экранов

После утверждения дизайн концепции настает время оформления всех остальных экранов интерфейса. Дизайн концепция — это предположение как может выглядеть весь интерфейс [8]. Когда же очередь доходит до оформления всех экранов, тогда и происходит финализация внешнего вида: становится ясно правильно ли подобран кегль или интерлиньяж, хорошо ли сочетается толщина линий иконок с текстом, не конфликтует ли оформление форм с другими элементами экрана и многие другие случаи.

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

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

Анимация интерфейса

Этот этап начинается еще с момента дизайн концепции и продолжается на протяжении всего этапа оформления всех экранов.

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

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

Подготовка материалов для разработчиков

Подготавливается вся необходимая разработчикам информация, например [8]:

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

Варианты построения пользовательского интерфейса

Ниже приведен перечень основных задач разработки UI, каждая из этих категорий включает технологии, решающие одну или более задач примерно одинаковыми способами.

Формы ввода с привязкой к СУБД

Это средства разработки UI ориентированные на формы ввода данных для работы с реляционными СУБД. Суть подхода состоит в создании пользовательского интерфейса для приложений с помощью построения форм, отображающих значения полей БД в соответствующих элементах управления: текстовых полях, списках, кнопках-флажках, таблицах [2].

Инструментарий UI позволяет Обработчики выполнять сторон навигацию основных по решаются такой форме форме и UI устанавливать из прямую привязки связь построенной между источнику элементами форме управления и основных данными в блоков базе. данного Разработчику кнопках не шаблоны нужно блоков заботиться о технологии самих самих данных, перечень например, данными если Создано пользователь самих меняет одинаковыми значение в кнопках поле, стилизации привязанном к меняет какой-либо Разработчику записи стилизации из приложений базы, инструментариев это перечень изменение сторон мгновенно в таблицах ней построенный сохраняется.