Макет gui что это

Python GUI: создаём простое приложение с PyQt и Qt Designer

Эта статья предназначена для тех, кто только начинает своё знакомство с созданием приложений с графическим интерфейсом (GUI) на Python. В ней мы рассмотрим основы использования PyQt в связке с Qt Designer. Шаг за шагом мы создадим простое Python GUI приложение, которое будет отображать содержимое выбранной директории.

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

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

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

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

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

$ brew install pyqt5

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

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

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

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

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

Дизайн

Основы

Теперь, когда у нас всё готово к работе, давайте начнём с простого дизайна.

Откройте Qt Designer, где вы увидите диалог новой формы, выберите Main Window и нажмите Create.

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

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

Все элементы формы и их иерархия по умолчанию отображаются в правой части окна Qt Designer под названием Object Inspector. Вы с лёгкостью можете удалять объекты, кликая по ним правой кнопкой мыши в этом окне. Или же вы можете выбрать их в основной форме и нажать клавишу DEL на клавиатуре.

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

Теперь перетащите куда-нибудь в основную форму List Widget (не List View) и Push Button из Widget Box.

Макеты

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

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

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

Теперь в меню Qt Designer нажмите Form, затем выберите Preview и увидите что-то похожее на скриншот выше. Выглядит хорошо, не так ли? Но вот что случится, когда мы изменим размер окна:

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

Основное окно уже поддерживает макеты, поэтому нам ничего не нужно добавлять в нашу форму. Просто кликните правой кнопкой мыши по Main Window в Object Inspector и выберите Lay out → Lay out vertically. Также вы можете кликнуть правой кнопкой по пустой области в форме и выбрать те же опции:

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

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

Если у вас не получается переместить элемент в главном окне, вы можете сделать это в окне Object Inspector.

Последние штрихи

Теперь, благодаря вертикальному размещению, наши элементы выровнены правильно. Единственное, что осталось сделать (но не обязательно), — изменить имя элементов и их текст.

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

Свойства элементов можно изменить в разделе Property Editor.

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

Нажмите на кнопку, которую вы добавили в форму. Теперь в Property Editor вы должны видеть все свойства этого элемента. В данный момент нас интересуют objectName и text в разделе QAbstractButton . Вы можете сворачивать разделы в Property Editor нажатием по названию раздела.

Измените значение objectName на btnBrowse и text на Выберите папку.

Должно получиться так:

Именем объекта списка является listWidget , что вполне подходит в данном случае.

Сохраните дизайн как design.ui в папке проекта.

Превращаем дизайн в код

Конечно, можно использовать .ui -файлы напрямую из Python-кода, однако есть и другой путь, который может показаться легче. Можно конвертировать код .ui -файла в Python-файл, который мы потом сможем импортировать и использовать. Для этого мы используем команду pyuic5 из терминала/командной строки.

Чтобы конвертировать .ui -файл в Python-файл с названием design.py , используйте следующую команду:

Пишем код

Теперь у нас есть файл design.py с нужной частью дизайна нашего приложения и мы начинать работу над созданием его логики.

Создайте файл main.py в папке, где находится design.py .

Используем дизайн

Для Python GUI приложения понадобятся следующие модули:

Также нам нужен код дизайна, который мы создали ранее, поэтому его мы тоже импортируем:

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

В этом классе мы будем взаимодействовать с элементами интерфейса, добавлять соединения и всё остальное, что нам потребуется. Но для начала нам нужно инициализировать класс при запуске кода. С этим мы разберёмся в функции main() :

И чтобы выполнить эту функцию, мы воспользуемся привычной конструкцией:

В итоге main.py выглядит таким образом:

Если запустить этот код: $ python3 main.py , то наше приложение запустится!

Но нажатие на кнопку ничего не даёт, поэтому нам придётся с этим разобраться.

Добавляем функциональность в наше Python GUI приложение

Примечание Весь дальнейший код пишется внутри класса ExampleApp .

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

Добавьте эту строку в метод __init__ класса ExampleApp , чтобы выполнить привязку при запуске приложения. А теперь взглянем на неё поближе:

• self.btnBrowse : здесь btnBrowse — имя объекта, который мы определили в Qt Designer. self говорит само за себя и означает принадлежность к текущему классу;
• clicked — событие, которое мы хотим привязать. У разных элементов разные события, например, у виджетов списка есть itemSelectionChanged и т.д.;
• connect() — метод, который привязывает событие к вызову переданной функции;
• self.browse_folder — просто функция (метод), которую мы описали в классе ExampleApp .

Для открытия диалога выбора папки мы можем использовать встроенный метод QtWidgets.QFileDialog.getExistingDirectory :

Если пользователь выберет директорию, переменной directory присвоится абсолютный путь к выбранной директории, в противном случае она будет равна None . Чтобы не выполнять код дальше, если пользователь закроет диалог, мы используем команду if directory: .

Для отображения содержимого директории нам нужно импортировать os :

И получить список содержимого следующим образом:

Для добавления элементов в listWidget мы используем метод addItem() , а для удаления всех элементов у нас есть self.listWidget.clear() .

В итоге функция browse_folder должна выглядеть так:

Теперь, если запустить приложение, нажать на кнопку и выбрать директорию, мы увидим:

Так выглядит весь код нашего Python GUI приложения:

Это были основы использования Qt Designer и PyQt для разработки Python GUI приложения. Теперь вы можете спокойно изменять дизайн приложения и использовать команду pyuic5 без страха потерять написанный код.

Интерактивное прототипирование с GUI Machine

В предыдущих статьях цикла мы в деталях описали процесс поиска подходящего нам инструмента прототипирования и историю создания собственного инструмента – GUI Machine.

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

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

Резюме

Имя: GUI Machine
Год рождения: 2009
Дата выхода в свет: 24 января 2011 года
Место рождения: Санкт-Петербург, Россия
Организация: Alee Software
Проф. призвание: инструмент динамического прототипирования.
Проф. навыки: создание интерактивных прототипов сложных десктоп и веб-приложений без написания программного кода
Среда обитания: Windows, Mac OS, Linux
Зарубежные аналоги: Axure RP, GUI Design Studio, MS Expression Blend
Отечественные аналоги: отсутствуют
Личные качества: простота, функциональная наполненность, интуитивность, высокая скорость и удобство создания прототипов.
Знание языков: русский и английский
О себе: рождён в успешной ИТ-компании, постоянно пополняюсь новой функциональностью, улучшаюсь и избавляюсь от ошибок. Амбициозный, имею грандиозные планы. Будущий революционер мира разработки программного обеспечения.
Контакты: www.guimachine.ru

Первое знакомство

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

Итак, GUI Machine – это инструмент для создания интерактивных прототипов десктоп (настольных) и веб-приложений— определение, говорящее само за себя. Такие прототипы позволяют описывать как внешний вид, графический интерфейс, так и поведение, интерфейсную логику разрабатываемой системы. Прототипы, созданные в GUI Machine, характеризуются высокой достоверностью, детализацией, визуальной точностью и по степени близости к конечной системе относятся к классу High-fidelity прототипов. В качестве примеров предлагаю посмотреть видео-презентации прототипов, созданных в GUI Machine:

Прототип веб-интерфейса CRM-системы:

Прототип внутрикорпоративного портала Alee Software:

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

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

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

Интерфейс GUI Machine

Рабочая область GUI Machine организована таким образом, чтобы помочь сосредоточиться на создании и редактировании программных интерфейсов.

В верхней части окна приложения представлено меню, выполненное в Ribbon стиле, предоставляющее быстрый доступ к наиболее востребованным операциям и настройкам. Ниже по центру располагается область редактирования прототипа, на которой из различных компонентов создаются, собираются экраны интерфейса. Под областью редактирования показаны корешки страниц проекта. Слева и справа располагаются основные рабочие панели: Компоненты, Слои, Свойства объекта, Шаблоны и История. Все панели могут быть свёрнуты, спрятаны по краям области редактирования, изменены в размерах (как по высоте, так и по ширине), перемещены и закрыты. Меню также можно сворачивать, оставляя лишь только одну верхнюю строчку. Таким образом, можно настроить вид приложения «под себя» и освободить максимальное количество места под область редактирования прототипа для более удобной и приятной работы. Быстро скрыть все панели можно при помощи сочетания клавиш Ctrl+H.

Также управление панелями доступно со вкладки Утилиты и фреймы верхнего горизонтального меню приложения:

Здесь можно скрыть либо отобразить панели (по одной либо все вместе), закрепить их положение, выключить отображение их заголовков.

Компоненты

