Кнопка на сайте как называется: Элемент интерфейса — Википедия – Основные элементы пользовательского интерфейса — srd18

Элемент интерфейса — Википедия

Материал из Википедии — свободной энциклопедии

Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 8 сентября 2018; проверки требуют 3 правки. Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 8 сентября 2018; проверки требуют 3 правки. gtk3-demo — программа для демонстрации элементов интерфейса GTK+. Кроссплатформенный редактор элементов интерфейса Qt designer

Элеме́нт интерфе́йса — примитив графического интерфейса пользователя, имеющий стандартный внешний вид и выполняющий стандартные действия.

Другие названия: элемент управления,

ви́джет (англ. widget), контро́л (англ. control)[1].

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

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

  • Аккордеон (accordion)
  • кнопка (button)
    • сдвоенная кнопка (split button) — кнопка, вызывающая список со вторичным(и) действием(и) (кнопками)
  • радиокнопка (radio button)
  • флаговая кнопка (check box)
  • кнопка переключатель (toggle button) — может находиться в одном из двух состояний: активна или неактивна
  • значок (иконка, icon)

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

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

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

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

  • Кроссплатформенные, на основе Java
  • Кроссплатформенные, на основе C/C++, с возможностью использования в других языках
  • Кроссплатформенные, на основе Pascal
  • Кроссплатформенные, на основе AJAX
  • Под AmigaOS
  • Графический интерфейс для игр

Интерактивные элементы пользовательского интерфейса — CloudMakers

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

Интерактивные элементы пользовательского интерфейса - кнопка

Кнопка

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

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

Интерактивные элементы пользовательского интерфейса - кнопка

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

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

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

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

Интерактивные элементы пользовательского интерфейса - кнопка

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

Интерактивные элементы пользовательского интерфейса - кнопка

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

Пустая кнопка в дизайне

Панель / bar

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

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

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

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

Панель загрузки в дизайне сайтов

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

Индикатор выполнения

Переключатели

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

Переключатели на сайтах

Пикер / Picker

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

Пикер / Picker в приложениях

Чекбокс / Checkbox

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

Чекбокс / Checkbox 

Иконка

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

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

Чекбокс / Checkbox 

На основе функций, который выполняют иконки их можно классифицировать как:

  • Интерактивные иконки, непосредственно участвующие в процессе взаимодействия. Они являются кликабельными или настраиваемыми и отвечают на запрос пользователей, выполняя символическое действие. Они информируют пользователей о функциях, элементов управления и других элементов взаимодействия. Во многих случаях они очевидны и не нуждаются в поддержке текстом.
  • Разъясняющие иконки, предназначенные для объяснения, визуальные маркеры, объясняющие особенности или маркирующие категории контента. Они не обязательно должны быть интерактивными. Кроме того, они часто встречаются в сочетании с текстом, поддерживающем их значение.
  • Развлекательные и декоративные иконки, направленные на эстетическую привлекательность, а не на функциональность, часто используемую для представления сезонных функций и специальных предложений. Они представляют эффективный способ привлечения внимания пользователя и повышения общей стилистической концепции цифрового продукта.
  • Значки приложений: интерактивные знаки бренда, которые представляют приложение на разных платформах, поддерживающих оригинальную идентичность цифрового продукта.
  • Фавикон представляет продукт или бренд в URL-строке браузера, а также на вкладке закладок. Это позволяет пользователям получать быстро узнавать нужные адреса.
Интерактивные элементы пользовательского интерфейса иконки

Поле поиска

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

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

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

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

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

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

Тэг

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

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

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

Лоадер / Loader

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

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

Фильтр

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

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

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

Источник и иллюстрации

Элементы пользовательского интерфейса (UI) | Данил Фимушкин

Пользовательский интерфейс (на англ. user interface, UI) коротко говорят ЮИ — это среда взаимодействия пользователя с компьютером. Это кнопки, меню, радиокнопки, чек-боксы и многое другое. Сейчас не понятно, ниже все заумные словечки объясню. Если человек пользуется мобильным телефоном, то приложения или браузер — это пользовательский интерфейс.

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

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

Тексты (заголовки)

Когда человек в вебе первое, с чем он сталкивается, это тексты и заголовки. Поэтому, нам как дизайнерам, важно прорабатывать сразу все заголовки в одном макете. Заголовки, обычно, называются h2, h3 … Hn, потому что так они называются в тегах html. В данном случае первый заголовок — это h2, далее h3 и так далее. Первый — это наиболее значимый заголовок. В лендинге это может быть на первом экране, дальше по низсходящей. В макетах нужно показывать все зголовки, чтобы верстальщик понимал, где какой тег ставить.

Ссылки

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

Кнопки

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

Радиобаттон и чек-боксы

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

Формы

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

Попап

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

Пагинация

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

Хлебные крошки

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

Прелоадер

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

Таблицы

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

Меню

Меню — это навигация по всему сайту. В данном случае показал, что есть всплывающее меню при наведении курсора. Это нужно прорисовывать. Обрати внимание как я показал наведение и интерактивность. Просто скачал курсор png и поставил его на место. Если у тебя большой макет, поставь много курсоров. Например, чтобы показать как работает меню, как выглядят кнопка и ссылка при наведении. При этом не забывай про обычное состояние. Таким образом в статичном макете можно легко показывать как ведут себя элементы юзер интерфейса в интерактивном состоянии.
Помни, что курсоры бывают разные: для PC и для мака.
Гуглятся легко «курсор png». Если показываешь сайт на маке (используешь mock-up c макбуком), то нужно использовать правый курсор, если в PC (например, mock-up с inernet explorer), то левый.

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

UI controls на русском / Habr

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

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

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

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

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

Pic English Русский Замечания
Навигация  
  Breadcrumbs хлебные крошки  
  Context menu контекстное меню  
Radial / pie menu круговое меню  
Группировка данных 
Accordion аккордеон  
Carousel прокрутка изображений (и текста?) частный случай Slideshow 
  Grid грид, сетка?, таблица? но есть ещё другая таблица – Spreadsheet
  Slideshow слайд-шоу, крутилка картинок, показ слайдов, прокрутка
изображений
см. тж. Carousel
  Tree list/view дерево, иерархический список  
Tile плитка  
Списки
 
  Check box list галки, флажки  
  Combo box / Drop down list выпадающий/раскрывающийся список  
  List box [простой|линейный] список  
  Radio button list переключатели  
Всплывающие
 
  Flyout всплывающий элемент видимо в качестве синонима к popup
  Popup window всплывающее окно  
  Tooltip [всплывающая] подсказка  
Края
 
  Border рамка  
  Frame рамка  
  Scroll bar полоса прокрутки  
  Separator разделитель между пунктами меню, например
  Splitter разделитель между двумя соседними панелями
Индикаторы
 
  Busy indicator индикатор занятости  
  Progress bar индикатор прогресса  
  Status bar строка состояния  
Фокус 
  Cursor курсор  
  Pointer указатель  
Инструменты
 
Ribbon лента (sic!)  
  Toolbar панель инструментов  
Кнопки
 
  Button кнопка  
  Check box галка, флажок  
  Radio button переключатель  
Toggle button [двухпозиционный] переключатель,
западающая кнопка
 
Счетчики
 
Slider ползунок  
Spinner / Numeric up and down крутилка?  
Timeline временная шкала  
Ввод данных
 
  Autocomplete автоподсказка  
  Masked input поле ввода с фильтром  
Rich text форматируемый текст  
  Text box / input поле ввода  
  Captcha капча? защита от роботов? антибот?  
Картинки
 
Canvas холст, канва  
  Chart диаграмма  
Color picker палитра  
  Icon иконка, пиктограмма, значок  
Прочее
 
  Date/Time picker календарь  
Dock panel панель закрепления?  
  Draggable element перетаскиваемый элемент  
Expander расширитель? экспандер? 2-й вариант смахивает на «эспандер»
Gauge -метр (манометр, спидометр, фаллометр), измерительный прибор  
  Label надпись  
Spreadsheet электронная таблица это уже не просто грид, а что-то типа MS Excel
  Tab вкладка, закладка  
  Upload file загрузка файла  
  Wizard мастер  

P.S.: напоследок хочу пожелать адских мук тем, кто Paging переводит не как «постраничный вывод» или, на худой конец, «пейджинг», а «ва пагинация», прости, Господи. )))

Гамбургер (иконка) — Википедия

Материал из Википедии — свободной энциклопедии

Иконка «гамбургер»

«Гамбургер» — устоявшееся название иконки[1][2], состоящей из трёх параллельных горизонтальных линий, символизирующих список меню. В начале 2010-х годов она стала стандартом изображения кнопки меню в графическом пользовательском интерфейсе[1][2][3][4]. Название «гамбургер» произошло из-за того, что три линии иконки напоминают три слоя гамбургера.

Иконка была придумана дизайнером Нормом Коксом для системы Xerox Star[en], вышедшей в 1981 году[1]. По его словам, он хотел создать простое, чёткое, функционально запоминающееся изображение, которое было бы похоже на список[1].

Новое рождение иконка получила в конце 2000-х годов, когда она начала использоваться в интерфейсах приложений для мобильных устройств[1]. Наиболее популярна она стала после того, как появилась в приложении Facebook для iPhone в 2010 году[1][5]. В настоящее время иконка встречается в большом количестве приложений (VK, Uber, HeadHunter и других), программ и сайтов (Time.com[6]), и является стандартом индустрии для отображения кнопки меню навигации[1].

Некоторые дизайнеры критикуют использование иконки «гамбургер» для отображения кнопки меню и советуют найти ей замену, так как считают, что не для всех пользователей интуитивно понятно такое значение иконки, из-за чего они не попадают на страницы с меню и не могут найти интересующую их информацию[1][4][7][8]. Проведённые A/B-тестирования показали, что замена этой иконки, например, на слово «menu», повышает узнаваемость и эффективность[5][9][10].

Другая группа специалистов считает, что из-за нахождения иконки постоянно на виду у пользователей, к ней со временем всё больше привыкают, и она постепенно становится неотъемлемой частью визуальной среды[11], а эксперимент, проведённый дизайнерами мобильного приложения сервиса Booking.com, показал, что замена иконки на слово «menu» не оказала существенного влияния на поведение пользователей, и «гамбургер» столь же эффективен и понятен, как и кнопка с текстовым описанием[2].

Вкладка — Википедия

Материал из Википедии — свободной энциклопедии

Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 19 декабря 2015; проверки требуют 4 правки. Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 19 декабря 2015; проверки требуют 4 правки.

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

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

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

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

Интерфейс приложений, имеющих вкладки для управления документами, обычно относят к типу TDI (англ. tabbed document interface). TDI-интерфейс используется в браузерах, мессенджерах (сессии в Miranda IM, mIRC), клиентах файлообменных сетей (соединения с хабами в DC++) и в других приложениях.

Навигационная цепочка — Википедия

Материал из Википедии — свободной энциклопедии

Breadcrumb navigation in Nautilus.pngMagnify-clip.pngНавигационная цепочка (строка var → run → cups около центра изображения) в файловом менеджере Nautilus. Dolphin barra indirizzi.pngMagnify-clip.pngНавигационная цепочка в файловом менеджере Dolphin.

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

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

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

Имя диска:ПапкаПодпапка → Текущая под-подпапка

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *