Разработка интерфейса пользователя программного обеспечения

История

Персональный компьютер The Xerox Star

Персональный компьютер Apple Lisa

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

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

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

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

Вскоре после этого ребята из Apple позаимствовали новую идею у Xerox в обмен на некоторое количество акций своей новой фирмы. В 1984 году свет увидел первый Macintosh — компьютер для обывателей, с помощью которого люди могли легко выполнять какие-то повседневные задачи. Концепция персонального компьютера стала еще более доступной широким массам.

Идея оказалась настолько успешной, что в очень скором времени ее использовали парни из Microsoft, создав свою собственную платформу Windows. А появление Windows 95 без преувеличения сотворило революцию в сфере ПК.

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

Хотя на тот момент технологии все же были еще довольно непростыми. При колоссальном потенциале для общения, поиска данных и обмена информацией пользовательский интерфейс и сам процесс использования компьютера оставляли желать лучшего. Не удивительно, что самыми продаваемыми в 90-х книгами стали справочники «Для чайников» и «Шаг за шагом».

История

Предшественники

Предшественник GUIs был изобретен исследователями в Стэнфордском Научно-исследовательском институте, во главе с Дугласом Энджелбартом. Они развили использование основанных на тексте гиперссылок, которыми управляют с мышью для Системы Онлайн (NLS). Понятие гиперссылок было далее усовершенствовано и распространилось на графику исследователями в ксероксе PARC ‍ и определенно Алан Кей, который пошел вне основанных на тексте гиперссылок и использовал GUI в качестве основного интерфейса для компьютера Альта ксерокса, выпущенного в 1973. Самые современные GUIs общего назначения получены из этой системы.

Иван Сазерленд разработал основанную на указателе систему, названную Блокнотом в 1963. Это использовало световое перо, чтобы вести создание и манипуляцию объектов в технических рисунках.

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

Пользовательский интерфейс PARC состоял из графических элементов, таких как окна, меню, радио-кнопки и флажки. Понятие символов было позже введено Дэвидом Смитом, который написал тезис по предмету под руководством Кеем. Пользовательский интерфейс PARC использует указывающее устройство в дополнение к клавиатуре. Эти аспекты могут быть подчеркнуты при помощи альтернативного МЕЩАНИНА акронима, который поддерживает окна, изображения, меню и указывающее устройство.

Развитие

После PARC первый GUI-центральный компьютер операционная модель была ксероксом 8 010 Звездных Информационных систем в 1981, сопровождаемый Apple Лайза (который представил понятие строки меню, а также средств управления окном), в 1983, Apple Macintosh 128K в 1984, и АТАРИ-СТРИТ и Коммодор Амига в 1985.

Visi На был выпущен в 1983 для ПК IBM-PC совместимые компьютеры, но не сделал стал популярным из-за его высоких требований аппаратных средств. Тем не менее, это было решающее влияние на современное развитие Microsoft Windows.

Apple, IBM и Microsoft использовали многие идеи ксерокса развить продукты, и технические требования Стандартного пользовательского доступа IBM сформировали основание пользовательского интерфейса, найденного в Microsoft Windows, IBM администратор представлений OS/2, и набор инструментов Мотива Unix и администратор полноэкранного режима. Эти идеи развились, чтобы создать интерфейс, найденный в текущих версиях Microsoft Windows, а также в Mac OS X и различной настольной окружающей среде для подобных Unix операционных систем, таких как Linux. Таким образом у актуальнейших GUIs есть в основном общие идиомы.

Популяризация

В 1984 Apple опубликовала рекламный ролик, который ввел Apple Macintosh во время телевизионной передачи Супер Боул XVIII CBS, с намеками на отмеченный роман Джорджа Оруэлла, . Реклама была нацелена на то, чтобы заставлять людей думать о компьютерах, идентифицировав легкий в использовании интерфейс как персональный компьютер, который отступил от предыдущих ориентированных на бизнес систем и становления представлением подписи продуктов Apple.

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

В 2007, с iPhone и позже в 2010 с введением iPad, Apple популяризировала стиль постмещанина взаимодействия для мультисенсорных экранов, и те устройства, как полагали, были вехами в разработке мобильных устройств.

