6 дней до повышения цен в UPROCK! Распродажа! «С 0 до Middle+» + курс «Креативная айдентика»  в подарок!

Графический пользовательский интерфейс  (Graphical User Interface)

Автор статьи:
,

Введение

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

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

Графический пользовательский интерфейс (GUI) — это цифровой интерфейс, в котором пользователь взаимодействует с графическими компонентами, такими как иконки, кнопки и меню.

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

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

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

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

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

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

Первый графический пользовательский интерфейс разрабатывался в конце 1970-х годов в исследовательской лаборатории Xerox в Пало-Альто. Он был выпущен 1981 году в потребительском продукте — Xerox Star. Он далек от интерфейсов, используемых сегодня, но ознаменовал собой отход от прежних текстовых интерфейсов. В нем были изображения, кнопки и цвета, которые узнавали простые пользователи.

В 1984 году компания Apple выпустила свою первую операционную систему с графическим интерфейсом — Macintosh.

Microsoft представила свой первый графический интерфейс в следующем году в Windows 1.0.

Xerox Star, Macintosh и Windows стали одним из самых значительных достижений в области персональных компьютеров: Их интерфейсы стали доступны широкой публике. Теперь обычный пользователь мог выполнять такие действия, как работа с файлами и запуск скриптов, не зная ни команд, ни специализированных языков программирования.

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

Компоненты GUI

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

Окна можно увеличивать, уменьшать, сворачивать, открывать и закрывать. В верхней части обычно расположено меню.

Меню — панель, которая дает доступ к основным возможностям программы.

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

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

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

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

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

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

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

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

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

Заключение

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

Бесплатный учебник по UX/UI‑дизайну
Все лонгриды