logo-img

Агентство
полного цикла

8 (812) 988 34 40
Написать

Элементы интерфейса сайта

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

Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.

Элементы интерфейса

Radiobutton — позволяет пользователю выбрать одну опцию

Элементы интерфейса

Checkbox — позволяет выбрать несколько опций

Элементы интерфейса

Select — позволяет пользователю выбрать одну опцию из выпадающего списка

Элементы интерфейса

Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента. 

Элементы интерфейса

Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную

Элементы интерфейса

Контент — текст, изображения, видео, то есть наполнение сайта.

Элементы интерфейса

Popup — небольшое всплывающее окно в углу экрана.

Элементы интерфейса

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

Элементы интерфейса

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

Элементы интерфейса

Раздел — страница сайта. Тут все просто.

Элементы интерфейса

Шапка (хеддер / header) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е она перемещается вместе с перемещением пользователя по странице.

Элементы интерфейса

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

Элементы интерфейса

Галерея — набор из нескольких изображений

Элементы интерфейса

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

Элементы интерфейса

Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками)

Элементы интерфейса

Тултип (tooltip) — подсказка, всплывающая при наведении на элемент

Элементы интерфейса

Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку

Элементы интерфейса

Курсор Текст (Text) — тип курсора, стандартный для редактирования текста

Элементы интерфейса

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

Элементы интерфейса

Пагинация — нумерация страниц, обычно отображенная как навигация в конце страницы

Списки — в веб интерфейсах присутствуют нумерованные списки (цифрами) , маркированные списки (точки, квадратики, кружки, черточки) и списки определений

Элементы интерфейса

Стрелочки — вид навигации.

Элементы интерфейса

Поисковая строка — строка для ввода поискового запроса

Элементы интерфейса

Плеер — элемент воспроизводящий аудио и видеофайлы

Элементы интерфейса

Ползунок — предназначен для ввода чисел в указанном диапазоне

Элементы интерфейса

Текстовое поле — поле для ввода текстовых значений

Элементы интерфейса

Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.

Элементы интерфейса

Маска — это значения, указывающие формат допустимых значений входных данных в поле. 

Элементы интерфейса

Ссылка — элемент интерфейса перенаправляющий вас по адресу, указанному в нем.

Элементы интерфейса

Якорь — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем

Элементы интерфейса

Вкладки (табы) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку

Элементы интерфейса

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

Элементы интерфейса

Переключатель (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл

Элементы интерфейса

Алерт окно — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером

Элементы интерфейса

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

Элементы интерфейса

Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку

Элементы интерфейса

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

Элементы интерфейса

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

Элементы интерфейса

Тэги: |
Как заполнить бриф?
Кэшбэк до 20% за приведенного клиента

Написать
нам

Если у Вас есть вопросы, напишите нам и наш менеджер свяжется с Вами в ближайшее время!





Нажимая кнопку отправить вы соглашаетесь с политикой конфиденциальности

Оставить заявку

Мне нужны твоя одежда, сапоги и мотоцикл. И номер телефона. Оставь, пожалуйста, вот тут.


Нажимая кнопку отправить вы соглашаетесь с политикой конфиденциальности