Описание графического интерфейса программы

Можно рассматривать два совершенно разных метода создания интерфейсов.

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

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

Классический подход проектирования пользовательского интерфейса

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

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

ТОП 5 Лучших графических (GUI) фреймворков Python / Графический интерфейс python

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

Рис. 1 — Основные потоки взаимодействия при классическом подходе проектирования пользовательского интерфейса.

Основы графического интерфейса

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

В данный момент вы не можете посмотреть или раздать видеоурок ученикам

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

Получите невероятные возможности

1. Откройте доступ ко всем видеоурокам комплекта.

2. Раздавайте видеоуроки в личные кабинеты ученикам.

3. Смотрите статистику просмотра видеоуроков учениками.
Получить доступ

Конспект урока «Основы графического интерфейса»

· Особенности современных прикладных программ.

Впервые написал программу с графическим интерфейсом

· Простейшая программа с графическим интерфейсом.

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

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

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

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

Или же работа поисковой системы начинается после того, как пользователь отправил свой запрос. Работа таких программ зависит от событий. Событием называется изменение состояния какого-либо элемента управления. То есть изменение текста в поле ввода, изменение размера окна, нажатие на кнопку – всё это события.

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

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

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

До середины 90-х годов разработка программ с графическим интерфейсом была долгим, трудным и утомительным занятием. Сначала программист создавал форму окна пользовательского интерфейса, после чего описывал его элементы управления и размещал их на форме, описывал обработчики событий. То есть весьма значительную часть своего времени программист тратил на действия, которые были никак не связаны с решением основной задачи. Так возникла вполне логичная идея: определённым образом автоматизировать разработку пользовательского интерфейса так, чтобы программист думал о решении основной задачи – как обработать данные.

Так были созданы RAD-среды. Аббревиатура RAD – это сокращение от английского «Rapid Application Development», что в переводе означает «быстрая разработка приложения». С помощью RAD-сред пользовательский интерфейс создаётся вручную, как правило, с помощью мыши, при этом код для создания и размещения элементов управления генерируется автоматически.

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

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

Одной из первых RAD-сред стала Delphi. Она была разработана компанией Borland в 1994 году для одноимённого языка программирования. Одной из самых популярных RAD-сред на сегодняшний день является Visual Studio, разработанная компанией Microsoft. Она поддерживает несколько достаточно распространённых языков программирования.

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

К сожалению, для языка Python не создано ни одной надёжной RAD-среды, но есть целый ряд графических библиотек, например, встроенная библиотека Tkinter, а также устанавливаемые дополнительно wxPython, PyGtk, PyQt и другие. Мы будем использовать библиотеку с открытым исходным кодом PyQt, так как она наиболее актуальна на сегодняшний день.

Её установочный файл можно бесплатно скачать на сайте разработчика – https://www.riverbankcomputing.com. Мы будем использовать библиотеку PyQt v5.6. Она подходит для языка Python, начиная с версии 3.5 и более поздних. Эта библиотека будет автоматически установлена в директорию среды разработки языка Python.

Теперь создадим простое приложение с графическим интерфейсом. Для этого в меню Пуск, в списке программ, найдём папку установленной библиотеки. Из этой папки запустим файл Designer. На экране у нас появилось окно программы QtDesigner. Эту программу можно использовать для создания и редактирования графических интерфейсов.

Для того, чтобы создать новый интерфейс в меню Файл, выберем пункт Новый или используем сочетание клавиш Ctrl + N. Программа вывела на экран окно, в котором нам предлагается выбрать тип формы, которую необходимо создать. Как правило, разработка интерфейса начинается с главного окна. С него и начнём. Выберем пункт MainWindow и нажмём на кнопку Создать.

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

Он служит для настройки размещаемых элементов управления.

Как видим, созданная форма главного окна имеет большой размер. Уменьшим его. Для этого установим указатель мыши в угол формы, и когда он примет вид двунаправленной стрелки, протягиванием мыши уменьшим размер формы. После того, как мы изменили размер формы рассмотрим её свойства в редакторе свойств.

В левой части редактора свойств располагаются названия свойств, а в правой части – их значения. Например, свойство objectName означает имя объекта, который будет соответствовать окну в программе. Свойство windowTitle хранит заголовок окна. Изменим его на «Моя первая форма». Как видим, изменился и заголовок окна.

Теперь добавим на форму кнопку. Для этого переместим указатель на панель виджетов и выберем на ней элемент PushButton. Перетащим этот элемент на форму. Теперь там появилась кнопка. Мы можем изменить её размеры так же, как делали это с самой формой. Рассмотрим свойства этой кнопки.

Запомним, что имя её объекта – PushButton. Теперь изменим у неё свойство text, оно содержит текст, отображаемый на кнопке. Присвоим этому свойству значение «Выход». Таким образом мы сделали кнопку с соответствующей надписью.