Панель Компоненты — основной рабочий инструмент при построении интерфейсов, содержащий множество различных компонентов. Инструмент предназначен для добавления на область редактирования объектов. Панель содержит 4 набора компонентов: Стандартные, Расширенные, Фигуры, Vaadin. Помимо своего стандартного вида (дерево компонентов с названиями) панель имеет альтернативное компактное представление:

Изменить способ отображения компонентов можно кликом правой кнопки мыши внутри панели.

Стандартные компоненты

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

Все стандартные компоненты можно обнаружить также на вкладке Стандартные верхнего горизонтального меню приложения:

На рисунке ниже показано запущенное в Windows 7 в режиме просмотра окно, содержащее стандартные компоненты:

А теперь то же самое окно, но запущенное на Mac OS:

В набор, помимо привычных элементов интерфейса, также входят лэйауты — динамический и статический — объекты, на которых основывается любой интерфейс, созданный в GUI Machine. Именно они обуславливают специфику работы в GUI Machine.

Статический лэйаут

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

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

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

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

Динамический лэйаут

Если же требуется полностью интерактивный и динамичный прототип, то он должен быть создан на основе динамических лэйаутов. Этот объект представляет собой контейнер, который может быть разбит на несколько ячеек, образуя таким образом своего рода каркас интерфейса. Вставляемые в динамический лэйаут объекты располгаются строго по ячейкам (размер вставляемого объекта будет изменён до размера ячейки/ячеек). При изменении размера запущенного в режиме просмотра окна, положение и размер вставленных в лэйаут объектов также будут изменены. Работа с динамическими лэйаутами несколько более сложна, необходимо потратить некоторое время на изучение его поведения (минут 10 с документацией), однако при определённой сноровке работа с ним не доставляет каких-либо сложностей или неудобств.

Также, как и на предыдущем рисунке, здесь окно просмотра лэйаута намеренно вытянуто. При изменении размера окна положение и размер некоторых объектов также изменились. Зависит это от типа ячейки лэйаута, в которой расположен тот или иной объект (их существует 3 типа).

Плейсхолдер

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

Расширенные компоненты

Набор расширенных компонентов содержит нестандартные компоненты интерфейса (такие, как «Карта Google», «Сворачиваемая панель», «Список чек-боксов») и компоненты, предназначенные исключительно для создания сложных, нетривиальных действий (например, «Таймер», «Аудио проигрыватель», «Объект связи»). Последние не являются элементами интерфейса и не могут быть вставлены ни в какой из лэйаутов.

Подобно стандартным, расширенные компоненты можно обнаружить также на вкладке Расширенные верхнего горизонтального меню приложения:

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

Веб-компоненты Vaadin

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

Как вы догадались, компоненты Vaadin также продублированы на вкладке Vaadin верхнего горизонтального меню приложения:

На рисунке ниже показано запущенное в режиме просмотра окно, содержащее веб-компоненты Vaadin:

Фигуры

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

Фигуры также можно найти на вкладке Фигуры верхнего горизонтального меню приложения:

На рисунке ниже показано запущенное в режиме просмотра окно, содержащее все фигуры.

Свойства объектов

Для каждого компонента в GUI Machine мы постарались «вынести наружу» и сделать изменяемыми максимальное количество его свойств. Это позволяет детально настраивать, видоизменять, кастомизировать любой объект.

Все свойства объектов разделяются на 3 группы: свойства типа, стандартные свойства, свойства для редактора.

Первая группа включает в себя свойства, характерные только для объектов данного конкретного типа (на рисунке — свойства окна, объекта типа JWindow). Набор свойств для объекта другого типа (например, для кнопки — объекта типа JButton) будет иным.

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

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

GUI Machine позволяет изменять свойства сразу нескольких объектов одного типа, выделенных на области редактирования.

Часть наиболее востребованных и часто встречающихся свойств объектов, отвечающих за форматирование и расположение текстового содержимого, представлена также на вкладке Редактирование верхнего горизонтального меню приложения:

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

HTML-редактор

Практически все свойства объектов с текстовым содержимым могут быть отредактированы во встроенном HTML-редакторе. Для его запуска нужно нажать на маленькую кнопку справа от текстового свойства:

HTML-редактор позволяет как редактировать текст в визуальном редакторе, так и непосредственно писать HTML-код.

HTML-редактор, как вы понимаете, значительно расширяет возможности кастомизации объектов. Как ни странно, в большинстве инструментов прототипирования подобная функциональность отсутствует.

Редакторы сложных объектов

Большинству сложных объектов — таблице, дереву, таб-панели, обычному и выпадающему спискам, обычному и всплывающему меню, списку чекбоксов — свойств на соответствующей панели недостаточно для изменения и детальной настройки их вида и содержимого. Поэтому в GUI Machine встроены отдельные редакторы для каждого из перечисленных объектов. Для их запуска требуется нажать на значение первого свойства объектов:

В качестве примера ниже приведёно описание редактора таблицы:

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

Для других сложных объектов имеются аналогичные редакторы со своим набором операций.

Свойства объектов по умолчанию

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

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

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

Контекстное меню панели позволяет отобразить её альтернативный вид — список слоёв. В этом варианте иерархия объектов не отображается, а показывается список слоёв от самого верхнего к самому нижнему. Каждому слою соответствует один объект. Здесь понятие слоёв используется в классическом понимании: объект самого верхнего слоя (с наибольшим номером) отображается поверх других, самого нижнего слоя (с номером 0) — позади других объектов.

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

Инструменты для работы со слоями доступны также на вкладке Редактирование верхнего горизонтального меню приложения:

Шаблоны

• простого — шаблона отдельного объекта;
• составного — шаблона объекта со всеми дочерними объектами, содержимыми в нём (например, целого интерфейса);
• интерактивного — шаблона интерфейса с предзаданными действиями.

Созданные шаблоны хранятся в папке /templates/data каталога установки GUI Machine. Для передачи созданных шаблонов другому пользователю достаточно скопировать содержимое папки templates в директорию установки GUI Machine на его компьютере.

История

Для полноты картины осталось представить последнюю панель — История.

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

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

Область редактирования

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

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

Другие настройки располагаются на вкладке Утилиты и фреймы верхнего горизонтального меню приложения:

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

Область редактирования с указанными выше настройками будет выглядеть так:

«Оживляем» интерфейсы

После знакомства с интерфейсом GUI Machine и особенностями построения интерфейсов в нём у читателя, вероятно, возникнет вопрос: как сделать интерфейсы «живыми», кликабельными, интерактивными? Отвечаю: проще простого, и сейчас вы в этом сами убедитесь.

1. Сначала нужно определиться с объектом события и объектом действия. Для верного выбора нужно помнить порядок работы механизма: при выполнении заданной операции над объектом события будет выполнена заданная операция над объектом действия.
2. Затем нужно выделить на области редактирования объект события, вызвать его контекстное меню (клик правой кнопкой мыши), выбрать пункт Добавить действие. После этого нужно кликнуть по объекту действия. На рисунке ниже объектом события является чекбокс (флажок), а объектом действия — окно:
   
3. Будет открыто окно создания действия:

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

События

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

Больший интерес представляют сложные события. Например — событие мыши на части объекта. Допустим в интерфейсе имеется элемент управления в виде изображения — клевера:

Пусть требуется, чтобы при клике по верхнему лепестку клевера выполнялось какое-либо действие.

Выбираем объектом события наше изображение, объектом действия — какой-либо другой объект. В открывшемся диалоге выбираем Событие мыши. В параметрах события выбираем Клик кнопки. Устанавливаем флажок Определенная область события и выделяем нужный фрагмент рисунка:

Жмём Сохранить изменения и проверяем: запускаем изображение в просмотр и кликаем по верхнему лепестку — будет выполнено заданное действие (открытие окна).

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

Действия

К простым действиям можно отнести следующие: изменение текста объекта, блокировка/разблокировка объекта, изменение его видимости, открытие/закрытие окна и многие другие. Также, как при рассмотрении событий, без объяснений перейду к описанию сложных действий.

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

Пусть имеется динамический лэйаут (в левой части рисунка) с кнопкой, по нажатии на которую в две центральные ячейки лэйаута должна быть вставлена таб-панель (в правой части рисунка) вместе со всем содержимым.

Выбираем объектом события кнопку, а объектом действия — динамический лэйаут.

В правой части открывшегося диалога выбираем действие Вставка объекта или очистка ячеек, выделяем две центральные ячейки лэйаута, выбираем объект для вставки (таб-панель).

Жмём Сохранить действие и проверяем: запускаем лэйаут в просмотр и нажимаем кнопку — таб-панель вместе с содержимым будет вставлена в динамический лэйаут.

Помимо описанного действия, существует масса не менее интересных сложных действий.

Просмотр прототипа

Инструмент просмотра прототипов можно без стеснения назвать уникальным.

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

Ещё одна особенность инструмента: возможен просмотр как целого интерфейса, так и его части или даже отдельного объекта. Можно одновременно просматривать несколько интерфейсов — они будут запущены в разных окнах.

Для запуска объекта в просмотр нужно выделить его и воспользоваться одним из трёх способов запуска: клавишей f5, при помощи пункта Просмотр контекстного меню либо кнопкой на панели запуска в правом верхнем углу приложения:

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

Кроме того, при помощи инструмента можно настроить положение объекта при запуске его в просмотр:

Экспорт прототипа

Последнее, что я представлю вам, но далеко не последнее, что есть в GUI Machine — это механизм экспорта прототипа. Он позволяет экспортировать (виноват, тавтология) прототип в независимое приложение, для запуска которого не требуется ни GUI Machine, ни какое-либо другое ПО. Таким образом, имеется возможность представить разработанный прототип, например, на компьютере заказчика (если мы исполнители), у которого не будет установленного GUI Machine или GUI Machine Viewer. Более того, экспортированный прототип может работать как на Windows, так и на Linux (в перспективе — и на Mac OS). На рисунке ниже представлено окно экспорта прототипа:

11 бюджетных инструментов дизайнера для создания интерфейсов и макетов

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

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

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

PowerMockup — плагин для PowerPoint

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

PowerMockup работает с Office 2007, 2010 и 2013. Однопользовательская лицензия на PowerMockup стоит $59,95; стоимость лицензии для рабочей группы зависит от количества человек в ней.

Moqups — онлайн-инструмент для создания макетов и прототипов

Moqups — интерактивное приложение на HTML5, позволяющее разрабатывать векторные прототипы.

Сервис разработан 6 увлеченными программистами из Румынии, бесплатен и не требует регистрации.

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

Fluid UI — средство разработки прототипов для iOS- , Android- и Windows приложений

Fluid UI — онлайн средство для прототипирования мобильных приложений. Может быть использован как для создания простых макетов, так и сложных высококачественных макетов и прототипов. Сервис содержит библиотеки с элементами интерфейсов для iOS, Android и Windows 8 приложений.

Аккаунт для одного проекта с ограничением в 10 экранов доступен бесплатно. Платные планы начинаются с $29 в месяц.

Wireframe.cc — минималистичный бесплатный онлайн-сервис для прототипирования

Wireframe.cc отличается от других инструментов прототипирования чрезвычайно простым интерфейсом без огромного количества наворотов. Когда вы заходите на сайт сервиса wireframe.cc, вы сразу же можете начать рисовать, перетаскивая элементы мышью по рабочей области. Чтобы сохранить макет достаточно нажать кнопку «Save», после чего сервис сгенерирует уникальный URL, которым вы сможете поделиться с другими людьми или добавить его в закладки.

Wireframe.cc на данный момент бесплатен, премиум-версия с доп. функциями ожидается в ближайшее время.

Axure RP

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

Axure может быть использован не только для создания простых макетов, но и для создания комплексных прототипов, а также для нормативных документов.

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

Axure — это десктопное ПО, доступное для Mac OS X и Windows.

Balsamiq Mockups — инструмент для быстрого прототипирования на основе Flash

Balsamiq Mockups — чуть ли не самый известный инструмент для прототипирования.

Продуктом, выпущенным в 2008 году силами одного программиста, в настоящее время пользуются десятки тысяч клиентов. Команда сервиса выросла до 11 штатных сотрудников.

Balsamiq Mockups стремится передать опыт рисования макетов на бумаге, поэтому прототипы выглядят не так формально, как в других программах.

Вы можете использовать Balsamiq Mockups непосредственно в браузере (потребуется Flash) или загрузить в качестве приложения Adobe AIR. Однопользовательская лицензия стоит $79.

Pencil — инструмент для прототипирования с открытым кодом

Pencil — инструмент с открытым кодом для создания GUI-макетов и прототипов. Содержит большое количество встроенных фигур, начиная от элементов общего назначения и элементов блок-схем до элементов управления пользовательских интерфейсов (речь как о десктопных приложениях, так и о мобильных).

Вы также можете скачать пользовательские коллекции элементов из раздела Download на сайте Pencil. Инструмент доступен как автономная версия для Linux, Windows и Mac OS X. Также может быть использован в качестве расширения Firefox.

UXToolbox — инструмент для прототипирования под Windows

