Название элементов интерфейса программы

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

Много терминов может показаться банальными и очевидными, но есть и такие, для которых я не нашёл добротных, годных переводов (например grid, toggle button, extender). Т.ч. приглашаются все желающие в комментарии для дополнений, исправлений, размышлений.

Да кому это вообще нужно?

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

PM3. Элементы интерфейса сайта // Что на сайте как называется // Project Manager для новичков

Источник: habr.com

32 User interface элементов для UI дизайнеров

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

UI элементы:

1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers

Input Controls

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

Navigation Components

Navigation Components помогают пользователям перемещаться по продукту или веб-сайту. Общие навигационные компоненты включают панели вкладок на устройстве iOS и меню гамбургеров на Android.

Informational Components

Informational Components делятся информацией с пользователями.

Как называются элементы пользовательского интерфейса приложений?

Containers

Containers содержат связанный контент вместе.

Словарь UI элементов:

Аккордеоны (Accordion)

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

Bento Menu, Döner Menu, Hamburger Menu, Kebab Menu, Alt-burger, meatball

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

Хлебные крошки (Breadcrumb)

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

Кнопка (Button)

Кнопки позволяют пользователю взаимодействовать с формами на сайте.

Карточка (Card)

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

Карусель (Carousel)

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

Checkbox

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

Комментарий (Comment)

Dropdown

Лента (Feed)

Сложно представить соц сети такие как Facebook, twitter и т.п без ленты. Содержание ленты варьируется от простого текста до изображений и видео.

Форма (Form)

Иконки (Icon)

Поле ввода (Input Field)

Loader

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

Модальное окно (popup)

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

Уведомления

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

Пагинация (Pagination)

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

Picker

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

Progress Bar

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

Radio Buttons

Radio Buttons похожи на чекбоксы, но отличаются тем, что можно 1 из нескольких вариантов.

Поле поиска (Search Field)

Боковая панель (Sidebar)

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

Ползунок (Slider Controls)

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

Stepper

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

Тэг (Tag)

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

Tab Bar

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

Tooltip

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

Toggle

Toggle это флаг который позволяет выбрать между Да или Нет.

Барабан

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

Источник: bool.dev

Элемент интерфейса, Типы интерфейсов

Привет, Вы узнаете про элемент интерфейса, Разберем основные ее виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое элемент интерфейса, типы интерфейсов, mdi, sdi , настоятельно рекомендую прочитать все из категории Дизайн программных UI и Web дизаин.

gtk3-demo — программа для демонстрации элементов интерфейса GTK+.

Кроссплатформенный редактор элементов интерфейса Qt designer

Элеме́нт интерфе́йса — примитив графического интерфейса пользователя, имеющий стандартный внешний вид и выполняющий стандартные действия. Другие названия: элемент управления, ви́джет (англ. widget), контро́л (англ. control)

Происхождение термина «виджет»

Употребляется примерно с 1920-х годов в американском английском для обозначения простой, но необходимой вещи, маленького изделия, название которого временно забыто говорящим . Online Etymology Dictionary предполагает, что на его форму могло повлиять слово англ. gadget или же оно происходит от англ. which it — «этот, как его» . Другие словари предполагают словослияние «window gadget» (букв. «оконное приспособление»), также произошедшее в начале XX века . Слово «виджет» также используется и как название класса вспомогательных мини-программ — графических модулей, которые размещаются в рабочем пространстве соответствующей родительской программы и служат для украшения рабочего пространства, развлечения, решения отдельных рабочих задач или быстрого получения информации из интернета без помощи веб-браузера.

Типовые элементы интерфейса

• Аккордеон (accordion)
• кнопка (button)

• сдвоенная кнопка (split button) — кнопка, вызывающая список со вторичным(и) действием(и) (кнопками)

• главное меню окна (main menu или menu bar)
• контекстное меню (popup menu)
• ниспадающее меню (pull down menu)

• диалоговое окно (dialog box)
• модальное окно (modal window)

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

• Радиальное меню (pie menu или radial menu) — кольцевое меню вокруг курсора. Выбор пункта меню осуществляется движением курсора в направлении пункта меню.
• Кнопка последовательного выбора — элемент, значение в котором выбирается последовательным нажатием мыши по нему. В отличие от раскрывающегося списка, такая кнопка не позволяет видеть другие значения, кроме выбранного.
• Счетчик — двунаправленный вариант для числовых значений. Нажатие на кнопку позволяет изменить значение параметра на единицу в большую или меньшую сторону.
• Heads-up display — отображение поверх всех элементов значения каких-то параметров либо важных сообщений.
• Пузырь — подсказка наподобие филактера в комиксах, которая указывает на элемент — источник сообщения.
• Валкодер — вращающийся элемент управления наподобие ручки настройки во многих радиоприемниках. Может быть как одно- так и многооборотным.
• Скрываемый виджет — элемент, позволяющий скрыть часть элементов управления, когда они не используются.
• Индикатор уровня (Level Indicator) — элемент для индикации значения какой-либо величины. Иногда вместо него используется индикатор процесса, но некоторые руководства (к примеру, HIG от Apple ) запрещают подобную практику.

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