Теперь мы можем посмотреть, как будет выглядеть главное окно программы. Для этого в меню Форма выберем пункт Предпросмотр или используем сочетание клавиш Ctrl+R.

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

Теперь мы можем найти его в каталоге среды разработки, в котором установлена библиотека PyQt.

Теперь нам нужно конвертировать файл разметки в файл модуля языка Python. Для этого запустим командную строку. В ней с помощью команды cd переместимся в директорию библиотеки PyQt. Мы можем просмотреть её содержимое с помощью команды dir. Нам нужно запустить файл pyuic5.bat.

Для этого запишем его имя с расширением. В качестве входных данных укажем имя файла, в котором мы сохранили наш графический интерфейс, а также параметр «-o». Если входной файл находится в другом каталоге, также указывается его местоположение. В качестве выходных данных укажем имя выходного файла с расширением *.py и параметр «-x».

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

Теперь просмотрим полученный файл в среде разработки языка Python.

# Form implementation generated from reading ui file ‘my_first_gui.ui’

# Created by: PyQt5 UI code generator 5.6

# WARNING! All changes made in this file will be lost!

Источник: videouroki.net

Правила разработки пользовательского графического интерфейса в сфере информационных технологий

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

Ключевые слова

ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС, АДАПТИВНОСТЬ, МИНИМАЛИЗМ, СОВРЕМЕННЫЕ ТЕНДЕНЦИИ, MATERIAL DESIGN, ЛОГИЧЕСКАЯ СТРУКТУРА, ИЕРАРХИЧНОСТЬ, ИНТУИТИВНОСТЬ

Текст научной работы

Введение

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

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

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

Современные тенденции

Активное развитие графического интерфейса началось в 1970-х годах, благодаря разработкам компании Xerox. В частности, речь идет о продукте SmallTalk. Данный продукт был задуман как язык программирования и среда проектирования программ и обладал собственным пользовательским интерфейсом. Именно эта среда ввела многие современные понятия и каноны графического пользовательского интерфейса.

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

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

• Минимализм;
• Интуитивность;
• Адаптивность.

Минимализм

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

Понятие «минимализм» в разработке дизайна графического интерфейса в рамках данной статьи рассматривается со следующих позиций:

• Логическая структура;
• Дизайн элементов;
• Колористика;
• Анимация.

Минимализм затрагивает такие критерии, как эргономика, то есть использование меньшего для создания нужной композиции. Другими словами, это правильное и простое использование только нужного — убирая всё лишнее (или не внося его вовсе) [8]. Таким образом появляется свободное пространство. Правильная постановка свободного пространства в работе и даёт эргономичность, не отвлекает и концентрирует на нужном.

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

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

Принцип работы с цветом по кругу Иттена заключается в подборе 2-4 цветов через принципы цветовых гармоний, для которых выбирается оптимальная яркость, контрастность и площадь заполнения.

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

Интуитивность

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

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

В процессе выхода программных продуктов формировались определенные каноны расположения элементов графического пользовательского интерфейса. При сравнении различного программного обеспечения можно заметить аналогичную для всех продуктов (приложений, сайтов) структуру. Такой подход к созданию графического пользовательского интерфейса значительно повышает эргономичность программного обеспечения. Одним из наиболее ярких примеров неудачных экспериментов со структурой интерфейса является отсутствие кнопки «Пуск» в операционной системе Windows 8.

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

Адаптивность

Адаптивность — системное свойство, которое заключается в способности системы приспосабливаться к изменившимся условиям. Значимость данного свойства растет ввиду обилия устройств, предназначенных для работы с программными продуктами. Зачастую требуется возможность не только доступа, но и комфортной работы с одним и тем же продуктом с различных устройств (смартфон, планшет, ПК) [7].

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

В данном разделе речь идёт о гибкости контента программного обеспечения. Это продукты, предоставляющие пользователю возможность выбрать те разделы (функциональные модули), которые необходимо отображать, а остальные оставить скрытыми. Ярким примером таких продуктов являются среды разработки программного обеспечения.

Анализ пользовательского графического интерфейса на примере продуктов семейства Windows

Для выявления целесообразности использования вышеперечисленных тенденций дизайна пользовательского графического интерфейса была сформирована сравнительная характеристика последних версий операционной системы Windows.

Оценка выбранных продуктов определялась по шкале от 1 до 5 посредством анализа [14,15] отзывов целевой аудитории, в том числе учитывался личный опыт работы. Результаты проведенного анализа представлены в таблице. Для наглядности в Приложении 2 представлены скриншоты интерфейсов рассматриваемых операционных систем.

Критерий оценки

Windows 7

Windows 8

Windows 8.1

Windows 10

Комментарии

Источник: novainfo.ru