Знакомой GUIs большинству людей с середины 2010-х является Microsoft Windows, Mac OS X и X интерфейсов Оконной системы для настольных компьютеров и ноутбуков, и iOS Apple, Android, Symbian, BlackBerry OS, Windows Phone, Пальмового OSWeb OS и Firefox OS для карманного компьютера («смартфон») устройства.

[Как работает обработчик]

Если вам не интересно как, смело пропускайте данный раздел =)

Что же тут произошло? А произошло тут создание функции (то есть Visual Studio за нас написала код, нам никто не мешает его ручками писать) с сигнатурой обработчика системного события. У функции два аргумента:

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

Далее студия привязала данную функцию к кнопке. Если смотреть через интерфейс (переключимся на форму нажав Shift+F7), то эта функция будет указана в качестве значения свойства Click в разделе Событий.

Если же смотреть еще глубже можно открыть, автогенерируемый файлик для формы Form1.Designer.cs

Там мы увидим код:

И если раскрыть узел Код автоматически созданный конструктором, то увидим сгенерированный код, который в явном виде описывает положение всех объектов на форме, а также привязанные к ним свойства. Приведу часть кода:

но ладно, вернемся к нашему обработчику.

Сравнение с другими интерфейсами

CLI (Интерфейсы командной строки)

Современный интерфейс командной строки

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

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

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

Большинство современных операционных систем предоставляют как графический интерфейс, так и некоторый уровень интерфейса командной строки, хотя графическим интерфейсам обычно уделяется больше внимания. Графический интерфейс пользователя обычно основан на WIMP, хотя иногда появляются и другие метафоры, например, используемые в Microsoft Bob , 3dwm или File System Visualizer .

Обертки GUI

Оболочки графического пользовательского интерфейса (GUI) находят способ обойти версии интерфейса командной строки (CLI) (обычно) Linux и Unix-подобных программных приложений и их текстовых пользовательских интерфейсов или вводимых меток команд. В то время как приложения на основе командной строки или текстовые приложения позволяют пользователям запускать программу в неинтерактивном режиме, поверх них оболочки графического интерфейса пользователя избегают крутой кривой обучения командной строки, которая требует, чтобы команды вводились на клавиатуре . Запустив оболочку GUI, пользователи могут интуитивно взаимодействовать , запускать, останавливать и изменять ее рабочие параметры с помощью графических значков и визуальных индикаторовокружение рабочего стола , например. Приложения также могут предоставлять оба интерфейса, и когда они это делают, графический интерфейс обычно представляет собой оболочку WIMP для версии для командной строки. Это особенно характерно для приложений, разработанных для Unix-подобных операционных систем. Последний раньше реализовывался первым, потому что он позволял разработчикам сосредоточиться исключительно на функциональности своего продукта, не беспокоясь о деталях интерфейса, таких как разработка значков и размещение кнопок. Такой способ проектирования программ также позволяет пользователям запускать программу в сценарии оболочки .

Что нам потребуется

Нам понадобятся PyQt и Qt Designer, ну и Python, само собой.

В этой статье используется PyQt5 с Python 3, но особых различий между PyQt и PySide или их версиями для Python 2 нет.

Windows: PyQt можно скачать здесь. В комплекте с ним идёт Qt Designer.

macOS: Вы можете установить PyQt с помощью Homebrew:

Скачать пакет с большинством компонентов и инструментов Qt, который содержит Qt Designer, можно по этой ссылке.

Linux: Всё нужное, вероятно, есть в репозиториях вашего дистрибутива. Qt Designer можно установить из Центра Приложений, но PyQt придётся устанавливать через терминал. Установить всё, что нам понадобится, одной командой можно, например, так:

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

Если вы видите сообщение, что такой команды нет или что-то в таком роде, попробуйте загуглить решение проблемы для вашей операционной системы и версии PyQt.

Если вы используете Windows, то, скорее всего, путь  (измените  на вашу версию Python) не прописан в вашем . Загляните в этот тред на Stack Overflow, чтобы узнать, как решить проблему.

пост-wimp интерфейс

Мобильные устройства с небольшими приложениями, такие как карманные персональные компьютеры (КПК) и смартфоны, обычно используют элементы WIMP с различными объединяющими метафорами из-за ограничений в пространстве и доступных устройств ввода. Приложения, для которых не подходит WIMP, могут использовать более новые методы взаимодействия , которые в совокупности называются пользовательскими интерфейсами после WIMP .