С помощью UXToolbox вы сможете создавать макеты и интерактивные прототипы для мобильных приложений, веб-сайтов и десктопного ПО. </b>

Что интересно, программа позволяет в один клик переключаться между скетчем и попиксельно-выверенным прототипом.

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

UXToolbox работает с Windows XP и с более поздними версиями и стоит £159 (около $240) за копию.

Mockups.me — инструмент для создания пользовательских интерфейсов

Mockups.me очень похож на Balsamiq Mockups, но имеет ряд преимуществ. В частности у Mockups.me есть приложения для IOS и Android. Кроме того, Mockups.me включает в себя встроенные коммуникационные системы для сбора обратной связи через аннотации и комментарии.

Стоимость десктопной версии Mockups.me — $49, версия для планшета доступна за $19,99, а цены за веб-версию начинается от $99 за год.

Live Wires — приложение для создания прототипов под iPad

Live Wires поможет вам протестировать и создать прототипы непосредственно на iPad. Приложение может быть использовано для создания интерактивных прототипов приложений для iPhone и iPad.

Live Wires включает в себя большую коллекцию легко настраиваемых элементов упрвления.

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

Live Wires сейчас доступен по специальной начальной цене в $9,99.

HotGloo

Мой любимый инструмент для прототипирования. Ему посвящена отдельная статья.

Резюме

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

Использовали ли вы какой-то из них? Если да, пожалуйста, поделитесь своим опытом в комментариях.

Разработка пользовательского интерфейса: принципы

И 10 советов по проверке любого интерфейса на дружелюбие к пользователю.

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

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

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

Что такое графический пользовательский интерфейс (GUI)

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

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

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

Как создаются GUI

Графические интерфейсы разрабатываются в зависимости от используемых устройств ввода (тачскрин, мышь, клавиатура). Например, для сенсорного экрана (смартфоны и мобильные устройства высокого класса) требуются более крупные значки — вспомните приложения на вашем телефоне или планшете:

А вот на десктопе вы можете без труда взаимодействовать даже с мелкими иконками и другими элементами GUI — при помощи мыши.

В чем отличия от UI

UI или как его еще называют «пользовательский интерфейс» — это взаимодействие между пользователем и конкретным устройством. Пользователь вводит данные, а затем видит результат в выводе. Разница между UI и GUI в том, что пользовательский интерфейс не обязательно должен быть графическим: бывают интерфейсы скринридеров, интерфейсы командной строки и многие другие.

Таким образом, GUI — это подвид UI.

Элементы GUI: какие бывают

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

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

В GUI предусмотрено несколько типов окон, например, окно-контейнер, окно браузера, окно текстового терминала, дочернее окно, окно сообщения и так далее.

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

Иконки

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

Элементы управления: виджеты

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

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

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

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

Вкладка

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

Также к элементам GUI можно отнести: формы, поля ввода (текстовые поля, холсты), кнопки (CTA, значки, плавающие кнопки) и так далее.

Как работает GUI: пример

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

Одиночный клик указывает системе выделить значок, а двойной — открыть папку или приложение, представленное значком. Но графический пользовательский интерфейс — это не только красивая картинка: “под капотом” GUI интерпретирует и выполняет команду, представленную конкретным действием.

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

Преимущества и недостатки графического интерфейса

Вот главные плюсы GUI для пользователя:

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

Теперь плюсы GUI для разработчика:

• Можно задать любую функциональность.
• Быстрее, чем интерфейс командной строки (визуальные элементы, а не запоминание команд).

Но есть у GUI и минусы. Для разработчика:

• Меньшая гибкость. Это означает, что можно выполнять только заранее запрограммированные инструкции.
• Функциональность системы не может быть скорректирована или адаптирована.
• Разработчикам сравнительно сложно создать интуитивно понятный графический интерфейс пользователя;
• Некоторые команды выполняются дольше.

Для пользователя минусов три:

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

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

Существует множество различных типов и версий графических интерфейсов. Собственные системные GUI вы встретите на разных операционных системах:

• MacOS
• Windows 10
• Android
• iOS
• Chrome OS

На каких языках программирования строится GUI

Какие языки, технологии и другие инструменты понадобятся для создания GUI? Самые разные! И все зависит от задачи, например, для высокопроизводительного программирования GUI в играх, лучший вариант — C и C++, но для создания интерфейса на этой парочке — потребуется много усилий, опыта и времени.