Однодокументный интерфейс SDI

Inkscape, работающий на SDI

Однодокументный интерфейс (англ. Single document interface, SDI) — способ организации графического интерфейса приложений в отдельных окнах. Не существует «фонового» или «родительского» окна, содержащего меню или панели инструментов, по отношению к активному — каждое окно несет в себе эти элементы. Такие приложения, позволяющие редактировать более одного документа одновременно, например, текстовые процессоры, могут создавать у пользователя впечатление, что запущена не одна копия программы, а несколько.

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

Многодокументный интерфейс MDI

Qt Designer в режиме MDI

Многодокументный интерфейс (англ. multiple document interface, MDI) — способ организации графического интерфейса пользователя, предполагающий использование оконного интерфейса, в котором большинство окон (исключая, как правило, только модальные окна) расположены внутри одного общего окна. Этим он и отличается от SDI, в котором окна располагаются независимо друг от друга. Разработчики широко используют оба типа интерфейса, а зачастую и интерфейс смешанного типа. Например, Microsoft меняла интерфейс Microsoft Office от SDI к MDI, а потом вернулась обратно к SDI, хотя степень реализации включает и первое, и второе.

Среди недостатков MDI часто указывали отсутствие наглядной информации об открытых окнах, для просмотра текущего списка открытых окон в приложении пользователю было необходимо выбрать в меню пункт «открытые окна/window list», или подобный ему. В последнее время в приложениях стали появляться панели задач и вкладки для отображения открытых окон в MDI. Такой тип интерфейса иногда называют многодокументным интерфейсом с вкладками (TDI), хотя фактически это разновидность MDI.

Почти все конструкторы и редакторы приложений на сегодняшней день предоставляют по крайней мере одно решение для создания MDI-интерфейса. Об этом говорит сайт https://intellect.icu . Так, например, в библиотеке для создания графического интерфейса на языке Java, под названием Swing, есть класс javax.swing.JDesktopPane , который создает контейнеры для отдельных фреймов (класс javax.swing.JInternalFrame ). В другом популярном наборе элементов интерфейса — GTK+ — такой возможности нет.

Сравнение с SDI

Преимущества

• В интерфейсе типа MDI (как и в TDI) общая панель меню и панель инструментов для всех дочерних окон, что уменьшает загроможденность экрана элементами интерфейса и увеличивает его полезную площадь.
• Все окна приложения можно прятать/показывать, сворачивать/разворачивать и проводить с ними другие манипуляции, как с одним окном.
• Дочерние окна можно размещать «черепицей» или «каскадом» в главном окне.
• Увеличение скорости и экономия памяти при работе в одном окне, скорость переключения между дочерними окнами также выше, чем между равноправными в среде операционной системы
• В некоторых приложениях предусмотрены «горячие сочетания клавиш» для быстрой навигации, в частности, для переключения между окнами. Это еще более повышает скорость и удобство работы с приложением, так как не задействуются дополнительные ресурсы операционной системы.
• Логичное решение, если окна — части одного проекта.

Недостатки

• Затруднительно (чаще всего, невозможно) выводить содержимое разных дочерних окон на разные мониторы.
• Также невозможно выводить их содержимое на разные виртуальные рабочие столы.
• MDI может затруднить параллельную работу с разными приложениями, так как переключение между внешними окнами разных программ и дочерними окнами одной неудобно.
• Плавающие панели инструментов одного приложения могут перекрывать рабочее окно другого, загораживая обзор, а иногда и сбивая пользователя с толку — какая панель к какому приложению относится.
• Пользователю нужно привыкать к обоим типам интерфейса, так как введение MDI не отменяет полностью использование SDI, который заложен в большинстве операционных систем.
• Многие оконные системы (3D Desktop, Exposé) позволяют с комфортом переключаться между программами. Подобное переключение между окнами документов, как правило, не работает.
• Хаос на «рабочем столе» программы, когда открыто одновременно несколько документов.
• По умолчанию, использующийся в Windows интерфейс MDI не поддерживает средств переключения между окнами программы, наподобие панели задач.

Многодокументный интерфейс с вкладками

Многодокументный интерфейс с вкладками (англ. tabbed document interface) — разновидность графического интерфейса пользователя, в котором каждый документ отображается на отдельной вкладке общего окна.

Применение

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

Несколько программ, применяющий этот подход.

• Все крупные браузеры (2016) для настольных компьютеров, iOS и Android: Microsoft Edge, Mozilla Firefox, Google Chrome, Apple Safari.
• Многие системы программирования: Embarcadero RAD Studio, Code::Blocks.

Сравнение с однодокументным интерфейсом

• Если в программе есть какие-то общие интерфейсные элементы, относящиеся ко всем документам, интерфейс на вкладках — логичный шаг;
• Логически отделяются окна документов от окон других программ;
• Расходуется меньше памяти;
• Панели управления разных окон находятся в одном и том же месте;
• Логичный шаг, когда все документы — это части одного «мегадокумента» или «проекта» (как и в MDI).

• Тяжело работать с большим количеством программ одновременно (впрочем, как и в MDI);
• Не работают встроенные в ОС функции переключения между программами наподобие 3D Desktop и Exposé;
• Невозможно увидеть несколько документов одновременно. Эта задача решается гибридными схемами (см. ниже);
• Не получается задействовать много мониторов;
• Авария с одним из документов приводит к аварии всей программы (как и в MDI).

Сравнение с многодокументным интерфейсом

• Легкий доступ к различным документам (как и в SDI);
• При переключении между несколькими окнами: заголовки окон не отнимают места;
• Нет хаоса на рабочем столе, когда открываются несколько документов;
• Как следствие — программисту не нужно писать какие-либо ухищрения для борьбы с этим хаосом, а пользователю — располагать окна в нужном порядке.

• Не работают встроенные в ОС функции переключения между программами наподобие 3D Desktop и Exposé;
• Невозможно увидеть несколько документов одновременно. Эта задача решается гибридными схемами (см. ниже);
• Невозможно задействовать много мониторов;
• Если документы имеют размеры меньшие, чем экран — излишний расход места на экране.

Гибриды

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

Фреймовый интерфейс

В Code::Blocks применяется фреймово-вкладочный интерфейс.

Окно программы делится на несколько фреймов. В каждом из них можно держать несколько вкладок с документами. Типичный пример — Code::Blocks.

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

MDI-окна как вкладки

Гибрид вкладочного и многодокументного интерфейса, в котором пользователь переключается между MDI-окнами с помощью вкладок (как в Opera до 12 версии на движке Presto или IDA Pro).

Подобный подход демонстрирует и Adobe Photoshop CS4. По умолчанию в программе используется вкладочная панель; если вытянуть корешок с панели, вкладка превращается в MDI-окно.

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

Вкладки в MDI-окнах [

Обратная концепция интерфейса: есть несколько MDI-окон, в каждом из которых есть вкладки. Примеры: традиционный интерфейс Delphi и C++ Builder, панели управления в Adobe Photoshop.

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

Библиотеки элементов интерфейса

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

• Кроссплатформенные, на основе Java

• Standard Widget Toolkit — в составе проекта Eclipse
• Swing — разработка Sun, компонента Java Foundation Classes (JFC) на основе AWT
• AWT — частично устаревший Abstract Windowing Toolkit (Sun, 1995)
• JavaFX — платформа для разработки RIA на Java

• Кроссплатформенные, на основе C/C++, с возможностью использования в других языках

• Tk
• GTK+
• Qt
• wxWidgets (wxWindows)
• IUP
• FOX toolkit
• FLTK

• Кроссплатформенные, на основе Pascal

• LCL
• CLX — адаптация интерфейса Qt [источник не указан 3387 дней] для Borland Delphi #128562; Ты еще не читал? Это зря!

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

  • Однодокументный (SDI)
  • Многодокументный (MDI)
  • Многодокументный с вкладками (TDI)
  • Кнопка (комбинированная кнопка)
  • Меню (строка меню
  • контекстное меню
  • гамбургер)
  • Двунаправленный счетчик
  • Выпадающий список
  • Комбинированный список
  • Флажок
  • Ползунок
  • Радиокнопка
  • Список
  • Таблица (Grid view)
  • Текстовое поле
  • Heads-up display (в играх
  • OSD)
  • Заставка
  • Значок
  • Индикатор процесса
  • Метка
  • Подсказка
  • Строка состояния
  • Тост
  • Троббер
  • Экран загрузки
  • Ribbon
  • Скрываемый виджет
  • Фрейм
  • Панель
  • Вкладка
  • Панель инструментов
  • Окно
  • Виртуальный рабочий стол
  • Гиперссылка
  • Дерево выбора
  • Полоса прокрутки
  • Навигационная цепочка
  • Диалоговое окно
  • Диалоговое окно -предупреждение
  • Модальное окно
  • О программе
  • Окно инспектора объектов
  • Окно-палитра
  • Файловый диалог
  • HUD
  • Мини-карта
  • WIMP
  • Оконный интерфейс
  • Оконный менеджер
  • Библиотека элементов интерфейса
  • Внешний вид [en]
  • Менеджер разметки [en]
  • Наведение мыши

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

  Источник: intellect.icu