По состоянию на 2011 год некоторые операционные системы на основе сенсорных экранов, такие как Apple iOS ( iPhone ) и Android, используют графических интерфейсов под названием post-WIMP. Они поддерживают стили взаимодействия с использованием более чем одного пальца, соприкасающегося с дисплеем, что позволяет выполнять такие действия, как сжатие и вращение, которые не поддерживаются одним указателем и мышью.

Пример работы на микроконтроллере

Так же был написан пример библиотеки для STM32 микроконтроллеров. Был использован МК STM32f437VGT6 с тактовой частотой 180МГц и 2.2″ дисплей 230х320 пикселей на контроллере ILI9341. Управления с компьютерной клавиатуры по UART.

Код примера: https://github.com/SL-RU/MakiseILI9341Test

Видео примера:

MakiseGUI tests on stm32 MCU with 2.2inch 320x240 ILI9341MakiseGUI tests on stm32 MCU with 2.2inch 320×240 ILI9341

Есть много моментов которые нужно совершенствовать в библиотеки и есть много путей развития. Но на данный момент библиотека является совершенно рабочей и стабильной.

Лицензия проекта — MIT. Вы можете использовать библиотеку и исходный код как хотите и где хотите, даже использовать без проблем в коммерческих проектах, но в то же время я не даю никаких гарантий по работе библиотеки — всё как есть.

Если вы что-то хотите поменять в коде, исправить найденный баг или ошибку, то пишите в issue в репозитории или даже кидайте пуллреквесты.

Буду рад вопросам и пожеланиям!

Как работает GUI-приложение

Что ещё может происходить в UI-цикле? Если нам надо переместить окно на рабочем столе или сменить текст в лейбле, добавить дочерний элемент, можем ли мы сделать это во время отрисовки? Очевидно, эти операции могут быть небезопасными. Например, можно добавить элемент в массив childs  в тот момент, когда он находится в процессе перечисления, что вызовет ошибку. И это не единственное тонкое место — изменение размеров элементов, текста, цвета и других параметров во время отрисовки могут создать проблемы в коде рендера.

Правильным решением здесь будет синхронизация процесса рендера и модификации параметров элементов интерфейса. Поскольку подобные операции (назовём их invoke) в GUI происходят довольно часто, хорошим решением будет просто выполнять их в том же потоке, что и рендер, непосредственно перед ним. Для этого сделаем очередь операций и выберем метод добавления операции в очередь (invokeLater).

Программист, который хочет провести модификацию иерархии/параметров элементов, должен делать это только внутри таких операций. Кроме того, события ввода (например, с мыши и клавиатуры) также должны обрабатываться в этой очереди. Теперь мы имеем представление о том, как работает GUI-приложение.

За пределами приложения лежат устройства ввода-вывода, которые симулированы  классами из пакета by.dev.gui.driver, а «виртуальной машиной» является простой JFrame, который получает от «видеоустройства» картинку (Image) и посылает события мыши в соответствующее «устройство» ввода.

Монитор представляет собой буфер пикселей, в который и рисуется интерфейс, а в конце каждого UI-цикла созданная им видеостраница посылается на «матрицу».

Для управления буфером пикселей создан класс Texture. Ещё вы могли заметить, что GraphicsContext потерял свойство offset и теперь всегда рисует в текстуру, начиная с верхнего левого угла (это изменение будет объяснено ниже при рассмотрении алгоритмов полупрозрачности), у него появился метод fill () для монохромной заливки прямоугольной области, а также наследник SafeGraphicsContext. Дело в том, что дочерние элементы зачастую могут выходить за границы своих родителей, следовательно, их пиксели могут отрисоваться в несуществующие области текстуры. Чтобы не производить проверку попадания в границы родителя каждый раз, проще всего делать её на стороне графического контекста.

Барабанная дробь! Вот мы и создали все инструменты, чтобы всё вышесказанное обрело хоть какой-то практический смысл.

Онлайн-курсы, чтобы стать крутым дизайнером

Microsoft Windows XP