Разработка для Web

Это все что касается веб-приложений. Без пользовательского интерфейса — сложно представить любой сайт.

Для создания GUI в вебе активно используются три технологии:

• HTML (структура страниц).
• Основы CSS (внешний вид).
• Основы JavaScript (в вебе при помощи этого языка программируется функциональность элементов страницы).

Важно изучить ООП-подход. Используется он не только в JavaScript. Но конкретно, при создании GUI, объектно-ориентированное программирование пригодится при работе с localStorage и методами JSON, например.

В зависимости от задачи, при работе в вебе может понадобится десяток разнообразных технологий. Например:

• jQuery и JQuery-ui.
• Vue.
• React.
• Angular.

Объектно-ориентированный язык на основе классов. Java в большей степени ориентирован на кросс-платформенный подход, поэтому GUI-пакеты доступны (в основном) на устройствах с поддержкой Java.

Java также имеет графическую библиотеку, которая поддерживает как двухмерную так и трехмерную графику.

Одним из недостатков разработки GUI кода на Java является низкая скорость. И именно по этой причине не так много графических интерфейсов создаются целиком на Java. Характерный пример — Minecraft. Интерфейс этой игры создан с использованием Java, и заметно, что производительность игры может сильно меняться в зависимости от конфигурации машины (процессор и оперативная память, в первую очередь).

Но, используя IDE (интегрированная среда разработки — комплекс инструментов для создания ПО), даже на Java вы можете легко разработать отзывчивый и красивый GUI, а также сэкономить немало времени.

C или C++

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

Python

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

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

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

• Программирование GUI с помощью Python — не самый универсальный вариант. Да, Python — хороший язык для бэкэнда (который будет управляться фронтом).
• Python даже может генерировать HTML и JavaScript с помощью шаблонов и библиотек.
• Вы даже можете программировать в браузере на Python с помощью Brython или Sculpt, например. Но то же самое можно сказать и о десятке других языков программирования

Далее — рассмотрим фреймворки Python именно для создания GUI.

Кроссплатформенный фреймворк, полностью написан на C++, имеет множество инструментов для разработки API. Существует также его некоммерческая версия PySide и инструмент PyGUI. Все это позволяет создавать отзывчивые и красивые графические интерфейсы.

Tkinter

Это инструмент, который может выводить и запускать скрипты Python в формате графического интерфейса. Он совместим с большинством Unix-платформ, таких как macOS и Windows.

Py-Series ++

Вообще существует множество GUI-фреймворков, которые начинаются с «Py», поэтому их коротко называют Py-Series. Pyforms — один из них. Этот фреймворк позволяет повторно использовать ранее написанный код, без всяких ограничений.

Dabo и CEF Python

Первый предназначен для WxPython, а второй — для Windows, Linux-систем и Mac OS. Эти фреймворки лучше всего подходят именно для кросс-платформенных приложений.

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

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

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

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

Артем Алейник, руководитель отдела UX/UI TexTerra:

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

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

Не обязательно, но такой опыт может быть полезным.

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

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

Андрей, фулстек из Москвы, стаж C++ более 10 лет:

«C++ совсем не плохой выбор для создания графических интерфейсов. Я создаю все виды графических интерфейсов на C++ с помощью Qt, уже много лет. Я не задействую Qt Designer или QML, а просто реализую код GUI на C++ (с помощью Qt Widgets). Некоторые современные графические интерфейсы действительно причудливые, с детальной графикой, разработанной профессиональными дизайнерами. Такие приходится разворачивать на C++, по дизайнерским эскизам, вместе с чужими шрифтами и изображениями. А еще у меня был кейс, когда GUI был реализован на HTML5 / Angular, а затем я переделывал его на C++ и Qt (руководство было недовольно первой версией). В итоге: моя версия потребовала меньше усилий на разработку и легче адаптировалась к запросам клиентов. Я также делал GUI на Java, Python и некоторых других языках и фреймворках, но никогда не имел такой же эффективности и свободы, как на С++. Так что, с моей точки зрения, разработка графических интерфейсов с помощью C++ и Qt — лучшее комбо».

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

Кирилл, дизайнер, разработчик на C, C++, Java, Python:

Это не слишком сложно для опытного кодера. Но, если вы новичок, — все гораздо хуже. Программирование GUI заставляет вас работать задом наперед: оно выворачивает вашу программу наизнанку. И вместо того, чтобы вы отдавали команды ОС, теперь сама ОС посылает вам события, на которые вы должны реагировать.

Если вы хотите заниматься UI, вам также придется освоить многопоточность и научиться писать многопоточные программы. Существует правило: «обновлять пользовательский интерфейс только из потока пользовательского интерфейса». Так что — вам придется придумать способы передачи данных между потоком GUI и рабочими потоками.

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

Что нужно для создания GUI

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

Если важно работать с кнопками, меню, окнами и тому подобным, в среде разработки, то лучшим вариантом для новичка будут готовые библиотеки (см. выше). Многие из них бесплатные. Преимущества библиотек:

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

Основная проблема заключается в том, что очень легко нарисовать экран и считать работу выполненной, но хороший GUI — это гораздо больше:

1. Вам нужно понять, как мыслят люди и затем отобразить этот процесс в GUI. Это самая распространенная причина неудач: программисты не понимают пользователей.
2. Вы должны учитывать все варианты поведения программы. Например, сохранение файла может закончиться неудачей по многим причинам (может выйти из строя сеть, программа зависнет или пользователь забудет заполнить какое-то поле). С помощью хорошего дизайна можно подсказать пользователю, что делать дальше, чтобы решить нестандартную проблему. Все это обязательно учитывается в хорошем дизайне.
3. Визуальная часть и дизайн GUI должны определяться всем процессом использования продукта, для которого создается GUI, а не только цветовыми предпочтениями дизайнера.

Существуют и другие трудности. Например, сложности процесса разработки:

• UI-библиотеки имеют свои ограничения.
• Может понадобиться работать с различными устройствами или разными методами ввода.
• Может понадобится работать с разными размерами экранов.

Или трудности в бизнес-процессах:

• При ограниченных ресурсах вам, возможно, придется идти на компромиссы.

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

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

Топ-10 советов для создания отзывчивого и удобного GUI

Мы подходим к самому главному — к принципам создания пользовательского интерфейса. Вот главные из них:

Совет 1: Перегруженность лишними элементами

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

GIF-файлы, яркие цвета, множество шрифтов и кнопок могут запутать пользователя и заставить его покинуть страницу или экран. Сделайте все простым и понятным.

Совет 2: Сделайте пользовательский интерфейс понятным

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

GUI должен быть понятным для всех пользователей, для которых он создается.

Совет 3: Подумайте о стилистике

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

Совет 4: Заимствование удачных решений

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

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

Совет 5: Проводите A/B-тестирование

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

Совет 6: Сокращайте текст

Сейчас пользователи не читают текст на сайтах, в программах или мобильных приложениях, они его «сканируют».

Структурирование — самое главное. Минимум, это подзаголовки, абзацы, жирный текст. Полезно использовать буллиты, чтобы улучшить читабельность и добавить структуру.

Для контентной части: можно добавлять врезки (там где они уместны).

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

Совет 7: Позаботьтесь о пользователях с ограниченными возможностями

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

Совет 8: Проверьте размещение кнопок

Кнопки — это CTA-элемент. Если кнопка не продумана (функционально и визуально), то ее кликабельность будет низкой. Все кнопки должны иметь логическую подводку из содержимого страницы, чтобы пользователь уже имел повод начать взаимодействие.

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

Совет 9: Дайте пользователям возможность отменить свои действия

Иногда мы непроизвольно нажимаем на ненужную кнопку и попадаем на страницы, которые нам не нужны.

Сделайте действия обратимыми — это поможет пользователю быстрее освоить приложение. Кстати, это третья «Эвристика» Нормана*.

1. Видимость состояния системы.
2. Совпадение между системой и реальным миром.
3. Контроль и свобода пользователя.
4. Согласованность и стандарты.
5. Предотвратимость ошибок.
6. Распознавание, а не вспоминание.
7. Гибкость и эффективность использования.
8. Эстетичный и минималистичный дизайн.
9. Помощь пользователям в устранении ошибок.
10. Помощь и документация.

*Якоб Нильсен определил 10 эвристик юзабилити — общих принципов юзабилити, которые создают лучший пользовательский опыт. Считайте их правилами при разработке GUI, следовать которым — обязательно.

Совет 10: Снижайте нагрузку на память

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

Чем больше приходится запоминать — тем меньше уверенности в правильности выполняемых действий и тем хуже пользователю удается сконцентрироваться

Не заставляйте пользователя запоминать много информации для выполнения простой задачи.