Что означает графический интерфейс? Определения, элементы и преимущества графического пользовательского интерфейса

10 августа 2021 г.

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

Что такое графический интерфейс?

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

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

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

Элементы графического интерфейса

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

1. Элементы управления вводом

Вот примеры элементов управления вводом GUI:

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

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

• Средство выбора даты. Средство выбора даты позволяет выбрать дату и/или время. Создатель может выбрать календарь или вариант заполнения. Это гарантирует использование согласованного формата, например «день, месяц, год».

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

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

• Текстовое поле: Текст — это поле, в которое можно вводить текст. Создатель может контролировать, сколько текста разрешено.

• Переключатель: кнопка переключения позволяет изменять настройку, как правило, в виде состояний «выключено/включено».

2. Компоненты навигации

Вот примеры навигационных элементов GUI:

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

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

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

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

• Поле поиска. Поле поиска позволяет ввести ключевое слово или фразу для поиска релевантных результатов в индексе. Обычно это однострочные текстовые поля с кнопкой поиска.

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

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

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

3. Информационные компоненты

Вот примеры информационных элементов GUI:

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

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

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

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

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

4. Контейнеры

Вот пример элемента контейнера GUI:

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

Интерактивные элементы графического интерфейса

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

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

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

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

Каковы преимущества графического интерфейса?

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

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

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

1. Простота использования

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

2. Легкое понимание

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

3. Привлекательность

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

4. Ярлыки

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

5. Многозадачность

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