Незначительные изменения в Windows Millennium не повлияли на дальнейшее развитие операционной системы. Следующим решительным шагом Microsoft стала Windows XP, набравшая невероятную популярность. Система была выпущена 25 октября 2001 года. В дальнейшем компьютеры посетила и ее 64-битная версия. Помимо великолепной поддержки различного оборудования, высокой производительности и надежности, XP выделилась не только удобным, но и весьма привлекательным интерфейсом. Три предустановленные цветовые темы (стандартная голубая, серебристая и оливковая) выглядели очень заманчиво, а те пользователи, кому их не хватило, могли выбрать подходящее оформление на просторах интернета.

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

Обработка ошибок

Может вы уже столкнулись с этим, но если запустить приложение, ничего не ввести и просто нажать кнопку, программа выдаст ошибку:

появление ее закономерно, программа пытается с помощью метода int.Parse преобразовать строку в число, но в строке пусто и преобразовывать нечего.
Аналогичная ошибка появится если ввести буквы вместо цифр.

Наверное было бы здорово, просто проигнорировать нажатие кнопки с некорректными данными, для этого нам надо заставить программу не падать.
Делается это не сильно сложно, путем добавления конструкции для перехвата ошибок, Именуется она try-catch, и выглядит так:

правда если просто вставить код в таком виде то он будет ругаться на переменные ivanovSum и petrovSum, после блока try/catch.
Это происходит потому что переменные инициализируются внутри блока try, надо их вынести вовне. Придется указать тип явно.

проверяем:

Красота! Можно сообщение выдавать об ошибке (но лучше не надо):

получится:

Это в принципе должно хватить для выполнения первого задания в лабе 4.

CLI – интерфейс командной строки

CLI (Command Line Interface) – это программа в командной строке, которая читает вводимые команды и выполняет запрошенные действия. В целом, любая программа, которой можно пользоваться через команды из терминала, попадает в эту категорию.

APT: пакетный менеджер с CLI в Debian-based дистрибутивах

У старых компьютеров не было мыши или других манипуляторов для управления операционной системой. Всё взаимодействие выполнялось через текстовый ввод и вывод, т.е. через CLI.

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

Ушёл ли CLI в прошлое? Вовсе нет. У командной строки есть свои преимущества, особенно если речь идёт о настройке Linux на глубинном уровне: поднятии сетевого брандмауэра, организации локальной сети или даже управлении пакетами.

Со всеми этими вопросами можно разобраться и с помощью GUI-программ, но CLI даёт более прямой и прицельный доступ к операционной системе. В любом случае, работа GUI-приложений также основана на обращении к ОС с помощью команд (которые прописаны в их программном коде).

Многие известные утилиты с GUI представляют из себя графическую обёртку для инструментов CLI. Например Handbrake, популярный медиа-конвертер с открытым исходным кодом, является GUI-надстройкой над CLI-приложением ffmpeg.

Рабочее окно Handbrake

Конечно, пользоваться командной строкой сложнее, чем графическим интерфейсом. Однако не стоит переживать по этому поводу. Как правило, для решения повседневных задач достаточно графического управления Linux. Тем не менее, знание основных команд часто бывает весьма полезным.

Виды интерфейсов

Одни виды взаимодействия позволяют получить больше контроля над компьютером или смартфоном, но требуют дополнительных навыков. Другие — более комфортные, но предоставляют меньше возможностей. У каждого типа есть свои особенности.

Командная строка

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

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

Графический и текстовый

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

  • иконки;

  • меню;

  • списки;

  • рисунки и схемы;

  • другие графические элементы.

Например, при взаимодействии с Windows используют иконки и окна, для ввода подключают мышь. На смартфоне устройством ввода служит сенсорный дисплей.

Текстовый интерфейс не использует изображения: команды отдаются с помощью текста и информация предоставляется в текстовом виде. 

Жестовый, голосовой, тактильный и нейронный

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

Голосовой интерфейс — это управление голосом. Гаджет распознает и выполняет звуковые команды. 

Тактильный подразумевает взаимодействие с помощью осязания: вибрация или чувствительность к силе нажатия.

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

Программный, аппаратный, аппаратно-программный

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

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

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

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

Веб, игровой сайт

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

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

Материальный

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

Интерфейс в телефонах

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

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий