Gui что это простыми словами

Интерфейс

Как мы отдаем команды машинам? Чтобы открыть иконку любимой игры на десктопе мы используем мышку, чтобы переключить канал на ТВ – нужен пульт, а для совершения покупки в интернете мы выбираем нужный товар и ищем на сайте кнопку «Оформить заказ». Все это разновидности интерфейсов – набор средств, которые помогают нам (одной системе) взаимодействовать с машинами (другой системой).

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

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

Интерфейс(англ. interface – взаимодействие, сопряжение) в широком смысле – это место соприкосновения двух функциональных объектов. Если говорить более узко, то интерфейс – это «мост», посредник между человеком, программами и машинами, иными системами. Это инструменты взаимодействия, с помощью которых одна система контактирует и строит диалог с другой.

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

• ввод команд, направление запроса
• получение ответа системы в понятной форме (текст, изображение, звук)
• обмен информацией между устройствами, программами, системами
• взаимодействие человека и операционной системы
• управление программными средствами, аппаратными комплексами
• получение информации об ошибках (нарушении алгоритма) и вариантах их исправления

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

Типы интерфейсов

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

Рассмотрим основные типы интерфейсов подробнее.

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

UI (англ. user interface) или интерфейс пользователя. Именно этот тип взаимодействия имеют в виду чаще всего, когда вспоминают про интерфейс.

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

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

• клавиатура
• компьютерная мышь
• джойстик
• дисплей
• стилус

При этом UI-интерфейс в зависимости от операционной системы может быть реализован в нескольких формах. Самый популярный – графический интерфейс. Но есть и другие. Рассмотрим основные виды UI.

Графический интерфейс

GUI (англ. graphical user interface) или графический интерфейс пользователя. Это система взаимодействия, предоставляющая пользователям доступ к системным объектам и инструментам управления через визуализацию информации – через графические элементы на мониторе.

Чаще всего для экранного отображения команд и результатов их выполнения используются окна. Элементы управления программами отображаются визуально внутри окон – в форме:

• значков
• иконок
• кнопок
• меню
• списков
• полей ввода и прочих

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

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

Текстовый интерфейс

TUI (англ. Text user interface) или текстовый интерфейс пользователя. Это система взаимодействия человека и машины посредством команд и откликов с помощью набора буквенно-цифровых символов – текста.

Лучший пример TUI – командная строка. Это прямой способ диалога с ОС. Он характеризуется низкой требовательностью к ресурсам и высокой скоростью отклика. Имеет немало преимуществ перед GUI в части удобства использования, поэтому алгоритмы с текстовым интерфейсом пишутся и сегодня. Прежде всего, для профессиональных программ и оборудования с низкой производительностью.

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

Жестовый интерфейс

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

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

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

Голосовой интерфейс

Это средство бесконтактного взаимодействия человека с машиной, где инструментом для ввода выступает микрофон и программа распознавания голосовых сообщений. Раньше это было чем-то из разряда научной фантастики. Сегодня голосовой интерфейс можно встретить в поисковиках, приложениях на смартфонах, мобильных виртуальных помощниках. «Окей, Гугл», «Alexa» от Амазон – все из этой оперы.

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

Интерфейс программ

API (англ. application programming interface) или программный интерфейс приложений. Это инструменты взаимодействия компьютерных программ между собой. Функции и структуры программных объектов прописаны специальными алгоритмами.

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

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

Интерфейс программ с машинами

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

Например, смартфон. На него установлено множество приложений – мессенджеры, игры, почта, погода и масса других. Все они взаимодействуют с телефоном через операционную систему – Android или iOS. Не было бы операционной системы – приложение не получилось бы установить на гаджет.

Аппаратный интерфейс

Взаимодействие машин, компьютеров, оборудования и их компонентов обеспечивает интерфейс аппаратных средств. Он реализован с помощью кабелей, проводов, разъемов, шин и прочих контактных технических портов. Например, основные компьютерные устройства и их компоненты подключаются к ПК через USB.. Это принтеры, устройства ввода, флэшки. Не менее широкое применение находят инструменты бесконтактной коммуникации, такие как Wi-Fi или Bluetooth. Часто их совмещают с контактными. Например, беспроводные компьютерные мыши, принимающий модуль которых подключается через USB.

Каким должен быть интерфейс

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

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

Рассмотрим на примере графического web-интерфейса отдельного взятого сайта, с которым взаимодействует пользователь. Он должен:

1. Содержать оптимальное число визуальных элементов управления для решения задачи пользователя. Их должно быть ровно столько, сколько нужно посетителю
2. Быть адаптивным к десктопным и мобильным устройствам различных производителей и моделей
3. Быть интуитивно понятным. У пользователя не должно возникать проблем с управлением, поиском тех или иных категорий меню, разделов. Он должен пользоваться сайтом на основе ранее полученного опыта контакта с другими ресурсам. Элементы управления должны быть «доходчивыми» – если пользователи не смогут догадаться, как пользоваться вашим сайтом, они будут сбиты с толку и разочарованы
4. Быть лаконичным. Иначе пользователь попадет в ловушку информационной перегруженности. Описания и объяснения для каждой кнопки и элемента сайта – это хорошо, но от них «пухнет» ваш интерфейс. Пользователь не должен тратить все свое время на прочтение инструкций
5. Быть последовательным. Это про содержимое сайта. В нем должен прослеживаться определенный уровень последовательности, который проходит через весь интерфейс. С ее помощью пользователь сможет сформировать шаблоны работы с ресурсом. При первом контакте они познакомятся с кнопками, закладками, иконками и другими графическими элементами и при следующей работе будут использовать ранее полученный опыт
6. Быть эффективным. UI – это транспорт, который должен доставить пользователя в нужную точку. Хороший интерфейс должен помогать выполнить функции быстрее с минимальным усилием. Чтобы интерфейс был действительно эффективным, при его разработке важно понимать, что нужно пользователю
7. Быть снисходительным. Ни ваш сайт, ни пользователи не совершенны. Поэтому интерфейс должен быть снисходительным к ошибкам. Клиент потерял или удалил нужную информацию? Не заставляйте его паниковать, предложите возможность отмены операции. Если чего-то нет у вас на сайте? Предлагайте альтернативные источники

Заключение

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

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

Gui что это простыми словами

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

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

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

Разработка GUI

Defold предоставляет пользовательский Gui-редактор и эффективные средства написания скриптов, которые разработаны специально для создания и реализации пользовательских интерфейсов.

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

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

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

Создание компонента GUI

Компоненты GUI создаются из файла-шаблона GUI-сцены. Чтобы создать новый компонент GUI, кликните ПКМ в каком-либо расположении в браузере Assets и выберите New ▸ Gui . Введите имя нового файла GUI и кликните Ok .

Defold автоматически откроет файл в редакторе GUI-сцен.

В Outline перечисляется весь контент графического интерфейса: список нод и какие-либо зависимости (см. ниже).

В центральной области редактирования отображается GUI. Панель инструментов в правом верхнем углу области редактирования содержит инструменты Move, Rotate и Scale, а также селектор компоновок.

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

Выделив корневую GUI-ноду, в Outline отображаются свойства компонента GUI:

• Per Node — подгоняет каждую ноду под измененный размер родительской ноды или измененный размер экрана.
• Disable — отключает режим адаптации нод. Заставляет все ноды сохранять заданный размер.

Зависимости

Дерево ресурсов в игре Defold статично, поэтому все зависимости, необходимые для GUI-нод, должны быть добавлены к компоненту. В Outline все зависимости группируются по типам в “папках”:

Чтобы добавить новую зависимость, кликните ПКМ в корне “GUI” в Outline, затем выберите Add ▸ [type] из всплывающего контекстного меню.

Также можно кликнуть ПКМ на иконке папки для типа, который требуется добавить, и выбрать Add ▸ [type] .

Типы нод

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

Box Прямоугольная нода с одним цветом, текстурой или мультикадровой анимацией. См. руководство по ноде Box.

Text Отображает тескт. См. руководство по ноде Text.

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

Template Шаблоны используются для создания экземпляров на основе других файлов GUI-сцен. См. руководство по ноде Template.

Spine Отображает и анимирует Spine-модель. См. руководство по ноде Spine.

Particle FX Воспроизводит эффект частиц. См. руководство по ноде Particle FX.

Добавьте ноды, кликнув правой кнопкой мыши на папке Nodes и выбрав Add ▸ , затем Box , Text , Pie , Template , Spine или Particle Fx .

Также можно нажать A и выбрать тип для добавления в GUI.

Свойства нод

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

• Alpha — смешивает пиксельные значения ноды с фоном. Соответствует режиму наложения “Normal” в графических программах.
• Add — добавляет пиксельные значения ноды к фону. Соответствует “Linear dodge” в некоторых графических программах.
• Multiply — перемножает значения пикселей ноды с фоном.

Возможные значения: Center , North , South , East , West , North West , North East , South West и South East .

Если изменить пивот ноды, нода будет перемещена так, чтобы новый пивот находился в позиции ноды. Нода Text выравнивается таким образом, что Center устанавливает выравнивание текста по центру, West — по левому краю, а East — по правому.

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

Доступны следующие режимы анкеровки:

• None — (для обоих X Anchor и Y Anchor) сохраняет положение ноды от центра родительской ноды или сцены, относительно ее скорректированного размера.
• Left или Right — (X Anchor) масштабирует горизонтальное положение ноды так, чтобы сохранить положение от левого и правого краев родительской ноды или сцены в одинаковом процентном соотношении.
• Top or Bottom (Y Anchor) — (Y Anchor) масштабирует вертикальное положение ноды так, чтобы сохранить положение от верхнего и нижнего краев родительской ноды или сцены в одинаковом процентном соотношении.

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

Нода, созданная в сцене, где логическим разрешением является типичное разрешение ландшафта:

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

• Fit — масштабирует содержимое ноды так, чтобы оно было равно ширине или высоте растянутой границы, в зависимости от того, что меньше. Другими словами, содержимое будет помещаться внутри растянутой границы ноды.
• Zoom — масштабирует содержимое ноды так, чтобы оно было равно ширине или высоте растянутой границы, в зависимости от того, что больше. Другими словами, содержимое будет полностью покрывать растянутую границу ноды.
• Stretch — растягивает содержимое ноды так, чтобы оно заполняло растягиваемую границу ноды.

Если свойство GUI-сцены Adjust Reference установлено в Disabled , эта настройка будет проигнорирована.

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

За подробностями обращайтесь к руководству по обрезке GUI.

Clipping Visible (ноды Box, Pie и Spine) Устанавливается для визуализации содержимого ноды в области трафарета. За подробностями обращайтесь к руководству по обрезке GUI. Clipping Inverted (ноды Box, Pie и Spine) Инвертирует трафаретную маску. За подробностями обращайтесь к руководству по обрезке GUI.

Пивот, якоря и режим корректировки

Комбинация свойств Pivot, Anchors и Adjust Mode позволяет весьма гибко конструировать графические интерфейсы, но понять, как все это работает, без конкретного примера бывает затруднительно. В качестве примера рассмотрим макет графического интерфейса, созданный для экрана 640×1136:

UI создан с X и Y Anchors, установленными на None, а Adjust Mode для каждой ноды оставлен на значении по умолчанию Fit. Пивот для верхней панели — North, для нижней панели — South, а для баров на верхней панели пивот установлен в значение West. Для остальных нод пивоты установлены в Center. Если мы изменим размер окна, чтобы сделать его шире, вот что произойдет:

Теперь, что если мы хотим, чтобы верхний и нижний бары всегда были такой же ширины, как экран? Мы можем изменить режим Adjust Mode для панелей с серым фоном сверху и снизу на Stretch:

Так лучше. Теперь панели с серым фоном всегда будут растягиваться по ширине окна, но бары в верхней панели, а также два бокса внизу расположены неправильно. Если мы хотим, чтобы бары в верхней части были расположены слева, нам нужно изменить X Anchor с None на Left:

Это именно то, что нам нужно для верхней панели. У баров на верхней панели Pivot уже установлены на West, что означает, что они будут позиционироваться так, чтобы левый/западный край баров (Pivot) был привязан к левому краю родительской панели (X Anchor).

Теперь, если мы установим X Anchor в Left для бокса слева и X Anchor в Right для бокса справа, получим следующий результат:

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

У обоих боксов пивот установлен в Center. Это означает, что при увеличении ширины экрана центральная точка (пивот) боксов будет оставаться на одинаковом относительном расстоянии от краев. В случае левого поля она находилась на расстоянии 17% от левого края при исходном окне 640×1136:

При изменении размеров экрана центральная точка левого бокса остается на том же расстоянии 17% от левого края:

Если мы изменим Pivot с Center на West для бокса слева и на East для бокса справа и изменим положение боксов, мы получим желаемый результат даже при изменении размера экрана:

Порядок отрисовки

Все ноды отображаются в том порядке, в котором они перечислены в папке “Nodes”. Нода, находящаяся в верхней части списка, отрисовывается первой и, таким образом, будет отображаться позади всех остальных нод. Последняя нода в списке отрисовывается последней, то есть она будет отображаться перед всеми остальными нодами. Изменение Z-значения ноды не влияет на порядок отрисовки; однако, если установить Z-значение за пределами диапазона отрисовки рендер-скрипта, нода не будет отрисована на экране. Индексное упорядочивание нод можно изменить с помощью слоев (см. ниже).

Выделите ноду и нажмите Alt + Up/Down , чтобы переместить ноду вверх или вниз и изменить индексный порядок.

Порядок отрисовки может быть изменен в скрипте:

local bean_node = gui.get_node("bean") local shield_node = gui.get_node("shield") if gui.get_index(shield_node)  gui.get_index(bean_node) then gui.move_above(shield_node, bean_node) end 

Иерархии “родительский-дочерний”

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

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

Слои и вызовы отрисовки

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

• Ноды должны быть одного и того же типа.
• Узлы должны использовать один и тот же Atlas или Tile Source.
• Ноды должны рендериться с одинаковым режимом наложения.
• Они должны использовать один и тот же шрифт.

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

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

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

Назначая нодам слои, их можно упорядочить по-разному, что позволяет пайплайну рендеринга группировать ноды вместе за меньшее количество вызовов отрисовки. Начните с добавления нужных слоев в сцену. Кликните ПКМ на иконке папки “Layers” в Outline и выберите Add ▸ Layer . Отметьте новый слой и присвойте ему свойство Name в представлении Properties.

Затем установите свойство Layer каждой ноды в соответствующий слой. Порядок отрисовки слоев имеет приоритет над обычным порядком индексированных нод, поэтому установка графической кнопки ноды Box в “graphics” и кнопки ноды Text в “text” приведет к следующему порядку отрисовки:

• Сначала все ноды в слое “graphics”, начиная с верхней:
  1. “button-1”
  2. “button-2”
  3. “button-3”
• Затем все ноды в слое “text”, начиная с верхней:
  1. “button-text-1”
  2. “button-text-2”
  3. “button-text-3”

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

Следует отметить, что дочерняя нода с неустановленным слоем неявно наследует настройку слоя своей родительской ноды. Отсутствие установки слоя у ноды неявно добавляет ее к “нулевому” слою, который отрисовывается перед каким-либо другим слоем.

• English
• 中文 (Chinese)
• Español (Spanish)
• Français (French)
• Νεοελληνική γλώσσα (Greek)
• Język polski (Polish)
• Português (Portuguese)
• Русский (Russian)

Did you spot an error or do you have a suggestion? Please let us know on GitHub!

Интерфейс командной строки — Основы командной строки

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

Но GUI — это не единственный существующий интерфейс. В этом уроке мы изучим интерфейс командной строки (CLI или Command Line Interface). Такой интерфейс может показаться непривычным, ведь в нем нет ничего, кроме названия программы.

Аргументы и опции

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

Здесь все просто. Достаточно набрать название программы и нажать Enter :

ls Desktop Documents Downloads Library Movies Music Pictures Public 

Еще мы можем посмотреть скрытые файлы и директории. В *nix-системах они начинаются с точки: .profile .

Тогда необходимо набрать ls -a :

ls -a . .CFUserTextEncoding Desktop Downloads Movies Pictures .. .localized Documents Library Music Public 

А если захотим посмотреть содержимое каталога Public? Тогда мы воспользуемся командой ls с аргументом:

ls Public Drop Box 

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

-i input.mp4 -vcodec libx264 -crf 30 output.mp4 

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

Хорошая новость в том, что закономерности есть. Плохая новость — не все четко следуют им.

Практически любую команду можно дополнить двумя способами:

Способ 1 — это аргументы. Для примера рассмотрим команду ls Music , которая содержит аргумент Music

Способ 2 — это опции, еще их иногда называют флагами. Например, команда ls -a содержит в себе опцию -a

Опции

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

ls -l total 0 drwx------+ 3 Guest _guest 96 Nov 21 2017 Desktop drwx------+ 3 Guest _guest 96 Nov 21 2017 Documents drwx------+ 3 Guest _guest 96 Nov 21 2017 Downloads drwx------+ 26 Guest _guest 832 Nov 21 2017 Library drwx------+ 3 Guest _guest 96 Nov 21 2017 Movies drwx------+ 3 Guest _guest 96 Nov 21 2017 Music drwx------+ 3 Guest _guest 96 Nov 21 2017 Pictures drwxr-xr-x+ 4 Guest _guest 128 Nov 21 2017 Public 

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

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

Еще мы можем использовать опции и аргументы одновременно, хотя все зависит от программы. В случае с ls можно использовать одновременно и то, и другое. Чтобы просмотреть полное содержимое директории Music с информацией о каждом файле, можно набрать команду ls -la Music :

ls -la Music total 0 drwx------+ 4 Guest _guest 128 Nov 21 2017 . drwxr-xr-x+ 89 Guest _guest 2848 Aug 24 14:06 .. -rw-r--r-- 1 Guest _guest 0 Nov 21 2017 .localized drwxr-xr-x 9 Guest _guest 288 Aug 26 17:25 iTunes 

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

Иногда сложно понять подобные записи: -tupa . Не совсем понятно, что это:

• Одна опция tupa
• Четыре опции t , u , p и a , объединенные в одну цепочку

В таких ситуациях нужно смотреть документацию соответствующей программы. Это можно сделать с помощью команды man (сокращение от manual). Достаточно набрать man — и мы попадем в режим чтения документации.

В мануале содержится описание утилиты в целом, формат ее вызова, все возможные опции, примеры вызовов и много другой полезной информации:

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

• Промотать вперед — f (forward)
• Промотать назад — b (backward)
• Выход из режима просмотра — q (quit)

Еще полезен сайт explainshell . На нем можно вбить любую команду и посмотреть удобное интерактивное описание:

Варианты опций

У большинства утилит есть два варианта одной и той же опции — длинная и короткая версия. Например, в PHP есть -v и —version :

-v PHP 7.2.7 (cli) (built: Jun 22 2018 06:27:50) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies php --version PHP 7.2.7 (cli) (built: Jun 22 2018 06:27:50) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies 

Длинные и короткие версии опций используются в разных ситуациях:

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

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

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

Например, в macOS есть встроенная утилита say . Если просто передать ей какой-то текст, то она его произнесет. Можно пойти дальше и записать произнесенный текст в файл.

Чтобы это сделать, надо указать опцию -o и записать путь до файла:

# Вместо -o можно написать --output-file say -o hi.aac 'Hello, World.' 

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

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

-o 'hi.aac' 'Hello, World.' 

Некоторые программы допускают использование знака = вместо пробела:

# Команда say такое не позволяет, но зато видно принцип say -o=hi.aac 'Hello, World.' 

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

# Здесь мы указали входной файл, который нужно прочитать — hello_world.txt # Еще здесь указано, каким голосом надо читать и в какой файл записывать прочитанное say -v Alex -o hi -f hello_world.txt 

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

[-v voice] [-r rate] [-o outfile [audio format options] | -n name:port | -a device] [-f file | string . ] 

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

• Квадратные скобки [] обозначают необязательность. Например, опция -v необязательна, то же самое касается и любых других опций этой программы
• Вертикальная черта | обозначает операцию «исключающее или». Посмотрите на последний блок [-f file | string . ] . Он означает, что say может либо произносить текст из файла, либо произносить строчку, переданную как аргумент. Сделать оба варианта одновременно не получится

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

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

Дополнительные материалы

1. Построение приложений командной строки (CLI)
2. Справочник по командной оболочке

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты